O CSS reconhece 148 nomes de cor, como tomato, cornflowerblue ou rebeccapurple. Cada um equivale a um código HEX fixo e funciona igual em todos os navegadores, sem definir mais nada.

São práticos para protótipos, exemplos e cores pontuais porque se leem melhor que um código. Para um design system com tons exatos e consistentes, continua sendo melhor trabalhar com HEX, RGB ou OKLCH.

Curiosidades dos nomes de cores CSS

Por trás da lista há um pouco de história e algumas esquisitices que vale a pena conhecer.

Começaram sendo 16
O HTML 4 definia apenas 16 nomes, como navy, teal ou olive. O resto veio depois, herdado das cores do sistema gráfico X11.
148 nomes, 139 cores
Há nove pares que são a mesma cor: gray e grey (e suas variantes), aqua e cyan, e fuchsia e magenta.
darkgray é mais claro que gray
Por causa dessa herança do X11, darkgray (#A9A9A9) é mais claro que gray (#808080). Se procura um cinza escuro, use dimgray.
rebeccapurple tem história
Foi adicionado em 2014 em memória de Rebecca Meyer, filha de Eric Meyer, uma das referências do CSS. É o único nome incorporado nos últimos anos.
Não diferenciam maiúsculas
tomato, Tomato e TOMATO são a mesma cor. Por convenção, escrevem-se em minúsculas.
transparent e currentColor
Não fazem parte da lista, mas também são palavras-chave de cor: transparent é totalmente transparente e currentColor usa a cor do texto do elemento.

Perguntas frequentes

148 nomes, que correspondem a 139 cores diferentes porque há nove pares de alias (como gray e grey). Vão dos básicos como red ou blue a outros como mediumseagreen ou rebeccapurple.

Sim, você pode escrevê-los como estão em qualquer propriedade de cor, por exemplo color: tomato;, sem convertê-los antes para HEX ou RGB.

Sim. O CSS aceita as duas grafias para todos os cinzas (gray/grey, darkgray/darkgrey…) e elas dão exatamente a mesma cor.

Porque os nomes vêm de fontes diferentes: gray (#808080) é da lista original do HTML e darkgray (#A9A9A9) foi herdado das cores do X11, onde «gray» era mais claro. Para um cinza escuro, use dimgray (#696969).

É a cor #663399, adicionada ao CSS em 2014 em memória de Rebecca Meyer, filha de Eric Meyer, uma das referências da comunidade CSS.

Não. Tomato, tomato e TOMATO funcionam igual, embora o habitual seja escrevê-los em minúsculas.

Sim, fazem parte do padrão CSS e são aceitos por todos os navegadores atuais.

Nomes de cores HTML e CSS

As 148 cores com nome do CSS e do HTML

Vermelhos10

Laranjas5

Amarelos11

Verdes23

Cianos8

Azuis17

Roxos18

Rosas6

Castanhos16

Brancos17

Cinzentos17

O que são os nomes de cores CSS

Curiosidades dos nomes de cores CSS

Começaram sendo 16

148 nomes, 139 cores

darkgray é mais claro que gray

rebeccapurple tem história

Não diferenciam maiúsculas

transparent e currentColor

Perguntas frequentes

Ferramentas relacionadas

Círculo cromático

Seletor de cor

Converter Hex para RGB