Referência de Cores Nomeadas do CSS

Pesquise, filtre e copie as 148 cores nomeadas do CSS com seus valores HEX, RGB e HSL. Filtre por 12 famílias de cor - vermelho, laranja, amarelo, verde, ciano, azul, roxo, rosa, marrom, branco, cinza e preto. Clique em qualquer botão de copiar para copiar na hora o nome da cor, o HEX ou o valor RGB. Totalmente privado, 100% grátis e sem cadastro.

CSS Named Colors Reference

Search, filter, and copy all 146 CSS named colors. Click any copy button to copy the color name, HEX, or RGB value to your clipboard instantly.

Showing 146 of 146 CSS named colors

CSS Color Level 4

#ff0000

Red

red

rgb(255, 0, 0)

hsl(0, 100%, 50%)

#8b0000

Dark Red

darkred

rgb(139, 0, 0)

hsl(0, 100%, 27%)

#b22222

Firebrick

firebrick

rgb(178, 34, 34)

hsl(0, 68%, 42%)

#dc143c

Crimson

crimson

rgb(220, 20, 60)

hsl(348, 83%, 47%)

#cd5c5c

Indian Red

indianred

rgb(205, 92, 92)

hsl(0, 53%, 58%)

#f08080

Light Coral

lightcoral

rgb(240, 128, 128)

hsl(0, 79%, 72%)

#fa8072

Salmon

salmon

rgb(250, 128, 114)

hsl(6, 93%, 71%)

#e9967a

Dark Salmon

darksalmon

rgb(233, 150, 122)

hsl(15, 72%, 70%)

#ffa07a

Light Salmon

lightsalmon

rgb(255, 160, 122)

hsl(17, 100%, 74%)

#ff6347

Tomato

tomato

rgb(255, 99, 71)

hsl(9, 100%, 64%)

#ff4500

Orange Red

orangered

rgb(255, 69, 0)

hsl(16, 100%, 50%)

#ffa500

Orange

orange

rgb(255, 165, 0)

hsl(39, 100%, 50%)

#ff8c00

Dark Orange

darkorange

rgb(255, 140, 0)

hsl(33, 100%, 50%)

#ff7f50

Coral

coral

rgb(255, 127, 80)

hsl(16, 100%, 66%)

#ffff00

Yellow

yellow

rgb(255, 255, 0)

hsl(60, 100%, 50%)

#ffd700

Gold

gold

rgb(255, 215, 0)

hsl(51, 100%, 50%)

#ffffe0

Light Yellow

lightyellow

rgb(255, 255, 224)

hsl(60, 100%, 94%)

#fffacd

Lemon Chiffon

lemonchiffon

rgb(255, 250, 205)

hsl(54, 100%, 90%)

#fafad2

Light Goldenrod Yellow

lightgoldenrodyellow

rgb(250, 250, 210)

hsl(60, 80%, 90%)

#ffefd5

Papaya Whip

papayawhip

rgb(255, 239, 213)

hsl(37, 100%, 92%)

#ffe4b5

Moccasin

moccasin

rgb(255, 228, 181)

hsl(38, 100%, 85%)

#ffdab9

Peach Puff

peachpuff

rgb(255, 218, 185)

hsl(28, 100%, 86%)

#eee8aa

Pale Goldenrod

palegoldenrod

rgb(238, 232, 170)

hsl(55, 67%, 80%)

#f0e68c

Khaki

khaki

rgb(240, 230, 140)

hsl(54, 77%, 75%)

#bdb76b

Dark Khaki

darkkhaki

rgb(189, 183, 107)

hsl(56, 38%, 58%)

#008000

Green

green

rgb(0, 128, 0)

hsl(120, 100%, 25%)

#006400

Dark Green

darkgreen

rgb(0, 100, 0)

hsl(120, 100%, 20%)

#00ff00

Lime

lime

rgb(0, 255, 0)

hsl(120, 100%, 50%)

#32cd32

Lime Green

limegreen

rgb(50, 205, 50)

hsl(120, 61%, 50%)

#228b22

Forest Green

forestgreen

rgb(34, 139, 34)

hsl(120, 61%, 34%)

#2e8b57

Sea Green

seagreen

rgb(46, 139, 87)

hsl(146, 50%, 36%)

#8fbc8f

Dark Sea Green

darkseagreen

rgb(143, 188, 143)

hsl(120, 25%, 65%)

#3cb371

Medium Sea Green

mediumseagreen

rgb(60, 179, 113)

hsl(147, 50%, 47%)

#20b2aa

Light Sea Green

lightseagreen

rgb(32, 178, 170)

hsl(177, 70%, 41%)

#00ff7f

Spring Green

springgreen

rgb(0, 255, 127)

hsl(150, 100%, 50%)

#00fa9a

Medium Spring Green

mediumspringgreen

rgb(0, 250, 154)

hsl(157, 100%, 49%)

#adff2f

Green Yellow

greenyellow

rgb(173, 255, 47)

hsl(84, 100%, 59%)

#7fff00

Chartreuse

chartreuse

rgb(127, 255, 0)

hsl(90, 100%, 50%)

#7cfc00

Lawn Green

lawngreen

rgb(124, 252, 0)

hsl(90, 100%, 49%)

#9acd32

Yellow Green

yellowgreen

rgb(154, 205, 50)

hsl(80, 61%, 50%)

#6b8e23

Olive Drab

olivedrab

rgb(107, 142, 35)

hsl(80, 60%, 35%)

#808000

Olive

olive

rgb(128, 128, 0)

hsl(60, 100%, 25%)

#556b2f

Dark Olive Green

darkolivegreen

rgb(85, 107, 47)

hsl(82, 39%, 30%)

#98fb98

Pale Green

palegreen

rgb(152, 251, 152)

hsl(120, 93%, 79%)

#90ee90

Light Green

lightgreen

rgb(144, 238, 144)

hsl(120, 73%, 75%)

#66cdaa

Medium Aquamarine

mediumaquamarine

rgb(102, 205, 170)

hsl(160, 51%, 60%)

#00ffff

Cyan

cyan

rgb(0, 255, 255)

hsl(180, 100%, 50%)

#00ffff

Aqua

aqua

rgb(0, 255, 255)

hsl(180, 100%, 50%)

#008b8b

Dark Cyan

darkcyan

rgb(0, 139, 139)

hsl(180, 100%, 27%)

#008080

Teal

teal

rgb(0, 128, 128)

hsl(180, 100%, 25%)

#7fffd4

Aquamarine

aquamarine

rgb(127, 255, 212)

hsl(160, 100%, 75%)

#40e0d0

Turquoise

turquoise

rgb(64, 224, 208)

hsl(174, 72%, 56%)

#48d1cc

Medium Turquoise

mediumturquoise

rgb(72, 209, 204)

hsl(178, 60%, 55%)

#00ced1

Dark Turquoise

darkturquoise

rgb(0, 206, 209)

hsl(181, 100%, 41%)

#e0ffff

Light Cyan

lightcyan

rgb(224, 255, 255)

hsl(180, 100%, 94%)

#afeeee

Pale Turquoise

paleturquoise

rgb(175, 238, 238)

hsl(180, 65%, 81%)

#b0e0e6

Powder Blue

powderblue

rgb(176, 224, 230)

hsl(187, 52%, 80%)

#add8e6

Light Blue

lightblue

rgb(173, 216, 230)

hsl(195, 53%, 79%)

#0000ff

Blue

blue

rgb(0, 0, 255)

hsl(240, 100%, 50%)

#00008b

Dark Blue

darkblue

rgb(0, 0, 139)

hsl(240, 100%, 27%)

#000080

Navy

navy

rgb(0, 0, 128)

hsl(240, 100%, 25%)

#0000cd

Medium Blue

mediumblue

rgb(0, 0, 205)

hsl(240, 100%, 40%)

#4169e1

Royal Blue

royalblue

rgb(65, 105, 225)

hsl(225, 73%, 57%)

#6495ed

Cornflower Blue

cornflowerblue

rgb(100, 149, 237)

hsl(219, 79%, 66%)

#1e90ff

Dodger Blue

dodgerblue

rgb(30, 144, 255)

hsl(210, 100%, 56%)

#00bfff

Deep Sky Blue

deepskyblue

rgb(0, 191, 255)

hsl(195, 100%, 50%)

#87ceeb

Sky Blue

skyblue

rgb(135, 206, 235)

hsl(197, 71%, 73%)

#87cefa

Light Sky Blue

lightskyblue

rgb(135, 206, 250)

hsl(203, 92%, 75%)

#4682b4

Steel Blue

steelblue

rgb(70, 130, 180)

hsl(207, 44%, 49%)

#b0c4de

Light Steel Blue

lightsteelblue

rgb(176, 196, 222)

hsl(214, 41%, 78%)

#5f9ea0

Cadet Blue

cadetblue

rgb(95, 158, 160)

hsl(182, 25%, 50%)

#191970

Midnight Blue

midnightblue

rgb(25, 25, 112)

hsl(240, 64%, 27%)

#f0f8ff

Alice Blue

aliceblue

rgb(240, 248, 255)

hsl(208, 100%, 97%)

#e6e6fa

Lavender

lavender

rgb(230, 230, 250)

hsl(240, 67%, 94%)

#f8f8ff

Ghost White

ghostwhite

rgb(248, 248, 255)

hsl(240, 100%, 99%)

#f0ffff

Azure

azure

rgb(240, 255, 255)

hsl(180, 100%, 97%)

#800080

Purple

purple

rgb(128, 0, 128)

hsl(300, 100%, 25%)

#9400d3

Dark Violet

darkviolet

rgb(148, 0, 211)

hsl(282, 100%, 41%)

#9932cc

Dark Orchid

darkorchid

rgb(153, 50, 204)

hsl(280, 61%, 50%)

#8b008b

Dark Magenta

darkmagenta

rgb(139, 0, 139)

hsl(300, 100%, 27%)

#8a2be2

Blue Violet

blueviolet

rgb(138, 43, 226)

hsl(271, 76%, 53%)

#4b0082

Indigo

indigo

rgb(75, 0, 130)

hsl(275, 100%, 25%)

#6a5acd

Slate Blue

slateblue

rgb(106, 90, 205)

hsl(248, 53%, 58%)

#7b68ee

Medium Slate Blue

mediumslateblue

rgb(123, 104, 238)

hsl(249, 80%, 67%)

#483d8b

Dark Slate Blue

darkslateblue

rgb(72, 61, 139)

hsl(248, 39%, 39%)

#9370db

Medium Purple

mediumpurple

rgb(147, 112, 219)

hsl(260, 60%, 65%)

#663399

Rebecca Purple

rebeccapurple

rgb(102, 51, 153)

hsl(270, 50%, 40%)

#ee82ee

Violet

violet

rgb(238, 130, 238)

hsl(300, 76%, 72%)

#da70d6

Orchid

orchid

rgb(218, 112, 214)

hsl(302, 59%, 65%)

#ba55d3

Medium Orchid

mediumorchid

rgb(186, 85, 211)

hsl(288, 59%, 58%)

#dda0dd

Plum

plum

rgb(221, 160, 221)

hsl(300, 47%, 75%)

#d8bfd8

Thistle

thistle

rgb(216, 191, 216)

hsl(300, 24%, 80%)

#fff0f5

Lavender Blush

lavenderblush

rgb(255, 240, 245)

hsl(340, 100%, 97%)

#ff00ff

Magenta

magenta

rgb(255, 0, 255)

hsl(300, 100%, 50%)

#ff00ff

Fuchsia

fuchsia

rgb(255, 0, 255)

hsl(300, 100%, 50%)

#ff1493

Deep Pink

deeppink

rgb(255, 20, 147)

hsl(328, 100%, 54%)

#ff69b4

Hot Pink

hotpink

rgb(255, 105, 180)

hsl(330, 100%, 71%)

#ffc0cb

Pink

pink

rgb(255, 192, 203)

hsl(350, 100%, 88%)

#ffb6c1

Light Pink

lightpink

rgb(255, 182, 193)

hsl(351, 100%, 86%)

#db7093

Pale Violet Red

palevioletred

rgb(219, 112, 147)

hsl(340, 60%, 65%)

#c71585

Medium Violet Red

mediumvioletred

rgb(199, 21, 133)

hsl(322, 81%, 43%)

#ffe4e1

Misty Rose

mistyrose

rgb(255, 228, 225)

hsl(6, 100%, 94%)

#a52a2a

Brown

brown

rgb(165, 42, 42)

hsl(0, 59%, 41%)

#8b4513

Saddle Brown

saddlebrown

rgb(139, 69, 19)

hsl(25, 76%, 31%)

#a0522d

Sienna

sienna

rgb(160, 82, 45)

hsl(19, 56%, 40%)

#d2691e

Chocolate

chocolate

rgb(210, 105, 30)

hsl(25, 75%, 47%)

#cd853f

Peru

peru

rgb(205, 133, 63)

hsl(30, 59%, 53%)

#f4a460

Sandy Brown

sandybrown

rgb(244, 164, 96)

hsl(28, 87%, 67%)

#deb887

Burlywood

burlywood

rgb(222, 184, 135)

hsl(34, 57%, 70%)

#d2b48c

Tan

tan

rgb(210, 180, 140)

hsl(34, 44%, 69%)

#bc8f8f

Rosy Brown

rosybrown

rgb(188, 143, 143)

hsl(0, 25%, 65%)

#800000

Maroon

maroon

rgb(128, 0, 0)

hsl(0, 100%, 25%)

#f5deb3

Wheat

wheat

rgb(245, 222, 179)

hsl(39, 77%, 83%)

#ffdead

Navajo White

navajowhite

rgb(255, 222, 173)

hsl(36, 100%, 84%)

#ffe4c4

Bisque

bisque

rgb(255, 228, 196)

hsl(33, 100%, 88%)

#ffebcd

Blanched Almond

blanchedalmond

rgb(255, 235, 205)

hsl(36, 100%, 90%)

#fff8dc

Cornsilk

cornsilk

rgb(255, 248, 220)

hsl(48, 100%, 93%)

#fdf5e6

Old Lace

oldlace

rgb(253, 245, 230)

hsl(39, 85%, 95%)

#faf0e6

Linen

linen

rgb(250, 240, 230)

hsl(30, 67%, 94%)

#faebd7

Antique White

antiquewhite

rgb(250, 235, 215)

hsl(34, 78%, 91%)

#ffffff

White

white

rgb(255, 255, 255)

hsl(0, 0%, 100%)

#fffafa

Snow

snow

rgb(255, 250, 250)

hsl(0, 100%, 99%)

#f0fff0

Honeydew

honeydew

rgb(240, 255, 240)

hsl(120, 100%, 97%)

#f5fffa

Mint Cream

mintcream

rgb(245, 255, 250)

hsl(150, 100%, 98%)

#fffff0

Ivory

ivory

rgb(255, 255, 240)

hsl(60, 100%, 97%)

#fffaf0

Floral White

floralwhite

rgb(255, 250, 240)

hsl(40, 100%, 97%)

#fff5ee

Seashell

seashell

rgb(255, 245, 238)

hsl(25, 100%, 97%)

#f5f5dc

Beige

beige

rgb(245, 245, 220)

hsl(60, 56%, 91%)

#f5f5f5

White Smoke

whitesmoke

rgb(245, 245, 245)

hsl(0, 0%, 96%)

#808080

Gray

gray

rgb(128, 128, 128)

hsl(0, 0%, 50%)

#808080

Grey

grey

rgb(128, 128, 128)

hsl(0, 0%, 50%)

#a9a9a9

Dark Gray

darkgray

rgb(169, 169, 169)

hsl(0, 0%, 66%)

#a9a9a9

Dark Grey

darkgrey

rgb(169, 169, 169)

hsl(0, 0%, 66%)

#d3d3d3

Light Gray

lightgray

rgb(211, 211, 211)

hsl(0, 0%, 83%)

#d3d3d3

Light Grey

lightgrey

rgb(211, 211, 211)

hsl(0, 0%, 83%)

#c0c0c0

Silver

silver

rgb(192, 192, 192)

hsl(0, 0%, 75%)

#dcdcdc

Gainsboro

gainsboro

rgb(220, 220, 220)

hsl(0, 0%, 86%)

#696969

Dim Gray

dimgray

rgb(105, 105, 105)

hsl(0, 0%, 41%)

#696969

Dim Grey

dimgrey

rgb(105, 105, 105)

hsl(0, 0%, 41%)

#708090

Slate Gray

slategray

rgb(112, 128, 144)

hsl(210, 13%, 50%)

#708090

Slate Grey

slategrey

rgb(112, 128, 144)

hsl(210, 13%, 50%)

#778899

Light Slate Gray

lightslategray

rgb(119, 136, 153)

hsl(210, 14%, 53%)

#778899

Light Slate Grey

lightslategrey

rgb(119, 136, 153)

hsl(210, 14%, 53%)

#2f4f4f

Dark Slate Gray

darkslategray

rgb(47, 79, 79)

hsl(180, 25%, 25%)

#2f4f4f

Dark Slate Grey

darkslategrey

rgb(47, 79, 79)

hsl(180, 25%, 25%)

#000000

Black

black

rgb(0, 0, 0)

hsl(0, 0%, 0%)

Por que usar nossa referência de cores nomeadas do CSS?

Busca instantânea nas 148 cores: A referência de cores nomeadas do CSS pesquisa em tempo real entre nomes de cor, valores HEX, valores RGB e valores HSL. Encontre qualquer cor na hora digitando o nome, o código hex ou o valor RGB.
Filtre por família de cor: Filtre a referência por 12 famílias - vermelho, laranja, amarelo, verde, ciano, azul, roxo, rosa, marrom, branco, cinza e preto. Navegue rapidamente por todas as cores de uma faixa de tom específica.
100% privado - sem upload: A referência de cores nomeadas do CSS roda inteiramente no seu navegador. Nenhum dado é enviado a servidor algum - segura para uso offline e trabalho de design privado.
Grátis e sem limites: Explore e copie cores nomeadas do CSS sem limite, sem cadastro, sem assinatura e sem teto de uso. A referência de cores nomeadas do CSS é totalmente grátis para sempre, sem anúncios bloqueando a interface.

Casos de uso comuns da referência de cores nomeadas do CSS

Desenvolvimento CSS e HTML: Desenvolvedores frontend usam a referência de cores nomeadas do CSS para consultar rapidamente nomes de cor para usar em folhas de estilo CSS e atributos HTML. Copie o nome exato da cor CSS, o HEX ou o valor RGB com um clique.
Design e prototipagem: Designers usam a referência de cores nomeadas do CSS para encontrar cores nomeadas seguras para mockups e protótipos. O filtro por família de cor facilita navegar por todos os azuis, verdes ou vermelhos de uma vez.
Acessibilidade e verificação de contraste: Especialistas em acessibilidade usam a referência para identificar cores nomeadas e depois verificar suas taxas de contraste. Os valores HEX e RGB podem ser colados diretamente em ferramentas de verificação de contraste.
Aprender CSS e design web: Estudantes e iniciantes usam a referência de cores nomeadas do CSS para aprender quais nomes de cor existem no CSS. Ver a amostra real ao lado do nome facilita memorizar qual nome corresponde a cada cor.
Desenvolvimento de templates de e-mail: Desenvolvedores de e-mail usam a referência para encontrar cores nomeadas seguras em clientes de e-mail HTML. As cores nomeadas têm amplo suporte em clientes que podem não aceitar funções de cor CSS modernas.
Documentação de design systems: Equipes de design system usam a referência para documentar quais cores nomeadas do CSS são usadas em seu sistema e para encontrar equivalências HEX para tokens de design e estilos de cor do Figma.

O que são cores nomeadas do CSS?

Cores nomeadas do CSS são palavras-chave de cor predefinidas que podem ser usadas diretamente no CSS sem especificar um valor HEX, RGB ou HSL. Por exemplo, color: cornflowerblue equivale a color: #6495ed. A especificação CSS define 148 cores nomeadas, de cores básicas como red e blue a nomes mais descritivos como rebeccapurple e papayawhip. Nossa referência de cores nomeadas do CSS lista todas as 148 com seus equivalentes HEX, RGB e HSL.

Como funciona nossa referência de cores nomeadas do CSS

Pesquise por nome, HEX ou RGB: Digite qualquer parte de um nome de cor (por exemplo, «blue», «coral»), um valor HEX (por exemplo, «#ff7f50») ou um valor RGB para filtrar a referência na hora.
Filtre por família de cor: Clique em qualquer chip de família - Vermelho, Laranja, Amarelo, Verde, Ciano, Azul, Roxo, Rosa, Marrom, Branco, Cinza ou Preto - para mostrar apenas as cores daquela família. Combine com a busca para um filtro preciso.
Copie com um clique: Cada cartão de cor tem três botões de copiar - Nome, HEX e RGB. Clique em qualquer um para copiar o valor para a área de transferência na hora. Todo o processamento roda localmente no seu navegador.

O que a referência de cores nomeadas do CSS inclui

Nome da cor CSS: a palavra-chave exata para usar no CSS (por exemplo, cornflowerblue).
Valor HEX: o equivalente hexadecimal de 6 dígitos (por exemplo, #6495ed).
Valor RGB: os valores dos canais vermelho, verde e azul (por exemplo, rgb(100, 149, 237)).
Valor HSL: os valores de matiz, saturação e luminosidade (por exemplo, hsl(219, 79%, 66%)).

Observações sobre cores duplicadas

Algumas cores nomeadas do CSS são duplicatas exatas entre si. Por exemplo, aqua e cyan correspondem ambos a #00ffff, e fuchsia e magenta correspondem ambos a #ff00ff. Do mesmo modo, gray e grey (e suas variantes) são idênticos. A referência de cores nomeadas do CSS inclui os 148 nomes oficiais, inclusive essas duplicatas, já que ambas as grafias são CSS válido.

Perguntas frequentes

A referência de cores nomeadas do CSS é uma lista pesquisável e filtrável das 148 cores nomeadas do CSS com seus valores HEX, RGB e HSL. Você pode pesquisar por nome da cor, HEX ou valor RGB, filtrar por família de cor e copiar qualquer valor com um clique. Tudo roda no seu navegador, sem enviar dados a nenhum servidor.

A especificação CSS Color Level 4 define 148 cores nomeadas. Inclui as 16 cores básicas do HTML 4.01, as 140 cores X11 adotadas pelo CSS2.1 e a cor especial «rebeccapurple», adicionada no CSS Color Level 4 em homenagem a Rebecca Meyer.

Sim. As 148 cores nomeadas do CSS são suportadas em todos os navegadores modernos, incluindo Chrome, Firefox, Safari, Edge e Opera. Também funcionam em navegadores antigos desde o IE9. As cores nomeadas são um dos recursos CSS com suporte mais universal.

Sim. A referência de cores nomeadas do CSS é 100% grátis, sem cadastro, sem recursos premium e sem limites de uso. Explore e copie cores ilimitadas sem restrições nem custos ocultos.

A especificação CSS inclui tanto a grafia do inglês americano (gray) quanto a do britânico (grey) para várias cores, e ambas são válidas em CSS. Da mesma forma, «aqua» e «cyan» são cores idênticas com nomes diferentes, assim como «fuchsia» e «magenta». A referência inclui os 148 nomes oficiais, inclusive essas duplicatas.

Rebeccapurple (#663399) foi adicionada à especificação CSS Color Level 4 em 2014 em homenagem a Rebecca Alison Meyer, filha do defensor dos padrões web Eric Meyer, que faleceu no dia em que completou seis anos. É a única cor nomeada do CSS dedicada a uma pessoa específica.

O Tailwind CSS não usa cores nomeadas do CSS na paleta padrão - ele usa seu próprio sistema de cores com escalas numéricas (por exemplo, blue-500). Ainda assim, você pode usar cores nomeadas do CSS em valores arbitrários do Tailwind: text-[cornflowerblue] ou bg-[coral]. Também é possível adicionar cores nomeadas ao tema do seu tailwind.config.js.

Não. Os nomes de cores do CSS não diferenciam maiúsculas de minúsculas. «CornflowerBlue», «cornflowerblue» e «CORNFLOWERBLUE» são válidos e equivalentes. O estilo convencional é tudo em minúsculas, que é o que a referência de cores nomeadas do CSS exibe.