Skip to Content

HTML Color Codes: RGB & Hexadecimal

In this tutorial, you'll learn how to create colors in HTML using RGB and hexadecimal color codes. Afterward, I've provided a reference to the 140 predefined HTML color codes and names available along with their RGB and hexadecimal values as a quick reference. Let's get started!

What are HTML Color Codes?

HTML color codes are used to represent color in a format that a computer's display can interpret and understand. These values include RGB colors, hexadecimal values, color names, and more.

We'll go through a few of these different methods so you can get an understanding of how it all works!

RGB Color Codes

RGB color codes are defined using three parameters in this format:

rgb(red, green, blue)

Each parameter above defines the intensity of the color using integers between 0 and 255, where 0 is the complete absence of color and 255 is the full presence of color.

With that in mind, the colors red, green, and blue can be defined using the following RGB color codes:

rgb(255, 0, 0) - Red
rgb(0, 255, 0) - Green
rgb(0, 0, 255) - Blue

Changing the Opacity of RGB Colors

To expand on RGB color codes a step further, you can also change the opacity of your defined color using a different method rgba(), where the a means alpha, and can be defined by setting a decimal value between 0 and 1.

Here is an example that would show the color red at full opacity:

rgba(255, 0, 0, 1);

And here is an example that would show the color red at 50% opacity:

rgba(255, 0, 0, 0.5);

Hexadecimal Color Codes

The most popular method used to date is hexadecimal color codes. They're essentially three-byte hexadecimal numbers, meaning they consist of six digits. Each byte is a two-character code that represents the intensity of three colors: red, green, and blue. Here's a visual representation of how these character codes are organized:

#XXXXXX

Hexadecimal code values range from 00, the lowest color intensity, to FF, the highest color intensity. Respectively, #000000 represents black, or the full absence of color, and #FFFFFF represents white, or the full presence of color.

Using the visual representation for how hexadecimal color codes are defined above, we can now determine how to define the colors red, green, and blue:

#FF0000 - Red
#00FF00 - Green
#0000FF - Blue

Again, where 00 represents the absence of color and FF represents the presence of color. Once you get the hang of it, this makes it easier to determine color definition with hexadecimal codes on the fly.

HTML Color Code Chart

Modern browsers support the full spectrum of 24-bit color, meaning there are 16,777,216 different color possibilities to choose from. That's a lot of color choices! Too many for anyone to have time to sit down and sort through them all.

Luckily, you don't have to! HTML provides 140 unique color names that make filtering and choosing a lot easier. Here is the full list of HTML color codes and names available, along with their associated RGB and hexadecimal values:

Color Name Hex Code (#RRGGBB) Decimal code (R,G,B)
 maroon#800000(128,0,0)
 dark red#8B0000(139,0,0)
 brown#A52A2A(165,42,42)
 firebrick#B22222(178,34,34)
 indian red#CD5C5C(205,92,92)
 light coral#F08080(240,128,128)
 crimson#DC143C(220,20,60)
 red#FF0000(255,0,0)
 orange red#FF4500(255,69,0)
 tomato#FF6347(255,99,71)
 coral#FF7F50(255,127,80)
 light salmon#FFA07A(255,160,122)
 dark salmon#E9967A(233,150,122)
 salmon#FA8072(250,128,114)
 dark orange#FF8C00(255,140,0)
 orange#FFA500(255,165,0)
 gold#FFD700(255,215,0)
 yellow#FFFF00(255,255,0)
 khaki#F0E68C(240,230,140)
 pale golden rod#EEE8AA(238,232,170)
 dark khaki#BDB76B(189,183,107)
 golden rod#DAA520(218,165,32)
 dark golden rod#B8860B(184,134,11)
 olive#808000(128,128,0)
 olive drab#6B8E23(107,142,35)
 dark olive green#556B2F(85,107,47)
 dark green#006400(0,100,0)
 green#008000(0,128,0)
 forest green#228B22(34,139,34)
 dark sea green#8FBC8F(143,188,143)
 yellow green#9ACD32(154,205,50)
 pale green#98FB98(152,251,152)
 light green#90EE90(144,238,144)
 medium spring green#00FA9A(0,250,154)
 spring green#00FF7F(0,255,127)
 lime#00FF00(0,255,0)
 lawn green#7CFC00(124,252,0)
 chart reuse#7FFF00(127,255,0)
 green yellow#ADFF2F(173,255,47)
 lime green#32CD32(50,205,50)
 medium sea green#3CB371(60,179,113)
 sea green#2E8B57(46,139,87)
 teal#008080(0,128,128)
 dark cyan#008B8B(0,139,139)
 light sea green#20B2AA(32,178,170)
 medium aqua marine#66CDAA(102,205,170)
 aqua marine#7FFFD4(127,255,212)
 turquoise#40E0D0(64,224,208)
 dark turquoise#00CED1(0,206,209)
 medium turquoise#48D1CC(72,209,204)
 aqua#00FFFF(0,255,255)
 cyan#00FFFF(0,255,255)
 light cyan#E0FFFF(224,255,255)
 pale turquoise#AFEEEE(175,238,238)
 powder blue#B0E0E6(176,224,230)
 cadet blue#5F9EA0(95,158,160)
 steel blue#4682B4(70,130,180)
 midnight blue#191970(25,25,112)
 navy#000080(0,0,128)
 dark blue#00008B(0,0,139)
 medium blue#0000CD(0,0,205)
 blue#0000FF(0,0,255)
 royal blue#4169E1(65,105,225)
 dodger blue#1E90FF(30,144,255)
 corn flower blue#6495ED(100,149,237)
 deep sky blue#00BFFF(0,191,255)
 sky blue#87CEEB(135,206,235)
 light sky blue#87CEFA(135,206,250)
 light blue#ADD8E6(173,216,230)
 indigo#4B0082(75,0,130)
 dark slate blue#483D8B(72,61,139)
 blue violet#8A2BE2(138,43,226)
 slate blue#6A5ACD(106,90,205)
 medium slate blue#7B68EE(123,104,238)
 medium purple#9370DB(147,112,219)
 purple#800080(128,0,128)
 dark magenta#8B008B(139,0,139)
 dark violet#9400D3(148,0,211)
 dark orchid#9932CC(153,50,204)
 medium orchid#BA55D3(186,85,211)
 orchid#DA70D6(218,112,214)
 violet#EE82EE(238,130,238)
 plum#DDA0DD(221,160,221)
 thistle#D8BFD8(216,191,216)
 medium violet red#C71585(199,21,133)
 deep pink#FF1493(255,20,147)
 magenta / fuchsia#FF00FF(255,0,255)
 hot pink#FF69B4(255,105,180)
 pale violet red#DB7093(219,112,147)
 light pink#FFB6C1(255,182,193)
 pink#FFC0CB(255,192,203)
 wheat#F5DEB3(245,222,179)
 bisque#FFE4C4(255,228,196)
 blanched almond#FFEBCD(255,235,205)
 light golden rod yellow#FAFAD2(250,250,210)
 lemon chiffon#FFFACD(255,250,205)
 light yellow#FFFFE0(255,255,224)
 corn silk#FFF8DC(255,248,220)
 beige#F5F5DC(245,245,220)
 antique white#FAEBD7(250,235,215)
 saddle brown#8B4513(139,69,19)
 sienna#A0522D(160,82,45)
 chocolate#D2691E(210,105,30)
 peru#CD853F(205,133,63)
 sandy brown#F4A460(244,164,96)
 burly wood#DEB887(222,184,135)
 tan#D2B48C(210,180,140)
 rosy brown#BC8F8F(188,143,143)
 peach puff#FFDAB9(255,218,185)
 navajo white#FFDEAD(255,222,173)
 moccasin#FFE4B5(255,228,181)
 papaya whip#FFEFD5(255,239,213)
 dark slate gray#2F4F4F(47,79,79)
 slate gray#708090(112,128,144)
 light slate gray#778899(119,136,153)
 light steel blue#B0C4DE(176,196,222)
 lavender#E6E6FA(230,230,250)
 alice blue#F0F8FF(240,248,255)
 ghost white#F8F8FF(248,248,255)
 azure#F0FFFF(240,255,255)
 mint cream#F5FFFA(245,255,250)
 honeydew#F0FFF0(240,255,240)
 ivory#FFFFF0(255,255,240)
 snow#FFFAFA(255,250,250)
 lavender blush#FFF0F5(255,240,245)
 floral white#FFFAF0(255,250,240)
 sea shell#FFF5EE(255,245,238)
 old lace#FDF5E6(253,245,230)
 linen#FAF0E6(250,240,230)
 misty rose#FFE4E1(255,228,225)
 black#000000(0,0,0)
 dim gray / dim grey#696969(105,105,105)
 gray / grey#808080(128,128,128)
 dark gray / dark grey#A9A9A9(169,169,169)
 silver#C0C0C0(192,192,192)
 light gray / light grey#D3D3D3(211,211,211)
 gainsboro#DCDCDC(220,220,220)
 white smoke#F5F5F5(245,245,245)
 white#FFFFFF(255,255,255)

Conclusion

Thankfully, HTML makes it easy to choose a quick color on the fly with its predefined color names. However, you can get real crafty and explore the over 16.7 million HTML color codes, picking the perfect color for your page elements.

Last Updated: May 14, 2022
Created: January 22, 2022

Comments

There are no comments yet. Start the conversation!

Leave a Comment

Comment Etiquette: Wrap code in a <code> and </code>. Please keep comments on-topic, do not post spam, keep the conversation constructive, and be nice to each other.