Tabela de cores HTML e CSS

Como usar um nome de cor no CSS

Toda propriedade do CSS que aceita cor aceita também um destes 148 nomes, com maiúsculas ou minúsculas. As três linhas abaixo pintam o mesmo vermelho.

O nome é fácil de ler, mas nem sempre dá para adivinhar: gainsboro, peru e moccasin são cores de verdade. Para a cor da sua marca, use HEX ou rgb().

color: tomato;
color: #ff6347;
color: rgb(255 99 71);

HEX, RGB, HSL e OKLCH

A tabela mostra cada cor em quatro notações do CSS. O HEX é o mais curto e o mais comum. O RGB dá a quantidade de vermelho, verde e azul, de 0 a 255. O HSL descreve matiz, saturação e luminosidade, o que ajuda a fazer uma versão mais clara ou mais escura da mesma cor.

O OKLCH também usa matiz, mas a luminosidade (o primeiro número) acompanha o que o olho percebe: duas cores com o mesmo valor parecem igualmente claras. No HSL isso não acontece, e yellow parece bem mais claro que blue mesmo com a mesma luminosidade nominal. Branco, preto e os cinzas não têm croma, então o matiz aparece como 0.

Para converter uma cor que não está na lista, use um dos conversores abaixo.

• Converter HEX em RGB
• Converter RGB em HEX
• Escolher uma cor no Color Picker

Nomes diferentes, mesma cor

Nove pares de nomes valem a mesma cor: aqua e cyan, fuchsia e magenta, e a grafia gray e grey em gray, darkgray, darkslategray, dimgray, lightgray, lightslategray e slategray. Por isso a lista tem 148 nomes e 139 cores diferentes. Na tabela, o outro nome aparece abaixo do nome da linha.

Listas mais antigas falam em 140 nomes. Elas contam só uma grafia de cada cinza e não incluem rebeccapurple (#663399), que entrou no CSS Color Level 4.

transparent, currentColor e cores de sistema

Duas palavras valem como cor, mas ficam fora da tabela porque não têm valor fixo. transparent é preto com alfa zero. currentColor repete o valor de color do elemento, e serve para borda ou ícone SVG que deve seguir a cor do texto.

O CSS também define 19 cores de sistema, como Canvas, CanvasText, LinkText, Highlight e AccentColor. O valor depende do navegador, do sistema operacional e do tema claro ou escuro, então não existe um HEX para elas. Servem para um componente acompanhar o tema de quem está lendo.

Contraste do texto

A última coluna mostra se o texto branco ou o preto fica mais legível sobre cada cor, com a razão de contraste da fórmula do WCAG 2. O WCAG pede pelo menos 4,5 para 1 em texto comum e 3 para 1 em texto grande. yellow com texto branco dá só 1,07 para 1, e com texto preto chega a 19,56 para 1.

Verificar o contraste de qualquer par de cores

Fontes

Conferidas em 5 de novembro de 2026:

• W3C, CSS Color Module Level 4: named colors
• MDN: tipo de dado named-color
• W3C, WCAG 2.1: definição de razão de contraste