HTML Colors

HTML colors can be applied to text, backgrounds, borders, links, forms, tables, etc. This article provides an in-depth look at how colors can be applied to various elements in HTML, such as text, backgrounds, borders, links, forms, and tables.

Color Picker

Selected Color: #ff0000

We will explore different color formats, including hexadecimal, RGB, RGBA, HSL, and named colors, giving you precise control over the presentation of colors on your web pages.

Table of Contents

1. Color Names

HTML supports 140 standard color names that are easy to use and remember. These names represent specific colors, such as red, green, blue, yellow, etc.

Syntax:

color: colorname;

CSS

Example:

<p style="color: blue;">This text is blue.</p>

HTML

Common Color Names:

red
green
blue
yellow
purple
orange
black
white
gray
pink

2. Background Color

The background color property is used to set the background color of an element. It can be applied to any HTML element, such as <div>, <p>, <body>, etc.

Syntax:

background-color: value;

HTML

Example:

<div style="background-color: yellow;">
  This div has a yellow background.
</div>

HTML

Supported Values:

Color Names: yellow, blue, etc.
RGB: rgb(255, 255, 0)
HEX: #FFFF00
HSL: hsl(60, 100%, 50%)

3. Text Color

The text color property is used to set the color of the text inside an element. It is controlled using the color property.

Syntax:

color: value;

HTML

Example:

<p style="color: green;">This text is green.</p>

HTML

Supported Values:

Color Names: green, red, etc.
RGB: rgb(0, 128, 0)
HEX: #008000
HSL: hsl(120, 100%, 25%)

4. Border Color

The border color property is used to set the color of an element’s border. It is controlled using the border-color property.

Syntax:

border-color: value;

HTML

Example:

<div style="border: 2px solid red;">
  This div has a red border.
</div>

HTML

Supported Values:

Color Names: red, blue, etc.
RGB: rgb(255, 0, 0)
HEX: #FF0000
HSL: hsl(0, 100%, 50%)

5. Color Values

Sure! Let’s dive deep into Color Values in HTML and CSS. Color values are used to define colors in various formats, such as RGB, HEX, HSL, RGBA, and HSLA. Each format has its own syntax and use cases. Below is a detailed explanation of each:

a. RGB (Red, Green, Blue)

RGB is a color model that defines colors by mixing Red, Green, and Blue light. Each parameter represents the intensity of the color and ranges from 0 to 255.

Syntax:

rgb(red, green, blue)

HTML

Parameters:

red: Intensity of red (0–255).
green: Intensity of green (0–255).
blue: Intensity of blue (0–255).

Examples:

rgb(255, 0, 0) = Red (full red, no green, no blue).
rgb(0, 255, 0) = Green (no red, full green, no blue).
rgb(0, 0, 255) = Blue (no red, no green, full blue).
rgb(255, 255, 0) = Yellow (full red, full green, no blue).

b. HEX (Hexadecimal)

HEX values represent colors using a 6-digit hexadecimal code prefixed with a #. Each pair of digits represents the intensity of Red, Green, and Blue in hexadecimal format (00 to FF).

Syntax:

#RRGGBB

HTML

Parameters:

RR: Red value (00 to FF).
GG: Green value (00 to FF).
BB: Blue value (00 to FF).

Examples:

#FF0000 = Red (FF for red, 00 for green, 00 for blue).
#00FF00 = Green (00 for red, FF for green, 00 for blue).
#0000FF = Blue (00 for red, 00 for green, FF for blue).
#FFFF00 = Yellow (FF for red, FF for green, 00 for blue).

Shorthand HEX:

For some colors, you can use a 3-digit shorthand if each pair of digits is the same:

#F00 = #FF0000 (Red).
#0F0 = #00FF00 (Green).
#00F = #0000FF (Blue).
#FF0 = #FFFF00 (Yellow).

c. HSL (Hue, Saturation, Lightness)

HSL is a color model that defines colors based on Hue, Saturation, and Lightness. It provides a more intuitive way to define colors compared to RGB or HEX.

Syntax:

hsl(hue, saturation, lightness)

HTML

Parameters:

Hue: A degree on the color wheel (0–360).
0 = Red, 120 = Green, 240 = Blue.
Saturation: A percentage (0% = gray, 100% = full color).
Lightness: A percentage (0% = black, 50% = normal, 100% = white).

Examples:

hsl(0, 100%, 50%) = Red (hue 0, full saturation, normal lightness).
hsl(120, 100%, 50%) = Green (hue 120, full saturation, normal lightness).
hsl(240, 100%, 50%) = Blue (hue 240, full saturation, normal lightness).
hsl(60, 100%, 50%) = Yellow (hue 60, full saturation, normal lightness).

d. RGBA (Red, Green, Blue, Alpha)

RGBA is an extension of RGB with an added alpha channel for transparency. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque).

Syntax:

rgba(red, green, blue, alpha)

HTML

Parameters:

red: Intensity of red (0–255).
green: Intensity of green (0–255).
blue: Intensity of blue (0–255).
alpha: Transparency (0 = transparent, 1 = opaque).

Examples:

rgba(255, 0, 0, 1) = Fully opaque red.
rgba(255, 0, 0, 0.5) = Semi-transparent red.
rgba(0, 255, 0, 0.3) = Light green with 30% opacity.

e. HSLA (Hue, Saturation, Lightness, Alpha)

HSLA is an extension of HSL with an added alpha channel for transparency.

Syntax:

hsla(hue, saturation, lightness, alpha)

HTML

Parameters:

Hue: A degree on the color wheel (0–360).
Saturation: A percentage (0% = gray, 100% = full color).
Lightness: A percentage (0% = black, 50% = normal, 100% = white).
Alpha: Transparency (0 = transparent, 1 = opaque).

Examples:

hsla(0, 100%, 50%, 1) = Fully opaque red.
hsla(0, 100%, 50%, 0.5) = Semi-transparent red.
hsla(120, 100%, 50%, 0.3) = Light green with 30% opacity.

6. Comparison of Color Values

Format	Syntax	Use Case
RGB	`rgb(red, green, blue)`	Precise control over color mixing.
HEX	`#RRGGBB` or `#RGB`	Compact and widely supported in web development.
HSL	`hsl(hue, saturation, lightness)`	Intuitive color definition, easy to adjust lightness and saturation.
RGBA	`rgba(red, green, blue, alpha)`	Adds transparency to RGB colors.
HSLA	`hsla(hue, saturation, lightness, alpha)`	Adds transparency to HSL colors.

7. Examples in Practice

RGB:

<p style="color: rgb(255, 0, 0);">This text is red.</p>

HTML

HEX:

<p style="color: #FF0000;">This text is red.</p>

HTML

HSL:

<p style="color: hsl(0, 100%, 50%);">This text is red.</p>

HTML

RGBA:

<p style="color: rgba(255, 0, 0, 0.5);">This text is semi-transparent red.</p>

HTML

HSLA:

<p style="color: hsla(0, 100%, 50%, 0.5);">This text is semi-transparent red.</p>

HTML