Nomes de Cores CSS Online
Referência completa dos 148 nomes de cores CSS — com valores HEX, RGB, HSL e conversão instantânea
Showing 148 colors
Referência gratuita
148 cores CSS com nome — referência completa
As 148 cores
Referência completa de todas as cores CSS com nome definidas no CSS Color Level 4.
HEX, RGB e HSL
Consulte o equivalente HEX, RGB e HSL de cada cor com nome para usar no seu CSS.
Contraste WCAG
Verifique se cada cor atende aos requisitos de acessibilidade WCAG 2.1 AA e AAA.
Cópia instantânea
Clique em qualquer valor para copiá-lo diretamente para a área de transferência.
Como funciona
Três passos, sem complicação
Busque pelo nome ou valor da cor
Digite o nome de uma cor CSS (por exemplo: tomato, rebeccapurple, cornflowerblue) ou seu valor HEX/RGB para encontrá-la instantaneamente na tabela de referência.
Consulte os valores equivalentes
Para cada cor CSS com nome, você obtém o valor HEX de 6 dígitos, os componentes RGB (0-255), os valores HSL (matiz em graus, saturação e luminosidade em %) e o índice de contraste WCAG.
Copie o valor que você precisa
Clique em qualquer valor para copiá-lo para a área de transferência. Use-o diretamente no seu CSS, Figma, Tailwind ou qualquer ferramenta de design.
Perguntas frequentes
Ficou com dúvidas?
A especificação CSS Color Level 4 do W3C define exatamente 148 cores com nome, incluindo a especial transparent (equivalente a rgba(0,0,0,0)) e o alias rebeccapurple (adicionado em 2014 em homenagem a Rebecca Meyer, filha do autor de CSS Eric Meyer, que faleceu aos 6 anos). Os outros 146 nomes vêm do sistema de cores X11 do MIT, padronizado pelo W3C no CSS2.1 (1998) e reafirmado no CSS3. O CSS também define currentColor e inherit, mas essas são palavras-chave de herança, não valores de cor reais, por isso não são contadas entre as 148.
As cores X11 têm origem no arquivo rgb.txt do servidor X Window System (MIT X Consortium, 1985). Inicialmente continha uma lista de cores criada por Paul Raveling do USC Information Sciences Institute, baseada no sistema Resene Colours da Nova Zelândia. A cada versão do servidor X, a lista foi expandida e modificada por diferentes colaboradores, criando inconsistências históricas — alguns nomes têm variantes com e sem espaço, como dark red versus darkred. Quando o W3C adotou esses nomes para o CSS2.1, fez uma seleção cuidadosa para eliminar ambiguidades, mas manteve nomes pitorescos como blanchedalmond, papayawhip, peachpuff, lemonchiffon e cornsilk, oriundos de sobremesas americanas e materiais têxteis populares nos anos 1980.
Os nomes de cores CSS são ideais para: prototipagem rápida e código de demonstração, onde a legibilidade importa mais do que a precisão; código educacional, onde nomes descritivos ajudam a entender a intenção — por exemplo, background: lightgray é mais legível que background: #d3d3d3; valores temporários de depuração; e situações em que a cor exata pode variar conforme a implementação do navegador, embora na prática os navegadores modernos sejam consistentes. Para produção, prefira valores HEX ou HSL: são explícitos, não exigem que o desenvolvedor conheça a lista de nomes e são mais fáceis de modificar programaticamente. Frameworks como Tailwind CSS e sistemas de design modernos usam suas próprias paletas de cores, não os nomes CSS padrão.
As WCAG (Web Content Accessibility Guidelines) 2.1 do W3C definem índices mínimos de contraste para texto legível. O nível AA — mínimo legal em muitas jurisdições — exige índice de 4,5:1 para texto normal e 3:1 para texto grande (18pt ou mais, ou 14pt em negrito). O nível AAA exige 7:1 para texto normal. O índice é calculado entre a luminância relativa do texto e do fundo. Muitas cores CSS com nome não atendem a esses requisitos: yellow (#FFFF00) sobre fundo branco tem índice de 1,07:1, sendo ilegível, enquanto black (#000000) sobre branco tem 21:1, o máximo possível. Cores como navy, darkgreen, maroon e midnightblue têm bom contraste sobre branco. As ferramentas de inspeção do Chrome e do Firefox exibem o índice WCAG diretamente ao selecionar um elemento.
CSS Color Level 4 (rascunho do W3C em andamento) introduz funções de cor avançadas que vão muito além dos 148 nomes. oklch() e oklab() são espaços de cor perceptualmente uniformes: o mesmo delta numérico produz mudanças de cor visualmente equivalentes — ao contrário do HSL, onde o mesmo delta de luminosidade tem efeitos muito distintos dependendo do matiz. A função color-mix() permite mesclar duas cores: color-mix(in oklch, blue 30%, red) produz uma mistura perceptualmente natural. color-contrast() (ainda em rascunho) seleciona automaticamente a cor de maior contraste de uma lista. display-p3 e rec2020 permitem acessar a gama ampla de cores de telas HDR modernas, que oferecem mais de 25% de cores adicionais em relação ao sRGB. Essas funções têm suporte crescente nos navegadores desde 2022-2023.
Em 7 de junho de 2014, Rebecca Alicia Meyer, filha de 6 anos de Eric A. Meyer — cofundador do CSS Working Group, autor das obras de referência sobre CSS e criador do CSS Reset — faleceu de um glioblastoma, tumor cerebral de grau IV. No mesmo dia de seu falecimento, a comunidade CSS propôs nomear a cor #663399, um roxo violeta que era a favorita dela, como rebeccapurple em sua homenagem. A proposta foi aprovada pelo CSS Working Group e incluída na especificação CSS Color Level 4 em 14 de junho de 2014, como issue número 24 do repositório do W3C. É a única cor CSS adicionada por razões emocionais e humanitárias, e a única entre as 148 com uma história pessoal documentada, não sendo um nome herdado do sistema X11.
História das cores CSS: do X11 (MIT 1985) ao CSS Color Level 4, WCAG 2.1 e oklch
A história das cores com nome no CSS começa em 1985 no MIT Laboratory for Computer Science, com o desenvolvimento do servidor X Window System. O arquivo rgb.txt do X11 R3, lançado em 1988, continha a primeira lista padronizada de cores por nome para interfaces gráficas em Unix e sistemas baseados em X. Essa lista foi compilada originalmente por Paul Raveling, com inspiração parcial no sistema Resene Colours da Nova Zelândia, e posteriormente ampliada por vários colaboradores nas versões X11 R4 (1989), R5 (1991) e R6 (1994). Quando Tim Berners-Lee e o nascente consórcio W3C começaram a definir os padrões CSS entre 1994 e 1996, adotar o sistema de nomes X11 era a escolha natural: todos os desenvolvedores da era Unix já conheciam esses nomes. O CSS1 (1996) definiu apenas 16 cores com nome — as mesmas 16 do HTML 3.2: black, white, red, green, blue, yellow, cyan, magenta e suas variantes dark/light. O CSS2.1, publicado como recomendação do W3C em 2011 (embora trabalhado desde 1998), expandiu a lista para 147 cores do sistema X11, mais orange, que já era amplamente usada. O CSS Color Level 3 (2011) oficializou a lista de 147 mais 1 nomes. O CSS Color Level 4 adicionou rebeccapurple em 2014, chegando aos 148 atuais. A especificação completa pode ser consultada no repositório GitHub do W3C CSS Working Group.
As 148 cores CSS com nome apresentam curiosidades técnicas e históricas que qualquer desenvolvedor web deveria conhecer. A inconsistência mais notável é que o CSS reconhece tanto grey quanto gray — e suas variantes darkgray/darkgrey, dimgray/dimgrey, lightgray/lightgrey e outras — como cores idênticas, herdando a ambiguidade ortográfica do inglês. Outro caso peculiar é o de lime (#00FF00) versus green (#008000): em CSS, green não é o verde puro RGB, mas um verde escuro com 50% de intensidade, enquanto lime é o verde puro. Isso difere das cores HTML básicas, onde green era o verde puro. As cores aqua e cyan são sinônimos perfeitos (#00FFFF), assim como fuchsia e magenta (#FF00FF). A cor rebeccapurple tem o valor #663399, equivalente a rgb(102, 51, 153) ou hsl(270, 50%, 40%). As cores mais escuras da lista são black (#000000), darkgreen (#006400, com apenas 39% de luminosidade), midnightblue (#191970) e maroon (#800000). As mais claras são white (#FFFFFF), snow (#FFFAFA), ivory (#FFFFF0) e floralwhite (#FFFAF0). Para desenvolvimento web acessível, as cores CSS com maior contraste sobre fundo branco são black (índice 21:1), maroon (5,88:1), navy (13,87:1) e darkgreen (9,53:1).
No contexto do desenvolvimento web moderno, as cores CSS com nome continuam relevantes, mas precisam ser compreendidas dentro do ecossistema mais amplo das especificações de cor. O CSS Color Level 4 introduz o modelo de cor oklch (Oklab-based Lightness Chroma Hue), que supera as limitações do HSL: neste, duas cores com a mesma luminosidade L mas matiz H diferente parecem ter brilhos distintos visualmente — o amarelo parece muito mais brilhante que o azul no mesmo valor L, enquanto o oklch é perceptualmente uniforme. A sintaxe é oklch(luminosidade% croma matiz), por exemplo oklch(70% 0.25 145) para um verde vivo. Para projetos em produção, o fluxo de trabalho recomendado com CSS moderno é: definir a paleta base como custom properties (variáveis CSS), como --color-primary: oklch(60% 0.2 250); usar color-mix() para criar variações, como color-mix(in oklch, var(--color-primary) 80%, white); e aplicar nomes de cores CSS apenas como fallback ou em protótipos. Ferramentas como Figma (desde 2023), Framer e Penpot já suportam o espaço de cores oklch na definição de paletas. No Tailwind CSS 4.0, lançado em 2025, a paleta de cores padrão foi redefinida em oklch, substituindo os valores HEX das versões anteriores. Quanto à compatibilidade de navegadores com as novas funções de cor CSS: segundo o Can I Use, oklch tem suporte no Chrome 111 ou superior, Firefox 113 ou superior e Safari 15.4 ou superior, cobrindo mais de 90% dos usuários globais em 2024.