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

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.

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.

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).

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).

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.