In this tutorial, you will learn how to find or understand the HTML color codes in Color Name, Hexadecimal, RGB, and RGB with Alpha. You can use your desired color implementation. If you need a simple, basic, and standard color, you use it by name directly (they are 140 color names). For more precision color, you can use Hexadecimal or RGB. Additionally, if you need to set opacity or color transparency, you can use RGBA or RGB with Alpha.
HTML Color By Names
Here's the list of HTML 5 colors by names including the color HEX codes and color previews.
| Color Name | HEX Codes | Color |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 | |
| Black | #000000 | |
| BlanchedAlmond | #FFEBCD | |
| Blue | #0000FF | |
| BlueViolet | #8A2BE2 | |
| Brown | #A52A2A | |
| BurlyWood | #DEB887 | |
| CadetBlue | #5F9EA0 | |
| Chartreuse | #7FFF00 | |
| Chocolate | #D2691E | |
| Coral | #FF7F50 | |
| CornflowerBlue | #6495ED | |
| Cornsilk | #FFF8DC | |
| Crimson | #DC143C | |
| Cyan | #00FFFF | |
| DarkBlue | #00008B | |
| DarkCyan | #008B8B | |
| DarkGoldenRod | #B8860B | |
| DarkGray | #A9A9A9 | |
| DarkGrey | #A9A9A9 | |
| DarkGreen | #006400 | |
| DarkKhaki | #BDB76B | |
| DarkMagenta | #8B008B | |
| DarkOliveGreen | #556B2F | |
| DarkOrange | #FF8C00 | |
| DarkOrchid | #9932CC | |
| DarkRed | #8B0000 | |
| DarkSalmon | #E9967A | |
| DarkSeaGreen | #8FBC8F | |
| DarkSlateBlue | #483D8B | |
| DarkSlateGray | #2F4F4F | |
| DarkSlateGrey | #2F4F4F | |
| DarkTurquoise | #00CED1 | |
| DarkViolet | #9400D3 | |
| DeepPink | #FF1493 | |
| DeepSkyBlue | #00BFFF | |
| DimGray | #696969 | |
| DimGrey | #696969 | |
| DodgerBlue | #1E90FF | |
| FireBrick | #B22222 | |
| FloralWhite | #FFFAF0 | |
| ForestGreen | #228B22 | |
| Fuchsia | #FF00FF | |
| Gainsboro | #DCDCDC | |
| GhostWhite | #F8F8FF | |
| Gold | #FFD700 | |
| GoldenRod | #DAA520 | |
| Gray | #808080 | |
| Grey | #808080 | |
| Green | #008000 | |
| GreenYellow | #ADFF2F | |
| HoneyDew | #F0FFF0 | |
| HotPink | #FF69B4 | |
| IndianRed | #CD5C5C | |
| Indigo | #4B0082 | |
| Ivory | #FFFFF0 | |
| Khaki | #F0E68C | |
| Lavender | #E6E6FA | |
| LavenderBlush | #FFF0F5 | |
| LawnGreen | #7CFC00 | |
| LemonChiffon | #FFFACD | |
| LightBlue | #ADD8E6 | |
| LightCoral | #F08080 | |
| LightCyan | #E0FFFF | |
| LightGoldenRodYellow | #FAFAD2 | |
| LightGray | #D3D3D3 | |
| LightGrey | #D3D3D3 | |
| LightGreen | #90EE90 | |
| LightPink | #FFB6C1 | |
| LightSalmon | #FFA07A | |
| LightSeaGreen | #20B2AA | |
| LightSkyBlue | #87CEFA | |
| LightSlateGray | #778899 | |
| LightSlateGrey | #778899 | |
| LightSteelBlue | #B0C4DE | |
| LightYellow | #FFFFE0 | |
| Lime | #00FF00 | |
| LimeGreen | #32CD32 | |
| Linen | #FAF0E6 | |
| Magenta | #FF00FF | |
| Maroon | #800000 | |
| MediumAquaMarine | #66CDAA | |
| MediumBlue | #0000CD | |
| MediumOrchid | #BA55D3 | |
| MediumPurple | #9370DB | |
| MediumSeaGreen | #3CB371 | |
| MediumSlateBlue | #7B68EE | |
| MediumSpringGreen | #00FA9A | |
| MediumTurquoise | #48D1CC | |
| MediumVioletRed | #C71585 | |
| MidnightBlue | #191970 | |
| MintCream | #F5FFFA | |
| MistyRose | #FFE4E1 | |
| Moccasin | #FFE4B5 | |
| NavajoWhite | #FFDEAD | |
| Navy | #000080 | |
| OldLace | #FDF5E6 | |
| Olive | #808000 | |
| OliveDrab | #6B8E23 | |
| Orange | #FFA500 | |
| OrangeRed | #FF4500 | |
| Orchid | #DA70D6 | |
| PaleGoldenRod | #EEE8AA | |
| PaleGreen | #98FB98 | |
| PaleTurquoise | #AFEEEE | |
| PaleVioletRed | #DB7093 | |
| PapayaWhip | #FFEFD5 | |
| PeachPuff | #FFDAB9 | |
| Peru | #CD853F | |
| Pink | #FFC0CB | |
| Plum | #DDA0DD | |
| PowderBlue | #B0E0E6 | |
| Purple | #800080 | |
| RebeccaPurple | #663399 | |
| Red | #FF0000 | |
| RosyBrown | #BC8F8F | |
| RoyalBlue | #4169E1 | |
| SaddleBrown | #8B4513 | |
| Salmon | #FA8072 | |
| SandyBrown | #F4A460 | |
| SeaGreen | #2E8B57 | |
| SeaShell | #FFF5EE | |
| Sienna | #A0522D | |
| Silver | #C0C0C0 | |
| SkyBlue | #87CEEB | |
| SlateBlue | #6A5ACD | |
| SlateGray | #708090 | |
| SlateGrey | #708090 | |
| Snow | #FFFAFA | |
| SpringGreen | #00FF7F | |
| SteelBlue | #4682B4 | |
| Tan | #D2B48C | |
| Teal | #008080 | |
| Thistle | #D8BFD8 | |
| Tomato | #FF6347 | |
| Turquoise | #40E0D0 | |
| Violet | #EE82EE | |
| Wheat | #F5DEB3 | |
| White | #FFFFFF | |
| WhiteSmoke | #F5F5F5 | |
| Yellow | #FFFF00 | |
| YellowGreen | #9ACD32 |
Example 1: Color by name
<html>
<head><title>Color Code Example</title><head>
<body>
<h1 style="color: red">Full Red Color</h1>
<h1 style="color: green">Full Green Color</h1>
<h1 style="color: blue">Full Blue Color</h1>
<h1 style="color: yellow">Full Yellow Color</h1>
<h1 style="color: cyan">Full Cyan Color</h1>
<h1 style="color: purple">Full Purple Color</h1>
</body>
</html>
HTML Color By Hexadecimal
The HTML color by Hexadecimal is the series of 2 digit Hexadecimal x 3 begin with hash '#'.
So the formula of color combination in HEX is: #RRGGBB
RR = Red value in HEX
GG = Green Value in HEX
BB = Blue Value in HEX
Just adjust the intensity of each Red, Green, and Blue by changing the RR, GG, BB values to get your desired color.
00 = 255 = Lowes to zero intensity of Red/Green/Blue
FF = 0 = Highest intensity of Red/Green/Blue
Example 1: Single Color
<html>
<head><title>Color Code Example</title><head>
<body>
<h1>Single color example</h1>
<h1 style="color: #FF0000">Full Red Color</h1>
<h1 style="color: #00FF00">Full Green Color</h1>
<h1 style="color: #0000FF">Full Blue Color</h1>
</body>
</html>
Example 2: Color Combination
<html>
<head><title>Color Code Example</title><head>
<body>
<h1>Combination Color Code </h1>
<h1 style="color: #FFFF00">Red + Green = Yellow</h1>
<h1 style="color: #00FFFF">Green + Blue = Cyan</h1>
<h1 style="color: #FF00FF">Red + Blue = Purple</h1>
</body>
</html>
HTML Color By RGB (Red, Green, Blue)
The HTML RGB color codes use a combination of Red, Green, and Blue color that specify the intensity by number. Starting from 0 to 255 number which 0 is the lowest or zero intensity of color and 255 the highest intensity of color.
The formula is like this: RGB(RRR, GGG, BBB)
RRR = Red color in 3 digit number 0 - 255
GGG = Green color in 3 digit number 0 - 255
BBB = Blue Color in 3 digit number 0 - 255
Example 3: Single RGB HTML color
<html>
<head><title>Color Code Example</title><head>
<body>
<h1 style="color: RGB(255,0,0)">Full Red Color</h1>
<h1 style="color: RGB(0,255,0)">Full Green Color</h1>
<h1 style="color: RGB(0,0,255)">Full Blue Color</h1>
</body>
</html>
Example 4: 2 color combination of HTML RGB
<html>
<head><title>Color Code Example</title><head>
<body>
<h1 style="color: RGB(255,255,0)">Red + Green = Yellow</h1>
<h1 style="color: RGB(0,255,255)">Green + Blue = Cyan</h1>
<h1 style="color: RGB(255,0,255)">Red + Blue = Purple</h1>
</body>
</html>
HTML Color Transparency By RGBA (Red, Green, Blue, Alpha)
To show transparency if the color, just adds alpha to the RGB color codes.
The formula is like this: RGBA(RRR, GGG, BBB, A.A)
RRR = Red color in 3 digit number 0 - 255
GGG = Green color in 3 digit number 0 - 255
BBB = Blue Color in 3 digit number 0 - 255
A.A = Alpha/Transparency in float number 0.0 - 1.0
Example 5: Single RGBA color
<html>
<head><title>Color Code Example</title><head>
<body>
<h1 style="color: RGBA(255,0,0,0.5)">Full Red Color</h1>
<h1 style="color: RGBA(0,255,0,0.8)">Full Green Color</h1>
<h1 style="color: RGBA(0,0,255,0.1)">Full Blue Color</h1>
</body>
</html>
Example 6: 2 RGBA color combination
<html>
<head><title>Color Code Example</title><head>
<body>
<h1 style="color: RGBA(255,255,0, 0.3)">Red + Green = Yellow</h1>
<h1 style="color: RGBA(0,255,255, 0.6)">Green + Blue = Cyan</h1>
<h1 style="color: RGBA(255,0,255, 1.0)">Red + Blue = Purple</h1>
</body>
</html>
That it's, a simple basic of HTML 5 color codes. There's not much example, but this is the most used color codes in the web application or HTML pages.
Thanks!