Cores em HTML: códigos, nomes + tabela

☝ Os códigos de cores em HTML são triplos hexadecimais que representam as cores vermelho, verde e azul (#RRGGBB).

Cores em HTML: códigos, nomes + tabela

Os códigos de cores em HTML são combinações de três cores no formato hexadecimal que representam as cores vermelho, verde e azul (#RRGGBB)(red,green,blue) . Esses códigos são amplamente usados na criação de páginas da web para alterar a cor de fundo, texto e tabelas, bem como em programas de edição de imagens como o Adobe Photoshop.

Neste artigo, falaremos sobre os códigos de cores e nomes HTML, como eles são formados e como funcionam.

Paleta de cores

Nomes de Cores em HTML

Além dos códigos de cores hexadecimais, o HTML também suporta uma série de nomes de cores predefinidos que podem ser usados em vez dos códigos.

Alguns dos nomes de cores comuns são: "red" (vermelho) , "green" (verde) , "blue" (azul) , "yellow" (amarelo) , "white" (branco) , "black" (preto) e "gray" (cinza) .

Por exemplo, em vez de usar o código #FF0000 para a cor vermelha, você pode usar o nome da cor em inglês "red" no HTML e CSS. Este formato é mais fácil de lembrar do que os códigos hexadecimais e pode ser útil em situações em que uma cor específica é necessária.

Formato dos Códigos de Cores em HTML

Cada código de cor em HTML é composto pelo símbolo "#" seguido de seis letras ou números. Esses números estão no sistema numérico hexadecimal, o que significa que cada letra ou número representa um valor numérico de 0 a 15.

Por exemplo, a letra "A" em hexadecimal representa o número 10 em decimal, enquanto a letra "F" representa o número 15. Portanto, a combinação de letras e números em um código de cor hexadecimal pode representar qualquer valor numérico entre 0 e 255 em cada um dos componentes de cor (vermelho, verde e azul).

Entendendo as Cores Hexadecimais

As cores hexadecimais são uma forma de representar cores em sistemas digitais, especialmente na web. Este sistema utiliza uma base 16, que inclui os números de 0 a 9 e as letras de A a F, para expressar valores de cor em três componentes: vermelho, verde e azul (RGB). Cada cor é representada por um código de seis dígitos precedido pelo símbolo '#'. Por exemplo, o preto é representado como #000000 e o branco como #FFFFFF.

A Estrutura das Cores Hexadecimais

Para aprofundar no conceito de cores em hexadecimal, é crucial entender sua estrutura. Cada par de dígitos no código representa a intensidade das cores vermelho, verde e azul, nessa ordem. Portanto, o código é dividido em três partes: #RRGGBB. A intensidade de cada cor pode variar entre 00 (mínimo) e FF (máximo), o que permite mais de 16 milhões de combinações de cores possíveis. Essa ampla gama de cores torna a paleta de cores hexadecimal extremamente versátil para o design web e gráfico.

Como Funciona a Teoria dos Códigos de Cores em HTML

Cada código de cor em HTML representa a combinação de três valores numéricos que representam a intensidade das cores vermelho, verde e azul. Esses valores são combinados para criar a cor desejada.

Por exemplo, o código de cor #FF0000 representa a intensidade máxima da cor vermelha e a ausência total das cores verde e azul. Como resultado, a cor exibida é vermelho puro.

Da mesma forma, o código de cor #00FF00 representa a intensidade máxima da cor verde, e a ausência total das cores vermelha e azul. Como resultado, a cor exibida é verde puro.

Tabela de Cores HTML

🔗 Tons de vermelho🔗 Tons de azul🔗 Tons de verde🔗 Tons de rosa🔗 Tons de violeta🔗 Tons de cinza
indianred#cd5c5crgb(205,92,92)hsl(0,54%,59%)
lightcoral#f08080rgb(240,128,128)hsl(0,79%,73%)
salmon#fa8072rgb(250,128,114)hsl(7,94%,72%)
darksalmon#e9967argb(233,150,122)hsl(16,72%,70%)
lightsalmon#ffa07argb(255,160,122)hsl(18,100%,74%)
crimson#dc143crgb(220,20,60)hsl(348,84%,48%)
red#ff0000rgb(255,0,0)hsl(0,100%,50%)
firebrick#b22222rgb(178,34,34)hsl(0,68%,42%)
darkred#8b0000rgb(139,0,0)hsl(0,100%,28%)
cyan#00ffffrgb(0,255,255)hsl(180,100%,50%)
lightcyan#e0ffffrgb(224,255,255)hsl(180,100%,94%)
paleturquoise#afeeeergb(175,238,238)hsl(180,65%,81%)
aquamarine#7fffd4rgb(127,255,212)hsl(160,100%,75%)
turquoise#40e0d0rgb(64,224,208)hsl(174,73%,57%)
mediumturquoise#48d1ccrgb(72,209,204)hsl(178,60%,56%)
darkturquoise#00ced1rgb(0,206,209)hsl(181,100%,41%)
cadetblue#5f9ea0rgb(95,158,160)hsl(182,26%,50%)
steelblue#4682b4rgb(70,130,180)hsl(208,44%,50%)
lightsteelblue#b0c4dergb(176,196,222)hsl(214,42%,79%)
powderblue#b0e0e6rgb(176,224,230)hsl(187,52%,80%)
lightblue#add8e6rgb(173,216,230)hsl(195,54%,80%)
skyblue#87ceebrgb(135,206,235)hsl(198,72%,73%)
lightskyblue#87cefargb(135,206,250)hsl(203,92%,76%)
deepskyblue#00bfffrgb(0,191,255)hsl(196,100%,50%)
dodgerblue#1e90ffrgb(30,144,255)hsl(210,100%,56%)
cornflowerblue#6495edrgb(100,149,237)hsl(219,80%,67%)
mediumslateblue#7b68eergb(123,104,238)hsl(249,80%,68%)
royalblue#4169e1rgb(65,105,225)hsl(225,73%,57%)
blue#0000ffrgb(0,0,255)hsl(240,100%,50%)
mediumblue#0000cdrgb(0,0,205)hsl(240,100%,41%)
darkblue#00008brgb(0,0,139)hsl(240,100%,28%)
midnightblue#191970rgb(25,25,112)hsl(240,64%,27%)
greenyellow#adff2frgb(173,255,47)hsl(84,100%,60%)
chartreuse#7fff00rgb(127,255,0)hsl(91,100%,50%)
lawngreen#7cfc00rgb(124,252,0)hsl(91,100%,50%)
lime#00ff00rgb(0,255,0)hsl(120,100%,50%)
limegreen#32cd32rgb(50,205,50)hsl(120,61%,50%)
palegreen#98fb98rgb(152,251,152)hsl(120,93%,80%)
lightgreen#90ee90rgb(144,238,144)hsl(120,74%,75%)
mediumspringgreen#00fa9argb(0,250,154)hsl(157,100%,50%)
springgreen#00ff7frgb(0,255,127)hsl(150,100%,50%)
mediumseagreen#3cb371rgb(60,179,113)hsl(147,50%,47%)
seagreen#2e8b57rgb(46,139,87)hsl(147,51%,37%)
forestgreen#228b22rgb(34,139,34)hsl(120,61%,34%)
green#008000rgb(0,128,0)hsl(120,100%,26%)
darkgreen#006400rgb(0,100,0)hsl(120,100%,20%)
yellowgreen#9acd32rgb(154,205,50)hsl(80,61%,50%)
olivedrab#6b8e23rgb(107,142,35)hsl(80,61%,35%)
olive#808000rgb(128,128,0)hsl(60,100%,26%)
darkolivegreen#556b2frgb(85,107,47)hsl(82,39%,31%)
mediumaquamarine#66cdaargb(102,205,170)hsl(160,51%,61%)
darkseagreen#8fbc8frgb(143,188,143)hsl(120,26%,65%)
lightseagreen#20b2aargb(32,178,170)hsl(177,70%,42%)
darkcyan#008b8brgb(0,139,139)hsl(180,100%,28%)
teal#008080rgb(0,128,128)hsl(180,100%,26%)
pink#ffc0cbrgb(255,192,203)hsl(350,100%,88%)
lightpink#ffb6c1rgb(255,182,193)hsl(351,100%,86%)
hotpink#ff69b4rgb(255,105,180)hsl(330,100%,71%)
deeppink#ff1493rgb(255,20,147)hsl(328,100%,54%)
mediumvioletred#c71585rgb(199,21,133)hsl(323,81%,44%)
palevioletred#db7093rgb(219,112,147)hsl(341,60%,65%)
cornsilk#fff8dcrgb(255,248,220)hsl(48,100%,94%)
blanchedalmond#ffebcdrgb(255,235,205)hsl(36,100%,91%)
bisque#ffe4c4rgb(255,228,196)hsl(33,100%,89%)
wheat#f5deb3rgb(245,222,179)hsl(40,77%,84%)
burlywood#deb887rgb(222,184,135)hsl(34,57%,70%)
tan#d2b48crgb(210,180,140)hsl(35,44%,69%)
rosybrown#bc8f8frgb(188,143,143)hsl(0,26%,65%)
sandybrown#f4a460rgb(244,164,96)hsl(28,88%,67%)
goldenrod#daa520rgb(218,165,32)hsl(43,75%,50%)
darkgoldenrod#b8860brgb(184,134,11)hsl(43,89%,39%)
peru#cd853frgb(205,133,63)hsl(30,59%,53%)
chocolate#d2691ergb(210,105,30)hsl(25,75%,48%)
saddlebrown#8b4513rgb(139,69,19)hsl(25,76%,31%)
sienna#a0522drgb(160,82,45)hsl(20,57%,41%)
brown#a52a2argb(165,42,42)hsl(0,60%,41%)
maroon#800000rgb(128,0,0)hsl(0,100%,26%)
lightsalmon#ffa07argb(255,160,122)hsl(18,100%,74%)
coral#ff7f50rgb(255,127,80)hsl(17,100%,66%)
tomato#ff6347rgb(255,99,71)hsl(10,100%,64%)
orangered#ff4500rgb(255,69,0)hsl(17,100%,50%)
darkorange#ff8c00rgb(255,140,0)hsl(33,100%,50%)
orange#ffa500rgb(255,165,0)hsl(39,100%,50%)
gold#ffd700rgb(255,215,0)hsl(51,100%,50%)
yellow#ffff00rgb(255,255,0)hsl(60,100%,50%)
lightyellow#ffffe0rgb(255,255,224)hsl(60,100%,94%)
lightgoldenrodyellow#fafad2rgb(250,250,210)hsl(60,81%,91%)
lemonchiffon#fffacdrgb(255,250,205)hsl(54,100%,91%)
papayawhip#ffefd5rgb(255,239,213)hsl(38,100%,92%)
moccasin#ffe4b5rgb(255,228,181)hsl(39,100%,86%)
peachpuff#ffdab9rgb(255,218,185)hsl(29,100%,87%)
palegoldenrod#eee8aargb(238,232,170)hsl(55,67%,80%)
khaki#f0e68crgb(240,230,140)hsl(54,77%,75%)
darkkhaki#bdb76brgb(189,183,107)hsl(56,39%,59%)
lavender#e6e6fargb(230,230,250)hsl(240,67%,95%)
thistle#d8bfd8rgb(216,191,216)hsl(300,25%,80%)
plum#dda0ddrgb(221,160,221)hsl(300,48%,75%)
violet#ee82eergb(238,130,238)hsl(300,77%,73%)
orchid#da70d6rgb(218,112,214)hsl(303,59%,65%)
fuchsia#ff00ffrgb(255,0,255)hsl(300,100%,50%)
magenta#ff00ffrgb(255,0,255)hsl(300,100%,50%)
mediumorchid#ba55d3rgb(186,85,211)hsl(289,59%,59%)
mediumpurple#9370dbrgb(147,112,219)hsl(260,60%,65%)
blueviolet#8a2be2rgb(138,43,226)hsl(272,76%,53%)
darkviolet#9400d3rgb(148,0,211)hsl(283,100%,42%)
darkorchid#9932ccrgb(153,50,204)hsl(281,61%,50%)
darkmagenta#8b008brgb(139,0,139)hsl(300,100%,28%)
purple#800080rgb(128,0,128)hsl(300,100%,26%)
indigo#4b0082rgb(75,0,130)hsl(275,100%,26%)
slateblue#6a5acdrgb(106,90,205)hsl(249,54%,58%)
darkslateblue#483d8brgb(72,61,139)hsl(249,39%,40%)
gainsboro#dcdcdcrgb(220,220,220)hsl(0,0%,87%)
lightgrey#d3d3d3rgb(211,211,211)hsl(0,0%,83%)
silver#c0c0c0rgb(192,192,192)hsl(0,0%,76%)
darkgray#a9a9a9rgb(169,169,169)hsl(0,0%,67%)
gray#808080rgb(128,128,128)hsl(0,0%,51%)
dimgray#696969rgb(105,105,105)hsl(0,0%,42%)
lightslategray#778899rgb(119,136,153)hsl(210,15%,54%)
slategray#708090rgb(112,128,144)hsl(210,13%,51%)
darkslategray#2f4f4frgb(47,79,79)hsl(180,26%,25%)
black#000000rgb(0,0,0)hsl(0,0%,0%)
white#ffffffrgb(255,255,255)hsl(0,0%,100%)
snow#fffafargb(255,250,250)hsl(0,100%,100%)
honeydew#f0fff0rgb(240,255,240)hsl(120,100%,98%)
mintcream#f5fffargb(245,255,250)hsl(150,100%,99%)
azure#f0ffffrgb(240,255,255)hsl(180,100%,98%)
aliceblue#f0f8ffrgb(240,248,255)hsl(208,100%,98%)
ghostwhite#f8f8ffrgb(248,248,255)hsl(240,100%,99%)
whitesmoke#f5f5f5rgb(245,245,245)hsl(0,0%,97%)
seashell#fff5eergb(255,245,238)hsl(25,100%,97%)
beige#f5f5dcrgb(245,245,220)hsl(60,56%,92%)
oldlace#fdf5e6rgb(253,245,230)hsl(40,86%,95%)
floralwhite#fffaf0rgb(255,250,240)hsl(40,100%,98%)
ivory#fffff0rgb(255,255,240)hsl(60,100%,98%)
antiquewhite#faebd7rgb(250,235,215)hsl(35,78%,92%)
linen#faf0e6rgb(250,240,230)hsl(30,67%,95%)
lavenderblush#fff0f5rgb(255,240,245)hsl(340,100%,98%)
mistyrose#ffe4e1rgb(255,228,225)hsl(7,100%,95%)