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).
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.
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
indianred | #cd5c5c | rgb(205,92,92) | hsl(0,54%,59%) | |
lightcoral | #f08080 | rgb(240,128,128) | hsl(0,79%,73%) | |
salmon | #fa8072 | rgb(250,128,114) | hsl(7,94%,72%) | |
darksalmon | #e9967a | rgb(233,150,122) | hsl(16,72%,70%) | |
lightsalmon | #ffa07a | rgb(255,160,122) | hsl(18,100%,74%) | |
crimson | #dc143c | rgb(220,20,60) | hsl(348,84%,48%) | |
red | #ff0000 | rgb(255,0,0) | hsl(0,100%,50%) | |
firebrick | #b22222 | rgb(178,34,34) | hsl(0,68%,42%) | |
darkred | #8b0000 | rgb(139,0,0) | hsl(0,100%,28%) | |
cyan | #00ffff | rgb(0,255,255) | hsl(180,100%,50%) | |
lightcyan | #e0ffff | rgb(224,255,255) | hsl(180,100%,94%) | |
paleturquoise | #afeeee | rgb(175,238,238) | hsl(180,65%,81%) | |
aquamarine | #7fffd4 | rgb(127,255,212) | hsl(160,100%,75%) | |
turquoise | #40e0d0 | rgb(64,224,208) | hsl(174,73%,57%) | |
mediumturquoise | #48d1cc | rgb(72,209,204) | hsl(178,60%,56%) | |
darkturquoise | #00ced1 | rgb(0,206,209) | hsl(181,100%,41%) | |
cadetblue | #5f9ea0 | rgb(95,158,160) | hsl(182,26%,50%) | |
steelblue | #4682b4 | rgb(70,130,180) | hsl(208,44%,50%) | |
lightsteelblue | #b0c4de | rgb(176,196,222) | hsl(214,42%,79%) | |
powderblue | #b0e0e6 | rgb(176,224,230) | hsl(187,52%,80%) | |
lightblue | #add8e6 | rgb(173,216,230) | hsl(195,54%,80%) | |
skyblue | #87ceeb | rgb(135,206,235) | hsl(198,72%,73%) | |
lightskyblue | #87cefa | rgb(135,206,250) | hsl(203,92%,76%) | |
deepskyblue | #00bfff | rgb(0,191,255) | hsl(196,100%,50%) | |
dodgerblue | #1e90ff | rgb(30,144,255) | hsl(210,100%,56%) | |
cornflowerblue | #6495ed | rgb(100,149,237) | hsl(219,80%,67%) | |
mediumslateblue | #7b68ee | rgb(123,104,238) | hsl(249,80%,68%) | |
royalblue | #4169e1 | rgb(65,105,225) | hsl(225,73%,57%) | |
blue | #0000ff | rgb(0,0,255) | hsl(240,100%,50%) | |
mediumblue | #0000cd | rgb(0,0,205) | hsl(240,100%,41%) | |
darkblue | #00008b | rgb(0,0,139) | hsl(240,100%,28%) | |
navy | #000080 | rgb(0,0,128) | hsl(240,100%,26%) | |
midnightblue | #191970 | rgb(25,25,112) | hsl(240,64%,27%) | |
greenyellow | #adff2f | rgb(173,255,47) | hsl(84,100%,60%) | |
chartreuse | #7fff00 | rgb(127,255,0) | hsl(91,100%,50%) | |
lawngreen | #7cfc00 | rgb(124,252,0) | hsl(91,100%,50%) | |
lime | #00ff00 | rgb(0,255,0) | hsl(120,100%,50%) | |
limegreen | #32cd32 | rgb(50,205,50) | hsl(120,61%,50%) | |
palegreen | #98fb98 | rgb(152,251,152) | hsl(120,93%,80%) | |
lightgreen | #90ee90 | rgb(144,238,144) | hsl(120,74%,75%) | |
mediumspringgreen | #00fa9a | rgb(0,250,154) | hsl(157,100%,50%) | |
springgreen | #00ff7f | rgb(0,255,127) | hsl(150,100%,50%) | |
mediumseagreen | #3cb371 | rgb(60,179,113) | hsl(147,50%,47%) | |
seagreen | #2e8b57 | rgb(46,139,87) | hsl(147,51%,37%) | |
forestgreen | #228b22 | rgb(34,139,34) | hsl(120,61%,34%) | |
green | #008000 | rgb(0,128,0) | hsl(120,100%,26%) | |
darkgreen | #006400 | rgb(0,100,0) | hsl(120,100%,20%) | |
yellowgreen | #9acd32 | rgb(154,205,50) | hsl(80,61%,50%) | |
olivedrab | #6b8e23 | rgb(107,142,35) | hsl(80,61%,35%) | |
olive | #808000 | rgb(128,128,0) | hsl(60,100%,26%) | |
darkolivegreen | #556b2f | rgb(85,107,47) | hsl(82,39%,31%) | |
mediumaquamarine | #66cdaa | rgb(102,205,170) | hsl(160,51%,61%) | |
darkseagreen | #8fbc8f | rgb(143,188,143) | hsl(120,26%,65%) | |
lightseagreen | #20b2aa | rgb(32,178,170) | hsl(177,70%,42%) | |
darkcyan | #008b8b | rgb(0,139,139) | hsl(180,100%,28%) | |
teal | #008080 | rgb(0,128,128) | hsl(180,100%,26%) | |
pink | #ffc0cb | rgb(255,192,203) | hsl(350,100%,88%) | |
lightpink | #ffb6c1 | rgb(255,182,193) | hsl(351,100%,86%) | |
hotpink | #ff69b4 | rgb(255,105,180) | hsl(330,100%,71%) | |
deeppink | #ff1493 | rgb(255,20,147) | hsl(328,100%,54%) | |
mediumvioletred | #c71585 | rgb(199,21,133) | hsl(323,81%,44%) | |
palevioletred | #db7093 | rgb(219,112,147) | hsl(341,60%,65%) | |
cornsilk | #fff8dc | rgb(255,248,220) | hsl(48,100%,94%) | |
blanchedalmond | #ffebcd | rgb(255,235,205) | hsl(36,100%,91%) | |
bisque | #ffe4c4 | rgb(255,228,196) | hsl(33,100%,89%) | |
navajowhite | #ffdead | rgb(255,222,173) | hsl(36,100%,84%) | |
wheat | #f5deb3 | rgb(245,222,179) | hsl(40,77%,84%) | |
burlywood | #deb887 | rgb(222,184,135) | hsl(34,57%,70%) | |
tan | #d2b48c | rgb(210,180,140) | hsl(35,44%,69%) | |
rosybrown | #bc8f8f | rgb(188,143,143) | hsl(0,26%,65%) | |
sandybrown | #f4a460 | rgb(244,164,96) | hsl(28,88%,67%) | |
goldenrod | #daa520 | rgb(218,165,32) | hsl(43,75%,50%) | |
darkgoldenrod | #b8860b | rgb(184,134,11) | hsl(43,89%,39%) | |
peru | #cd853f | rgb(205,133,63) | hsl(30,59%,53%) | |
chocolate | #d2691e | rgb(210,105,30) | hsl(25,75%,48%) | |
saddlebrown | #8b4513 | rgb(139,69,19) | hsl(25,76%,31%) | |
sienna | #a0522d | rgb(160,82,45) | hsl(20,57%,41%) | |
brown | #a52a2a | rgb(165,42,42) | hsl(0,60%,41%) | |
maroon | #800000 | rgb(128,0,0) | hsl(0,100%,26%) | |
lightsalmon | #ffa07a | rgb(255,160,122) | hsl(18,100%,74%) | |
coral | #ff7f50 | rgb(255,127,80) | hsl(17,100%,66%) | |
tomato | #ff6347 | rgb(255,99,71) | hsl(10,100%,64%) | |
orangered | #ff4500 | rgb(255,69,0) | hsl(17,100%,50%) | |
darkorange | #ff8c00 | rgb(255,140,0) | hsl(33,100%,50%) | |
orange | #ffa500 | rgb(255,165,0) | hsl(39,100%,50%) | |
gold | #ffd700 | rgb(255,215,0) | hsl(51,100%,50%) | |
yellow | #ffff00 | rgb(255,255,0) | hsl(60,100%,50%) | |
lightyellow | #ffffe0 | rgb(255,255,224) | hsl(60,100%,94%) | |
lightgoldenrodyellow | #fafad2 | rgb(250,250,210) | hsl(60,81%,91%) | |
lemonchiffon | #fffacd | rgb(255,250,205) | hsl(54,100%,91%) | |
papayawhip | #ffefd5 | rgb(255,239,213) | hsl(38,100%,92%) | |
moccasin | #ffe4b5 | rgb(255,228,181) | hsl(39,100%,86%) | |
peachpuff | #ffdab9 | rgb(255,218,185) | hsl(29,100%,87%) | |
palegoldenrod | #eee8aa | rgb(238,232,170) | hsl(55,67%,80%) | |
khaki | #f0e68c | rgb(240,230,140) | hsl(54,77%,75%) | |
darkkhaki | #bdb76b | rgb(189,183,107) | hsl(56,39%,59%) | |
lavender | #e6e6fa | rgb(230,230,250) | hsl(240,67%,95%) | |
thistle | #d8bfd8 | rgb(216,191,216) | hsl(300,25%,80%) | |
plum | #dda0dd | rgb(221,160,221) | hsl(300,48%,75%) | |
violet | #ee82ee | rgb(238,130,238) | hsl(300,77%,73%) | |
orchid | #da70d6 | rgb(218,112,214) | hsl(303,59%,65%) | |
fuchsia | #ff00ff | rgb(255,0,255) | hsl(300,100%,50%) | |
magenta | #ff00ff | rgb(255,0,255) | hsl(300,100%,50%) | |
mediumorchid | #ba55d3 | rgb(186,85,211) | hsl(289,59%,59%) | |
mediumpurple | #9370db | rgb(147,112,219) | hsl(260,60%,65%) | |
blueviolet | #8a2be2 | rgb(138,43,226) | hsl(272,76%,53%) | |
darkviolet | #9400d3 | rgb(148,0,211) | hsl(283,100%,42%) | |
darkorchid | #9932cc | rgb(153,50,204) | hsl(281,61%,50%) | |
darkmagenta | #8b008b | rgb(139,0,139) | hsl(300,100%,28%) | |
purple | #800080 | rgb(128,0,128) | hsl(300,100%,26%) | |
indigo | #4b0082 | rgb(75,0,130) | hsl(275,100%,26%) | |
slateblue | #6a5acd | rgb(106,90,205) | hsl(249,54%,58%) | |
darkslateblue | #483d8b | rgb(72,61,139) | hsl(249,39%,40%) | |
gainsboro | #dcdcdc | rgb(220,220,220) | hsl(0,0%,87%) | |
lightgrey | #d3d3d3 | rgb(211,211,211) | hsl(0,0%,83%) | |
silver | #c0c0c0 | rgb(192,192,192) | hsl(0,0%,76%) | |
darkgray | #a9a9a9 | rgb(169,169,169) | hsl(0,0%,67%) | |
gray | #808080 | rgb(128,128,128) | hsl(0,0%,51%) | |
dimgray | #696969 | rgb(105,105,105) | hsl(0,0%,42%) | |
lightslategray | #778899 | rgb(119,136,153) | hsl(210,15%,54%) | |
slategray | #708090 | rgb(112,128,144) | hsl(210,13%,51%) | |
darkslategray | #2f4f4f | rgb(47,79,79) | hsl(180,26%,25%) | |
black | #000000 | rgb(0,0,0) | hsl(0,0%,0%) | |
white | #ffffff | rgb(255,255,255) | hsl(0,0%,100%) | |
snow | #fffafa | rgb(255,250,250) | hsl(0,100%,100%) | |
honeydew | #f0fff0 | rgb(240,255,240) | hsl(120,100%,98%) | |
mintcream | #f5fffa | rgb(245,255,250) | hsl(150,100%,99%) | |
azure | #f0ffff | rgb(240,255,255) | hsl(180,100%,98%) | |
aliceblue | #f0f8ff | rgb(240,248,255) | hsl(208,100%,98%) | |
ghostwhite | #f8f8ff | rgb(248,248,255) | hsl(240,100%,99%) | |
whitesmoke | #f5f5f5 | rgb(245,245,245) | hsl(0,0%,97%) | |
seashell | #fff5ee | rgb(255,245,238) | hsl(25,100%,97%) | |
beige | #f5f5dc | rgb(245,245,220) | hsl(60,56%,92%) | |
oldlace | #fdf5e6 | rgb(253,245,230) | hsl(40,86%,95%) | |
floralwhite | #fffaf0 | rgb(255,250,240) | hsl(40,100%,98%) | |
ivory | #fffff0 | rgb(255,255,240) | hsl(60,100%,98%) | |
antiquewhite | #faebd7 | rgb(250,235,215) | hsl(35,78%,92%) | |
linen | #faf0e6 | rgb(250,240,230) | hsl(30,67%,95%) | |
lavenderblush | #fff0f5 | rgb(255,240,245) | hsl(340,100%,98%) | |
mistyrose | #ffe4e1 | rgb(255,228,225) | hsl(7,100%,95%) |