Nomes de Cores CSS

Explore e pesquise as 148 cores nomeadas do CSS com seus valores HEX e RGB, ordenadas por nome, matiz ou luminosidade. Funciona totalmente no seu navegador: nada é enviado a nenhum servidor.

148 cores

O que são os nomes de cores CSS?

O CSS define 148 palavras-chave de cor, como tomato, steelblue ou rebeccapurple, que podem ser usadas em qualquer lugar onde um valor de cor é aceito, no lugar de um código HEX ou RGB. A maioria vem da lista de cores do X11 adotada pelos primeiros navegadores, por isso os nomes às vezes surpreendem: darkgray é mais claro que gray. Todos os navegadores suportam todos eles. Esta lista mostra cada nome com sua cor e seus valores HEX e RGB, permite buscar por nome, HEX ou qualquer cor, e os ordena alfabeticamente, por matiz ou por luminosidade.

Exemplos

Usando nomes de cor em folhas de estilo, markup e scripts:

CSS

.notice {
  color: darkslategray;
  background: lightgoldenrodyellow;
  border: 1px solid goldenrod;
}

HTML

<p style="color: rebeccapurple">Named colors work inline too.</p>

JavaScript

// resolve a name to rgb() through the browser itself
const el = document.createElement("div");
el.style.color = "tomato";
document.body.append(el);
getComputedStyle(el).color; // "rgb(255, 99, 71)"

SVG

<circle cx="50" cy="50" r="40" fill="cornflowerblue" stroke="navy" />

Casos de uso

Protótipos rápidos e demos

Nomes como crimson ou teal são mais rápidos de digitar e mais fáceis de ler que códigos HEX quando você está rascunhando um layout ou escrevendo um exemplo.

Depurar layouts

Marque elementos com cores óbvias como hotpink ou lime para ver as caixas e o overflow enquanto trabalha, e depois remova.

Encontrar o nome de um valor HEX

Cole um valor HEX ou RGB para ver se ele tem um nome exato, ou qual é a cor nomeada mais próxima.

Ensino e documentação

Nomes de cor legíveis deixam tutoriais e exemplos de CSS mais fáceis de acompanhar para quem está começando.

Perguntas frequentes

Quantos nomes de cor CSS existem?

148 no CSS Color Module Level 4, contando separadamente variantes de grafia como gray e grey, além das palavras-chave especiais transparent e currentColor, que não são cores fixas e não aparecem nesta lista.

Por que darkgray é mais claro que gray?

gray vem das 16 cores originais do HTML, a 50% (#808080), enquanto darkgray vem da lista do X11, onde foi definido como #a9a9a9. Os dois foram mantidos quando as listas se juntaram, então os nomes se contradizem.

Os nomes de cor diferenciam maiúsculas?

Não. Tomato, TOMATO e tomato são a mesma cor. A convenção usual é em minúsculas.

Devo usar nomes ou HEX em produção?

Qualquer um funciona e é renderizado igual. Design systems costumam preferir HEX, RGB ou variáveis porque só 148 cores têm nome e cores de marca raramente coincidem exatamente com uma.

Meus dados são enviados a algum servidor?

Não. A lista e a busca rodam no seu navegador com JavaScript puro. Nada é transmitido ou armazenado.

Ferramentas relacionadas

Conversor de Cores (HEX, RGB, HSL, CMYK)Verificador de Contraste de Cores (WCAG AA / AAA)Gerador de Tonalidades (Tints e Shades)Gerador de Gradiente CSS Gerador de Paleta de Cores (Harmonias)Seletor de Cor de Imagem