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 (there are 140 color names). For more precise 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 a series of 2-digit Hexadecimal numbers x 3 beginning 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, and BB values to get your desired color.
00 = 255 = Lowest 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 colors that specify the intensity by number. Starting from 0 to 255 number where 0 is the lowest or zero intensity of color and 255 is 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 the transparency of the color, just add 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>
It's a basic HTML5 color code. There are not many examples, but these are the most commonly used color codes in web applications or HTML pages.
That just the basic. If you need more deep learning about HTML, CSS, Javascript or related you can take the following cheap course:
- HTML & HTML5 For Beginners (A Practical Guide)
- Web - HTML
- Learn HTML, CSS, JAVASCRIPT
- JavaScript:
- Learn JavaScript Fundamentals
- Learning JavaScript Shell Scripting
Thanks!