Cores nomeadas em CSS: lista completa de 148 cores
Lista completa de cores nomeadas em CSS com hex e RGB. Pesquisável, copiável e adaptada para celular.
O que são cores nomeadas em CSS?
CSS inclui 148 cores nomeadas que você pode usar no lugar de códigos hex ou valores RGB. Palavras como "tomato", "rebeccapurple" e "lightseagreen" são valores de cor CSS válidos, definidos pelo W3C e suportados em todos os navegadores modernos. Cores nomeadas deixam suas folhas de estilo mais legíveis e fáceis de lembrar.
Cobrem todo o círculo cromático: primárias, secundárias, terciárias, cinzas e alguns tons especiais. Cada nome mapeia para um valor sRGB preciso. Alguns nomes são óbvios ("red", "blue", "green"), enquanto outros são deliciosamente específicos ("papayawhip", "lemonchiffon", "mediumvioletred").
Casos de uso comuns
- Prototipagem rápida: digite um nome de cor para definir um placeholder
- CSS legível: troque `#ff6347` por `tomato` para maior clareza
- Theming: use nomes semânticos (--brand-primary: rebeccapurple) em variáveis CSS
- Templates de e-mail: alguns clientes limitam hex; nomes têm suporte amplo
- Ensino: cores nomeadas são ótimas para introduzir CSS a iniciantes
Método 1: Use a lista de cores nomeadas CSS do UtilBoxx (Recomendado)
Nossa lista de cores nomeadas CSS mostra cada cor com seu equivalente hex e RGB, permite buscar e copiar qualquer nome ou valor com um clique. Veja como usar:
- Vá para utilboxx.com/pt/tools/color/named
- Navegue ou busque na lista (tente "purple" ou "gray")
- Clique em qualquer amostra para copiar o nome
- Clique no valor hex para copiar o código exato
- Use o botão de favoritos para marcar as cores que mais usa
Por que este método funciona:
- Lista agrupada por cor e com busca
- Cópia com um clique de nome, hex e RGB
- Mostra uma amostra visual para cada cor
- Layout adaptado para celular
- Grátis, sem cadastro, sem anúncios
Método 2: Memorize os básicos
Um conjunto pequeno de cores nomeadas cobre 80% do trabalho CSS do dia a dia:
- red, green, blue (primárias)
- yellow, cyan, magenta (secundárias)
- black, white, gray
- orange, pink, purple, brown
- Variantes claras/escuras: lightgray, darkblue, etc.
Para escolhas mais exóticas, tenha uma lista de referência por perto.
Método 3: Use variáveis CSS na sua folha de estilo
Defina sua paleta como propriedades customizadas e use os nomes no seu código:
```css :root { --color-bg: white; --color-text: black; --color-accent: rebeccapurple; --color-warning: tomato; } ```
Isso combina a legibilidade dos nomes com o poder de um design system centralizado.
Perguntas frequentes
Quantas cores nomeadas existem em CSS?
Existem 148 cores nomeadas na especificação CSS Color Module Level 4. A lista inclui todas as cores históricas e adições mais novas como rebeccapurple (adicionada em 2014 em memória da filha de Eric Meyer).
Cores nomeadas diferenciam maiúsculas de minúsculas?
Não. Os nomes de cor em CSS não diferenciam maiúsculas, então "Tomato", "tomato" e "TOMATO" se referem à mesma cor. A convenção é minúscula.
O que é rebeccapurple?
É `#663399`, adicionada à especificação CSS em 2014 em homenagem a Rebecca Alison Meyer, filha do pioneiro do CSS Eric Meyer. É a única cor nomeada adicionada ao CSS por motivo não técnico.
Posso usar cores nomeadas em SVG e canvas?
Sim. SVG e a API de canvas do HTML5 aceitam cores nomeadas de CSS, sendo universalmente compatíveis com os mesmos nomes e valores.
Conclusão
Cores nomeadas em CSS são uma joia subutilizada. Para uma referência rápida e pesquisável, a lista de cores nomeadas do UtilBoxx é a forma mais fácil de encontrar, comparar e copiá-las.