Guias de cores
Guias curtos e práticos sobre cores para telas: formatos, contraste, paletas, modo escuro e CSS. Cada número é calculado, cada exemplo pode ser copiado.
- OKLCH explicado: o formato de cor que finalmente corresponde ao que você vêOKLCH descreve uma cor pelo quanto ela parece clara, pelo quanto ela é intensa e pelo matiz que ela tem. Diferente do HSL, o mesmo valor de luminosidade parece igualmente claro em qualquer matiz, o que deixa paletas, estados de hover e contraste acessível previsíveis.28 de setembro de 20263 min de leitura
- APCA vs WCAG 2: em qual verificação de contraste confiarAs razões de contraste do WCAG 2 são o que a lei exige. O APCA é um modelo mais novo que prevê a legibilidade muito melhor, principalmente em temas escuros e cores saturadas. Verificar os dois garante um texto que está em conformidade e que é realmente fácil de ler.28 de setembro de 20263 min de leitura
- Gamut de cores explicado: sRGB, Display P3 e cores fora do gamutGamut é o conjunto de cores que uma tela ou um espaço de cor consegue mostrar. A web foi construída sobre o sRGB, mas hoje a maioria dos celulares e muitos notebooks exibem Display P3, com vermelhos, verdes e laranjas bem mais vivos.28 de setembro de 20262 min de leitura
- Formatos de cor explicados: HEX, RGB, HSL, OKLCH e os demaisA mesma cor pode ser escrita de uma dúzia de jeitos. Veja o que cada formato significa, quando usá-lo e como a mesma cor fica em todos eles.28 de setembro de 20262 min de leitura
- Código de cor hex explicado: como funciona o #RRGGBBUm código de cor hex como #1e90ff são três pares de dígitos hexadecimais: a quantidade de luz vermelha, verde e azul, cada uma de 00 (nada) a ff (máximo, 255). Acrescente um quarto par para definir a opacidade: 80 significa cerca de 50%, ff significa totalmente sólido.28 de setembro de 20266 min de leitura
- Como escolher a paleta de cores de um site ou appComece com uma cor da marca, gere uma escala de 50 a 950 a partir dela, adicione cinzas levemente tingidos e quatro cores semânticas e depois teste cada par de texto quanto a contraste e daltonismo. Escolha os níveis pela luminosidade OKLCH, não no olho: sobre fundo branco, o texto passa no WCAG AA quando a luminosidade cai para cerca de 0,55, seja qual for o matiz.28 de setembro de 20267 min de leitura
- Cores para modo escuro: como escolher fundos, texto e destaquesUse um fundo cinza-escuro como #121212 em vez de preto puro, texto quase branco como #e5e5e5 em vez de branco puro e versões mais claras e menos saturadas das cores da marca. Verifique o texto com APCA além do WCAG 2, porque o WCAG 2 superestima o contraste em fundos escuros.28 de setembro de 20267 min de leitura
- Harmonia de cores: complementares, análogas, triádicas e outrasUma harmonia de cores escolhe matizes em ângulos fixos no círculo cromático: 180° de distância nas complementares, 30° nas análogas, 120° nas triádicas. Gire o matiz em OKLCH em vez de HSL e as cores ficam igualmente claras, sem que um matiz salte aos olhos por acaso.28 de setembro de 20266 min de leitura
- CSS color-mix() e cores relativas: tons, hover e transparênciaO color-mix() mistura duas cores num espaço de cor que você escolhe, e a sintaxe de cores relativas permite editar um canal de uma cor existente, como em oklch(from var(--brand) calc(l - 0.1) c h). Os dois rodam no navegador, funcionam com variáveis CSS e substituem a maioria das funções de cor do Sass. Misture em oklab para tons e hover, em srgb para transparência.28 de setembro de 20267 min de leitura
- Paleta para daltônicos: como testar e corrigir suas coresUma paleta acessível para daltônicos mantém cada par de cores distinguível com protanopia, deuteranopia, tritanopia e em escala de cinza. A correção mais confiável não é um matiz especial, e sim uma diferença de luminosidade: cores separadas por cerca de 0,2 na luminosidade OKLCH continuaram distintas em todas as simulações que fizemos. Combine isso com ícones ou rótulos, porque a cor sozinha sempre deixa alguém de fora.28 de setembro de 20267 min de leitura
- Cores do Tailwind CSS: a paleta OKLCH da v4, cores personalizadas e tonsO Tailwind CSS v4 traz 26 escalas de cor com 11 tons cada, de 50 a 950, num total de 286 cores definidas em OKLCH como variáveis CSS, por exemplo --color-blue-500. Você adiciona as suas com @theme { --color-brand-500: oklch(...) }. O mesmo número de tom não significa a mesma luminosidade: blue-600 é o azul mais claro que passa em 4,5:1 sobre branco, enquanto o amarelo precisa do 700.28 de setembro de 20267 min de leitura