1.1 Cor é percepção

Um objeto "vermelho" apenas reflete certos comprimentos de onda e absorve o resto; a luz que o ilumina, o ambiente ao redor e o sistema visual de quem observa completam a equação. A mesma tinta parece uma cor ao meio-dia e outra sob lâmpada quente. O mesmo cinza parece mais claro sobre preto e mais escuro sobre branco (contraste simultâneo). Isso não é curiosidade acadêmica: significa que você nunca controla a cor final — controla probabilidades, e projeta com margem.

1.2 Cor aditiva × subtrativa

Quase todo trabalho desta apostila é aditivo (telas). CMYK aparece no Módulo 2 para quando o projeto também vai para papel.

1.3 As três dimensões de qualquer cor

• Matiz (hue): "que cor é" — a posição na roda (vermelho, laranja, ciano…). Medida em graus (0–360).
• Saturação / croma (chroma): quão pura ou "cinzenta" — de vívida a acinzentada.
• Luminosidade (lightness / value): quão clara ou escura — de preto a branco.

Esses três eixos são a base de HSL, HSB, Lab/LCh e OKLCH (Módulo 2). Dominar "vou baixar a saturação e subir a luminosidade" em vez de caçar um hexadecimal é o pulo do gato.

1.4 Onde a cor decide um projeto

• Marca: a cor é frequentemente o ativo distintivo nº 1 (ver a apostila Branding).
• Interface: hierarquia, estados, feedback, acessibilidade — a maior superfície de risco.
• Visualização de dados: a cor é a informação; erro de paleta = leitura errada (ver DataVis Avançada).
• Jogos: legibilidade de gameplay, mood, fluxo de luz linear (Módulo 8).
• Animação e filme: a jornada emocional é escrita em cor — o "color script" (Módulo 9).

2.1 RGB e HEX

• Três canais (R, G, B), normalmente 8 bits cada (0–255), escritos em hexadecimal: #1E90FF.
• Os valores não são lineares com a luz: há uma curva gamma (~sRGB) entre o número e a intensidade física — feita para dar mais precisão nos tons escuros, onde o olho é mais sensível. Isso importa em blending e em jogos (Módulo 8).
• RGB é ótimo para máquina, péssimo para raciocinar: "quero um pouco mais claro" não tem operação óbvia.

2.2 HSL e HSB/HSV

Reorganizam o RGB nos três eixos intuitivos (matiz, saturação, luminosidade/brilho). Ótimos para ajustar uma cor. O problema: não são perceptualmente uniformes — hsl(60 100% 50%) (amarelo) e hsl(240 100% 50%) (azul) têm a mesma "lightness" no modelo mas o amarelo parece muito mais claro. Fazer uma escala de tons variando só o L de HSL produz degraus irregulares e matizes que "derivam".

2.3 Lab e LCh

CIELAB foi desenhado para que distâncias iguais no espaço correspondam a diferenças percebidas iguais. LCh é a versão em coordenadas polares (Lightness, Chroma, hue) — os mesmos três eixos intuitivos, mas perceptualmente honestos. Base do ΔE (delta E), a métrica de "quão diferentes são duas cores".

2.4 OKLab / OKLCH — o modelo moderno para UI

• Correção do Lab com melhor uniformidade, sobretudo em azuis e na previsibilidade do matiz ao mudar a luminosidade.
• oklch(L C H): L 0–1 (ou %), C 0–~0.37, H 0–360.
• Por que adotar: variar só o L dá uma escala de tons com degraus visualmente iguais; manter L e C fixos entre matizes diferentes dá cores que "pesam" igual; interpolação de gradiente sem passar por cinza-lama. É nativo em CSS moderno.

/* mesma luminosidade e croma percebidos — três matizes que "combinam" de peso */
--blue:   oklch(62% 0.17 254);
--green:  oklch(62% 0.17 150);
--red:    oklch(62% 0.17 27);

/* uma escala de tons: só o L muda, em passos regulares */
--gray-100: oklch(97% 0.005 260);
--gray-300: oklch(88% 0.010 260);
--gray-500: oklch(64% 0.015 260);
--gray-700: oklch(45% 0.015 260);
--gray-900: oklch(22% 0.012 260);

2.5 CMYK, cor de processo e spot

• CMYK (subtrativa): para impressão. Gamut menor que o de tela — cores vívidas de tela "somem" no papel.
• Cor de processo: reproduzida misturando C, M, Y, K.
• Cor spot (ex.: Pantone): uma tinta pré-misturada específica — consistência exata entre lotes/materiais, usada em identidade de marca. Definida por biblioteca, não por valores livres.
• Se o projeto vai para tela e papel, defina a cor de marca com equivalentes: HEX/sRGB, CMYK, Pantone — e aceite que não serão idênticas.

2.6 Gamut: sRGB, Display P3, Rec.709/2020

Fora do gamut (out of gamut): uma cor que o dispositivo não consegue mostrar — ela é "recortada" (clipping) para a mais próxima que cabe. Em CSS, oklch() pode descrever cores fora do sRGB; use @media (color-gamut: p3) para servir a versão vívida só a quem a exibe, com fallback em sRGB.

3.1 A roda cromática

A roda tradicional de artista usa primárias RYB (vermelho, amarelo, azul) — é um modelo histórico, não físico, mas continua útil para pensar relações (o que é oposto, o que é vizinho). Ferramentas digitais geralmente usam a roda HSL/HSB (matiz em 360°). Para gerar paletas, prefira raciocinar em graus de matiz num espaço uniforme (OKLCH).

3.2 Esquemas de harmonia

Duas aplicações da harmonia análoga, com a mesma escolha de matizes e decisões opostas quanto à luminosidade — que é o que decide se o resultado tem hierarquia ou não:

azul escuroazul médioazul clarocreme

Hokusai, A Grande Onda de Kanagawa (c. 1831). Uma harmonia análoga levada ao limite: praticamente tudo vive entre os 200° e os 230° de matiz, e a variação toda é de luminosidade. É a demonstração exacta do que a secção diz sobre a análoga — «o risco é ficar monótona, resolve-se variando bastante a luminosidade, não acrescentando matizes». O creme do céu é o único matiz de fora, e ocupa a menor área.Domínio público · Metropolitan Museum of Art, via Wikimedia Commons

azul-verdeverdevioletaocre

Monet, Nenúfares (1906). Outra análoga, e o contraponto útil ao Hokusai: aqui os matizes espalham-se por uma faixa mais larga da roda (verde → azul → violeta) e a luminosidade varia pouco. O resultado é coeso e quase sem hierarquia — o olho não sabe onde pousar, o que na pintura é deliberado e numa interface seria um defeito. É o mesmo esquema com a decisão oposta na segunda dimensão.Domínio público · Art Institute of Chicago, via Wikimedia Commons

3.3 Os contrastes (Itten)

• De matiz: cores puras diferentes lado a lado (primárias) — enérgico, "infantil" se exagerado.
• Claro-escuro: diferença de luminosidade — o mais importante para legibilidade.
• Quente-frio: avanço/recuo, profundidade.
• Complementar: opostos que se intensificam.
• Simultâneo: o fundo empurra a cor para o complementar dele (um cinza sobre laranja "puxa" azulado).
• De saturação: pura vs acinzentada — ótimo para hierarquia sutil.
• De extensão (proporção): uma área pequena de cor intensa equilibra uma área grande de cor calma.

3.4 "Regras" são ponto de partida

Esquemas de harmonia ajudam a não travar diante da roda, mas os melhores sistemas de cor reais quebram esquemas o tempo todo: um análogo com um acento complementar, um "quase-monocromático" com um neutro temperado. Use os nomes para comunicar e para começar; julgue pelo resultado no contexto.

3.5 A proporção 60-30-10

Um ponto de partida para distribuir: 60% cor dominante (geralmente um neutro/superfície), 30% secundária, 10% acento (a cor de ação, o destaque). Impede o erro clássico de dar peso igual a tudo — o que apaga a hierarquia. Em UI, "60%" quase sempre é branco/cinza.

A regra é fácil de enunciar e difícil de acreditar até se ver. Os três quadros seguintes são de domínio público e estão aqui por serem, cada um, uma demonstração diferente da mesma ideia — a tira por baixo de cada imagem mostra as cores nas proporções aproximadas em que aparecem na tela.

~60% neutro~30% azul10%

Vermeer, A Leiteira (c. 1658). O exemplo mais limpo que existe da proporção: a parede e a toalha ocupam a maior parte da tela num neutro quente; o avental azul é a segunda cor; o corpete amarelo é o acento — pequeno, saturado, e é exactamente onde o olhar vai primeiro. Note que azul e amarelo são quase complementares: o acento não é só pequeno, é oposto ao dominante. A tira abaixo mostra as três cores nas proporções aproximadas.Domínio público · Rijksmuseum, via Wikimedia Commons

55% azul30% amarelo15%

Van Gogh, Terraço de café à noite (1888). A complementar azul/laranja da secção 3.2, em quadro. Van Gogh escreveu que pintou «a noite sem preto» — o escuro é azul saturado, não neutro, e é isso que faz o amarelo do toldo parecer luz em vez de tinta. A lição transferível para interface: um fundo escuro com matiz produz mais contraste percebido que um fundo cinzento, com o mesmo contraste medido.Domínio público · Kröller-Müller Museum, via Wikimedia Commons

~62% branco22% vermelho9%7%

Mondrian, Composição II em vermelho, azul e amarelo (1930). Uma tríade pura (0°, 240°, 55°) levada ao extremo — e ainda assim obedece à proporção: o branco domina, o vermelho é o segundo, azul e amarelo somados não chegam a um sexto da tela. É a demonstração de que três cores fortes só funcionam quando não têm o mesmo peso — o mesmo quadro com os três quadrados do mesmo tamanho seria ilegível.Domínio público · Kunsthaus Zürich, via Wikimedia Commons

4.1 O método

1. Âncora: a cor de identidade (da marca) ou a cor de ação. Uma só.
2. Suporte: 0–2 matizes que acompanham a âncora (análogos, ou um complementar de acento).
3. Neutros: a escada de cinzas — o esqueleto de qualquer UI (4.2).
4. Semânticas: sucesso, aviso, erro, informação — matizes com significado convencional, distintos entre si e do resto.
5. Escalas de tom: cada cor vira uma rampa de ~10 degraus (4.3).

4.2 Neutros: cinzas temperados e a escada

• Cinza puro (C = 0) é frio e "morto" em muitos contextos. Um neutro temperado — croma baixíssimo (0.005–0.02) no matiz da marca ou levemente azulado/quente — dá coesão sem parecer colorido.
• A escada de neutros (100 → 900): fundos, superfícies elevadas, bordas, divisores, texto desabilitado, texto secundário, texto primário. Uma UI inteira pode ser construída só com ela + a cor de ação.
• No modo escuro, os neutros não são o inverso: a rampa é recomprimida e levemente dessaturada (Módulo 7).

4.3 Escalas de tom (50–950)

Gere cada rampa em OKLCH, variando principalmente o L em passos perceptualmente regulares, com o croma subindo em direção ao meio da rampa (onde a cor "aguenta" mais saturação) e caindo nas pontas. Mantenha o H quase constante — pequenas correções de matiz podem compensar o Bezold–Brücke (o matiz parece deslocar com a luminosidade).

/* rampa "brand blue" — L desce, C faz um arco, H ~constante */
--blue-50:  oklch(97% 0.02 250);
--blue-100: oklch(93% 0.05 250);
--blue-200: oklch(87% 0.09 250);
--blue-300: oklch(80% 0.13 250);
--blue-400: oklch(72% 0.16 252);
--blue-500: oklch(64% 0.17 254);   /* o "tom base" */
--blue-600: oklch(56% 0.16 255);
--blue-700: oklch(47% 0.13 256);
--blue-800: oklch(39% 0.10 257);
--blue-900: oklch(30% 0.07 258);
--blue-950: oklch(22% 0.05 260);

Um alvo prático: cada degrau deve ter contraste suficiente com o vizinho para ser distinguível, e a rampa deve conter pelo menos um tom que passe 4.5:1 sobre branco (para texto) e um que passe sobre preto.

4.4 Quantas cores

A paleta mínima viável: 1 neutro (rampa) + 1 ação + 3–4 semânticas. Muitos produtos maduros vivem nisso. Cada matiz novo é mais um eixo para manter consistente, testar em dark mode e validar em contraste — adicione só com motivo.

4.5 Nomear: papel × valor

/* PRIMITIVO — por valor/escala, sem significado de uso */
--blue-500: oklch(64% 0.17 254);
--gray-700: oklch(45% 0.015 260);

/* SEMÂNTICO — por papel; aponta para um primitivo e troca no dark mode */
--color-action:        var(--blue-500);
--color-text:          var(--gray-900);
--color-text-muted:    var(--gray-600);
--color-surface:       white;
--color-border:        var(--gray-200);
--color-danger:        var(--red-600);

Componentes consomem só os semânticos. Trocar o tema = trocar a camada semântica, não caçar hexadecimais pelo código.

4.6 Ferramentas e validação

• Gerar: Leonardo (Adobe), Huetone, Radix Colors, a paleta do Tailwind, Coolors, ColorBox (Lyft).
• Validar: checar contraste de cada degrau sobre branco e preto; ver a rampa em escala de cinza (a luminosidade sobe monotônica?); simular daltonismo (Módulo 5); testar em dark mode.
• Documentar: uma página de specimen com cada token, seu valor, seus usos e os contrastes.

4.7 Cinco paletas prontas, e a razão de cada decisão

Tudo o que está neste módulo junto, em cinco paletas que se podem copiar e usar. Não são sugestões estéticas: cada valor foi escolhido por uma regra concreta das secções anteriores, e todos os contrastes da coluna da direita foram calculados — não estimados. A percentagem indica a área aproximada que cada cor deve ocupar (secção 3.5); os tokens sem percentagem são de apoio e aparecem em áreas pequenas.

5.1 Contraste de texto (WCAG)

• O ratio atual (1.4.3) é baseado em luminância relativa; tem falhas conhecidas (supervaloriza contraste em tons escuros). O rascunho da WCAG 3 / APCA propõe um modelo perceptual melhor — conheça, mas o que se audita hoje é o ratio. Os números podem mudar entre versões: confira a vigente.
• Vale para o texto secundário em cinza, para placeholders, para links, para o texto dentro de botões coloridos.

5.2 Não depender só da cor (1.4.1)

Nenhuma informação pode ser transmitida apenas por cor. "Campos em vermelho são obrigatórios", "linha verde subiu, vermelha caiu", "status pela cor da bolinha" — todos falham para quem não distingue os matizes. Acrescente ícone, texto, forma, padrão ou posição. A cor reforça; não carrega sozinha.

5.3 Deficiências de visão de cores

No total, cerca de 1 em 12 homens e 1 em 200 mulheres. O par vermelho/verde é o campo minado — evite usá-lo como única distinção (semáforos de status, gráficos).

5.4 Como testar

• Simuladores de daltonismo (extensões de browser, Figma plugins, Stark, o "Vision" do DevTools).
• Converter para escala de cinza: se duas cores que precisam se distinguir viram o mesmo cinza, elas só diferem em matiz — perigoso.
• Verificar que categorias adjacentes numa paleta de dados diferem em luminosidade, não só em matiz.
• Ferramentas de contraste no fluxo (Figma, DevTools, CI).

5.5 Modo escuro, alto contraste e preferências

• @media (prefers-color-scheme: dark) — troque a camada semântica (Módulo 7).
• @media (prefers-contrast: more) — ofereça uma variante com contraste reforçado.
• @media (forced-colors: active) — o modo de alto contraste do SO substitui suas cores por uma paleta do sistema; não lute contra, teste e use forced-color-adjust só onde necessário.

5.6 Cor, cultura e significado

Associações de cor (vermelho = perigo ou sorte? branco = pureza ou luto?) variam entre culturas e contextos. Convenções de UI são mais estáveis (vermelho = erro/destrutivo, verde = sucesso), mas não universais — não presuma. Em produto global, apoie o significado com texto e ícone (volta ao 5.2). A secção seguinte trata do que se sabe — e do que se inventa — sobre o efeito emocional da cor.

5.7 O aspecto emocional da cor — o que se sabe e o que se inventa

Esta é a parte da cor sobre a qual mais se escreve e menos se comprova. Vale separar com clareza três níveis de evidência, porque tratá-los como um só é a origem de quase toda a asneira que se diz sobre psicologia da cor.

O que funciona de facto: a coerência de categoria

Se as marcas de banca são maioritariamente azuis, o azul não "transmite confiança" por si — ele transmite “banco”, porque é isso que a pessoa viu mil vezes. Isso dá duas jogadas opostas, ambas legítimas e conscientes:

• Alinhar com a categoria — ganha reconhecimento imediato, perde distinção. Sensato quando a confiança é o obstáculo principal.
• Contrariar a categoria — ganha distinção, e obriga a trabalhar mais para ser compreendido. É de onde vêm quase todas as marcas visualmente memoráveis de setores conservadores.

A pergunta útil nunca é "que emoção esta cor provoca?". É "o que é que esta cor faz lembrar, neste setor, a esta pessoa?" — e essa responde-se olhando para os concorrentes, não para uma tabela de significados.

laranjavermelhoazul frioocre

Munch, O Grito (1893). Serve para o argumento desta secção e para o seu limite. O que funciona aqui não é «laranja = angústia» — laranja não significa angústia em lado nenhum. O que produz o efeito é a saturação muito alta num céu, onde se espera dessaturação, combinada com linhas que continuam as do corpo. É a violação da expectativa que carrega o significado, não o matiz. Trocar o laranja por verde igualmente saturado manteria boa parte da inquietação.Domínio público · Nasjonalmuseet, via Wikimedia Commons

O que a saturação e a luminosidade fazem, e que é mais fiável que o matiz

Curiosamente, os dois eixos menos discutidos são os que produzem efeito mais consistente:

• Saturação alta lê-se como energia, urgência, infantil, barato ou desportivo, conforme o contexto — e cansa em superfícies grandes.
• Saturação baixa lê-se como sóbrio, caro, profissional, e às vezes como apagado.
• Luminosidade alta lê-se como leve, limpo, arejado.
• Luminosidade baixa lê-se como sério, denso, premium ou pesado.

Trocar o matiz mantendo saturação e luminosidade muda muito menos a sensação do que o contrário. É um teste fácil de fazer e quase sempre surpreende quem espera que o matiz mande.

52% dourado20%16% verde12%

Klimt, O Beijo (1907–08). Um caso de dominância extrema: mais de metade da tela é a mesma família de dourados. Segundo a lógica da secção 3.5 isto devia matar a hierarquia — e não mata, porque a variação está toda na textura e no valor dentro do mesmo matiz. É a prova prática de que «monocromático» não é sinónimo de «monótono»: quando o matiz é único, todo o trabalho passa para a luminosidade.Domínio público · Österreichische Galerie Belvedere, via Wikimedia Commons

5.8 Cor em logótipos

A cor de um logótipo obedece a restrições que a cor de uma interface não tem, e ignorá-las produz identidades que só funcionam no ecrã de quem as desenhou.

As restrições próprias da identidade

• Reprodução em suportes que não controla: tinta em papel poroso, vinil de corte, bordado com número limitado de linhas, gravação a laser sem cor nenhuma. Um gradiente subtil não sobrevive a nada disto.
• Equivalências entre sistemas: a cor tem de ser especificada em RGB/HEX, CMYK e cor especial, e as três nunca são exatamente iguais. Escolher a cor primeiro na cor especial e derivar as outras dá resultados melhores que o inverso.
• Poucas cores. Duas costumam chegar; três já é muito. Cada cor extra multiplica o custo de impressão e a probabilidade de erro.
• Fundos alheios: o logótipo vai aparecer sobre fotografias, sobre a cor de outra marca, num patrocínio. Precisa de versão a uma cor e de regra de uso sobre fundo.
• Contraste na aplicação real — um logótipo claro sobre fundo claro é ilegível, e a norma de contraste aplica-se quando ele funciona como texto ou como controlo.

Cor como marca registada

Uma cor pode, em circunstâncias restritas, ser protegida como marca — mas o critério é exigente: exige demonstrar que o público associa aquela cor específica, naquele setor, àquela empresa, o que normalmente implica anos de uso consistente e prova documentada. Não é algo que se conquiste escolhendo um tom invulgar, e não é aconselhamento jurídico — ver Branding, cap. 08, e confirmar com um jurista.

A diferença entre cor de marca e cor de interface

São coisas diferentes e confundi-las estraga as duas. A cor de marca é escolhida para ser memorável e distinta; a cor de interface é escolhida para ser funcional e acessível. Uma marca com um vermelho vibrante não deve usar esse vermelho no botão principal, porque vermelho em interface significa destrutivo — e a convenção aprendida (nível 2 de 5.6) vence a identidade. Ver a secção 7.3.

Cinco casos de cor em identidade

Todos verificáveis por si — abra as páginas de identidade das marcas em causa e compare com o que se segue. As cores estão indicadas com pré-visualização e valor.

Caso 1 · Uma cor pode ser propriedade — e ter um custo de manutenção

Rubens, A Descoberta da Púrpura (c. 1636). O quadro conta a lenda da descoberta da púrpura de Tiro — um corante extraído de moluscos, tão caro que era preciso esmagar milhares para tingir um manto. Durante mais de mil anos, uma cor concreta significou «imperador», a ponto de haver leis a proibir que outros a usassem.

Porque isto está aqui: é o caso mais antigo e mais puro do que este caso descreve. A cor não ganhou significado por ser bonita nem por ter sido bem escolhida — ganhou-o por ter sido aplicada consistentemente ao mesmo referente durante séculos, e por ser cara o suficiente para que ninguém pudesse imitá-la. É exactamente o que um registo de marca de cor exige provar hoje, em escala de anos em vez de séculos.Domínio público · Museu do Prado, via Wikimedia Commons

Há marcas que registaram uma cor concreta para uma categoria concreta: o roxo #7D2248 da Cadbury para chocolate em tablete, o azul #0085CA da Tiffany, o vermelho da sola dos sapatos de Christian Louboutin. Nenhum destes registos foi fácil nem é total: o registo cobre uma categoria, não a cor, e vários foram parcialmente anulados em tribunal.

A lição de trabalho, que é a que interessa: um registo destes exige provar que o público associa aquela cor àquela marca — o que só se consegue com uso consistente durante anos. Uma marca que muda de tom a cada campanha nunca chega lá. A consistência não é uma preferência estética: é a condição de existir o activo.

Caso 4 · A cor tem de sobreviver ao pior meio, não ao melhor

A cores. Vermelho, azul e amarelo perfeitamente distintos.

Em escala de cinzentos. O vermelho e o azul colapsaram no mesmo cinzento — têm luminosidade parecida. Só o amarelo sobrevive, porque é o único cuja diferença era de luminosidade e não apenas de matiz.Domínio público · via Wikimedia Commons · conversão feita no navegador com filter:grayscale(1)

É o teste inteiro, numa imagem. Se a sua identidade depender de distinguir dois elementos que ficam no mesmo cinzento, ela não sobrevive a uma fotocópia, a uma gravação, nem a um utilizador com deficiência de visão de cores (secção 5.3).

Um verde escolhido no ecrã calibrado do estúdio vai depois ser: bordado numa camisola, impresso a uma cor num saco de papel, gravado a laser, reduzido a 16 px num favicon e — o teste mais duro — fotocopiado a preto e branco. Um verde #009639 e um vermelho #C8102E podem ter luminosidade quase idêntica: em escala de cinzentos tornam-se o mesmo cinzento.

A verificação, que leva um minuto: converta a identidade para escala de cinzentos antes de a aprovar. Se os elementos deixarem de se distinguir, o problema não é da fotocopiadora — é de a identidade depender só do matiz, e matiz é a dimensão que mais facilmente se perde.

Caso 5 · O caso raro em que a cor é a marca

~70% da peça20%10%

A cabine telefónica britânica. Reconhece-se de longe, de costas, desfocada, e numa fotografia a preto e branco — porque não depende só da cor: é cor mais forma mais repetição no território. Cumpre as três condições do caso: área grande, consistência física durante décadas, e raridade na categoria.

O contraste com o caso 3 é o ponto: um azul num ícone de 44 px distingue zero; este vermelho aplicado a um objeto de dois metros e meio, repetido por todo o país, distingue a um quarteirão. O poder de uma cor de marca depende muito mais da área e da repetição do que do valor escolhido. Christoph Braun · CC0 · via Wikimedia Commons

Há marcas cujo activo visual mais forte não é o símbolo nem o nome: é a cor aplicada a uma superfície grande — o laranja de uma loja de bricolage, o castanho de uma transportadora, o amarelo de um correio nacional. Funcionam porque cumprem três condições em simultâneo: a cor cobre área grande, é fisicamente consistente (tinta, veículo, fardamento) e é rara na categoria.

O contraste com o caso 3 é o ponto: um azul num logótipo pequeno de uma rede social distingue zero; um laranja numa fachada inteira distingue a dois quarteirões de distância. O poder de uma cor de marca depende muito mais da área e da repetição do que do valor escolhido.

5.9 Quatro casos

6.1 Sintaxes de cor

color: #1E90FF;
color: rgb(30 144 255 / 0.8);          /* sintaxe moderna, sem vírgulas, alpha com / */
color: hsl(210 100% 56%);
color: oklch(64% 0.17 254);            /* perceptual — prefira para tokens */
color: oklch(64% 0.17 254 / 0.15);     /* com alpha */
color: color(display-p3 0.2 0.56 1);   /* cor fora do sRGB */

/* relative color syntax: derivar de outra cor */
--brand: oklch(64% 0.17 254);
--brand-hover: oklch(from var(--brand) calc(l - 0.08) c h);
--brand-tint:  oklch(from var(--brand) 0.97 0.03 h);

/* color-mix: misturar duas cores num espaço escolhido */
--brand-muted: color-mix(in oklch, var(--brand) 30%, white);
--overlay:     color-mix(in srgb, black 60%, transparent);

6.2 Palavras-chave úteis

• currentColor: herda a color do elemento — ótimo para ícones e bordas que devem "acompanhar" o texto.
• color-scheme: light dark: diz ao navegador que o elemento suporta os dois; ajusta scrollbars, inputs e o Canvas/CanvasText do sistema.
• Cores de sistema (Canvas, CanvasText, LinkText, AccentColor): respeitam o tema e o modo de alto contraste do SO.

6.3 Tokens de cor: as três camadas

/* 1. PRIMITIVOS — a paleta crua */
:root{
  --blue-500: oklch(64% 0.17 254);
  --gray-50:  oklch(98% 0.005 260);
  --gray-900: oklch(22% 0.012 260);
  --red-600:  oklch(55% 0.18 25);
}
/* 2. SEMÂNTICOS — papéis; a única camada que os componentes usam */
:root{
  --color-surface:     var(--gray-50);
  --color-text:        var(--gray-900);
  --color-action:      var(--blue-500);
  --color-danger:      var(--red-600);
  --color-border:      color-mix(in oklch, var(--color-text) 12%, transparent);
}
/* 3. DARK MODE — redefine só os semânticos */
@media (prefers-color-scheme: dark){
  :root{
    --color-surface: oklch(20% 0.01 260);
    --color-text:    oklch(95% 0.005 260);
    --color-action:  oklch(72% 0.15 254);   /* mais claro e menos saturado no escuro */
  }
}

6.4 Transparência e camadas

• Alpha é ótimo para bordas, sombras, overlays e estados (hover a 8%, selecionado a 12%) — se adapta a qualquer fundo.
• Empilhar transparências multiplica: três camadas a 20% não dão 60%. Para uma cor "sólida" previsível, "asse" com color-mix contra o fundo real.
• Blend modes (mix-blend-mode, background-blend-mode): efeitos ricos (multiply para sombras coloridas, screen para brilhos), mas imprevisíveis sobre conteúdo variável e caros — use pontualmente.

6.5 Gradientes

background: linear-gradient(in oklch, var(--blue-500), var(--teal-500));
/* interpolar em oklch/oklab evita o "cinza morto" no meio de dois matizes */
background: conic-gradient(from 90deg, ...);
background: radial-gradient(circle at 30% 20%, ...);

• Interpole em oklch/oklab (ou hsl com longer hue/shorter hue escolhido) para transições limpas.
• Banding (faixas visíveis) aparece em gradientes suaves de tela: mitigue com um dithering sutil (ruído SVG/PNG sobreposto a baixa opacidade) ou gradiente com mais paradas.
• Cuidado com contraste: texto sobre gradiente precisa passar 4.5:1 no pior ponto.

6.6 P3 como aprimoramento progressivo

.cta{ background: #0A66FF; }                 /* fallback sRGB */
@supports (color: oklch(0% 0 0)){
  .cta{ background: oklch(60% 0.20 258); }   /* pode "vazar" para P3 onde houver */
}
@media (color-gamut: p3){
  .cta{ background: color(display-p3 0.13 0.4 1); }
}

7.1 O sistema de cor de um produto

7.2 Cor em visualização de dados dentro do produto

• Categórica: matizes distintos, ~6–8 no máximo; distinguíveis em daltonismo e em cinza; ordem estável entre telas.
• Sequencial: uma rampa de luminosidade para quantidade (claro → escuro).
• Divergente: duas rampas a partir de um centro neutro (para "acima/abaixo de uma referência").
• Não reaproveite a cor de ação/marca como cor de série de dados — confunde "interativo" com "dado".
• Aprofundamento na apostila DataVis Avançada com Python & Web Design.

7.3 Cor de marca × cor de UI

A cor da marca nem sempre pode ser a cor de ação: se a marca é um vermelho, ele colide com "erro/destrutivo"; se é um amarelo, não alcança contraste como fundo de botão com texto branco. Solução comum: a marca vive na navegação, no logo, em áreas de identidade; a ação é uma cor derivada ou vizinha, escolhida por contraste e por não colidir com as semânticas.

7.4 Modo escuro de verdade

• Não inverta. Inverter luminosidade estoura as cores saturadas e destrói as sombras.
• Superfícies: não use preto puro (#000) — cansa e "vibra" com texto branco; use um cinza muito escuro levemente temperado. A elevação fica mais clara (mais luz), não mais escura.
• Cores de destaque: suba o L e baixe o croma — cores muito saturadas sobre fundo escuro "brilham" e cansam (efeito de irradiação).
• Sombras: quase não funcionam no escuro; comunique profundidade por luminosidade da superfície e por borda.
• Texto: branco puro sobre fundo escuro parece forte demais; use ~90–95% de L. Reavalie todos os contrastes — eles não se transferem do claro.

7.5 Theming e white-label

Um produto que precisa vestir a marca de cada cliente: exponha uma cor de marca como entrada e derive a paleta inteira (rampa via OKLCH, semânticas, estados) por função — em vez de pedir 40 valores ao cliente. Fixe as semânticas de status (não deixe o cliente tornar o "erro" verde). Valide contraste automaticamente para qualquer cor de entrada e ajuste (ex.: forçar o texto sobre a cor de marca a preto ou branco conforme o L dela).

7.6 Governança

• Lint: proibir cor literal (#hex, rgb()) no código de componente — só tokens.
• Contraste no CI: testar os pares texto/superfície e ação/texto-sobre-cor a cada build.
• Specimen vivo: todos os tokens, em claro e escuro, com valor, uso e contraste; do's & don'ts.
• Regra de quem adiciona um matiz novo (quase ninguém, quase nunca).

8.1 O fluxo linear (linear vs sRGB)

• Texturas de cor (albedo) são guardadas com a curva sRGB; o engine as converte para linear antes de iluminar, porque somar e multiplicar luz só é fisicamente correto em espaço linear.
• Texturas de dados (normal map, roughness, metallic, AO) não são sRGB — marque-as como "linear"/"non-color" na importação, senão a iluminação sai errada.
• No fim do frame, o resultado linear passa por tonemapping e volta a sRGB (ou a um espaço HDR) para exibição.
• Sintoma clássico de erro: bordas de transparência escuras, luzes que "estouram" cedo demais, cores que ficam lavadas — quase sempre um espaço de cor trocado.

8.2 PBR e valores de albedo

• Base color / albedo em PBR é a cor difusa pura, sem sombra nem realce embutidos.
• Materiais reais raramente vão além dos extremos: dielétricos escuros não descem de ~30–50 sRGB; os mais claros (neve, gesso) não passam de ~230–240. Preto puro (0) e branco puro (255) em albedo "quebram" a resposta de luz.
• Metais têm albedo difuso ~0 e a "cor" vem do specular/reflectância; siga charts de referência (por metal).
• Não pinte oclusão nem highlight na textura de cor — isso é trabalho da luz.

8.3 HDR, exposição e tonemapping

• A cena é renderizada em HDR (valores de luz podem passar de 1.0). É preciso mapear esse intervalo para o display — o tonemapping.
• Operadores comuns: Reinhard (suave, "lava" realces), ACES (padrão de fato por anos; contrastado, satura realces), AgX (mais recente; desatura os realces de forma mais natural, evita "cores neon" no estouro).
• Exposição (manual ou auto/eye adaptation) define quanto da faixa HDR entra no mapeável — como a exposição de uma câmera.
• Escolha do operador é uma decisão estética e afeta toda a paleta percebida do jogo.

8.4 Color grading no engine

• Post-process: volumes/efeitos de câmera aplicam contraste, saturação, temperatura, curvas, vignette, bloom.
• LUTs (lookup tables): uma "receita" de cor pré-computada aplicada ao frame final — dá um look consistente e barato. Gere a LUT a partir de um still corrigido no software de cor.
• No Unity: URP/HDRP Volume com Color Adjustments, Tonemapping, Lift/Gamma/Gain, Color Curves, Split Toning. No Unreal: Post Process Volume + curvas ACES/console variables. Ver as apostilas Unity e Computação Gráfica & Three.js.
• Grade por área/estado (bioma, interior/exterior, "modo furtivo") com blends suaves entre volumes.

8.5 Legibilidade de gameplay

• Reserve cor para o que é jogável: use uma faixa de matiz/saturação para inimigos, outra para itens/loot, outra para perigo — e mantenha o ambiente mais dessaturado para elas saltarem.
• Silhueta + cor: cor sozinha não deve ser a única pista (Módulo 5 vale aqui); forma, contorno, ícone, animação reforçam.
• Modos para daltônicos não são só filtros: troque as cores de time/afiliação por pares seguros e permita ao jogador escolher; teste em deuteranopia (a mais comum).
• Contraste com o fundo: elementos de HUD e marcadores precisam funcionar sobre céu claro e caverna escura — outline, drop shadow, painel semitransparente.
• Feedback de dano/cura raramente deve ser só um flash vermelho/verde — vinheta + som + número.

8.6 Paleta e mood

• Defina key colors por fase/bioma e um "limite" de matizes — coerência lê como intenção; arco-íris lê como ruído.
• Use luz (temperatura, cor da key light e da fill), fog colorido e o grading para criar mood sem repintar assets.
• Concept art e um color key por nível guiam a equipe — o mesmo princípio do color script de animação (Módulo 9).

9.1 Color script

Um color script é uma sequência de pequenos quadros (miniaturas pintadas) que mapeia a temperatura emocional da história ao longo do tempo — antes de animar. Usado em longas de animação para garantir que a cor "conta a história": o momento de esperança é quente e claro, o fundo do poço é dessaturado e frio, o clímax volta a saturar. É uma partitura de cor da narrativa inteira, vista de uma vez.

9.2 Paleta por sequência e continuidade

• Cada sequência tem uma paleta-chave (dominante + acentos + faixa de neutros) coerente com seu beat emocional.
• Continuidade entre planos: dentro de uma cena, a luz e a paleta não podem "pular" de plano para plano sem motivo — a hora do dia, a fonte de luz e o mood têm de bater. Frames de referência ("color keys") por cena guiam pintores e o lighting.
• Transições de mood são graduais, ao longo de vários planos — a cor "vira" junto com a história.

9.3 Paleta limitada em 2D

• Animação 2D tradicional usa paletas limitadas por personagem (cor base + 1–2 sombras + 1 luz) para ser pintável quadro a quadro com consistência.
• As cores de sombra costumam ter um viés de matiz (sombra puxando para o azul/violeta, ou para o complementar da luz) — não é só "a base mais escura".
• "Color models" por cena definem as variações do personagem em cada iluminação (dia, noite, interior, pôr do sol).

quentequentefriofrio

Turner, O Temerário Rebocado (1839). O quadro é uma aula de separação por temperatura: metade da tela em laranjas quentes, metade em azuis frios, e o navio branco exactamente na fronteira. É o que um color grading faz num plano de cinema — e a razão de funcionar é a mesma da complementar da secção 3.2. A leitura para quem trabalha em motion e vídeo: a separação figura/fundo pode ser feita por temperatura em vez de por luminosidade, e é menos óbvia ao espectador.Domínio público · National Gallery, Londres, via Wikimedia Commons

9.4 Grading, espaços de vídeo e scopes

• Primárias (lift/gamma/gain ou offset/contrast/pivot) para equilíbrio geral; secundárias (qualificação por cor/luminância, power windows) para ajustes locais.
• Scopes são a verdade objetiva (o monitor mente): waveform (luminância / exposição e clipping), parade RGB (balance de branco), vectorscope (matiz e saturação; a linha "skin tone").
• Monitorar em um display calibrado no espaço de entrega; o preview do editor/engine não é referência.

9.5 Motion graphics e web

• Paleta de marca em movimento: a cor precisa manter contraste e legibilidade durante transições, não só nos keyframes.
• Flash: nada deve piscar mais de 3 vezes por segundo em área significativa (WCAG 2.3.1) — risco de convulsão.
• Respeite prefers-reduced-motion: ofereça uma versão com transições de cor suaves ou estáticas.
• Para SVG/CSS animado, ver a apostila CSS Avançado: Animações & SVG; para vídeo com IA, Criação e Edição de Vídeos com IA.

9.6 Entrega: "por que ficou diferente no player"

• Arquivo sem tag de espaço de cor / primaries / transfer → o player adivinha e erra (o clássico "ficou lavado" ou "escuro demais").
• Mismatch de range (full 0–255 vs limited 16–235) → pretos acinzentados ou esmagados.
• Exportar do espaço de trabalho para o de entrega com a transform correta (ODT no ACES; conversão para Rec.709 fora dele).
• Testar o master no destino real (o site, o app, a TV) antes de fechar.

10.1 Onde cor pesa

• Product / UI designer: a paleta do produto, estados, dark mode, contraste — avaliado em todo teste de portfólio.
• Design systems: tokens de cor, rampas, theming/white-label, governança, specimen.
• Brand designer: a cor de identidade e seus equivalentes (sRGB/P3/CMYK/Pantone). Ver Branding.
• Data / DataViz: paletas categóricas, sequenciais, divergentes acessíveis. Ver DataVis Avançada.
• Technical artist / game: fluxo linear, PBR, tonemapping, grading, legibilidade. Ver Unity, Blender 3D.
• Colorista / motion: grading, color script, entrega em Rec.709/HDR.

10.2 Roadmap de estudo (6–8 semanas)

10.3 Banco de perguntas de entrevista (com a resposta que aprova)

10.4 Projetos de portfólio que geram entrevista

1. Sistema de cor de produto (âncora): paleta completa com rampas OKLCH, tokens em 3 camadas, dark mode real, specimen com todos os contrastes, e um texto explicando cada decisão.
2. Redesign de acessibilidade: pegue um produto real com problemas de contraste/daltonismo e refaça a cor; mostre antes/depois com números e simulações.
3. White-label a partir de uma cor: um gerador que recebe uma cor de marca e deriva a paleta inteira + semânticas, com validação de contraste automática.
4. Paleta de dados acessível: conjuntos categórico, sequencial e divergente que funcionam em deuteranopia e em cinza, aplicados a gráficos reais.
5. Um aprofundamento: um color script de um curta (12–20 quadros com o raciocínio emocional) ou um color key + grading de dois biomas de um jogo, com antes/depois.

10.5 Fontes para continuar

• Livros: Interaction of Color (Josef Albers); The Art of Color / The Elements of Color (Johannes Itten); The Secret Lives of Color (Kassia St Clair); Color and Light (James Gurney, para pintura/animação).
• Web / produto: a seção de cor do Refactoring UI; Radix Colors e sua documentação; Leonardo (Adobe) e Huetone; os artigos de OKLCH/CSS Color 4 no web.dev e MDN.
• Acessibilidade: WCAG (SC 1.4.1, 1.4.3, 1.4.11); APCA / Contrast.tools; Who Can Use.
• Jogos: a documentação de color management do Unity (URP/HDRP) e do Unreal; artigos sobre ACES/AgX; guias de PBR (Substance, "PBR Guide" da Allegorithmic).
• Filme / motion: ACEScentral; Poynton sobre gamma e vídeo; a documentação de color do DaVinci Resolve; estudos de color script de longas de animação.
• Nesta trilha: Tipografia, Layout, Grade & Espaçamento, Design Systems & Design Tokens, Logótipos & Lettering; e CSS, CSS Avançado: Animações & SVG, Acessibilidade Digital & WCAG, DataVis Avançada, Branding.