HTML Colors

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.

 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:

Names of Colours List
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

• HTML Style Attribute
• HTML Text Formatting
• HTML CSS
• HTML Attributes

---

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.