# 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.

- Endereço oficial: https://pradev.com.br/tabela-de-cores-html
- Categoria: Front-end e design
- Tipo: Utilitário
- Atualizado em: 2026-10-01
- Autor: Leonardo Gaertner (https://pradev.com.br/sobre)
- Preço: grátis, sem cadastro. O processamento acontece no navegador de quem usa.

## Como usar

1. Procure na tabela ou digite parte do nome, em inglês ou em português, como azul ou green.
2. Ordene por tom para ver as cores parecidas lado a lado.
3. 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

```text
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.

## Fontes

- [W3C: lista das cores com nome do CSS](https://www.w3.org/TR/css-color-4/#named-colors)

## Ferramentas relacionadas

- [Conversor de Cores HEX RGB HSL](https://pradev.com.br/conversor-de-cores): Converta cores entre HEX, RGB, HSL, OKLCH, HWB, HSV e CMYK, com seletor de cores e os nomes do CSS. Grátis, direto no navegador.
- [Gerador de Paleta a partir de HEX](https://pradev.com.br/gerador-de-paleta-a-partir-de-hex): Gere uma escala de tons de 50 a 950 e combinações (complementar, análogas, tríade) a partir de uma cor. Exporta para CSS e Tailwind.
- [Verificador de Contraste](https://pradev.com.br/verificador-de-contraste): Confira 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. Grátis.
- [Formatador CSS](https://pradev.com.br/formatador-css): Formate CSS, SCSS e Less online: indentação, espaços e ponto e vírgula padronizados, com aviso de erro de sintaxe. Grátis, no navegador.
- [Conversor px para rem](https://pradev.com.br/conversor-px-rem): Converta px em rem, em, pt e % e o contrário, com a base de 16px ou outra. Tabela com os tamanhos mais usados. Grátis, no navegador.
- [Gerador de Lorem Ipsum](https://pradev.com.br/gerador-de-lorem-ipsum): Gere texto Lorem Ipsum por parágrafos, frases ou palavras, com ou sem tags <p>, para preencher layouts e protótipos. Grátis e sem cadastro.