HTML and CSS Color Codes and How to Combine
Everyone has a different reaction to external stimuli so the perception of color between one individual and another is also different. That is why web designers need to understand the combination and use of CSS and HTML color codes on a website.
The color scheme is one of the factors that determine the success or failure of a website. Color is an element that can have a psychological impact on the observer.
So, what is a CSS color code? What is an HTML color code?
HTML ( Hypertext Markup Language ) color codes are indicated by six characters after the hashtag (#), for example, #000000. HTML colors are set using the HEX code which is the hexadecimal notion of RGB.
You need to remember that colors are represented by three groups of HEX numbers, where each group represents a specific color.
The three colors are red, green, and blue and the color model composed of all three is called RGB ( Red, Green, Blue ).
The background of a website is an important part that needs attention too. With the help of CSS ( Cascading Style Sheets ), you can create web page backgrounds and other entries.
Not only that, but CSS also allows you to use the surrounding 16,777,216 colors each represented by a name, RGB code, or HEX code.
Table of Contents
- List of HTML and CSS Color Codes
- Color Code Combination for Website
- How to Use Color Code
- Closing Thoughts
List of HTML and CSS Color Codes
Here are CSS and HTML color codes that you can use as references for color branding or web design.
| Color Name | Heximal Code | RGB |
|---|---|---|
| Alice Blue | #F0F8FF | RGB (240, 248, 254) |
| Antique White | #FAEBD7 | RGB (251, 235, 217) |
| Aqua | #00FFFF | RGB(0, 255, 254) |
| Aquamarine | #7FFFD4 | RGB (115, 255, 216) |
| Azure | #F0FFFF | RGB (239, 255, 255) |
| beige | #F5F5DC | RGB (245, 245, 223) |
| Bisque | #FFE4C4 | RGB (255, 227, 200) |
| Black | #000000 | RGB(0, 0, 0) |
| Blanched Almond | #FFEBCD | RGB(255, 234, 208) |
| Blue | #0000FF | RGB(0, 0,255) |
| Blue Violet | #8A2BE2 | RGB (138, 43, 226) |
| Brown | #A52A2A | RGB(165, 42, 42) |
| Burly Wood | #DEB887 | RGB (222, 184, 135) |
| Cadet Blue | #5F9EA0 | RGB (95, 158, 160) |
| Chartreuse | #7FFF00 | RGB (127, 255, 1) |
| Chocolate | #D2691E | RGB (210, 105, 30) |
| Coral | #FF7F50 | RGB (251, 127, 80) |
| Cornflower Blue | #6495ED | RGB (100, 149, 237) |
| Cornsilk | #FFF8DC | RGB (225, 248, 220) |
| Crimson | #DC143C | RGB (220, 20, 60) |
| cyan | #00FFFF | RGB (62, 254, 255) |
| Dark Blue | #00008B | RGB(0, 0, 139) |
| Dark Cyan | #008B8B | RGB (29, 139, 139) |
| Dark Golden Rod | #B8860B | RGB (184, 134, 11) |
| Dark Gray | #A9A9A9 | RGB (169, 169, 169) |
| Dark Green | #006400 | RGB(19, 100, 0) |
| Dark Khaki | #BDB76B | RGB (189, 183, 107) |
| Dark Magenta | #8B008B | RGB(139, 0, 140) |
| Dark Olive Green | #556B2F | RGB (85, 107, 47) |
| Dark Orange | #FF8C00 | RGB (251, 140, 1) |
| Dark Orchid | #9932CC | RGB (153, 50, 204) |
| Dark Red | #8B0000 | RGB(139, 5, 0) |
| Dark Salmon | #E9967A | RGB (233, 150, 122) |
| Dark Sea Green | #8FBC8F | RGB (143, 188, 144) |
| Dark Slate Blue | #483D8B | RGB (72, 61, 139) |
| Dark Slate Gray | #2F4F4F | RGB (47, 79, 79) |
| Dark Turquoise | #00CED1 | RGB (48, 206, 209) |
| Dark Violet | #9400D3 | RGB(148, 0, 211) |
| Deep Pink | #FF1493 | RGB (249, 19, 147) |
| Deep Sky Blue | #00BFFF | RGB (43, 191, 254) |
| Dim Gray | #696969 | RGB (105, 105, 105) |
| Dodger Blue | #1E90FF | RGB (30, 144, 255) |
| Fire Brick | #B22222 | RGB (178, 34, 33) |
| Floral White | #FFAF0 | RGB (255, 250, 240) |
| Forest Green | #228B22 | RGB (34, 139, 35) |
| Fuchsia | #FF00FF | RGB(249, 0, 255) |
| Gainsboro | #DCDCDC | RGB (220, 220, 220) |
| Ghost White | #F8F8FF | RGB (248, 248, 255) |
| Gold | #FFD700 | RGB (253, 215, 3) |
| Golden Rod | #DAA520 | RGB (218, 165, 32) |
| Gray | #808080 | RGB (128, 128, 128) |
| Green | #008000 | RGB(27, 128, 1) |
| Green Yellow | #ADFF2F | RGB (173, 255, 48) |
| Honey Dew | #F0FFF0 | RGB (240, 255, 240) |
| Hot Pink | #FF69B4 | RGB (240, 255, 240) |
| Indian Red | #CD5C5C | RGB (205, 92, 92) |
| Indigo | #4B0082 | RGB(75, 0, 130) |
| Ivory | #FFFFF0 | RGB (255, 255, 239) |
| Khaki | #F0E68C | RGB (240, 230, 140) |
| Lavender | #E6E6FA | RGB (230, 230, 250) |
| Lavender Blush | #FFF0F5 | RGB (254, 240, 245) |
| Lawn Green | #7CFC00 | RGB (124, 252, 2) |
| Lemon Chiffon | #FFFACD | RGB(255, 250, 205) |
| light blue | #ADD8E6 | RGB (173, 216, 230) |
| Light Coral | #F08080 | RGB (240, 128, 128) |
| Light Cyan | #E0FFFF | RGB (224, 255, 255) |
| Light Goldenrod Yellow | #FAFAD2 | RGB (250, 250, 210) |
| light gray | #D3D3D3 | RGB (211, 211, 211) |
| light green | #90EE90 | RGB (144, 238, 144) |
| light pink | #FFB6C1 | RGB (252, 182, 193) |
| Light Salmon | #FFA07A | RGB (251, 160, 122) |
| Light Sea Green | #20B2AA | RGB (40, 178, 170) |
| Light Sky Blue | #87CEFA | RGB (135, 206, 250) |
| Light Slate Gray | #778899 | RGB (119, 136, 153) |
| Light Steel Blue | #B0C4DE | RGB (176, 196, 222) |
| light yellow | #FFFFE0 | RGB(255, 255, 224) |
| lime | #00FF00 | RGB(63, 255, 0) |
| Lime Green | #32CD32 | RGB (50, 205, 50) |
| Linen | #FAF0E6 | RGB (250, 240, 230) |
| magenta | #FF00FF | RGB(249, 0, 255) |
| Maroon | #800000 | RGB (128, 4, 0) |
| Medium Aqua Marine | #66CDAA | RGB (102, 205, 170) |
| Medium Blue | #0000CD | RGB(0, 0, 205) |
| Medium Orchid | #BA55D3 | RGB (186, 85, 211) |
| Medium Purple | #9370DB | RGB (147, 112, 219) |
| Medium Sea Green | #3CB371 | RGB (60, 179, 113) |
| Medium Slate Blue | #7B68EE | RGB (123, 103, 238) |
| Medium Spring Green | #00FA9A | RGB (62, 250, 153) |
| Medium Turquoise | #48D1CC | RGB (72, 209, 204) |
| Medium Violet Red | #C71585 | RGB (199, 21, 133) |
| Midnight Blue | #191970 | RGB (25, 25, 112) |
| Mint Cream | #F5FFFA | RGB (245, 255, 250) |
| Misty Rose | #FFE4E1 | RGB (254, 228, 225) |
| Moccasins | #FFE4B5 | RGB (254, 228, 181) |
| Navajo White | #FFDEAD | RGB (254, 222, 173) |
| Navy | #000080 | RGB(0, 0.128) |
| Old Lace | #FDF5E6 | RGB (253, 245, 230) |
| Olive | #808000 | RGB (128, 128, 1) |
| Olive Drab | #6B8E23 | RGB (107, 142, 35) |
| Orange | #FFA500 | RGB (252, 165, 3) |
| Orange Red | #FF4500 | RGB(250, 69, 1) |
| Orchid | #DA70D6 | RGB (218, 112, 214) |
| Pale Golden Rod | #EEE8AA | RGB (238, 232, 170) |
| Pale Green | #98FB98 | RGB (152, 251, 153) |
| Pale Turquoise | #AFEEEE | RGB (175, 238, 239) |
| Pale Violet Red | #DB7093 | RGB (219, 112, 147) |
| Papaya Whip | #FFEFD5 | RGB (254, 239, 213) |
| Peach Puff | #FFDAB9 | RGB (253, 218, 185) |
| Peru | #CD853F | RGB (205, 133, 63) |
| Pink | #FFC0CB | RGB (252, 192, 203) |
| Plums | #DDA0DD | RGB (221, 160, 221) |
| Powder Blue | #B0E0E6 | RGB (176, 224, 230) |
| Purple | #800080 | RGB(128, 0, 128) |
| Rebecca Purple | #663399 | RGB (102, 51, 153) |
| Red | #FF0000 | RGB(255, 0, 0) |
| Rosy Brown | #BC8F8F | RGB (188, 143, 142) |
| Royal Blue | #4169E1 | RGB (65, 105, 225) |
| Saddle Brown | #8B4513 | RGB (139, 69, 19) |
| Salmon | #FA8072 | RGB (250, 128, 114) |
| Sandy Brown | #F4A460 | RGB (244, 164, 95) |
| Sea Green | #2E8B57 | RGB (46, 139, 87) |
| Sea Shell | #FFF5EE | RGB(255, 245, 238) |
| Sienna | #A0522D | RGB (160, 82, 45) |
| silver | #C0C0C0 | RGB (192, 192, 192) |
| Sky Blue | #87CEEB | RGB (135, 206, 235) |
| Slate Blue | #6A5ACD | RGB (106, 90, 205) |
| Slate Gray | #708090 | RGB (112, 128, 145) |
| Snow | #FFFAFA | RGB(255, 250, 250) |
| Spring Green | #00FF7F | RGB (63, 255, 128) |
| Steel Blue | #4682B4 | RGB (70, 130, 180) |
| Tan | #D2B48C | RGB (210, 180, 140) |
| Teal | #008080 | RGB (26, 128, 127) |
| Thistle | #D8BFD8 | RGB (216, 191, 216) |
| Tomato | #FF6347 | RGB (250, 99, 71) |
| Turquoise | #40E0D0 | RGB (64, 224, 208) |
| Violet | #EE82EE | RGB (238, 130, 238) |
| Wheat | #F5DEB3 | RGB (245, 222, 179) |
| White | #FFFFFF | RGB(255, 255, 255) |
| White Smoke | #F5F5F5 | RGB (245, 245, 245) |
| Yellow | #FFFF00 | RGB(255, 255, 0) |
| Yellow Green | #9ACD32 | RGB (154, 205, 49) |
Color Code Combination for Website
For those of you who are currently busy looking for a color code combination for your website or UI ( User Interface ), congratulations, you’ve come to the right place.
How to Use Color Code
Using HTML color code not only makes your website look more attractive but also increases the chances of visitors coming back.
1. Use of Color Codes for HTML Fonts
To change the color of the text on all web pages, you can define it in the <body> tag. Meanwhile, to change the color of one or a small part of the text, you can use the old font tag with the format:
<font color=”#ff0000″>text</font>
Colors in HTML must be defined as HEX codes, which are six-digit codes that represent the sum of the colors red, green, and blue (RGB), for example:
<font color = “green”>text </font>
Several new browsers allow you to name colors, as in the example above, but the options you have are more limited.
2. Using Color Codes for HTML Background
Changing the background color of a web page is quite simple. The first and most popular way is to use a HEX color code with the background-color property.
You can apply the HEX color code directly to the HTML <body> element using the style attribute as below.
<body style=”background-color:#FF0000;”>
</body>
The above method can be used to style almost any HTML element. However, keep in mind that the steps may differ depending on whether the elements are inline or nested.
Closing Thoughts
The importance of color design for a website is related to the importance of color for the human mind. Color can create ideas, convey messages, spark interest, and generate certain emotions.
For example, bright colors tend to create a happy and positive mood, whereas dark colors tend to project the opposite.
Choosing colors for your website does not mean choosing the colors you like. You have to be able to make sure that the color you choose can strengthen your website or business brand.
To conclude, a color is a powerful tool in building a successful website because it can be used to connect you with potential clients.
About The Author
