PT-BR

Cores HTML

Esta tabela de cores HTML mostra as 148 cores CSS com nome, código HEX e valores RGB e HSL. Busque por nome ou código, filtre por família de cor, ordene por nome, matiz ou luminosidade e copie um valor com um clique: tudo aparece na hora, inclusive no celular.

Fonte: W3C – CSS Color Module Level 4: Named Colors (148 nomes de cores com seus valores). Atualizado em: .

148 de 148 cores

  • aliceblue#F0F8FFrgb(240, 248, 255)hsl(208, 100%, 97%)Contraste do texto com preto: 19,6 : 1
  • antiquewhite#FAEBD7rgb(250, 235, 215)hsl(34, 78%, 91%)Contraste do texto com preto: 17,9 : 1
  • aqua#00FFFFrgb(0, 255, 255)hsl(180, 100%, 50%)Contraste do texto com preto: 16,7 : 1
  • aquamarine#7FFFD4rgb(127, 255, 212)hsl(160, 100%, 75%)Contraste do texto com preto: 17,2 : 1
  • azure#F0FFFFrgb(240, 255, 255)hsl(180, 100%, 97%)Contraste do texto com preto: 20,5 : 1
  • beige#F5F5DCrgb(245, 245, 220)hsl(60, 56%, 91%)Contraste do texto com preto: 19,0 : 1
  • bisque#FFE4C4rgb(255, 228, 196)hsl(33, 100%, 88%)Contraste do texto com preto: 17,1 : 1
  • black#000000rgb(0, 0, 0)hsl(0, 0%, 0%)Contraste do texto com branco: 21,0 : 1
  • blanchedalmond#FFEBCDrgb(255, 235, 205)hsl(36, 100%, 90%)Contraste do texto com preto: 18,0 : 1
  • blue#0000FFrgb(0, 0, 255)hsl(240, 100%, 50%)Contraste do texto com branco: 8,6 : 1
  • blueviolet#8A2BE2rgb(138, 43, 226)hsl(271, 76%, 53%)Contraste do texto com branco: 6,0 : 1
  • brown#A52A2Argb(165, 42, 42)hsl(0, 59%, 41%)Contraste do texto com branco: 7,1 : 1
  • burlywood#DEB887rgb(222, 184, 135)hsl(34, 57%, 70%)Contraste do texto com preto: 11,3 : 1
  • cadetblue#5F9EA0rgb(95, 158, 160)hsl(182, 25%, 50%)Contraste do texto com preto: 6,9 : 1
  • chartreuse#7FFF00rgb(127, 255, 0)hsl(90, 100%, 50%)Contraste do texto com preto: 16,2 : 1
  • chocolate#D2691Ergb(210, 105, 30)hsl(25, 75%, 47%)Contraste do texto com preto: 5,8 : 1
  • coral#FF7F50rgb(255, 127, 80)hsl(16, 100%, 66%)Contraste do texto com preto: 8,4 : 1
  • cornflowerblue#6495EDrgb(100, 149, 237)hsl(219, 79%, 66%)Contraste do texto com preto: 7,1 : 1
  • cornsilk#FFF8DCrgb(255, 248, 220)hsl(48, 100%, 93%)Contraste do texto com preto: 19,7 : 1
  • crimson#DC143Crgb(220, 20, 60)hsl(348, 83%, 47%)Contraste do texto com branco: 5,0 : 1
  • cyan#00FFFFrgb(0, 255, 255)hsl(180, 100%, 50%)Contraste do texto com preto: 16,7 : 1
  • darkblue#00008Brgb(0, 0, 139)hsl(240, 100%, 27%)Contraste do texto com branco: 15,3 : 1
  • darkcyan#008B8Brgb(0, 139, 139)hsl(180, 100%, 27%)Contraste do texto com preto: 5,1 : 1
  • darkgoldenrod#B8860Brgb(184, 134, 11)hsl(43, 89%, 38%)Contraste do texto com preto: 6,5 : 1
  • darkgray#A9A9A9rgb(169, 169, 169)hsl(0, 0%, 66%)Contraste do texto com preto: 8,9 : 1
  • darkgreen#006400rgb(0, 100, 0)hsl(120, 100%, 20%)Contraste do texto com branco: 7,4 : 1
  • darkgrey#A9A9A9rgb(169, 169, 169)hsl(0, 0%, 66%)Contraste do texto com preto: 8,9 : 1
  • darkkhaki#BDB76Brgb(189, 183, 107)hsl(56, 38%, 58%)Contraste do texto com preto: 10,1 : 1
  • darkmagenta#8B008Brgb(139, 0, 139)hsl(300, 100%, 27%)Contraste do texto com branco: 8,5 : 1
  • darkolivegreen#556B2Frgb(85, 107, 47)hsl(82, 39%, 30%)Contraste do texto com branco: 5,9 : 1
  • darkorange#FF8C00rgb(255, 140, 0)hsl(33, 100%, 50%)Contraste do texto com preto: 9,0 : 1
  • darkorchid#9932CCrgb(153, 50, 204)hsl(280, 61%, 50%)Contraste do texto com branco: 5,7 : 1
  • darkred#8B0000rgb(139, 0, 0)hsl(0, 100%, 27%)Contraste do texto com branco: 10,0 : 1
  • darksalmon#E9967Argb(233, 150, 122)hsl(15, 72%, 70%)Contraste do texto com preto: 9,1 : 1
  • darkseagreen#8FBC8Frgb(143, 188, 143)hsl(120, 25%, 65%)Contraste do texto com preto: 9,8 : 1
  • darkslateblue#483D8Brgb(72, 61, 139)hsl(248, 39%, 39%)Contraste do texto com branco: 9,1 : 1
  • darkslategray#2F4F4Frgb(47, 79, 79)hsl(180, 25%, 25%)Contraste do texto com branco: 8,9 : 1
  • darkslategrey#2F4F4Frgb(47, 79, 79)hsl(180, 25%, 25%)Contraste do texto com branco: 8,9 : 1
  • darkturquoise#00CED1rgb(0, 206, 209)hsl(181, 100%, 41%)Contraste do texto com preto: 10,7 : 1
  • darkviolet#9400D3rgb(148, 0, 211)hsl(282, 100%, 41%)Contraste do texto com branco: 6,6 : 1
  • deeppink#FF1493rgb(255, 20, 147)hsl(328, 100%, 54%)Contraste do texto com preto: 5,8 : 1
  • deepskyblue#00BFFFrgb(0, 191, 255)hsl(195, 100%, 50%)Contraste do texto com preto: 9,9 : 1
  • dimgray#696969rgb(105, 105, 105)hsl(0, 0%, 41%)Contraste do texto com branco: 5,5 : 1
  • dimgrey#696969rgb(105, 105, 105)hsl(0, 0%, 41%)Contraste do texto com branco: 5,5 : 1
  • dodgerblue#1E90FFrgb(30, 144, 255)hsl(210, 100%, 56%)Contraste do texto com preto: 6,5 : 1
  • firebrick#B22222rgb(178, 34, 34)hsl(0, 68%, 42%)Contraste do texto com branco: 6,7 : 1
  • floralwhite#FFFAF0rgb(255, 250, 240)hsl(40, 100%, 97%)Contraste do texto com preto: 20,2 : 1
  • forestgreen#228B22rgb(34, 139, 34)hsl(120, 61%, 34%)Contraste do texto com preto: 4,8 : 1
  • fuchsia#FF00FFrgb(255, 0, 255)hsl(300, 100%, 50%)Contraste do texto com preto: 6,7 : 1
  • gainsboro#DCDCDCrgb(220, 220, 220)hsl(0, 0%, 86%)Contraste do texto com preto: 15,3 : 1
  • ghostwhite#F8F8FFrgb(248, 248, 255)hsl(240, 100%, 99%)Contraste do texto com preto: 19,9 : 1
  • gold#FFD700rgb(255, 215, 0)hsl(51, 100%, 50%)Contraste do texto com preto: 15,0 : 1
  • goldenrod#DAA520rgb(218, 165, 32)hsl(43, 74%, 49%)Contraste do texto com preto: 9,4 : 1
  • gray#808080rgb(128, 128, 128)hsl(0, 0%, 50%)Contraste do texto com preto: 5,3 : 1
  • green#008000rgb(0, 128, 0)hsl(120, 100%, 25%)Contraste do texto com branco: 5,1 : 1
  • greenyellow#ADFF2Frgb(173, 255, 47)hsl(84, 100%, 59%)Contraste do texto com preto: 17,1 : 1
  • grey#808080rgb(128, 128, 128)hsl(0, 0%, 50%)Contraste do texto com preto: 5,3 : 1
  • honeydew#F0FFF0rgb(240, 255, 240)hsl(120, 100%, 97%)Contraste do texto com preto: 20,3 : 1
  • hotpink#FF69B4rgb(255, 105, 180)hsl(330, 100%, 71%)Contraste do texto com preto: 7,9 : 1
  • indianred#CD5C5Crgb(205, 92, 92)hsl(0, 53%, 58%)Contraste do texto com preto: 5,3 : 1
  • indigo#4B0082rgb(75, 0, 130)hsl(275, 100%, 25%)Contraste do texto com branco: 13,0 : 1
  • ivory#FFFFF0rgb(255, 255, 240)hsl(60, 100%, 97%)Contraste do texto com preto: 20,8 : 1
  • khaki#F0E68Crgb(240, 230, 140)hsl(54, 77%, 75%)Contraste do texto com preto: 16,4 : 1
  • lavender#E6E6FArgb(230, 230, 250)hsl(240, 67%, 94%)Contraste do texto com preto: 17,1 : 1
  • lavenderblush#FFF0F5rgb(255, 240, 245)hsl(340, 100%, 97%)Contraste do texto com preto: 19,0 : 1
  • lawngreen#7CFC00rgb(124, 252, 0)hsl(90, 100%, 49%)Contraste do texto com preto: 15,8 : 1
  • lemonchiffon#FFFACDrgb(255, 250, 205)hsl(54, 100%, 90%)Contraste do texto com preto: 19,8 : 1
  • lightblue#ADD8E6rgb(173, 216, 230)hsl(195, 53%, 79%)Contraste do texto com preto: 13,7 : 1
  • lightcoral#F08080rgb(240, 128, 128)hsl(0, 79%, 72%)Contraste do texto com preto: 8,1 : 1
  • lightcyan#E0FFFFrgb(224, 255, 255)hsl(180, 100%, 94%)Contraste do texto com preto: 19,9 : 1
  • lightgoldenrodyellow#FAFAD2rgb(250, 250, 210)hsl(60, 80%, 90%)Contraste do texto com preto: 19,7 : 1
  • lightgray#D3D3D3rgb(211, 211, 211)hsl(0, 0%, 83%)Contraste do texto com preto: 14,0 : 1
  • lightgreen#90EE90rgb(144, 238, 144)hsl(120, 73%, 75%)Contraste do texto com preto: 14,8 : 1
  • lightgrey#D3D3D3rgb(211, 211, 211)hsl(0, 0%, 83%)Contraste do texto com preto: 14,0 : 1
  • lightpink#FFB6C1rgb(255, 182, 193)hsl(351, 100%, 86%)Contraste do texto com preto: 12,7 : 1
  • lightsalmon#FFA07Argb(255, 160, 122)hsl(17, 100%, 74%)Contraste do texto com preto: 10,6 : 1
  • lightseagreen#20B2AArgb(32, 178, 170)hsl(177, 70%, 41%)Contraste do texto com preto: 8,0 : 1
  • lightskyblue#87CEFArgb(135, 206, 250)hsl(203, 92%, 75%)Contraste do texto com preto: 12,2 : 1
  • lightslategray#778899rgb(119, 136, 153)hsl(210, 14%, 53%)Contraste do texto com preto: 5,8 : 1
  • lightslategrey#778899rgb(119, 136, 153)hsl(210, 14%, 53%)Contraste do texto com preto: 5,8 : 1
  • lightsteelblue#B0C4DErgb(176, 196, 222)hsl(214, 41%, 78%)Contraste do texto com preto: 11,8 : 1
  • lightyellow#FFFFE0rgb(255, 255, 224)hsl(60, 100%, 94%)Contraste do texto com preto: 20,6 : 1
  • lime#00FF00rgb(0, 255, 0)hsl(120, 100%, 50%)Contraste do texto com preto: 15,3 : 1
  • limegreen#32CD32rgb(50, 205, 50)hsl(120, 61%, 50%)Contraste do texto com preto: 9,9 : 1
  • linen#FAF0E6rgb(250, 240, 230)hsl(30, 67%, 94%)Contraste do texto com preto: 18,7 : 1
  • magenta#FF00FFrgb(255, 0, 255)hsl(300, 100%, 50%)Contraste do texto com preto: 6,7 : 1
  • maroon#800000rgb(128, 0, 0)hsl(0, 100%, 25%)Contraste do texto com branco: 10,9 : 1
  • mediumaquamarine#66CDAArgb(102, 205, 170)hsl(160, 51%, 60%)Contraste do texto com preto: 10,9 : 1
  • mediumblue#0000CDrgb(0, 0, 205)hsl(240, 100%, 40%)Contraste do texto com branco: 11,2 : 1
  • mediumorchid#BA55D3rgb(186, 85, 211)hsl(288, 59%, 58%)Contraste do texto com preto: 5,3 : 1
  • mediumpurple#9370DBrgb(147, 112, 219)hsl(260, 60%, 65%)Contraste do texto com preto: 5,6 : 1
  • mediumseagreen#3CB371rgb(60, 179, 113)hsl(147, 50%, 47%)Contraste do texto com preto: 7,9 : 1
  • mediumslateblue#7B68EErgb(123, 104, 238)hsl(249, 80%, 67%)Contraste do texto com preto: 5,1 : 1
  • mediumspringgreen#00FA9Argb(0, 250, 154)hsl(157, 100%, 49%)Contraste do texto com preto: 15,1 : 1
  • mediumturquoise#48D1CCrgb(72, 209, 204)hsl(178, 60%, 55%)Contraste do texto com preto: 11,3 : 1
  • mediumvioletred#C71585rgb(199, 21, 133)hsl(322, 81%, 43%)Contraste do texto com branco: 5,4 : 1
  • midnightblue#191970rgb(25, 25, 112)hsl(240, 64%, 27%)Contraste do texto com branco: 14,8 : 1
  • mintcream#F5FFFArgb(245, 255, 250)hsl(150, 100%, 98%)Contraste do texto com preto: 20,6 : 1
  • mistyrose#FFE4E1rgb(255, 228, 225)hsl(6, 100%, 94%)Contraste do texto com preto: 17,4 : 1
  • moccasin#FFE4B5rgb(255, 228, 181)hsl(38, 100%, 85%)Contraste do texto com preto: 17,0 : 1
  • navajowhite#FFDEADrgb(255, 222, 173)hsl(36, 100%, 84%)Contraste do texto com preto: 16,3 : 1
  • navy#000080rgb(0, 0, 128)hsl(240, 100%, 25%)Contraste do texto com branco: 16,0 : 1
  • oldlace#FDF5E6rgb(253, 245, 230)hsl(39, 85%, 95%)Contraste do texto com preto: 19,4 : 1
  • olive#808000rgb(128, 128, 0)hsl(60, 100%, 25%)Contraste do texto com preto: 5,0 : 1
  • olivedrab#6B8E23rgb(107, 142, 35)hsl(80, 60%, 35%)Contraste do texto com preto: 5,5 : 1
  • orange#FFA500rgb(255, 165, 0)hsl(39, 100%, 50%)Contraste do texto com preto: 10,6 : 1
  • orangered#FF4500rgb(255, 69, 0)hsl(16, 100%, 50%)Contraste do texto com preto: 6,1 : 1
  • orchid#DA70D6rgb(218, 112, 214)hsl(302, 59%, 65%)Contraste do texto com preto: 7,3 : 1
  • palegoldenrod#EEE8AArgb(238, 232, 170)hsl(55, 67%, 80%)Contraste do texto com preto: 16,8 : 1
  • palegreen#98FB98rgb(152, 251, 152)hsl(120, 93%, 79%)Contraste do texto com preto: 16,6 : 1
  • paleturquoise#AFEEEErgb(175, 238, 238)hsl(180, 65%, 81%)Contraste do texto com preto: 16,3 : 1
  • palevioletred#DB7093rgb(219, 112, 147)hsl(340, 60%, 65%)Contraste do texto com preto: 6,8 : 1
  • papayawhip#FFEFD5rgb(255, 239, 213)hsl(37, 100%, 92%)Contraste do texto com preto: 18,6 : 1
  • peachpuff#FFDAB9rgb(255, 218, 185)hsl(28, 100%, 86%)Contraste do texto com preto: 16,0 : 1
  • peru#CD853Frgb(205, 133, 63)hsl(30, 59%, 53%)Contraste do texto com preto: 7,0 : 1
  • pink#FFC0CBrgb(255, 192, 203)hsl(350, 100%, 88%)Contraste do texto com preto: 13,7 : 1
  • plum#DDA0DDrgb(221, 160, 221)hsl(300, 47%, 75%)Contraste do texto com preto: 10,1 : 1
  • powderblue#B0E0E6rgb(176, 224, 230)hsl(187, 52%, 80%)Contraste do texto com preto: 14,7 : 1
  • purple#800080rgb(128, 0, 128)hsl(300, 100%, 25%)Contraste do texto com branco: 9,4 : 1
  • rebeccapurple#663399rgb(102, 51, 153)hsl(270, 50%, 40%)Contraste do texto com branco: 8,4 : 1
  • red#FF0000rgb(255, 0, 0)hsl(0, 100%, 50%)Contraste do texto com preto: 5,3 : 1
  • rosybrown#BC8F8Frgb(188, 143, 143)hsl(0, 25%, 65%)Contraste do texto com preto: 7,5 : 1
  • royalblue#4169E1rgb(65, 105, 225)hsl(225, 73%, 57%)Contraste do texto com branco: 4,8 : 1
  • saddlebrown#8B4513rgb(139, 69, 19)hsl(25, 76%, 31%)Contraste do texto com branco: 7,1 : 1
  • salmon#FA8072rgb(250, 128, 114)hsl(6, 93%, 71%)Contraste do texto com preto: 8,4 : 1
  • sandybrown#F4A460rgb(244, 164, 96)hsl(28, 87%, 67%)Contraste do texto com preto: 10,3 : 1
  • seagreen#2E8B57rgb(46, 139, 87)hsl(146, 50%, 36%)Contraste do texto com preto: 4,9 : 1
  • seashell#FFF5EErgb(255, 245, 238)hsl(25, 100%, 97%)Contraste do texto com preto: 19,5 : 1
  • sienna#A0522Drgb(160, 82, 45)hsl(19, 56%, 40%)Contraste do texto com branco: 5,6 : 1
  • silver#C0C0C0rgb(192, 192, 192)hsl(0, 0%, 75%)Contraste do texto com preto: 11,5 : 1
  • skyblue#87CEEBrgb(135, 206, 235)hsl(197, 71%, 73%)Contraste do texto com preto: 12,1 : 1
  • slateblue#6A5ACDrgb(106, 90, 205)hsl(248, 53%, 58%)Contraste do texto com branco: 5,3 : 1
  • slategray#708090rgb(112, 128, 144)hsl(210, 13%, 50%)Contraste do texto com preto: 5,2 : 1
  • slategrey#708090rgb(112, 128, 144)hsl(210, 13%, 50%)Contraste do texto com preto: 5,2 : 1
  • snow#FFFAFArgb(255, 250, 250)hsl(0, 100%, 99%)Contraste do texto com preto: 20,3 : 1
  • springgreen#00FF7Frgb(0, 255, 127)hsl(150, 100%, 50%)Contraste do texto com preto: 15,6 : 1
  • steelblue#4682B4rgb(70, 130, 180)hsl(207, 44%, 49%)Contraste do texto com preto: 5,1 : 1
  • tan#D2B48Crgb(210, 180, 140)hsl(34, 44%, 69%)Contraste do texto com preto: 10,6 : 1
  • teal#008080rgb(0, 128, 128)hsl(180, 100%, 25%)Contraste do texto com branco: 4,8 : 1
  • thistle#D8BFD8rgb(216, 191, 216)hsl(300, 24%, 80%)Contraste do texto com preto: 12,4 : 1
  • tomato#FF6347rgb(255, 99, 71)hsl(9, 100%, 64%)Contraste do texto com preto: 7,1 : 1
  • turquoise#40E0D0rgb(64, 224, 208)hsl(174, 72%, 56%)Contraste do texto com preto: 12,8 : 1
  • violet#EE82EErgb(238, 130, 238)hsl(300, 76%, 72%)Contraste do texto com preto: 9,1 : 1
  • wheat#F5DEB3rgb(245, 222, 179)hsl(39, 77%, 83%)Contraste do texto com preto: 16,0 : 1
  • white#FFFFFFrgb(255, 255, 255)hsl(0, 0%, 100%)Contraste do texto com preto: 21,0 : 1
  • whitesmoke#F5F5F5rgb(245, 245, 245)hsl(0, 0%, 96%)Contraste do texto com preto: 19,3 : 1
  • yellow#FFFF00rgb(255, 255, 0)hsl(60, 100%, 50%)Contraste do texto com preto: 19,6 : 1
  • yellowgreen#9ACD32rgb(154, 205, 50)hsl(80, 61%, 50%)Contraste do texto com preto: 11,2 : 1

Fonte dos nomes e valores: CSS Color Module Level 4 (W3C). As famílias de cor são um auxílio de navegação e não fazem parte da especificação.

Minha caixa de ferramentas

Resultado

Como o cálculo é feito

Resumindo: em HTML e CSS, as cores podem ser indicadas não só por código, mas também por nomes em inglês, como color: tomato em vez de #FF6347. Existem 148 nomes assim. A tabela acima mostra cada um com seu código HEX, seus componentes RGB e seu valor HSL.

Como usar a tabela

  1. Campo de busca: digite parte de um nome ou de um código HEX (“blue”, “green”, “6495ED”).
  2. Escolha uma família de cor para ver só vermelhos, verdes etc.
  3. Ordene por nome, matiz (ordem do arco-íris, cinzas no fim) ou luminosidade.
  4. Clique em HEX, Nome ou RGB: o valor fica na área de transferência.

HEX, RGB e HSL

Contraste do texto

Abaixo de cada cor você vê se o texto preto ou branco é mais legível sobre ela, com a razão de contraste segundo a WCAG 2.2. Para texto normal, a WCAG exige no mínimo 4,5 : 1; para texto grande, 3 : 1. Nomes equivalentes como aqua e cyan ou gray e grey são aliases com o mesmo valor.

Perguntas frequentes

Quantos nomes de cores existem em HTML e CSS?

Existem 148 cores com nome, incluindo aliases como aqua e cyan, magenta e fuchsia, gray e grey. Somam-se as palavras-chave transparent e currentcolor.

Como escrevo um nome de cor em CSS?

Direto como valor, por exemplo color: tomato; ou background: cornflowerblue;. Os nomes são em inglês e não diferenciam maiúsculas de minúsculas.

Quais são os códigos HEX de vermelho, verde e azul?

red é #FF0000, lime (verde puro) é #00FF00 e blue é #0000FF. A palavra green indica em CSS um verde mais escuro, #008000.

Como acho o nome de uma cor a partir do código HEX?

Digite o código na busca, com ou sem #. Se houver um nome com exatamente esse valor, ele aparece na lista.

Que cor de texto combina com uma cor?

A indicação abaixo da cor diz se o preto ou o branco dá mais contraste. Para um texto legível, a razão deve ser de pelo menos 4,5 : 1.

Fontes e base legal

Última atualização: · Princípios editoriais

Ferramentas relacionadas