Tabela de cores HTML e CSS
Esta tabela traz as 148 cores com nome que o HTML e o CSS aceitam, como tomato, steelblue e rebeccapurple, com o código HEX, o RGB e o nome em português de cada uma. Você pode buscar pelo nome em inglês ou em português, ordenar por nome, por tom ou por luz, e copiar o nome ou o código com um clique.
148 cores. Clique no nome ou no código para copiar.
| Cor | Nome CSS | Em português | HEX | RGB |
|---|---|---|---|---|
| azul-alice | ||||
| branco antigo | ||||
| água (ciano) | ||||
| água-marinha | ||||
| azul-celeste claro | ||||
| bege | ||||
| bisque | ||||
| preto | ||||
| amêndoa | ||||
| azul | ||||
| azul-violeta | ||||
| marrom | ||||
| madeira | ||||
| azul-cadete | ||||
| verde-chartreuse | ||||
| chocolate | ||||
| coral | ||||
| azul-centáurea | ||||
| seda de milho | ||||
| carmesim | ||||
| ciano | ||||
| azul-escuro | ||||
| ciano-escuro | ||||
| dourado-escuro | ||||
| cinza-escuro | ||||
| verde-escuro | ||||
| cinza-escuro | ||||
| cáqui-escuro | ||||
| magenta-escuro | ||||
| verde-oliva-escuro | ||||
| laranja-escuro | ||||
| orquídea-escura | ||||
| vermelho-escuro | ||||
| salmão-escuro | ||||
| verde-mar-escuro | ||||
| azul-ardósia-escuro | ||||
| cinza-ardósia-escuro | ||||
| cinza-ardósia-escuro | ||||
| turquesa-escuro | ||||
| violeta-escuro | ||||
| rosa-profundo | ||||
| azul-céu-profundo | ||||
| cinza-fosco | ||||
| cinza-fosco | ||||
| azul-dodger | ||||
| tijolo | ||||
| branco-floral | ||||
| verde-floresta | ||||
| fúcsia (magenta) | ||||
| gainsboro (cinza-claro) | ||||
| branco-fantasma | ||||
| ouro | ||||
| dourado | ||||
| cinza | ||||
| verde | ||||
| verde-amarelado | ||||
| cinza | ||||
| melão | ||||
| rosa-choque | ||||
| vermelho-indiano | ||||
| índigo | ||||
| marfim | ||||
| cáqui | ||||
| lavanda | ||||
| lavanda-rosada | ||||
| verde-gramado | ||||
| creme de limão | ||||
| azul-claro | ||||
| coral-claro | ||||
| ciano-claro | ||||
| amarelo-dourado-claro | ||||
| cinza-claro | ||||
| verde-claro | ||||
| cinza-claro | ||||
| rosa-claro | ||||
| salmão-claro | ||||
| verde-mar-claro | ||||
| azul-céu-claro | ||||
| cinza-ardósia-claro | ||||
| cinza-ardósia-claro | ||||
| azul-aço-claro | ||||
| amarelo-claro | ||||
| lima (verde puro) | ||||
| verde-lima | ||||
| linho | ||||
| magenta | ||||
| bordô | ||||
| água-marinha média | ||||
| azul-médio | ||||
| orquídea-média | ||||
| roxo-médio | ||||
| verde-mar-médio | ||||
| azul-ardósia-médio | ||||
| verde-primavera-médio | ||||
| turquesa-médio | ||||
| vermelho-violeta-médio | ||||
| azul-meia-noite | ||||
| creme de menta | ||||
| rosa-enevoado | ||||
| mocassim | ||||
| branco-navajo | ||||
| azul-marinho | ||||
| renda antiga | ||||
| oliva | ||||
| verde-oliva | ||||
| laranja | ||||
| vermelho-alaranjado | ||||
| orquídea | ||||
| dourado-pálido | ||||
| verde-pálido | ||||
| turquesa-pálido | ||||
| vermelho-violeta-pálido | ||||
| creme de mamão | ||||
| pêssego | ||||
| peru (marrom-claro) | ||||
| rosa | ||||
| ameixa | ||||
| azul-pó | ||||
| roxo | ||||
| roxo-rebecca | ||||
| vermelho | ||||
| marrom-rosado | ||||
| azul-real | ||||
| marrom-sela | ||||
| salmão | ||||
| marrom-areia | ||||
| verde-mar | ||||
| concha | ||||
| siena | ||||
| prata | ||||
| azul-céu | ||||
| azul-ardósia | ||||
| cinza-ardósia | ||||
| cinza-ardósia | ||||
| neve | ||||
| verde-primavera | ||||
| azul-aço | ||||
| castanho-claro | ||||
| verde-azulado | ||||
| cardo | ||||
| tomate | ||||
| turquesa | ||||
| violeta | ||||
| trigo | ||||
| branco | ||||
| fumaça branca | ||||
| amarelo | ||||
| verde-amarelo |
Os nomes valem em qualquer propriedade de cor do CSS e não diferenciam maiúsculas: Tomato e tomato são a mesma cor.
Achou um resultado errado ou tem uma sugestão? Avise por e-mail.
Como usar
- Procure na tabela ou digite parte do nome, em inglês ou em português, como azul ou green.
- Ordene por tom para ver as cores parecidas lado a lado.
- Clique no nome, no HEX ou no RGB para copiar.
Como funciona
Os nomes vêm da especificação CSS Color Module Level 4 e funcionam em qualquer propriedade de cor, como color e background. A maioria veio dos antigos nomes de cores do sistema X11. Alguns nomes são sinônimos e têm o mesmo código: aqua e cyan, fuchsia e magenta, e as grafias gray e grey.
Os nomes não seguem uma lógica de cor: darkgray (#a9a9a9) é mais claro que gray (#808080), e green (#008000) é bem mais escuro que lime (#00ff00). Por isso, para um projeto, prefira definir as cores por código, em variáveis CSS.
Exemplos
tomato: #ff6347, rgb(255, 99, 71)
steelblue: #4682b4, rgb(70, 130, 180)
rebeccapurple: #663399, a única cor acrescentada ao CSS em 2014
Perguntas frequentes
Quantas cores com nome o CSS tem?
São 148, contando os sinônimos (como gray e grey). Além delas, o CSS aceita transparent e currentcolor, que não são cores fixas.
Por que darkgray é mais claro que gray?
Porque os nomes vieram de listas diferentes. O gray do HTML foi definido como #808080, e o darkgray veio da lista do X11, onde gray era #bebebe. Ao serem juntados no CSS, darkgray (#a9a9a9) ficou mais claro que gray.
O nome rebeccapurple tem alguma história?
Sim. Ele foi acrescentado em 2014 em homenagem a Rebecca, filha de Eric Meyer, um dos autores mais conhecidos de CSS, que morreu aos seis anos. Era a cor favorita dela.
Outras ferramentas que podem ajudar
- Conversor de Cores HEX RGB HSLConverta cores entre HEX, RGB, HSL, OKLCH, HWB, HSV e CMYK, com seletor de cores e os nomes do CSS
- Gerador de Paleta a partir de HEXGere uma escala de tons de 50 a 950 e combinações (complementar, análogas, tríade) a partir de uma cor
- Verificador de ContrasteConfira o contraste entre a cor do texto e a do fundo pela WCAG 2.2: razão, níveis AA e AAA e sugestões de cor que passam
- Formatador CSSFormate CSS, SCSS e Less online: indentação, espaços e ponto e vírgula padronizados, com aviso de erro de sintaxe
- Conversor px para remConverta px em rem, em, pt e % e o contrário, com a base de 16px ou outra
- Gerador de Lorem IpsumGere texto Lorem Ipsum por parágrafos, frases ou palavras, com ou sem tags <p>, para preencher layouts e protótipos