Guia Completo sobre Cores em HTML

As cores são um elemento fundamental no design web. Em HTML e CSS, existem várias formas de especificar cores. Vamos explorar os principais métodos.

1. Nomes de Cores Pré-definidos

HTML e CSS possuem 140 nomes de cores pré-definidos que podem ser usados diretamente.

<div style="background-color: tomato; color: white; padding: 10px;">Tomato</div>
<div style="background-color: dodgerblue; color: white; padding: 10px;">DodgerBlue</div>
<div style="background-color: mediumseagreen; color: white; padding: 10px;">MediumSeaGreen</div>

Exemplos:

tomato
dodgerblue
mediumseagreen
violet
orange
slateblue
Nota: Embora os nomes de cores sejam fáceis de lembrar, eles são limitados. Para mais controle e variedade, usamos outros métodos.

2. Códigos Hexadecimais

As cores hexadecimais são especificadas com #RRGGBB, onde RR (vermelho), GG (verde) e BB (azul) são valores hexadecimais entre 00 e FF.

<div style="background-color: #ff0000;">Vermelho puro (#ff0000)</div>
<div style="background-color: #00ff00;">Verde puro (#00ff00)</div>
<div style="background-color: #0000ff;">Azul puro (#0000ff)</div>

Exemplos:

Coral#ff5733
Verde Neon#33ff57
Azul Brilhante#3357ff
Rosa Choque#ff33f5
Azul Ciano#33fff5
Amarelo Limão#f5ff33
Vermelho#ff0000
Verde#00ff00
Azul#0000ff
Amarelo#ffff00
Magenta#ff00ff
Ciano#00ffff

3. Valores RGB e RGBA

RGB significa Red (Vermelho), Green (Verde), Blue (Azul). Cada parâmetro define a intensidade da cor entre 0 e 255.

RGBA adiciona um quarto valor - Alpha - que representa a transparência (0 = totalmente transparente, 1 = totalmente opaco).

<div style="background-color: rgb(255, 0, 0);">Vermelho (rgb(255, 0, 0))</div>
<div style="background-color: rgb(0, 255, 0);">Verde (rgb(0, 255, 0))</div>
<div style="background-color: rgba(0, 0, 255, 0.5);">Azul com 50% de transparência (rgba(0, 0, 255, 0.5))</div>

Exemplos:

Tomatergb(255, 99, 71)
Verde Marinho Médiorgb(60, 179, 113)
Azul Dodgerrgb(30, 144, 255)
Laranjargb(255, 165, 0)
Violeta Azulrgb(138, 43, 226)
Carmimrgb(220, 20, 60)
Tomate 50% transparentergba(255, 99, 71, 0.5)
Verde Marinho 70% transparentergba(60, 179, 113, 0.3)
Dodger 30% transparentergba(30, 144, 255, 0.7)
Laranja 40% transparentergba(255, 165, 0, 0.6)
Violeta 60% transparentergba(138, 43, 226, 0.4)
Carmim 20% transparentergba(220, 20, 60, 0.8)

4. Valores HSL e HSLA

HSL significa Hue (Matiz), Saturation (Saturação), Lightness (Luminosidade).

HSLA adiciona o canal Alpha para transparência, semelhante ao RGBA.

<div style="background-color: hsl(0, 100%, 50%);">Vermelho (hsl(0, 100%, 50%))</div>
<div style="background-color: hsl(120, 100%, 50%);">Verde (hsl(120, 100%, 50%))</div>
<div style="background-color: hsla(240, 100%, 50%, 0.5);">Azul com 50% de transparência (hsla(240, 100%, 50%, 0.5))</div>

Exemplos:

Vermelho Vivohsl(0, 100%, 50%)
Verde Vivohsl(120, 100%, 50%)
Azul Vivohsl(240, 100%, 50%)
Laranja Vivohsl(39, 100%, 50%)
Magenta Vivohsl(300, 100%, 50%)
Amarelo Vivohsl(60, 100%, 50%)
Ciano Vivohsl(180, 100%, 50%)
Laranja Clarohsl(9, 100%, 64%)
Verde Pastelhsl(120, 60%, 70%)
Azul Clarohsl(240, 80%, 80%)
Vermelho 50% Transp.hsla(0, 100%, 50%, 0.5)
Verde 70% Transp.hsla(120, 100%, 50%, 0.3)
Azul 30% Transp.hsla(240, 100%, 50%, 0.7)
Laranja 40% Transp.hsla(39, 100%, 50%, 0.6)
Magenta 60% Transp.hsla(300, 100%, 50%, 0.4)
Amarelo 20% Transp.hsla(60, 100%, 50%, 0.8)

Tabela de Cores Básicas

Cor Nome Hexadecimal RGB HSL
Vermelhored#ff0000rgb(255, 0, 0)hsl(0, 100%, 50%)
Verdegreen#008000rgb(0, 128, 0)hsl(120, 100%, 25%)
Azulblue#0000ffrgb(0, 0, 255)hsl(240, 100%, 50%)
Amareloyellow#ffff00rgb(255, 255, 0)hsl(60, 100%, 50%)
Pretoblack#000000rgb(0, 0, 0)hsl(0, 0%, 0%)
Brancowhite#ffffffrgb(255, 255, 255)hsl(0, 0%, 100%)

Tabela Completa de Cores

Nome Hexadecimal RGB Amostra
#000000#000000Black(0,0,0)
#1C1C1C#1C1C1CGrey11(28,28,28)
#363636#363636Grey21(54,54,54)
#4F4F4F#4F4F4FGrey31(79,79,79)
#696969#696969DimGray(105,105,105)
#808080#808080Gray(128,128,128)
#A9A9A9#A9A9A9DarkGray(169,169,169)
#C0C0C0#C0C0C0Silver(192,192,192)
#D3D3D3#D3D3D3LightGrey(211,211,211)
#DCDCDC#DCDCDCGainsboro(220,220,220)
#6A5ACD#6A5ACDSlateBlue(106,90,205)
#836FFF#836FFFSlateBlue1(131,111,255)
#6959CD#6959CDSlateBlue3(105,89,205)
#483D8B#483D8BDarkSlateBlue(72,61,139)
#191970#191970MidnightBlue(25,25,112)
#000080#000080Navy(0,0,128)
#00008B#00008BDarkBlue(0,0,139)
#0000CD#0000CDMediumBlue(0,0,205)
#0000FF#0000FFBlue(0,0,255)
#6495ED#6495EDCornflowerBlue(100,149,237)
#4169E1#4169E1RoyalBlue(65,105,225)
#1E90FF#1E90FFDodgerBlue(30,144,255)
#00BFFF#00BFFFDeepSkyBlue(0,191,255)
#87CEFA#87CEFALightSkyBlue(135,206,250)
#87CEEB#87CEEBSkyBlue(135,206,235)
#ADD8E6#ADD8E6LightBlue(173,216,230)
#4682B4#4682B4SteelBlue(70,130,180)
#B0C4DE#B0C4DELightSteelBlue(176,196,222)
#708090#708090SlateGray(112,128,144)
#778899#778899LightSlateGray(119,136,153)
#00FFFF#00FFFFAqua / Cyan(0,255,255)
#00CED1#00CED1DarkTurquoise(0,206,209)
#40E0D0#40E0D0Turquoise(64,224,208)
#48D1CC#48D1CCMediumTurquoise(72,209,204)
#20B2AA#20B2AALightSeaGreen(32,178,170)
#008B8B#008B8BDarkCyan(0,139,139)
#008080#008080Teal(0,128,128)
#7FFFD4#7FFFD4Aquamarine(127,255,212)
#66CDAA#66CDAAMediumAquamarine(102,205,170)
#5F9EA0#5F9EA0CadetBlue(95,158,160)
#2F4F4F#2F4F4FDarkSlateGray(47,79,79)
#00FA9A#00FA9AMediumSpringGreen(0,250,154)
#00FF7F#00FF7FSpringGreen(0,255,127)
#98FB98#98FB98PaleGreen(152,251,152)
#90EE90#90EE90LightGreen(144,238,144)
#8FBC8F#8FBC8FDarkSeaGreen(143,188,143)
#3CB371#3CB371MediumSeaGreen(60,179,113)
#2E8B57#2E8B57SeaGreen(46,139,87)
#006400#006400DarkGreen(0,100,0)
#008000#008000Green(0,128,0)
#228B22#228B22ForestGreen(34,139,34)
#32CD32#32CD32LimeGreen(50,205,50)
#00FF00#00FF00Lime(0,255,0)
#7CFC00#7CFC00LawnGreen(124,252,0)
#7FFF00#7FFF00Chartreuse(127,255,0)
#ADFF2F#ADFF2FGreenYellow(173,255,47)
#9ACD32#9ACD32YellowGreen(154,205,50)
#6B8E23#6B8E23OliveDrab(107,142,35)
#556B2F#556B2FDarkOliveGreen(85,107,47)
#808000#808000Olive(128,128,0)
#BDB76B#BDB76BDarkKhaki(189,183,107)
#DAA520#DAA520Goldenrod(218,165,32)
#B8860B#B8860BDarkGoldenrod(184,134,11)
#8B4513#8B4513SaddleBrown(139,69,19)
#A0522D#A0522DSienna(160,82,45)
#BC8F8F#BC8F8FRosyBrown(188,143,143)
#CD853F#CD853FPeru(205,133,63)
#D2691E#D2691EChocolate(210,105,30)
#F4A460#F4A460SandyBrown(244,164,96)
#FFDEAD#FFDEADNavajoWhite(255,222,173)
#F5DEB3#F5DEB3Wheat(245,222,179)
#DEB887#DEB887BurlyWood(222,184,135)
#D2B48C#D2B48CTan(210,180,140)
#7B68EE#7B68EEMediumSlateBlue(123,104,238)
#9370DB#9370DBMediumPurple(147,112,219)
#8A2BE2#8A2BE2BlueViolet(138,43,226)
#4B0082#4B0082Indigo(75,0,130)
#9400D3#9400D3DarkViolet(148,0,211)
#9932CC#9932CCDarkOrchid(153,50,204)
#BA55D3#BA55D3MediumOrchid(186,85,211)
#800080#800080Purple(128,0,128)
#8B008B#8B008BDarkMagenta(139,0,139)
#FF00FF#FF00FFFuchsia / Magenta(255,0,255)
#EE82EE#EE82EEViolet(238,130,238)
#DA70D6#DA70D6Orchid(218,112,214)
#DDA0DD#DDA0DDPlum(221,160,221)
#C71585#C71585MediumVioletRed(199,21,133)
#FF1493#FF1493DeepPink(255,20,147)
#FF69B4#FF69B4HotPink(255,105,180)
#DB7093#DB7093PaleVioletRed(219,112,147)
#FFB6C1#FFB6C1LightPink(255,182,193)
#FFC0CB#FFC0CBPink(255,192,203)
#F08080#F08080LightCoral(240,128,128)
#CD5C5C#CD5C5CIndianRed(205,92,92)
#DC143C#DC143CCrimson(220,20,60)
#800000#800000Maroon(128,0,0)
#8B0000#8B0000DarkRed(139,0,0)
#B22222#B22222FireBrick(178,34,34)
#A52A2A#A52A2ABrown(165,42,42)
#FA8072#FA8072Salmon(250,128,114)
#E9967A#E9967ADarkSalmon(233,150,122)
#FFA07A#FFA07ALightSalmon(255,160,122)
#FF7F50#FF7F50Coral(255,127,80)
#FF6347#FF6347Tomato(255,99,71)
#FF0000#FF0000Red(255,0,0)
#FF4500#FF4500OrangeRed(255,69,0)
#FF8C00#FF8C00DarkOrange(255,140,0)
#FFA500#FFA500Orange(255,165,0)
#FFD700#FFD700Gold(255,215,0)
#FFFF00#FFFF00Yellow(255,255,0)
#F0E68C#F0E68CKhaki(240,230,140)
#F0F8FF#F0F8FFAliceBlue(240,248,255)
#F8F8FF#F8F8FFGhostWhite(248,248,255)
#FFFAFA#FFFAFASnow(255,250,250)
#FFF5EE#FFF5EESeashell(255,245,238)
#FFFAF0#FFFAF0FloralWhite(255,250,240)
#F5F5F5#F5F5F5WhiteSmoke(245,245,245)
#F5F5DC#F5F5DCBeige(245,245,220)
#FDF5E6#FDF5E6OldLace(253,245,230)
#FFFFF0#FFFFF0Ivory(255,255,240)
#FAF0E6#FAF0E6Linen(250,240,230)
#FFF8DC#FFF8DCCornsilk(255,248,220)
#FAEBD7#FAEBD7AntiqueWhite(250,235,215)
#FFEBCD#FFEBCDBlanchedAlmond(255,235,205)
#FFE4C4#FFE4C4Bisque(255,228,196)
#FFFFE0#FFFFE0LightYellow(255,255,224)
#FFFACD#FFFACDLemonChiffon(255,250,205)
#FAFAD2#FAFAD2LightGoldenrodYellow(250,250,210)
#FFEFD5#FFEFD5PapayaWhip(255,239,213)
#FFDAB9#FFDAB9PeachPuff(255,218,185)
#FFE4B5#FFE4B5Moccasin(255,228,181)
#EEE8AA#EEE8AAPaleGoldenrod(238,232,170)
#FFE4E1#FFE4E1MistyRose(255,228,225)
#FFF0F5#FFF0F5LavenderBlush(255,240,245)
#E6E6FA#E6E6FALavender(230,230,250)
#D8BFD8#D8BFD8Thistle(216,191,216)
#F0FFFF#F0FFFFAzure(240,255,255)
#E0FFFF#E0FFFFLightCyan(224,255,255)
#B0E0E6#B0E0E6PowderBlue(176,224,230)
#AFEEEE#AFEEEEPaleTurquoise(175,238,238)
#F0FFF0#F0FFF0Honeydew(240,255,240)
#F5FFFA#F5FFFAMintCream(245,255,250)

Como Escolher Cores para Seu Site

Aqui estão algumas dicas para trabalhar com cores em web design:

Dica de Acessibilidade: Sempre verifique o contraste entre o texto e o fundo. Ferramentas como o WebAIM Contrast Checker podem ajudar.

Ferramentas Úteis

Espero que este guia tenha ajudado a entender melhor como trabalhar com cores em HTML e CSS!