![Color Name in HTML](https://cdn.educba.com/academy/wp-content/uploads/2019/11/Color-Name-in-HTML.png.webp)
Introduction to Color Name in HTML
Color Name in HTML plays a very important role in the web and application designing process. It helps to changes the look and feel of our website or application as well as it makes our application more attractive and interactive. There are various ways to define Color Name in HTML into the HTML coding format. one can use additional CSS properties to use it more effectively. We are able to use HTML color name at the page level by including it into the body part also able to set to individual color to the specific element. Color Name in HTML is purposely used for text color, background color, border color, shadows, gradients and many more.
Syntax
- There are various ways we can use HTML colors. Let’s see one by one.
- The very basic use of HTML color is to apply it to the text. simply use as text color to showing text in different HTML colors.
1. Text Color Syntax
color : color_name;
Let’s see how this syntax will work,
<h4 style=”color:blue;”>Welcome to EDUBCA<h4>
In the above example, it will show text Welcome to EDUBCA in a blue color like:
![Color Name in HTML 1](https://cdn.educba.com/academy/wp-content/uploads/2019/12/Color-Name-in-HTML-1.jpg.webp)
- With the help of HTML colors, it’s also possible to add them as a background color.
2. Background-color Syntax
background-color:color_name;
Let’s see how this syntax will work,
<p style="background-color:light-green;">
The category houses all the Design information spreading across numerous subcategories in the Design course.
</p>
![color name in html](https://cdn.educba.com/academy/wp-content/uploads/2019/11/color-name-in-html1.png.webp)
- It’s also possible to add a colored border around any text or element by using HTML color by using the following syntax:
3. Border color Syntax: border
value color_name;
Let’s see how this syntax will work,
<h4 style="border: 4px solid DodgerBlue;"> EDUCBA free certification course </h4>
![color name in html](https://cdn.educba.com/academy/wp-content/uploads/2019/11/color-name-in-html2.png.webp)
Types of the Color Name in HTML
There are different ways to define the color names in HTML. It’s difficult to remember a different name in different colors. So it’s to be decided to give some values to different colors. Let’s see one by one.
![Types of the Color Name in HTML](https://cdn.educba.com/academy/wp-content/uploads/2019/11/Types-of-the-Color-Name-in-HTML.png.webp)
1. RGB Value
- It is one of the ways to define HTML color names in the combination of Red, Green and Blue color format values. Which is used to define color intensity between the number 0 to 255?
- If we want to define a black color using an RGB combination, it will like RGB(0,0,0). Here all parameters of color will set to 0. So it will display a black color.
- Like another RGB(0,0,255) will display color blue, due to 255 is set as the highest value to blue and the other is 0.
- If we are going to 3 equal values of RGB, then it will generate shades of a gray color.
Example: RGB (0,0,0) for darkest color where RGB(255,255,255) for lightest color.
2. HEX Value
- It’s one of the most commonly used formats of a color name in HTML in which color name will be defined in the format of a hexadecimal value.
- #rrggbb format includes values from RR for red, gg for green and bb for blue are placed in between 00 toff hexadecimal value.
- Let’s consider one example defining color #00ff00 . These values will be generated color green because of green containing the highest value(ff) where the other is set to 00.
3. HSL Value
- Another format to define HTML color in the form of Hue, Saturation, Lightness.
- Now we will see all the terms one by one. Hue is defined as the degree of color between 0 to 360 . 0 for red, 120 for green and 240 for blue.
- Saturation defines the value of color into the percentage, in which 0% says the shade of grey where 100% for full color.
- Lightness is also working as the percentage, which defines 0% for black, 50% is for neither light or dark where 100% is for white.
4. RGBA value
- This type of HTML color defines an extension for RGB color, including alpha value where alpha is used to define the opacity of the color.
- Alpha value comes in between 0.0 {fully transparent} to 1.0 {not transparent at all}
- Example is rgba(255,99,71,0)
5. HSLA Value
- It works the same as HSL colors value additional alpha value for defining the opacity of the color.
- hsla(8,100%,80%,0) for fully transparent color.
- hsla(8,100%,80%,0.9) for not that much transparent color.
Using HTML Color Names
Implementing colors on your webpage is easy and can be done both inline and via a separate CSS Stylesheet. Popular Course in this categoryHTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (6,502 ratings)Course Price
₹6999 ₹41999
View Course
Related CoursesBootstrap Training (2 Courses, 6+ Projects)XML Training (5 Courses, 6+ Projects)CSS Training (9 Courses, 9+ Projects)
When you are going to be using the same HTML Color Names on a page multiple times, it is a better idea to use CSS Sheet to define and set colors. Conversely, if you only have to use color once or twice, using the inline method is considered better.
1. Using HTML Color Inline
<body>
<h3 style="color: Brown">Brown H3 Heading</h3>
<p style="color: Gainsboro">Gainsboro colored paragraph text</p>
</body>
2. Implementing in CSS
h1 { color: Brown; }
p { color: Gainsboro; }
Different HTML Color Codes
Colors can be denoted by using their hex value or their name. HTML has support for the most common colors; in this article, I will share with you 140 names and hex values of these colors. One thing to keep in mind is that you don’t have to limit yourself to these colors; you can use any color picker tool to find the Hex value of any color you want and use it on your web page.
Now that you know what HTML Color Names are and how you can use them in your pages, here is a list of Color names with appropriate color codes:
1. Grey and Black HTML Color Names
Grey and Black colors are, in most cases, perfect for the text color of the page as against a white background; these colors have the best readability. One interesting thing to keep in mind is that modern phones with OLED displays done need any battery power to display Black color; if your audience is going to be on mobile, it is a wise idea to use Black as a background color and white or other light colors as the foreground color.
Code | Color |
#000000 | Black |
#0C090A | Night |
#2C3539 | Gunmetal |
#2B1B17 | Midnight |
#34282C | Charcoal |
#25383C | Dark Slate Grey |
#3B3131 | Oil |
#413839 | Black Cat |
#3D3C3A | Iridium |
#463E3F | Black Eel |
#4C4646 | Black Cow |
#504A4B | Gray Wolf |
#565051 | Vampire Gray |
#5C5858 | Gray Dolphin |
#625D5D | Carbon Gray |
#666362 | Ash Gray |
#6D6968 | Cloudy Gray |
#726E6D | Smokey Gray |
#736F6E | Gray |
#837E7C | Granite |
#848482 | Battleship Gray |
#B6B6B4 | Gray Cloud |
#D1D0CE | Gray Goose |
#E5E4E2 | Platinum |
#BCC6CC | Metallic Silver |
#98AFC7 | Blue Gray |
#6D7B8D | Light Slate Gray |
#657383 | Slate Gray |
#616D7E | Jet Gray |
2. Blue HTML Color Names
Blue underlined text is considered as a Link as it is the default link style for most web browsers, you should avoid using blue for all text on a page as visitors can mistake it for hyperlinks.
#646D7E | Mist Blue |
#566D7E | Marble Blue |
#737CA1 | Slate Blue |
#4863A0 | Steel Blue |
#2B547E | Blue Jay |
#2B3856 | Dark Slate Blue |
#151B54 | Midnight Blue |
#000080 | Navy Blue |
#342D7E | Blue Whale |
#15317E | Lapis Blue |
#151B8D | Denim Dark Blue |
#0000A0 | Earth Blue |
#0020C2 | Cobalt Blue |
#0041C2 | Blueberry Blue |
#2554C7 | Sapphire Blue |
#1569C7 | Blue Eyes |
#2B60DE | Royal Blue |
#1F45FC | Blue Orchid |
#6960EC | Blue Lotus |
#736AFF | Light Slate Blue |
#357EC7 | Windows Blue |
#368BC1 | Glacial Blue Ice |
#488AC7 | Silk Blue |
#3090C7 | Blue Ivy |
#659EC7 | Blue Koi |
#87AFC7 | Columbia Blue |
#95B9C7 | Baby Blue |
#728FCE | Light Steel Blue |
#2B65EC | Ocean Blue |
#306EFF | Blue Ribbon |
#157DEC | Blue Dress |
#1589FF | Dodger Blue |
#6495ED | Cornflower Blue |
#6698FF | Sky Blue |
#38ACEC | Butterfly Blue |
#56A5EC | Iceberg |
#5CB3FF | Crystal Blue |
#3BB9FF | Deep Sky Blue |
#79BAEC | Denim Blue |
#82CAFA | Light Sky Blue |
#82CAFF | Day Sky Blue |
#A0CFEC | Jeans Blue |
#B7CEEC | Blue Angel |
#B4CFEC | Pastel Blue |
#C2DFFF | Sea Blue |
#C6DEFF | Powder Blue |
#AFDCEC | Coral Blue |
#ADDFFF | Light Blue |
#BDEDFF | Robin Egg Blue |
#CFECEC | Pale Blue Lily |
#E0FFFF | Light Cyan |
#EBF4FA | Water |
#F0F8FF | AliceBlue |
#F0FFFF | Azure |
#CCFFFF | Light Slate |
#93FFE8 | Light Aquamarine |
#9AFEFF | Electric Blue |
#7FFFD4 | Aquamarine |
#00FFFF | Cyan or Aqua |
#7DFDFE | Tron Blue |
#57FEFF | Blue Zircon |
#8EEBEC | Blue Lagoon |
#50EBEC | Celeste |
#4EE2EC | Blue Diamond |
#81D8D0 | Tiffany Blue |
#92C7C7 | Cyan Opaque |
#77BFC7 | Blue Hosta |
#78C7C7 | Northern Lights Blue |
#48CCCD | Medium Turquoise |
#43C6DB | Turquoise |
#46C7C7 | Jellyfish |
#7BCCB5 | Blue green |
3. Green HTML Colors
On sites related to nature, money, environment etc, Green can be a good choice of color to use as a background.
#43BFC7 | Macaw Blue Green |
#3EA99F | Light Sea Green |
#3B9C9C | Dark Turquoise |
#438D80 | Sea Turtle Green |
#348781 | Medium Aquamarine |
#307D7E | Greenish Blue |
#5E7D7E | Grayish Turquoise |
#4C787E | Beetle Green |
#008080 | Teal |
#4E8975 | Sea Green |
#78866B | Camouflage Green |
#848b79 | Sage Green |
#617C58 | Hazel Green |
#728C00 | Venom Green |
#667C26 | Fern Green |
#254117 | Dark Forest Green |
#306754 | Medium Sea Green |
#347235 | Medium Forest Green |
#437C17 | Seaweed Green |
#387C44 | Pine Green |
#347C2C | Jungle Green |
#347C17 | Shamrock Green |
#348017 | Medium Spring Green |
#4E9258 | Forest Green |
#6AA121 | Green Onion |
#4AA02C | Spring Green |
#41A317 | Lime Green |
#3EA055 | Clover Green |
#6CBB3C | Green Snake |
#6CC417 | Alien Green |
#4CC417 | Green Apple |
#52D017 | Yellow Green |
#4CC552 | Kelly Green |
#54C571 | Zombie Green |
#99C68E | Frog Green |
#89C35C | Green Peas |
#85BB65 | Dollar Bill Green |
#8BB381 | Dark Sea Green |
#9CB071 | Iguana Green |
#B2C248 | Avocado Green |
#9DC209 | Pistachio Green |
#A1C935 | Salad Green |
#7FE817 | Hummingbird Green |
#59E817 | Nebula Green |
#57E964 | Stoplight Go Green |
#64E986 | Algae Green |
#5EFB6E | Jade Green |
#00FF00 | Green |
#5FFB17 | Emerald Green |
#87F717 | Lawn Green |
#8AFB17 | Chartreuse |
#6AFB92 | Dragon Green |
#98FF98 | Mint green |
#B5EAAA | Green Thumb |
#C3FDB8 | Light Jade |
#CCFB5D | Tea Green |
#B1FB17 | Green Yellow |
#BCE954 | Slime Green |
#EDDA74 | Goldenrod |
#EDE275 | Harvest Gold |
#FFE87C | Sun Yellow |
4. Yellow HTML Color Names
Yellow can be used to set a non-serious mood, show creativity and optimism in a page. Keep in mind that yellow works better as background then a text color.
#FFFF00 | Yellow |
#FFF380 | Corn Yellow |
#FFFFC2 | Parchment |
#FFFFCC | Cream |
#FFF8C6 | Lemon Chiffon |
#FFF8DC | Cornsilk |
#F5F5DC | Beige |
#FBF6D9 | Blonde |
#FAEBD7 | AntiqueWhite |
#F7E7CE | Champagne |
#FFEBCD | BlanchedAlmond |
#F3E5AB | Vanilla |
#ECE5B6 | Tan Brown |
#FFE5B4 | Peach |
#FFDB58 | Mustard |
#FFD801 | Rubber Ducky Yellow |
#FDD017 | Bright Gold |
#EAC117 | Golden brown |
#F2BB66 | Macaroni and Cheese |
#FBB917 | Saffron |
#FBB117 | Beer |
#FFA62F | Cantaloupe |
#E9AB17 | Bee Yellow |
5. Brown HTML Colors
Brown background can make it difficult to read the white or black text, you can resort to user other colors that have good contrast against your shade of brown.
#E2A76F | Brown Sugar |
#DEB887 | BurlyWood |
#FFCBA4 | Deep Peach |
#C9BE62 | Ginger Brown |
#E8A317 | School Bus Yellow |
#EE9A4D | Sandy Brown |
#C8B560 | Fall Leaf Brown |
#D4A017 | Orange Gold |
#C2B280 | Sand |
#C7A317 | Cookie Brown |
#C68E17 | Caramel |
#B5A642 | Brass |
#ADA96E | Khaki |
#C19A6B | Camel brown |
#CD7F32 | Bronze |
#C88141 | Tiger Orange |
#C58917 | Cinnamon |
#AF9B60 | Bullet Shell |
#AF7817 | Dark Goldenrod |
#B87333 | Copper |
#966F33 | Wood |
#806517 | Oak Brown |
#827839 | Moccasin |
#827B60 | Army Brown |
#786D5F | Sandstone |
#493D26 | Mocha |
#483C32 | Taupe |
#6F4E37 | Coffee |
#835C3B | Brown Bear |
#7F5217 | Red Dirt |
#7F462C | Sepia |
6. Orange HTML Colors
Orange works great to highlight a point the when color used as a background and it can evoke feeling of enthusiasm and warmth without being too tacky.6. Orange HTML Colors
#C47451 | Orange Salmon |
#C36241 | Rust |
#C35817 | Red Fox |
#C85A17 | Chocolate |
#CC6600 | Sedona |
#E56717 | Papaya Orange |
#E66C2C | Halloween Orange |
#F87217 | Pumpkin Orange |
#F87431 | Construction Cone Orange |
#E67451 | Sunrise Orange |
#FF8040 | Mango Orange |
#F88017 | Dark Orange |
#FF7F50 | Coral |
#F88158 | Basket Ball Orange |
#F9966B | Light Salmon |
#E78A61 | Tangerine |
#E18B6B | Dark Salmon |
#E77471 | Light Coral |
#F75D59 | Bean Red |
#E55451 | Valentine Red |
#E55B3C | Shocking Orange |
7. Red HTML Color Codes
For some browsers, Red underlined text is used as visited links, you should avoid using it to not confuse the visitors.
#FF0000 | Red |
#FF2400 | Scarlet |
#F62217 | Ruby Red |
#F70D1A | Ferrari Red |
#F62817 | Fire Engine Red |
#E42217 | Lava Red |
#E41B17 | Love Red |
#DC381F | Grapefruit |
#C34A2C | Chestnut Red |
#C24641 | Cherry Red |
#C04000 | Mahogany |
#C11B17 | Chilli Pepper |
#9F000F | Cranberry |
#990012 | Red Wine |
#8C001A | Burgundy |
#954535 | Chestnut |
#7E3517 | Blood Red |
#8A4117 | Sienna |
#7E3817 | Sangria |
#800517 | Firebrick |
#810541 | Maroon |
#7D0541 | Plum Pie |
#7E354D | Velvet Maroon |
#7D0552 | Plum Velvet |
#7F4E52 | Rosy Finch |
#7F5A58 | Puce |
#7F525D | Dull Purple |
#B38481 | Rosy Brown |
#C5908E | Khaki Rose |
8. Pink HTML Color Codes
According to color science, Pink and its shades can be used if you want the visitor to have a feeling of confidence, sophistication and warmness in their subconscious.
#C48189 | Pink Bow |
#C48793 | Lipstick Pink |
#E8ADAA | Rose |
#ECC5C0 | Rose Gold |
#EDC9AF | Desert Sand |
#FDD7E4 | Pig Pink |
#FCDFFF | Cotton Candy |
#FFDFDD | Pink Bubble Gum |
#FBBBB9 | Misty Rose |
#FAAFBE | Pink |
#FAAFBA | Light Pink |
#F9A7B0 | Flamingo Pink |
#E7A1B0 | Pink Rose |
#E799A3 | Pink Daisy |
#E38AAE | Cadillac Pink |
#F778A1 | Carnation Pink |
#E56E94 | Blush Red |
#F660AB | Hot Pink |
#FC6C85 | Watermelon Pink |
#F6358A | Violet Red |
#F52887 | Deep Pink |
#E45E9D | Pink Cupcake |
#E4287C | Pink Lemonade |
#F535AA | Neon Pink |
#FF00FF | Magenta |
#E3319D | Dimorphotheca Magenta |
#F433FF | Bright Neon Pink |
#D16587 | Pale Violet Red |
#C25A7C | Tulip Pink |
#CA226B | Medium Violet Red |
#C12869 | Rogue Pink |
#C12267 | Burnt Pink |
#C25283 | Bashful Pink |
#C12283 | Dark Carnation Pink |
#B93B8F | Plum |
9. Purple and White HTML Color Codes
Using White Text color against White background will make it unreadable by the users and aside from not being user friendly, you could get an SEO penalty for your site thus, always use white and other light colors against dark backgrounds.
#7E587E | Viola Purple |
#571B7E | Purple Iris |
#583759 | Plum Purple |
#4B0082 | Indigo |
#461B7E | Purple Monster |
#4E387E | Purple Haze |
#614051 | Eggplant |
#5E5A80 | Grape |
#6A287E | Purple Jam |
#7D1B7E | Dark Orchid |
#A74AC7 | Purple Flower |
#B048B5 | Medium Orchid |
#6C2DC7 | Purple Amethyst |
#842DCE | Dark Violet |
#8D38C9 | Violet |
#7A5DC7 | Purple Sage Bush |
#7F38EC | Lovely Purple |
#8E35EF | Purple |
#893BFF | Aztech Purple |
#8467D7 | Medium Purple |
#A23BEC | Jasmine Purple |
#B041FF | Purple Daffodil |
#C45AEC | Tyrian Purple |
#9172EC | Crocus Purple |
#9E7BFF | Purple Mimosa |
#D462FF | Heliotrope Purple |
#E238EC | Crimson |
#C38EC7 | Purple Dragon |
#C8A2C8 | Lilac |
#E6A9EC | Blush Pink |
#E0B0FF | Mauve |
#C6AEC7 | Wisteria Purple |
#F9B7FF | Blossom Pink |
#D2B9D3 | Thistle |
#E9CFEC | Periwinkle |
#EBDDE2 | Lavender Pinocchio |
#E3E4FA | Lavender blue |
#FDEEF4 | Pearl |
#FFF5EE | SeaShell |
#FEFCFF | Milk White |
#FFFFFF | White |
Some most used HTML Color Codes
These are some of the popular colors used on the web; I have put them in a separate table to quickly find these.
Red | #FF0000 | White | #FFFFFF |
Cyan | #00FFFF | Silver | #C0C0C0 |
Blue | #0000FF | Gray or Grey | #808080 |
DarkBlue | #0000A0 | Black | #000000 |
LightBlue | #ADD8E6 | Orange | #FFA500 |
Purple | #800080 | Brown | #A52A2A |
Yellow | #FFFF00 | Maroon | #800000 |
Lime | #00FF00 | Green | #008000 |
Magenta | #FF00FF | Olive | #808000 |
Examples of Color Name in HTML
Let us see how color name in HTML is used with the help of some examples mentioned below:
Example #1
Let us consider a general example showing how example color name in HTML is going to be used:
HTML code:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:Violet;">About Life.....</h1>
<h4 >Creativity Is Intelligence Having Fun </h4>
<p style="background-color: #00FFFF; color:blue">
You Learn More From Failure Than From Success. Don’t Let It Stop You. Failure Builds Character. If You Are Working On Something That You Really Care About, You Don’t Have To Be Pushed. The Vision Pulls You
</p>
</body>
</html>
Output:
![html code](https://cdn.educba.com/academy/wp-content/uploads/2019/11/color-name-in-html3.png.webp)
Example #2
Now we are taking another example which will define all types of HTML color as follows:
HTML code:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:rgb(255, 0, 0);">RGB defines Red color</h1>
<h1 style="color:rgb(60, 60, 60);">RGB same values define Gray shade</h1>
<h1 style="background-color:#ffa500;">New color using Hex Value</h1>
<h1 style="background-color:#787878;">Shade of Gray</h1>
<h1 style="background-color:hsl(50, 100%, 50%);">hsl color shade</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba color shade</h1>
<h1 style="color:hsla(9, 100%, 80%, 0.5);">hsla color shade</h1>
</body>
</html>
Output:
![html code](https://cdn.educba.com/academy/wp-content/uploads/2019/11/color-name-in-html4.png.webp)
In the above example, we are able to see the use of different HTML color types and how they are named in HTML.
Example #3
One more use of HTML color is to define a border to the element, which is as follows:
In Example, Here, we can add a border to your code body, changing the background and text colour.
HTML code:
<p style="border: 2px solid #A52A2A; background-color:#ffa500;color:#FFF8DC">Self-actualizing theory talks of intrinsic rewards inherent in the task performance such as job satisfaction, feeling of achievement, etc.</p>
Output:
![html code](https://cdn.educba.com/academy/wp-content/uploads/2019/11/color-name-in-html5.png.webp)
Conclusion
We came across that HTML colors are defined with different names, percentage value, Hex value, alpha value and many more. Color name in HTML is used to do color for text, for background, for a border, for gradations. Different types define HTML color name as RGB, hex, hsl, rgba, hsla.
Recommended Articles
This is a guide to Color Name in HTML. Here we discuss the introduction, Types of the Color Name in HTML, and examples, Syntax, and HTML codes. You can also go through our other suggested articles to learn more –