Lista de Nomes de Cores em CSS com Hex e RGB

O que são os nomes de cores?

Nomes de cores são apelidos em texto simples para valores exatos de RGB — em vez de escrever #DC143C, você escreve crimson e o navegador entende do mesmo jeito. Eles existem desde os primeiros dias da web e continuam funcionando em qualquer folha de estilo CSS hoje, sem precisar de nenhuma biblioteca ou import.

Esta lista reúne 220 cores nomeadas organizadas em doze famílias — vermelho, laranja, amarelo, verde, ciano, azul, roxo, rosa, marrom, cinza, preto e branco — para você encontrar rápido o tom que precisa e já sair com o hex ou o rgb() prontos para colar no código.

Como usar

1. Digite o nome ou o hex. A busca filtra a lista na hora — funciona tanto para “crimson” quanto para “dc143c”, e um contador mostra quantas cores batem.
2. Marque “Somente cores oficiais do CSS” se precisar. Assim a lista mostra só os 121 nomes que o CSS reconhece de verdade numa folha de estilo, sem misturar com nomes de cartela.
3. Clique para copiar. Clicar no nome copia o nome; clicar no hex ou no rgb() copia aquele valor. Um check confirma a cópia por dois segundos, e cada família leva à sua página de tons.

Quando usar um nome em vez do código hex

Um nome de cor deixa a folha de estilo mais fácil de ler: color: tomato conta mais sobre a intenção do que color: #FF6347, principalmente quando você está revisando o CSS de outra pessoa ou revisitando um projeto meses depois. Em protótipos e testes rápidos os nomes também poupam tempo — você escreve steelblue de cabeça e segue trabalhando, sem abrir um seletor de cores.

Ainda assim, paletas de produção quase sempre fecham no código hex. Um design system precisa de controle fino sobre tom, saturação e contraste, e os nomes do CSS cobrem só uma amostra limitada do espectro — não existe um “azul da marca” entre eles. Por isso os nomes funcionam bem para rascunho e aprendizado, mas o hex (ou variáveis de cor) continua sendo o padrão quando a cor precisa bater exatamente com o que veio do Figma.

Limitações honestas

O CSS define cerca de 148 nomes de cor, contando gray e grey como entradas separadas. Esta página mostra 121 deles — os que se encaixam nas doze famílias listadas acima. Os outros 99 nomes que aparecem aqui (Bordô, Sálvia, Espresso) são convenções de cartela, não fazem parte de nenhum padrão, e cada fabricante pode desenhar um tom levemente mais claro ou mais escuro para o mesmo nome.

Os nomes oficiais vieram da antiga paleta X11 e herdaram as esquisitices dela — a mais famosa é que DarkGray (#A9A9A9) é, na prática, mais claro que Gray (#808080), porque a nomenclatura nunca seguiu um sistema lógico de luminosidade. O CSS também aceita duas grafias na família do cinza (gray/grey, darkgray/darkgrey, slategray/slategrey funcionam igual) e ignora maiúsculas e minúsculas: crimson, Crimson e CRIMSON são a mesma cor. E como todo valor aqui é sRGB, o que você vê na tela depende da gama e da calibração do seu monitor — a impressão em CMYK não reproduz todos esses tons.

Por que é grátis?

Essa lista roda inteira no seu navegador — a busca, o filtro e a cópia acontecem no seu computador, sem enviar nada para um servidor. Não existe conta para criar, marca d’água no resultado ou versão paga escondida atrás de um limite: é uma ferramenta do FreeToGenerate.com, feita para ser usada quantas vezes você precisar.