Pôster das cores nomeadas do CSS

Ordenar pela matiz no OKLCH, e não pelo alfabeto, deixa cores parecidas lado a lado: dá para ver na hora que crimson fica entre os vermelhos e os rosas, ou que darkgray é mais claro que gray. Os brancos levemente tingidos, como snow e aliceblue, e os cinzas puros ficam no fim, do mais claro ao mais escuro.

Os sinônimos foram mantidos, porque as duas grafias valem no CSS: aqua e cyan, fuchsia e magenta, e os sete pares gray e grey. Por isso 148 nomes dão 139 cores diferentes. Na tela, cada amostra leva à página da cor, com RGB, HSL, OKLCH e contraste.

Escolha o papel acima do pôster e clique em Imprimir / Salvar PDF. O pôster acompanha o tamanho do papel, então os rótulos ficam com pelo menos 7pt no menor tamanho e crescem nos maiores; a navegação, os anúncios e os botões do site somem na impressão.

Ative Gráficos em segundo plano (Chrome, Edge) ou Imprimir fundos (Firefox, Safari), senão as amostras saem em branco. Para uma gráfica, o botão Baixar PNG desenha o pôster num canvas em resolução de impressão para o papel escolhido.

Um link para esta página na sua documentação, wiki ou README é o melhor jeito de compartilhar: quem clicar sempre vê a versão atual e o botão de imprimir. Copie um destes:

<a href="https://www.arielton.com/pt/cheatsheets/css-named-colors">Pôster das cores nomeadas do CSS para imprimir</a> por <a href="https://www.arielton.com/pt">Arielton Oberek</a>

[Pôster das cores nomeadas do CSS para imprimir](https://www.arielton.com/pt/cheatsheets/css-named-colors) por [Arielton Oberek](https://www.arielton.com/pt)

Se a sua equipe quer o mesmo tratamento para uma API interna, uma CLI ou um guia de estilo, escreva para contact@arielton.com.

Quantas cores nomeadas o CSS tem?

148 palavras-chave no CSS Color Module Level 4: as 16 cores básicas do HTML 4, as cores estendidas que vieram do X11 e a rebeccapurple, incluída em 2014. Algumas são sinônimos do mesmo valor, então são 139 cores diferentes.

As cores impressas vão sair iguais às da tela?

Não exatamente. Impressoras misturam tintas CMYK e não alcançam as cores sRGB mais vivas, então lime, cyan e magenta saem mais apagadas do que na tela. Use o pôster para nomes e valores hex e confira as cores críticas num monitor calibrado.

Os nomes de cor do CSS diferenciam maiúsculas e minúsculas?

Não. LightGoldenrodYellow, lightgoldenrodyellow e LIGHTGOLDENRODYELLOW são a mesma palavra-chave. O pôster usa a forma em minúsculas que a especificação lista.

Vale usar cores nomeadas no CSS de produção?

Servem bem para protótipos, demonstrações e aulas. Num design system, propriedades customizadas com valores hex ou oklch() são mais fáceis de manter coerentes, porque os nomes não seguem escala nenhuma: darkgray é mais claro que gray.