Nomes de Cores CSS

Um nome de cor é uma palavra-chave legível por humanos — como red, tomato ou rebeccapurple — que pode ser usada em qualquer lugar onde CSS espera um valor de cor, em vez de uma notação numérica como #FF0000 ou rgb(255 0 0). Os nomes são a forma mais simples de escrever uma cor: são autodocumentados e impossíveis de errar de modo a criar uma cor válida diferente, como pode acontecer com códigos hex.

Este capítulo lista todas as cores nomeadas, explica quando usar um nome em vez de um valor hex ou rgb(), e aborda as poucas palavras-chave especiais (transparent, currentColor) que não estão na tabela.

Usando um nome de cor

Insira a palavra-chave diretamente em qualquer propriedade de cor. Os nomes não diferenciam maiúsculas de minúsculas, portanto Tomato, tomato e TOMATO são idênticos:

h1 {
  color: tomato;
}

button {
  background-color: SeaGreen;
  border: 2px solid darkslategray;
}

Esses valores são intercambiáveis com as formas hex e rgb() — color: tomato pinta exatamente os mesmos pixels que color: #FF6347 ou color: rgb(255 99 71). Use nomes para melhor legibilidade durante o desenvolvimento; recorra ao hex quando precisar de uma cor de marca precisa que não possui uma palavra-chave.

As cores nomeadas

Todos os 147 nomes de cores abaixo são suportados por todos os navegadores modernos. Cada linha mostra a palavra-chave e seu valor HEX equivalente:

Como os valores HEX se relacionam com os nomes

Cada nome na tabela é apenas uma abreviação para uma cor RGB — uma mistura de luz Vermelha, Verde e Azul. CSS escreve essa mistura como um valor hexadecimal (HEX): um # seguido de seis dígitos, dois por canal. O menor valor que um canal pode ter é 0 (hex 00) e o maior é 255 (hex FF).

#FF6347   →   FF = red 255   63 = green 99   47 = blue 71   →   "tomato"

HEX não diferencia maiúsculas de minúsculas, portanto #FFFFFF e #ffffff são a mesma cor (branco). Quando os três canais compartilham os mesmos dois dígitos, você também pode usar a forma abreviada de 3 dígitos — #FFF se expande para #FFFFFF e #F00 para #FF0000.

Conhecer esse mapeamento é útil quando uma ferramenta de design fornece um código hex que quase corresponde a uma palavra-chave: você pode substituir pelo nome legível apenas quando os valores coincidirem exatamente.

Palavras-chave de cor especiais

Duas palavras-chave se comportam como nomes de cores, mas não estão na tabela:

• transparent — uma cor totalmente transparente, equivalente a rgba(0, 0, 0, 0). Use-a para ocultar uma borda ou fundo sem remover a propriedade.
• currentColor — resolve para o valor color atual do elemento. É útil para manter uma borda ou preenchimento SVG sincronizados automaticamente com a cor do texto.

.ghost-button {
  color: royalblue;
  background-color: transparent;
  border: 2px solid currentColor; /* follows the royalblue text color */
}

Capítulos relacionados

• Propriedade CSS color — define a cor do texto de um elemento.
• Propriedade CSS background-color — preenche o fundo de um elemento.
• Cores HTML — os modelos de cores RGB / HEX / HSL explicados.

Prática