Colors in HTML: codes, names + table

⭐ Colors in HTML play a fundamental role in the design of your website. Discover how to use RGB, hexadecimal, and HSL to create the right ambiance.

Colors in HTML: codes, names + table

HTML color codes are combinations of three colors in hexadecimal format representing the colors red, green, and blue (#RRGGBB). These codes are widely used in web page creation to change the background, text, and table colors, as well as in image editing programs like Adobe Photoshop.

In this article, we will discuss HTML color codes and names, how they are formed, and how they work.

table of html colors

HTML Color Names

In addition to hexadecimal color codes, HTML also supports a number of predefined color names that can be used instead of the codes.

Some common color namesin html are: "red" , "green" , "blue" , "yellow" , "white" , "black" , and "gray"

For example, instead of using the code #FF0000 for red, you can use the color name "red" in HTML and CSS. This format is easier to remember than hexadecimal codes and can be useful in situations where a specific color is needed.

Format of HTML Color Codes

Each color code in HTML is composed of the "#" symbol followed by six letters or numbers. These numbers are in the hexadecimal numeral system, which means that each letter or number represents a numerical value ranging from 0 to 15.

For example, the letter "A" in hexadecimal represents the number 10 in decimal, while the letter "F" represents the number 15. Therefore, the combination of letters and numbers in a hexadecimal color code can represent any numerical value between 0 and 255 in each of the color components (red, green, and blue).

Understanding Hexadecimal Colors

Hexadecimal colors are a way to represent colors in digital systems, especially on the web. This system uses a base 16, which includes the numbers from 0 to 9 and the letters from A to F, to express color values in three components: red, green, and blue (RGB). Each color is represented by a six-digit code preceded by the '#' symbol. For example, black is represented as #000000 and white as #FFFFFF.

The Structure of Hexadecimal Colors

To delve deeper into the concept of colors in hexadecimal, it's crucial to understand their structure. Each pair of digits in the code represents the intensity of the red, green, and blue colors, in that order. Therefore, the code is divided into three parts: #RRGGBB. The intensity of each color can vary between 00 (minimum) and FF (maximum), which allows for more than 16 million possible color combinations. This wide range of colors makes the hexadecimal color palette extremely versatile for web and graphic design.

How HTML Color Code Theory Works

Each color code in HTML represents the combination of three numerical values that represent the intensity of the red, green, and blue colors. These values are combined to create the desired color.

For example, the color code #FF0000 represents the maximum intensity of the red color, and the total absence of green and blue colors. As a result, the color displayed is pure red.

Similarly, the color code #00FF00 represents the maximum intensity of the green color, and the total absence of the red and blue colors. As a result, the color displayed is pure green.

HTML Color Table

🔗 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%)