HTML Colors are used to set text color, background color, borders, and more on a web page.
Colors improve the design, readability, and user experience.
In this tutorial, you will learn different ways to use colors in HTML, with examples and output.
Table of Contents:
What Are HTML Colors
HTML colors are used to style elements using:
- Text color
- Background color
- Border color
Colors are usually applied using the style attribute (CSS).
Ways to Use Colors in HTML
There are three main ways to define colors:
Color Types Table
| Type | Example |
|---|---|
| Color Name | red, blue, green |
| HEX Value | #ff0000 |
| RGB Value | rgb(255, 0, 0) |
Using Color Names
Example Code
<p style="color: red;">This is red text.</p>
Output
This is red text.
Using HEX Colors
HEX colors use a 6-digit code.
Example Code
<p style="color: #0000ff;">This is blue text.</p>
Output
This is blue text.
Using RGB Colors
RGB stands for Red, Green, Blue.
Example Code
<p style="color: rgb(0, 128, 0);">This is green text.</p>
Output
This is green text.
Background Color Example
Example Code
<p style="background-color: yellow;">Yellow background</p>
Output
Yellow background (with yellow background)
Text and Background Together
Example Code
<p style="color: white; background-color: black;">
White text on black background
</p>
Output
White text on black background
Common Color Names
Popular HTML Colors
| Color Name | Preview |
|---|---|
| Red | red |
| Blue | blue |
| Green | green |
| Yellow | yellow |
| Black | black |
| White | white |
HEX Color Structure
HEX colors start with #.
Format
#RRGGBB
| Part | Meaning |
|---|---|
| RR | Red value |
| GG | Green value |
| BB | Blue value |
RGB Color Structure
Format
rgb(red, green, blue)
| Value Range | 0 to 255 |
Multiple Color Styling Example
Example Code
<h1 style="color: blue;">Heading</h1>
<p style="color: red;">Paragraph text</p>
<p style="background-color: lightgray;">Background color</p>
Output
Heading (blue)
Paragraph text (red)
Background color (gray background)
HTML Colors Summary Table
| Method | Format | Example |
|---|---|---|
| Name | text | red |
| HEX | #RRGGBB | #ff0000 |
| RGB | rgb() | rgb(255,0,0) |
Best Practices for Using Colors
| Practice | Description |
|---|---|
| Use readable colors | Ensure good contrast |
| Avoid too many colors | Keep design simple |
| Use HEX/RGB for accuracy | Better control |
| Test on devices | Check visibility |
Common Mistakes
| Mistake | Result |
|---|---|
| Low contrast | Hard to read |
| Wrong HEX code | Invalid color |
| Overuse of colors | Poor design |
Missing # in HEX | Not applied |
Colour Names
A colour name can be used to specify a colour in HTML:
| White | Black | Orange | Maroon |
| Red | Yellow | Lime green | Salmon |
| Green | Sky blue | Crimson | Aqua |
| Grey | Purple | Mustard | Peach |
| Violet | Magenta | Coral | Saffron |
| Brown | Pink | Tan | Teal |
| Navy Blue | Turquoise | Lavender | Beige |
| Lemon yellow | Grape vine | Indigo | Fuchsia |
| Amber | Sea green | Dark green | Burgundy |
| Charcoal | Bronze | Cream | Mauve |
| Olive | Cyan | Silver | Rust |
| Ruby | Azure | Mint | Pearl |
| Ivory | Tangerine | Cherry red | Garnet |
| Emerald | Sapphire | Rosewood | Lilac |
| Arctic blue | Pista green | Coffee brown | Umber |
| Brunette | Mocha | Ash | Jet black |
There are 140 recognised colour names in HTML.
An summary of colour specification techniques:
English name, for example, white
RGB colour code in hexadecimal, for example: #ff0000
Soft colours have the hexadecimal RGB value of #f00.
RGB values in decimal form, such as: rgb (255, 0, 0)
RGBA value in decimal form, for example: rgba (255, 0, 0, 0.2)
A color\’s HSL value is hsl(120, 100%, 50%).
Color is an example of an HSLA value: hsla(0, 100%, 50%, 0.5).
Furthermore, RGB, HEX, HSL, RGBA, and HSLA values can be used in HTML to specify colours.
| Color | Full-Form | CSS Version |
|---|---|---|
| RGB | Red Green blue | CSS2 |
| RGBA | Red Green Blue Alpha | CSS3 |
| HSL | Hue Saturation Lightness | CSS3 |
| HSLA | Hue Saturation Lightness Alpha | CSS3 |
Read more
Frequently Asked Questions (FAQ)
1. What are HTML colors?
HTML colors are used to style text and backgrounds.
2. How many ways can colors be defined?
Three: Name, HEX, and RGB.
3. Which color format is best?
HEX and RGB provide more control.
4. Can I use multiple colors?
Yes, using style attribute or CSS.
5. Are HTML colors part of CSS?
Yes, colors are applied using CSS.