Códigos de cores

Códigos de cores é a lista completa dos 148 nomes de cores que o CSS entende, cada um com o código hex, RGB e HSL dele e o contraste contra branco e preto. Busque pelo nome ou cole um valor hex para descobrir como uma cor se chama, filtre por família e ordene por matiz ou luminosidade para ver o conjunto inteiro arrumado do jeito que o olho lê, e não alfabeticamente.

Só local

Pesquisar por nome ou código hexadecimal

Ordenar

148 de 148 cores

Nomes de cores CSS com códigos hexadecimais, RGB e HSL e taxas de contraste
Nome	Sobre branco	Sobre preto
aliceblue	1.07	19.58
antiquewhite	1.17	17.93
aqua	1.25	16.75
aquamarine	1.22	17.16
azure	1.03	20.45
beige	1.11	18.98
bisque	1.22	17.15
black	21.00	1.00
blanchedalmond	1.17	18.02
blue	8.59	2.44
blueviolet	5.96	3.52
brown	7.08	2.96
burlywood	1.86	11.31
cadetblue	3.05	6.88
chartreuse	1.30	16.21
chocolate	3.63	5.78
coral	2.50	8.40
cornflowerblue	2.97	7.06
cornsilk	1.07	19.71
crimson	4.99	4.21
cyan	1.25	16.75
darkblue	15.30	1.37
darkcyan	4.15	5.07
darkgoldenrod	3.25	6.45
darkgray	2.35	8.94
darkgreen	7.44	2.82
darkgrey	2.35	8.94
darkkhaki	2.07	10.15
darkmagenta	8.50	2.47
darkolivegreen	5.95	3.53
darkorange	2.33	9.00
darkorchid	5.70	3.68
darkred	10.01	2.10
darksalmon	2.31	9.11
darkseagreen	2.15	9.76
darkslateblue	9.07	2.32
darkslategray	8.93	2.35
darkslategrey	8.93	2.35
darkturquoise	1.95	10.75
darkviolet	6.56	3.20
deeppink	3.64	5.77
deepskyblue	2.12	9.90
dimgray	5.49	3.83
dimgrey	5.49	3.83
dodgerblue	3.24	6.49
firebrick	6.68	3.14
floralwhite	1.04	20.18
forestgreen	4.39	4.78
fuchsia	3.14	6.70
gainsboro	1.37	15.31
ghostwhite	1.06	19.86
gold	1.40	14.97
goldenrod	2.24	9.38
gray	3.95	5.32
green	5.14	4.09
greenyellow	1.23	17.12
grey	3.95	5.32
honeydew	1.04	20.27
hotpink	2.65	7.93
indianred	3.98	5.28
indigo	12.95	1.62
ivory	1.01	20.81
khaki	1.28	16.40
lavender	1.23	17.06
lavenderblush	1.10	19.03
lawngreen	1.33	15.78
lemonchiffon	1.06	19.81
lightblue	1.53	13.74
lightcoral	2.59	8.10
lightcyan	1.05	19.92
lightgoldenrodyellow	1.07	19.67
lightgray	1.50	14.03
lightgreen	1.42	14.82
lightgrey	1.50	14.03
lightpink	1.65	12.71
lightsalmon	1.99	10.56
lightseagreen	2.62	8.01
lightskyblue	1.72	12.24
lightslategray	3.64	5.77
lightslategrey	3.64	5.77
lightsteelblue	1.78	11.80
lightyellow	1.02	20.63
lime	1.37	15.30
limegreen	2.12	9.91
linen	1.12	18.67
magenta	3.14	6.70
maroon	10.95	1.92
mediumaquamarine	1.93	10.88
mediumblue	11.16	1.88
mediumorchid	3.94	5.33
mediumpurple	3.76	5.58
mediumseagreen	2.67	7.88
mediumslateblue	4.15	5.06
mediumspringgreen	1.39	15.14
mediumturquoise	1.86	11.27
mediumvioletred	5.42	3.87
midnightblue	14.85	1.41
mintcream	1.02	20.57
mistyrose	1.20	17.44
moccasin	1.23	17.02
navajowhite	1.29	16.30
navy	16.01	1.31
oldlace	1.08	19.38
olive	4.20	5.01
olivedrab	3.81	5.52
orange	1.97	10.63
orangered	3.44	6.10
orchid	2.89	7.27
palegoldenrod	1.25	16.76
palegreen	1.27	16.59
paleturquoise	1.29	16.29
palevioletred	3.11	6.75
papayawhip	1.13	18.56
peachpuff	1.31	15.98
peru	2.99	7.02
pink	1.54	13.65
plum	2.07	10.15
powderblue	1.43	14.65
purple	9.42	2.23
rebeccapurple	8.41	2.50
red	4.00	5.25
rosybrown	2.81	7.46
royalblue	4.85	4.33
saddlebrown	7.10	2.96
salmon	2.50	8.40
sandybrown	2.03	10.33
seagreen	4.25	4.95
seashell	1.07	19.55
sienna	5.62	3.74
silver	1.82	11.54
skyblue	1.74	12.06
slateblue	5.31	3.96
slategray	4.05	5.18
slategrey	4.05	5.18
snow	1.03	20.31
springgreen	1.35	15.61
steelblue	4.11	5.11
tan	1.97	10.65
teal	4.77	4.40
thistle	1.70	12.36
tomato	2.95	7.13
turquoise	1.64	12.79
violet	2.32	9.06
wheat	1.31	15.98
white	1.00	21.00
whitesmoke	1.09	19.26
yellow	1.07	19.56
yellowgreen	1.88	11.15

Como funciona o Códigos de cores?

O CSS tem 148 palavras-chave de cores. Elas não são um sistema — se acumularam. Dezesseis vieram da paleta original do HTML 4, que veio dos dezesseis do VGA. Outras 130 chegaram do rgb.txt, do sistema de janelas X11, um arquivo montado no MIT ao longo dos anos 1980 por pessoas nomeando cores conforme precisavam delas. É por isso que existe gray e grey, por que darkgray é mais claro que gray, e por que rebeccapurple — adicionado em 2014 em memória da filha de Eric Meyer — é o único com uma história.

Por que darkgray é mais claro que gray

gray é #808080, o ponto médio da paleta do HTML 4. darkgray é #a9a9a9, que é mais claro. Eles vieram de fontes diferentes e nunca foram reconciliados, porque quando alguém percebeu, mudar qualquer um deles teria quebrado toda página que o usasse. É a forma mais confiável de pegar uma ferramenta de cores que gerou a própria tabela em vez de ler a especificação.

Ordenar por matiz em vez de por nome

A ordem alfabética é inútil para escolher uma cor e perfeita para encontrar uma que você já sabe nomear. Ordenar por matiz põe a lista na ordem que o olho espera — os vermelhos juntos, depois os laranjas, e assim por diante ao redor do círculo cromático — que é a visão que responde “o que mais há perto disto?”. O matiz usado é o ângulo OKLCh, não o HSL, então os agrupamentos correspondem ao que as cores parecem, e não ao que a aritmética diz.

As colunas de contraste

Cada linha traz a proporção WCAG 2.x dela contra branco e contra preto. É o número que decide se a cor pode carregar texto, e é a forma mais rápida de eliminar a maior parte desta lista para qualquer coisa além de decoração: das 148, menos da metade alcança 4.5:1 no branco.

Um nome ou um valor hex

navy

Todos os códigos da cor

hex        #000080
rgb        rgb(0 0 128)
hsl        hsl(240 100% 25.1%)
on white   16.01 : 1
on black   1.31 : 1

Quais opções e casos-limite o Códigos de cores suporta?

Referência técnica e opções
Parâmetro	Tipo	Padrão	Comportamento e casos-limite
148	contagem	CSS Color 4	O número de cores nomeadas, contando os tons de cinza escritos de ambas as formas como palavras-chave separadas. 147 é o número geralmente citado, de antes de rebeccapurple ter sido adicionado.
gray / grey	alias	ambos válidos	Toda palavra-chave de cinza existe em ambas as grafias e são valores idênticos. O CSS aceita qualquer uma delas e sempre aceitou.
darkgray	#a9a9a9	—	Mais claro que gray (#808080). Um artefato da fusão das paletas HTML 4 e X11, preservado porque alterá-la quebraria páginas existentes.
rebeccapurple	#663399	2014	A única palavra-chave adicionada desde a importação do X11, em memória de Rebecca Meyer. Um alias do valor que seu pai usava para ela.
aqua / cyan	#00ffff	idêntico	Mesmo valor, dois nomes, assim como fuchsia e magenta. Ambos os pares sobreviveram das duas paletas de origem.
transparent	palavra-chave	rgba(0,0,0,0)	Válido onde quer que uma cor seja, e não está nesta lista porque não tem valor para ser consultado.
Contraste	razão	vs #fff / #000	Relação WCAG 2.x. 4.5:1 é o mínimo para texto normal; menos da metade dessas palavras-chave atingem isso em branco.
Ordenação por matiz	OKLCh	graus	Ordenado pelo ângulo de matiz perceptual, não HSL — é por isso que o vermelho fica em 29° aqui em vez de 0°.

Perguntas frequentes

Qual é o código hex de red?

#FF0000, que é rgb(255 0 0) e hsl(0 100% 50%). É uma das dezesseis palavras-chave originais do HTML 4. Vale saber: o #FF0000 puro é um vermelho muito saturado, que vibra contra o branco e é difícil de ler como texto — alcança apenas 4.0:1 no branco, o que reprova no WCAG AA para texto corrido. A maioria das interfaces quer algo mais próximo de #C62828 ou mais escuro.

Qual é o código hex do azul-marinho?

#000080. Essa é a palavra-chave CSS navy: rgb(0 0 128), um azul com exatamente metade da intensidade. É muito escuro — 16.0:1 contra o branco — o que o torna excelente para texto em fundo claro e quase ilegível em um escuro. O azul-marinho mais claro usado na maioria das paletas de marca costuma ficar por volta de #1B3A6B, e não a palavra-chave.

Por que darkgray é mais claro que gray?

Porque vieram de lugares diferentes. gray é #808080, da paleta do HTML 4; darkgray é #A9A9A9, do rgb.txt do X11. Quando o CSS juntou as duas listas no fim dos anos 1990, o conflito já estava nos navegadores, então foi preservado em vez de corrigido. É o melhor teste único para saber se uma referência de cores foi copiada da especificação ou gerada pela suposição de alguém.

Quantos nomes de cores CSS existem?

148 palavras-chave, ou 139 valores de cores distintos — a diferença são os cinzas escritos de duas formas e os pares aqua/cyan e fuchsia/magenta. O número 147 que circula é anterior ao rebeccapurple, adicionado à especificação em 2014.

Posso usar um nome de cor em vez de um código hex no CSS?

Sim, em qualquer lugar em que uma cor é válida, e todos os navegadores suportam todas há duas décadas. O argumento prático contra é que os nomes não são um sistema: não há relação entre darkblue e blue em que você possa confiar, nenhuma escala de luminosidade consistente, e nada ao longo do qual interpolar. Para um design system você quer valores que você mesmo gerou; para um protótipo rápido ou um outline de depuração, `outline: 2px solid hotpink` é mais rápido de digitar do que qualquer hex.

Como descobrir como uma cor hex se chama?

Cole na caixa de busca. O filtro aceita valores hex além de nomes, então digitar #4169e1 encontra royalblue. Se o valor não for uma correspondência exata de palavra-chave, nada volta — estes são valores exatos, não vizinhos mais próximos, e uma ferramenta que dissesse que #4169e2 é 'royalblue' estaria mentindo sobre um valor que você está prestes a colar em código.

Equipe ToolsByUs · Como verificamos nossas ferramentas