Lição 5
Fluxo de escolha de cores
Alinhar paletas de marca, amostragem com conta-gotas e entrega em variáveis CSS.
Levar cor do mockup para produção é um fluxo, não um clique único no conta-gotas.
Passo 1: Ancorar nos tokens de marca
Comece pelas escalas primária, neutra e semântica do design system — não por um hex aleatório de artefato de compressão em PNG.
Se o marketing entregou um PNG, confira a cor contra o PDF oficial da marca ou a biblioteca Figma antes de codificar.
Passo 2: Amostrar com cuidado
Conta-gotas do navegador lê um pixel. Banding de JPEG, antialiasing de subpixel e escala retina podem enganar.
Amostre uma região de preenchimento plano ou leia valores direto do arquivo de design. Ao amostrar um site ao vivo, desative zoom e verifique variantes claro/escuro separadamente.
Passo 3: Converter e registrar todas as visões
Armazene hex canônico (ou OKLCH) nos tokens e derive:
- RGB para APIs de canvas/gráficos
- HSL para geradores de tema
- Pares de texto com contraste seguro documentados ao lado dos fundos
Um conversor mantém os números consistentes quando o design pede “o mesmo azul em HSL”.
Passo 4: Verificar contraste e estados
Para cada componente interativo, cheque default, hover, focus e disabled. Anéis de focus costumam precisar de uma terceira cor que ainda passe contraste no preenchimento default e no hover.
Registre razões de contraste que falham no ticket de revisão — não só “parece ok no meu notebook”.
Passo 5: Entregar como variáveis CSS
:root {
--color-primary: #2563eb;
--color-primary-hover: #1d4ed8;
--color-on-primary: #ffffff;
}
Componentes referenciam nomes semânticos (--color-on-primary), não hex espalhado nos módulos.
Checklist de handoff
| Item | Pronto quando |
|---|---|
| Nome do token acordado | Design + eng usam o mesmo --color-* |
| Contraste documentado | AA atendido para pares de texto |
| Modo escuro | Tabela separada ou overrides listados |
| Superfícies fora de CSS | Hex para e-mail/PDF exportado |
Conclusão
Trate ferramentas de conta-gotas como instrumentos de medição em um pipeline documentado — amostrar, converter, verificar contraste, publicar tokens. Assim times param de ter cinco azuis #2563EB ligeiramente diferentes em produção.