Farbenkreis
Cor e tipografia
como instrumentos
Paletas derivadas do círculo de Goethe, combinação de famílias com hierarquia, legibilidade medida e um compilado trimestral de tendências. Escolha por onde começar.
Farbenkreis
Paletas derivadas do círculo de Goethe, combinação de famílias com hierarquia, legibilidade medida e um compilado trimestral de tendências. Escolha por onde começar.
Fundamentação
Duas ferramentas e uma base teórica comum. A de cor deriva paletas a partir do círculo de Goethe, de intenções, de setores, de métodos de estúdio, de referências culturais e de dinâmicas musicais. A de tipografia faz o mesmo com famílias tipográficas e combinações. Esta página explica o que está por trás das duas.
Em 1810, Goethe recusou a explicação de Newton e colocou o olho no centro: o que vemos depende do objeto, da iluminação e da percepção. Daí ele deriva um círculo de seis matizes, um lado positivo e um negativo, uma intensificação em direção ao purpúreo, e três regimes de combinação.
Amarelo, vermelho-amarelo, escarlate. Goethe os descreve como ativos, quentes, que se aproximam de quem olha. O amarelo é a cor imediatamente vizinha da luz; o vermelho-amarelo é o lado ativo em sua maior energia.
Azul, vermelho-azul. Passivos, frios, que afastam. O azul carrega consigo um princípio de treva: atrai e ao mesmo tempo puxa para longe.
Cada lado pode ser empurrado em direção ao vermelho. No purpúreo os dois se encontram — é o cume, ao qual Goethe atribui dignidade e gravidade.
A união do amarelo com o azul. Ali, diz ele, olho e alma descansam: não se quer ir além, e não se pode.
Antes do vocabulário moderno de esquemas, Goethe já classificava as combinações em três — e dava seu veredito sobre cada uma.
Os opostos do círculo. O olho, forçado a uma só cor, produz por conta própria a oposta, e só então se sente completo. Carregam em si a condição de totalidade: é o par mais estável e o menos surpreendente.
Um espaço de distância no círculo — amarelo e azul, amarelo e vermelho, azul e vermelho. Dizem alguma coisa, ainda que não tudo. É onde mora quase todo trabalho interessante.
Vizinhas no círculo. Não produzem efeito desagradável, mas ficam aquém: falta-lhes caráter. Servem quando outra coisa carrega o sistema.
O que o século XX chamou de esquemas são relações geométricas no círculo. Todos estão no instrumento de cor, e a geometria é preservada enquanto você arrasta as bolas.
Monocromático varia luminosidade e croma num só matiz. Análogo fica em vizinhança. Complementar cruza o círculo. Tríade divide em três. Complementar dividido troca o oposto pelos dois vizinhos dele — mantém a tensão e reduz o choque. Tetrádico forma um retângulo e entrega dois pares opostos.
Uma paleta se comporta de dois modos diferentes conforme o suporte, e confundir os dois é a origem de boa parte da frustração entre tela e impressão. Arraste os círculos abaixo: as sobreposições são calculadas de verdade pelo navegador, somando ou subtraindo.
Feixes de luz somados. Vermelho, verde e azul se sobrepõem e produzem ciano, magenta e amarelo; os três juntos dão branco. É o modelo da tela, do projetor, do LED. Somar luz clareia.
Tintas que filtram a luz refletida pelo papel. Ciano, magenta e amarelo sobrepostos absorvem quase tudo e tendem ao preto — na prática um preto sujo, por isso a impressão acrescenta o K. Somar pigmento escurece.
HSL é fácil de calcular e mente sobre o olho: um amarelo e um azul com a mesma luminosidade declarada não parecem ter a mesma luminosidade. OKLab é um espaço perceptualmente uniforme — distâncias iguais no número correspondem a diferenças mais parecidas na percepção.
Acima, a mesma sequência de matizes com luminosidade fixa em HSL e em OKLab. Toda interpolação, escala de tons e ajuste destas ferramentas acontece em OKLab, e o croma é reduzido até caber no sRGB em vez de ser cortado.
A razão de contraste do WCAG mede o que o olho consegue ler, não o que ele sente. Texto corrido pede 4.5, texto grande e elementos de interface pedem 3.0. As duas ferramentas calculam isso automaticamente para todos os pares e avisam quando a combinação bonita é ilegível.
A escolha de uma família começa por identificar a que família histórica ela pertence — porque é isso que define como ela se comporta em texto longo, em tamanho grande e em tela pequena.
A altura das minúsculas em relação às maiúsculas. Alta lê bem em tamanho pequeno e em tela; baixa tem elegância e pede corpo maior. Duas famílias com alturas de x muito diferentes brigam quando postas lado a lado.
A diferença entre a haste grossa e a fina. Alto contraste — as modernas, as didonas — brilha em título e some em corpo pequeno. Baixo contraste aguenta condições ruins de leitura.
O quanto letras como c, e, s se fecham. Aberturas amplas mantêm as letras distinguíveis à distância e em corpo pequeno; fechadas dão densidade e ar editorial.
Condensada economiza espaço e acelera; estendida ocupa e desacelera. O ritmo entre letra e contraforma é o que faz um parágrafo parecer uniforme ou manchado.
O comprimento da linha. Entre 45 e 75 caracteres é a faixa em que o olho encontra o início da próxima linha sem esforço. Linha longa demais exige mais entrelinha para compensar.
Os tamanhos derivam de uma razão constante — quarta justa, quinta, áurea. A hierarquia fica previsível e as decisões param de ser arbitrárias.
O erro comum é buscar semelhança. Duas famílias parecidas não se harmonizam: elas competem, e a diferença pequena parece defeito.
Uma serifada de alto contraste no título contra uma sem serifa humanista no corpo. A diferença é clara, a hierarquia se resolve sozinha e nenhuma das duas parece erro.
Famílias desenhadas juntas para conviver — a versão serifada, a sem serifa e a monoespaçada do mesmo projeto. Harmonia garantida, contraste menor, risco de monotonia.
Toda a hierarquia feita por peso, tamanho, largura e caixa. É a saída mais difícil de errar e a que mais depende de disciplina de espaçamento.
Mesmo com estruturas diferentes, altura de x e largura próximas fazem as duas parecerem escolhidas juntas. É o critério que o instrumento usa para pontuar as combinações.
Uma paleta bonita pode ser ilegível, e o olho de quem a escolheu é o pior juiz disso. Esta grade responde a uma pergunta prática: se eu escrever com uma cor desta paleta sobre um fundo de outra, alguém consegue ler?
O número é a razão de contraste entre as duas — quanto maior, mais separadas elas estão para o olho. Cada célula está pintada com o par de verdade, então a própria grade mostra o resultado: onde o número some, o texto também some.
A linha é o fundo, a coluna é o texto. Toque numa célula para ver o par em tamanho real e corrigir o que não passa.
Arraste as paradas na régua. O espaço de interpolação muda tudo: em sRGB dois tons cruzados passam por um meio cinzento; em OKLab o caminho é perceptualmente reto e não afunda.
Arquivos de imagem para apresentação, arquivos de troca para software de design, e código para implementação.
Nada salvo ainda. Fica só neste navegador.
Cada nível tem família, peso, degrau da escala, entrelinha, entreletra, caixa e cor próprios. Toque num nível para ajustá-lo; use o botão da direita para ligar e desligar os que o projeto não usa.
| Nível | Família | Corpo | Peso | Entrelinha | Cor |
|---|
Cole aqui o texto real do projeto. Cada linha vira um nível da hierarquia, e a amostra abaixo se redesenha ao vivo com a paleta, o corpo e a escala escolhidos.
Comece a linha com # para título, ## para subtítulo, ### para rótulo, > para citação, ! para destaque, -- para referência, e envolva em [colchetes] para botão. Linha sem prefixo vira parágrafo.
Todas as famílias deste instrumento vêm de bancos que permitem baixar, hospedar e usar comercialmente. Vale conferir a licença de cada uma no próprio banco antes de distribuir.
| Banco | O que é | Formato entregue |
|---|
Nada salvo ainda.
Descreva o que você precisa fazer. O instrumento atravessa os dois anteriores — o círculo de Goethe do lado da cor, o banco de famílias do lado da tipografia — e devolve três propostas completas, cada uma com paleta, combinação tipográfica, aplicação desenhada e o raciocínio por trás.
As três nunca são variações da mesma ideia: a primeira lê a convenção do campo, a segunda a contraria, e a terceira entra por um caminho lateral. Tudo é calculado no seu navegador, sem consultar nada fora dele.
Cole o texto real do projeto: cada proposta abaixo o redesenha ao vivo com a própria paleta e as próprias famílias. Corpo, escala, medida, entrelinha e entreletra valem para as três, e mudam na hora.
Comece a linha com # para título, ## para subtítulo, ### para rótulo, > para citação, ! para destaque, -- para referência e [texto] para botão.
Um compilado trimestral do que as casas de previsão, as fundições tipográficas e os observatórios de comportamento estão publicando — reduzido a quatro eixos: cor, tipografia, combinações e aplicações. Cada eixo vira um banner que você pode baixar, e a paleta e as famílias de cada edição abrem direto nos outros instrumentos.
Quatro resumos em formato de cartão, gerados a partir da edição escolhida. Saem em SVG vetorial ou PNG de 1200 por 630, que é a medida de pré-visualização de link.
As edições anteriores continuam acessíveis. Nada é apagado quando entra uma nova.
Todo o conteúdo vive numa única estrutura de dados no código, a constante TREND, com uma entrada por trimestre. Acrescentar uma edição é inserir um objeto no começo da lista, com período, resumo, os quatro eixos e as fontes de cada um. Nada mais precisa ser tocado: as abas, os banners, o arquivo e os botões que levam aos instrumentos se montam sozinhos a partir dela.
Marque o que precisa e baixe tudo num pacote só.