Skip to Content

HTML Color Codes: Hexadecimal & RGB

HTML color codes play a crucial role in web development, influencing the visual aesthetics and user experience of a website. They're essential for creating visually appealing and cohesive web pages.

In this tutorial, you'll learn how to work with colors in HTML using hexadecimal and RGB color codes. Afterward, I've provided a reference to the 140 predefined color codes and names available for you to use in your code along with their hexadecimal and RGB values.

Basics of HTML Color Codes

HTML color codes are alphanumeric representations of colors used in web design. They can be specified in various formats, but the most common ones are hexadecimal (hex) and RGB (Red, Green, Blue).

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

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.

RGB Color Codes

RGB color codes are defined a bit differently 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 color codes:

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

RBGA Color Codes

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);

HTML Color Code Reference 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 color codes and names available, along with their associated hexadecimal and RGB 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

Understanding HTML color codes is fundamental for creating visually appealing and harmonious web designs. Whether you're using hex, RGB, named colors, or RGBA, the key is to experiment and find the color schemes that best suit your website's aesthetics. As you delve deeper into web development, mastering color codes will empower you to create engaging and user-friendly interfaces.

Last Updated: December 04, 2023
Created: January 22, 2022

Comments

There are no comments yet. Start the conversation!

Add 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.