Nomes de cores CSS: Guia de referência completo

As cores são a alma do design web. Embora a maioria dos desenvolvedores use códigos HEX ou valores RGB para precisão, os nomes de cores CSS oferecem uma maneira legível por humanos de aplicar estilos rapidamente. Os navegadores modernos suportam mais de 140 cores nomeadas, desde as comuns como Red (vermelho) e Blue (azul) até nomes mais exóticos como AliceBlue ou PapayaWhip.

Este guia fornece uma referência completa e pesquisável para cada cor nomeada no CSS, categorizada por matiz para ajudá-lo a encontrar a tonalidade perfeita para seu projeto.

1. Referência rápida: As 16 cores básicas

Estas são as cores originais definidas na especificação HTML 4.01 e são suportadas por todos os navegadores e dispositivos.

Nome da cor	HEX	RGB
White (Branco)	`#FFFFFF`	`(255, 255, 255)`
Silver (Prata)	`#C0C0C0`	`(192, 192, 192)`
Gray (Cinza)	`#808080`	`(128, 128, 128)`
Black (Preto)	`#000000`	`(0, 0, 0)`
Red (Vermelho)	`#FF0000`	`(255, 0, 0)`
Maroon (Castanho)	`#800000`	`(128, 0, 0)`
Yellow (Amarelo)	`#FFFF00`	`(255, 255, 0)`
Olive (Oliva)	`#808000`	`(128, 128, 0)`
Lime (Lima)	`#00FF00`	`(0, 255, 0)`
Green (Verde)	`#008000`	`(0, 128, 0)`
Aqua (Aqua)	`#00FFFF`	`(0, 255, 255)`
Teal (Cerceta)	`#008080`	`(0, 128, 128)`
Blue (Azul)	`#0000FF`	`(0, 0, 255)`
Navy (Marinha)	`#000080`	`(0, 0, 128)`
Fuchsia (Fúcsia)	`#FF00FF`	`(255, 0, 255)`
Purple (Roxo)	`#800080`	`(128, 0, 128)`

2. Lista completa de mais de 140 cores CSS

Abaixo está o conjunto completo de cores estendidas suportadas pelos navegadores modernos (SVG 1.0/CSS3).

Tons de Rosa (Pink Colors)

Nome	HEX	RGB	Categoria
Pink	`#FFC0CB`	`(255, 192, 203)`	Rosa
LightPink	`#FFB6C1`	`(255, 182, 193)`	Rosa
HotPink	`#FF69B4`	`(255, 105, 180)`	Rosa
DeepPink	`#FF1493`	`(255, 20, 147)`	Rosa
PaleVioletRed	`#DB7093`	`(219, 112, 147)`	Rosa
MediumVioletRed	`#C71585`	`(199, 21, 133)`	Rosa

Tons de Vermelho (Red Colors)

Nome	HEX	RGB	Categoria
LightSalmon	`#FFA07A`	`(255, 160, 122)`	Vermelho
Salmon	`#FA8072`	`(250, 128, 114)`	Vermelho
DarkSalmon	`#E9967A`	`(233, 150, 122)`	Vermelho
LightCoral	`#F08080`	`(240, 128, 128)`	Vermelho
IndianRed	`#CD5C5C`	`(205, 92, 92)`	Vermelho
Crimson	`#DC143C`	`(220, 20, 60)`	Vermelho
FireBrick	`#B22222`	`(178, 34, 34)`	Vermelho
DarkRed	`#8B0000`	`(139, 0, 0)`	Vermelho
Red	`#FF0000`	`(255, 0, 0)`	Vermelho

Tons de Laranja (Orange Colors)

Nome	HEX	RGB	Categoria
Orange	`#FFA500`	`(255, 165, 0)`	Laranja
DarkOrange	`#FF8C00`	`(255, 140, 0)`	Laranja
Coral	`#FF7F50`	`(255, 127, 80)`	Laranja
Tomato	`#FF6347`	`(255, 99, 71)`	Laranja
OrangeRed	`#FF4500`	`(255, 69, 0)`	Laranja

Tons de Amarelo (Yellow Colors)

Nome	HEX	RGB	Categoria
Yellow	`#FFFF00`	`(255, 255, 0)`	Amarelo
LightYellow	`#FFFFE0`	`(255, 255, 224)`	Amarelo
LemonChiffon	`#FFFACD`	`(255, 250, 205)`	Amarelo
LightGoldenRodYellow	`#FAFAD2`	`(250, 250, 210)`	Amarelo
PapayaWhip	`#FFEFD5`	`(255, 239, 213)`	Amarelo
Moccasin	`#FFE4B5`	`(255, 228, 181)`	Amarelo
PeachPuff	`#FFDAB9`	`(255, 218, 185)`	Amarelo
PaleGoldenRod	`#EEE8AA`	`(238, 232, 170)`	Amarelo
Khaki	`#F0E68C`	`(240, 230, 140)`	Amarelo
DarkKhaki	`#BDB76B`	`(189, 183, 107)`	Amarelo
Gold	`#FFD700`	`(255, 215, 0)`	Amarelo

Tons de Marrom (Brown Colors)

Nome	HEX	RGB	Categoria
Cornsilk	`#FFF8DC`	`(255, 248, 220)`	Marrom
BlanchedAlmond	`#FFEBCD`	`(255, 235, 205)`	Marrom
Bisque	`#FFE4C4`	`(255, 228, 196)`	Marrom
NavajoWhite	`#FFDEAD`	`(255, 222, 173)`	Marrom
Wheat	`#F5DEB3`	`(245, 222, 179)`	Marrom
BurlyWood	`#DEB887`	`(222, 184, 135)`	Marrom
Tan	`#D2B48C`	`(210, 180, 140)`	Marrom
RosyBrown	`#BC8F8F`	`(188, 143, 143)`	Marrom
SandyBrown	`#F4A460`	`(244, 164, 96)`	Marrom
GoldenRod	`#DAA520`	`(218, 165, 32)`	Marrom
Peru	`#CD853F`	`(205, 133, 63)`	Marrom
Chocolate	`#D2691E`	`(210, 105, 30)`	Marrom
SaddleBrown	`#8B4513`	`(139, 69, 19)`	Marrom
Sienna	`#A0522D`	`(160, 82, 45)`	Marrom
Brown	`#A52A2A`	`(165, 42, 42)`	Marrom
Maroon	`#800000`	`(128, 0, 0)`	Marrom

Tons de Verde (Green Colors)

Nome	HEX	RGB	Categoria
DarkOliveGreen	`#556B2F`	`(85, 107, 47)`	Verde
Olive	`#808000`	`(128, 128, 0)`	Verde
OliveDrab	`#6B8E23`	`(107, 142, 35)`	Verde
YellowGreen	`#9ACD32`	`(154, 205, 50)`	Verde
LimeGreen	`#32CD32`	`(50, 205, 50)`	Verde
Lime	`#00FF00`	`(0, 255, 0)`	Verde
LawnGreen	`#7CFC00`	`(124, 252, 0)`	Verde
Chartreuse	`#7FFF00"	`(127, 255, 0)`	Verde
GreenYellow	`#ADFF2F`	`(173, 255, 47)`	Verde
SpringGreen	`#00FF7F`	`(0, 255, 127)`	Verde
MediumSpringGreen	`#00FA9A`	`(0, 250, 154)`	Verde
LightGreen	`#90EE90`	`(144, 238, 144)`	Verde
PaleGreen	`#98FB98`	`(152, 251, 152)`	Verde
DarkSeaGreen	`#8FBC8F`	`(143, 188, 143)`	Verde
MediumSeaGreen	`#3CB371`	`(60, 179, 113)`	Verde
SeaGreen	`#2E8B57`	`(46, 139, 87)`	Verde
ForestGreen	`#228B22`	`(34, 139, 34)`	Verde
Green	`#008000`	`(0, 128, 0)`	Verde
DarkGreen	`#006400`	`(0, 100, 0)`	Verde

Tons de Ciano e Cerceta (Cyan and Teal Colors)

Nome	HEX	RGB	Categoria
Aqua	`#00FFFF`	`(0, 255, 255)`	Ciano
Cyan	`#00FFFF`	`(0, 255, 255)`	Ciano
LightCyan	`#E0FFFF`	`(224, 255, 255)`	Ciano
PaleTurquoise	`#AFEEEE`	`(175, 238, 238)`	Ciano
Aquamarine	`#7FFFD4`	`(127, 255, 212)`	Ciano
Turquoise	`#40E0D0`	`(64, 224, 208)`	Ciano
MediumTurquoise	`#48D1CC`	`(72, 209, 204)`	Ciano
DarkTurquoise	`#00CED1`	`(0, 206, 209)`	Ciano
LightSeaGreen	`#20B2AA`	`(32, 178, 170)`	Ciano
CadetBlue	`#5F9EA0`	`(95, 158, 160)`	Ciano
DarkCyan	`#008B8B`	`(0, 139, 139)`	Ciano
Teal	`#008080`	`(0, 128, 128)`	Ciano

Tons de Azul (Blue Colors)

Nome	HEX	RGB	Categoria
LightSteelBlue	`#B0C4DE`	`(176, 196, 222)`	Azul
PowderBlue	`#B0E0E6`	`(176, 224, 230)`	Azul
LightBlue	`#ADD8E6`	`(173, 216, 230)`	Azul
SkyBlue	`#87CEEB`	`(135, 206, 235)`	Azul
LightSkyBlue	`#87CEFA`	`(135, 206, 250)`	Azul
DeepSkyBlue	`#00BFFF`	`(0, 191, 255)`	Azul
DodgerBlue	`#1E90FF`	`(30, 144, 255)`	Azul
CornflowerBlue	`#6495ED`	`(100, 149, 237)`	Azul
MediumSlateBlue	`#7B68EE`	`(123, 104, 238)`	Azul
RoyalBlue	`#4169E1`	`(65, 105, 225)`	Azul
Blue	`#0000FF`	`(0, 0, 255)`	Azul
MediumBlue	`#0000CD`	`(0, 0, 205)`	Azul
DarkBlue	`#00008B`	`(0, 0, 139)`	Azul
Navy	`#000080`	`(0, 0, 128)`	Azul
MidnightBlue	`#191970`	`(25, 25, 112)`	Azul

Tons de Roxo e Violeta (Purple and Violet Colors)

Nome	HEX	RGB	Categoria
Lavender	`#E6E6FA`	`(230, 230, 250)`	Roxo
Thistle	`#D8BFD8`	`(216, 191, 216)`	Roxo
Plum	`#DDA0DD`	`(221, 160, 221)`	Roxo
Violet	`#EE82EE`	`(238, 130, 238)`	Roxo
Orchid	`#DA70D6`	`(218, 112, 214)`	Roxo
Fuchsia	`#FF00FF`	`(255, 0, 255)`	Roxo
Magenta	`#FF00FF`	`(255, 0, 255)`	Roxo
MediumOrchid	`#BA55D3`	`(186, 85, 211)`	Roxo
MediumPurple	`#9370DB`	`(147, 112, 219)`	Roxo
BlueViolet	`#8A2BE2`	`(138, 43, 226)`	Roxo
DarkViolet	`#9400D3`	`(148, 0, 211)`	Roxo
DarkOrchid	`#9932CC`	`(153, 50, 204)`	Roxo
DarkMagenta	`#8B008B`	`(139, 0, 139)`	Roxo
Purple	`#800080`	`(128, 0, 128)`	Roxo
Indigo	`#4B0082`	`(75, 0, 130)`	Roxo
DarkSlateBlue	`#483D8B`	`(72, 61, 139)`	Roxo
SlateBlue	`#6A5ACD`	`(106, 90, 205)`	Roxo
RebeccaPurple	`#663399`	`(102, 51, 153)`	Roxo

Tons de Branco (White and Off-White Colors)

Nome	HEX	RGB	Categoria
White	`#FFFFFF`	`(255, 255, 255)`	Branco
Snow	`#FFFAFA`	`(255, 250, 250)`	Branco
HoneyDew	`#F0FFF0`	`(240, 255, 240)`	Branco
MintCream	`#F5FFFA`	`(245, 255, 250)`	Branco
Azure	`#F0FFFF`	`(240, 255, 255)`	Branco
AliceBlue	`#F0F8FF`	`(240, 248, 255)`	Branco
GhostWhite	`#F8F8FF`	`(248, 248, 255)`	Branco
WhiteSmoke	`#F5F5F5`	`(245, 245, 245)`	Branco
SeaShell	`#FFF5EE`	`(255, 245, 238)`	Branco
Beige	`#F5F5DC`	`(245, 245, 220)`	Branco
OldLace	`#FDF5E6`	`(253, 245, 230)`	Branco
FloralWhite	`#FFFAF0"	`(255, 250, 240)`	Branco
Ivory	`#FFFFF0`	`(255, 255, 240)`	Branco
AntiqueWhite	`#FAEBD7`	`(250, 235, 215)`	Branco
Linen	`#FAF0E6`	`(250, 240, 230)`	Branco
MistyRose	`#FFE4E1`	`(255, 228, 225)`	Branco
LavenderBlush	`#FFF0F5`	`(255, 240, 245)`	Branco

Tons de Cinza e Preto (Gray and Black Colors)

Nome	HEX	RGB	Categoria
Gainsboro	`#DCDCDC`	`(220, 220, 220)`	Cinza
LightGray	`#D3D3D3`	`(211, 211, 211)`	Cinza
LightGrey	`#D3D3D3`	`(211, 211, 211)`	Cinza
Silver	`#C0C0C0`	`(192, 192, 192)`	Cinza
DarkGray	`#A9A9A9`	`(169, 169, 169)`	Cinza
DarkGrey	`#A9A9A9`	`(169, 169, 169)`	Cinza
Gray	`#808080`	`(128, 128, 128)`	Cinza
Grey	`#808080"	`(128, 128, 128)`	Cinza
DimGray	`#696969`	`(105, 105, 105)`	Cinza
DimGrey	`#696969"	`(105, 105, 105)`	Cinza
LightSlateGray	`#778899`	`(119, 136, 153)`	Cinza
LightSlateGrey	`#778899"	`(119, 136, 153)`	Cinza
SlateGray	`#708090`	`(112, 128, 144)`	Cinza
SlateGrey	`#708090"	`(112, 128, 144)`	Cinza
DarkSlateGray	`#2F4F4F`	`(47, 79, 79)`	Cinza
DarkSlateGrey	`#2F4F4F"	`(47, 79, 79)`	Cinza
Black	`#000000`	`(0, 0, 0)`	Cinza

3. Como usar nomes de cores CSS

Usar esses nomes em seu código é simples. Eles podem ser aplicados a qualquer propriedade que aceite um valor <color>.

Propriedades CSS padrão

/* Usando o nome para a cor do texto */
h1 {
  color: Crimson;
}

/* Usando o nome para o fundo */
.alert {
  background-color: PapayaWhip;
  border: 1px solid OrangeRed;
}

Propriedades SVG

Os nomes de cores CSS também funcionam perfeitamente com atributos SVG:

<circle cx="50" cy="50" r="40" fill="RoyalBlue" stroke="MidnightBlue" stroke-width="2" />

A palavra-chave 'currentColor'

currentColor é um valor especial que herda o valor da propriedade color do elemento.

div {
  color: SeaGreen;
  border: 2px solid currentColor; /* A borda também será SeaGreen */
}

4. Perguntas frequentes (FAQ)

P: Os nomes de cores CSS diferenciam maiúsculas de minúsculas?

R: Não. Você pode escrever AliceBlue, aliceblue ou mesmo ALICEBLUE. Todos são tratados como a mesma cor. No entanto, CamelCase (como AliceBlue) é preferido por muitos desenvolvedores para legibilidade.

P: Quais nomes de cores são "Web-Safe"?

R: "Cores web-safe" são uma relíquia do passado quando os monitores suportavam apenas 256 cores. Hoje, todas as mais de 140 cores nomeadas do CSS são seguras para uso em qualquer dispositivo moderno.

P: Por que usar um nome de cor em vez de um código HEX?

R: Os nomes de cores são muito mais fáceis de lembrar e tornam seu código mais legível. background-color: White é instantaneamente compreensível, enquanto #FFFFFF requer um pequeno esforço mental de tradução. No entanto, para cores de marca precisas, HEX, RGB ou HSL ainda são as melhores escolhas.

P: Existem nomes duplicados?

R: Sim. Aqua e Cyan são exatamente iguais (#00FFFF), e Fuchsia e Magenta são iguais (#FF00FF). Além disso, muitas cores cinza têm as grafias "Gray" e "Grey" (por exemplo, DarkGray e DarkGrey).

P: Como lidar com problemas de contraste?

R: Ao usar cores nomeadas, certifique-se sempre de que haja contraste suficiente entre o texto e o fundo. Por exemplo, texto amarelo (Yellow) em um fundo branco (White) é quase impossível de ler e não atende aos padrões de acessibilidade (WCAG).

Ferramentas relacionadas no Tool3M

Conversor de cores: Converta instantaneamente essas cores nomeadas para os formatos HEX, RGB, HSL ou CMYK.
Imagem para Base64: Converta imagens em strings Base64 para uso em CSS/HTML.

Nomes de cores CSS: Guia de referência completo com HEX e RGB