Colors in HTML: codes, names + table

Colors in HTML: codes, names + table
...

When we talk about colors in HTML, we refer to the different ways and names used to assign colors to elements of a web page, such as text, borders, or backgrounds. HTML supports at least 6 different ways to add colors to a web page, and these formats are:

  1. Hexadecimal
  2. RGB format color
  3. RGBA format color - same as RGB but with an additional channel for transparency
  4. HSL format color
  5. HSLA format color - same as HSL but with an additional channel for transparency

It also accepts the names of certain colors written in English; later, there is a table with a list of all HTML color codes along with their names.

Web Colors

What is RGB color?

The RGB model refers to the acronym in English, red, green, blue; in Spanish, it stands for rojo, verde, and azul. All modern device screens operate in this format.

The pixels within the screens have at least a dot or fraction of one of the three mentioned colors from the RGB model.

Each color in the RGB model has 256 variations in its minimum value and 255 in its maximum value, so if you have the question of how many combinations of RGB colors exist, well, the answer is quite impressive; you can get up to 16 million different colors.

What is hexadecimal color?

You have definitely asked yourself one of these questions:

  • What is the meaning of color codes in hexadecimal format?
  • What is a hexadecimal color?

The hexadecimal color system consists of a hashtag or pound sign and six letters or numbers; the first two values correspond to red, the characters 3 and 4 represent green, and the value of blue is the last two digits.

This format follows the same logic as RGB, but its notation is very different. We explain it below.

Hexadecimal colors are formed by decimal numbers from 0 to 9, and to express higher values than 9, we use the first 6 letters of the English alphabet "ABCDEF," where A is equivalent to 10, and the rest of the letters add 1 until reaching 15.

But it's always confusing; if you remember the RGB format, it consists of 256 variations in each color channel, and the same applies to the hexadecimal model.

You may wonder how I can get 256 variants for each color channel. The formula for this result is as follows: The first value multiplied by 16, adding the second value multiplied by 1. After this formula, you can obtain the value of the three red, green, and blue channels.

What is HSL color?

HSL stands for hue, saturation, and lightness. This is similar to how RGB represents color by combining its red, green, and blue values, but with HSL, the values are much more intuitive.

Hue

Hue is represented by degrees around a circle. Consider the color wheel where the degrees range from red, 180 degrees to cyan, and 360 degrees repeating the same red.

Saturation

Saturation is represented by a perception between 0 and 100 and determines the level of gray. If the color has 100% saturation, there is no gray, and with a color with 0% saturation, it will be a colorless gray tone.

Lightness

Lightness is also represented by a percentage and determines the level of white or black. If the color has 50% lightness, it means no additional white or black is added to the color.

As you add percentage points to this value, it will change to a lighter or darker shade of the same color, depending on whether it goes up or down.

HTML Color Table with CSS Codes

Here is a table with the 140 HTML colors, native to use in your HTML tags and CSS rules.

If you need more colors for your project, you can generate palettes and find ideas for your web colors on our color palette generator

🔗 Red shades🔗 Blue shades🔗 Green shades🔗 Pink shades🔗 Violet shades🔗 Gray shades
explorarindianred#cd5c5crgb(205,92,92)hsl(0,54%,59%)
explorarlightcoral#f08080rgb(240,128,128)hsl(0,79%,73%)
explorarsalmon#fa8072rgb(250,128,114)hsl(7,94%,72%)
explorardarksalmon#e9967argb(233,150,122)hsl(16,72%,70%)
explorarlightsalmon#ffa07argb(255,160,122)hsl(18,100%,74%)
explorarcrimson#dc143crgb(220,20,60)hsl(348,84%,48%)
explorarred#ff0000rgb(255,0,0)hsl(0,100%,50%)
explorarfirebrick#b22222rgb(178,34,34)hsl(0,68%,42%)
explorardarkred#8b0000rgb(139,0,0)hsl(0,100%,28%)
explorarcyan#00ffffrgb(0,255,255)hsl(180,100%,50%)
explorarlightcyan#e0ffffrgb(224,255,255)hsl(180,100%,94%)
explorarpaleturquoise#afeeeergb(175,238,238)hsl(180,65%,81%)
exploraraquamarine#7fffd4rgb(127,255,212)hsl(160,100%,75%)
explorarturquoise#40e0d0rgb(64,224,208)hsl(174,73%,57%)
explorarmediumturquoise#48d1ccrgb(72,209,204)hsl(178,60%,56%)
explorardarkturquoise#00ced1rgb(0,206,209)hsl(181,100%,41%)
explorarcadetblue#5f9ea0rgb(95,158,160)hsl(182,26%,50%)
explorarsteelblue#4682b4rgb(70,130,180)hsl(208,44%,50%)
explorarlightsteelblue#b0c4dergb(176,196,222)hsl(214,42%,79%)
explorarpowderblue#b0e0e6rgb(176,224,230)hsl(187,52%,80%)
explorarlightblue#add8e6rgb(173,216,230)hsl(195,54%,80%)
explorarskyblue#87ceebrgb(135,206,235)hsl(198,72%,73%)
explorarlightskyblue#87cefargb(135,206,250)hsl(203,92%,76%)
explorardeepskyblue#00bfffrgb(0,191,255)hsl(196,100%,50%)
explorardodgerblue#1e90ffrgb(30,144,255)hsl(210,100%,56%)
explorarcornflowerblue#6495edrgb(100,149,237)hsl(219,80%,67%)
explorarmediumslateblue#7b68eergb(123,104,238)hsl(249,80%,68%)
explorarroyalblue#4169e1rgb(65,105,225)hsl(225,73%,57%)
explorarblue#0000ffrgb(0,0,255)hsl(240,100%,50%)
explorarmediumblue#0000cdrgb(0,0,205)hsl(240,100%,41%)
explorardarkblue#00008brgb(0,0,139)hsl(240,100%,28%)
explorarmidnightblue#191970rgb(25,25,112)hsl(240,64%,27%)
explorargreenyellow#adff2frgb(173,255,47)hsl(84,100%,60%)
explorarchartreuse#7fff00rgb(127,255,0)hsl(91,100%,50%)
explorarlawngreen#7cfc00rgb(124,252,0)hsl(91,100%,50%)
explorarlime#00ff00rgb(0,255,0)hsl(120,100%,50%)
explorarlimegreen#32cd32rgb(50,205,50)hsl(120,61%,50%)
explorarpalegreen#98fb98rgb(152,251,152)hsl(120,93%,80%)
explorarlightgreen#90ee90rgb(144,238,144)hsl(120,74%,75%)
explorarmediumspringgreen#00fa9argb(0,250,154)hsl(157,100%,50%)
explorarspringgreen#00ff7frgb(0,255,127)hsl(150,100%,50%)
explorarmediumseagreen#3cb371rgb(60,179,113)hsl(147,50%,47%)
explorarseagreen#2e8b57rgb(46,139,87)hsl(147,51%,37%)
explorarforestgreen#228b22rgb(34,139,34)hsl(120,61%,34%)
explorargreen#008000rgb(0,128,0)hsl(120,100%,26%)
explorardarkgreen#006400rgb(0,100,0)hsl(120,100%,20%)
exploraryellowgreen#9acd32rgb(154,205,50)hsl(80,61%,50%)
explorarolivedrab#6b8e23rgb(107,142,35)hsl(80,61%,35%)
explorarolive#808000rgb(128,128,0)hsl(60,100%,26%)
explorardarkolivegreen#556b2frgb(85,107,47)hsl(82,39%,31%)
explorarmediumaquamarine#66cdaargb(102,205,170)hsl(160,51%,61%)
explorardarkseagreen#8fbc8frgb(143,188,143)hsl(120,26%,65%)
explorarlightseagreen#20b2aargb(32,178,170)hsl(177,70%,42%)
explorardarkcyan#008b8brgb(0,139,139)hsl(180,100%,28%)
explorarteal#008080rgb(0,128,128)hsl(180,100%,26%)
explorarpink#ffc0cbrgb(255,192,203)hsl(350,100%,88%)
explorarlightpink#ffb6c1rgb(255,182,193)hsl(351,100%,86%)
explorarhotpink#ff69b4rgb(255,105,180)hsl(330,100%,71%)
explorardeeppink#ff1493rgb(255,20,147)hsl(328,100%,54%)
explorarmediumvioletred#c71585rgb(199,21,133)hsl(323,81%,44%)
explorarpalevioletred#db7093rgb(219,112,147)hsl(341,60%,65%)
explorarcornsilk#fff8dcrgb(255,248,220)hsl(48,100%,94%)
explorarblanchedalmond#ffebcdrgb(255,235,205)hsl(36,100%,91%)
explorarbisque#ffe4c4rgb(255,228,196)hsl(33,100%,89%)
explorarwheat#f5deb3rgb(245,222,179)hsl(40,77%,84%)
explorarburlywood#deb887rgb(222,184,135)hsl(34,57%,70%)
explorartan#d2b48crgb(210,180,140)hsl(35,44%,69%)
explorarrosybrown#bc8f8frgb(188,143,143)hsl(0,26%,65%)
explorarsandybrown#f4a460rgb(244,164,96)hsl(28,88%,67%)
explorargoldenrod#daa520rgb(218,165,32)hsl(43,75%,50%)
explorardarkgoldenrod#b8860brgb(184,134,11)hsl(43,89%,39%)
explorarperu#cd853frgb(205,133,63)hsl(30,59%,53%)
explorarchocolate#d2691ergb(210,105,30)hsl(25,75%,48%)
explorarsaddlebrown#8b4513rgb(139,69,19)hsl(25,76%,31%)
explorarsienna#a0522drgb(160,82,45)hsl(20,57%,41%)
explorarbrown#a52a2argb(165,42,42)hsl(0,60%,41%)
explorarmaroon#800000rgb(128,0,0)hsl(0,100%,26%)
explorarlightsalmon#ffa07argb(255,160,122)hsl(18,100%,74%)
explorarcoral#ff7f50rgb(255,127,80)hsl(17,100%,66%)
explorartomato#ff6347rgb(255,99,71)hsl(10,100%,64%)
explorarorangered#ff4500rgb(255,69,0)hsl(17,100%,50%)
explorardarkorange#ff8c00rgb(255,140,0)hsl(33,100%,50%)
explorarorange#ffa500rgb(255,165,0)hsl(39,100%,50%)
explorargold#ffd700rgb(255,215,0)hsl(51,100%,50%)
exploraryellow#ffff00rgb(255,255,0)hsl(60,100%,50%)
explorarlightyellow#ffffe0rgb(255,255,224)hsl(60,100%,94%)
explorarlightgoldenrodyellow#fafad2rgb(250,250,210)hsl(60,81%,91%)
explorarlemonchiffon#fffacdrgb(255,250,205)hsl(54,100%,91%)
explorarpapayawhip#ffefd5rgb(255,239,213)hsl(38,100%,92%)
explorarmoccasin#ffe4b5rgb(255,228,181)hsl(39,100%,86%)
explorarpeachpuff#ffdab9rgb(255,218,185)hsl(29,100%,87%)
explorarpalegoldenrod#eee8aargb(238,232,170)hsl(55,67%,80%)
explorarkhaki#f0e68crgb(240,230,140)hsl(54,77%,75%)
explorardarkkhaki#bdb76brgb(189,183,107)hsl(56,39%,59%)
explorarlavender#e6e6fargb(230,230,250)hsl(240,67%,95%)
explorarthistle#d8bfd8rgb(216,191,216)hsl(300,25%,80%)
explorarplum#dda0ddrgb(221,160,221)hsl(300,48%,75%)
explorarviolet#ee82eergb(238,130,238)hsl(300,77%,73%)
explorarorchid#da70d6rgb(218,112,214)hsl(303,59%,65%)
explorarfuchsia#ff00ffrgb(255,0,255)hsl(300,100%,50%)
explorarmagenta#ff00ffrgb(255,0,255)hsl(300,100%,50%)
explorarmediumorchid#ba55d3rgb(186,85,211)hsl(289,59%,59%)
explorarmediumpurple#9370dbrgb(147,112,219)hsl(260,60%,65%)
explorarblueviolet#8a2be2rgb(138,43,226)hsl(272,76%,53%)
explorardarkviolet#9400d3rgb(148,0,211)hsl(283,100%,42%)
explorardarkorchid#9932ccrgb(153,50,204)hsl(281,61%,50%)
explorardarkmagenta#8b008brgb(139,0,139)hsl(300,100%,28%)
explorarpurple#800080rgb(128,0,128)hsl(300,100%,26%)
explorarindigo#4b0082rgb(75,0,130)hsl(275,100%,26%)
explorarslateblue#6a5acdrgb(106,90,205)hsl(249,54%,58%)
explorardarkslateblue#483d8brgb(72,61,139)hsl(249,39%,40%)
explorargainsboro#dcdcdcrgb(220,220,220)hsl(0,0%,87%)
explorarlightgrey#d3d3d3rgb(211,211,211)hsl(0,0%,83%)
explorarsilver#c0c0c0rgb(192,192,192)hsl(0,0%,76%)
explorardarkgray#a9a9a9rgb(169,169,169)hsl(0,0%,67%)
explorargray#808080rgb(128,128,128)hsl(0,0%,51%)
explorardimgray#696969rgb(105,105,105)hsl(0,0%,42%)
explorarlightslategray#778899rgb(119,136,153)hsl(210,15%,54%)
explorarslategray#708090rgb(112,128,144)hsl(210,13%,51%)
explorardarkslategray#2f4f4frgb(47,79,79)hsl(180,26%,25%)
explorarblack#000000rgb(0,0,0)hsl(0,0%,0%)
explorarwhite#ffffffrgb(255,255,255)hsl(0,0%,100%)
explorarsnow#fffafargb(255,250,250)hsl(0,100%,100%)
explorarhoneydew#f0fff0rgb(240,255,240)hsl(120,100%,98%)
explorarmintcream#f5fffargb(245,255,250)hsl(150,100%,99%)
explorarazure#f0ffffrgb(240,255,255)hsl(180,100%,98%)
exploraraliceblue#f0f8ffrgb(240,248,255)hsl(208,100%,98%)
explorarghostwhite#f8f8ffrgb(248,248,255)hsl(240,100%,99%)
explorarwhitesmoke#f5f5f5rgb(245,245,245)hsl(0,0%,97%)
explorarseashell#fff5eergb(255,245,238)hsl(25,100%,97%)
explorarbeige#f5f5dcrgb(245,245,220)hsl(60,56%,92%)
exploraroldlace#fdf5e6rgb(253,245,230)hsl(40,86%,95%)
explorarfloralwhite#fffaf0rgb(255,250,240)hsl(40,100%,98%)
explorarivory#fffff0rgb(255,255,240)hsl(60,100%,98%)
explorarantiquewhite#faebd7rgb(250,235,215)hsl(35,78%,92%)
explorarlinen#faf0e6rgb(250,240,230)hsl(30,67%,95%)
explorarlavenderblush#fff0f5rgb(255,240,245)hsl(340,100%,98%)
explorarmistyrose#ffe4e1rgb(255,228,225)hsl(7,100%,95%)