In web design, colors play a very important role in making your webpage visually appealing, clear, and professional. In HTML, you can set colors for text, backgrounds, borders, and other elements using color names, HEX values, RGB, RGBA, HSL, or HSLA formats.
Each color is defined using a color code, and you can apply it through the style attribute or CSS.
HTML Colors help you create beautiful layouts, improve readability, and make your site stand out.
You can apply color using the style attribute inside an HTML element.
<p style="color:blue;">This text is blue.</p>Here,
- color – CSS property
- blue – color name
You can use color names, hex codes, or RGB/HSL values to define colors.
Using HTML Color Names
There are 140+ standard color names supported in HTML such as red, blue, green, black, gray, yellow, and many more.
Example:
<h2 style="color:tomato;">This is Tomato Color</h2>
<p style="color:blue;">This is Blue Color</p>
<p style="color:gray;">This is Gray Color</p>You will see text in Tomato, Blue, and Gray colors respectively.
Using HEX Color Codes
HEX color codes start with a # symbol, followed by six hexadecimal digits. Each pair of digits represents Red, Green, and Blue.
Syntax: #RRGGBB
Example:
<p style="color:#ff0000;">This text is Red</p>
<p style="color:#00ff00;">This text is Green</p>
<p style="color:#0000ff;">This text is Blue</p>Explanation:
- #ff0000 – Red (full red, no green, no blue)
- #00ff00 – Green (full green)
- #0000ff – Blue (full blue)
Using RGB Color Values
RGB stands for Red, Green, Blue. Each color can take a value between 0 and 255.
Syntax: rgb(red, green, blue)
Example:
<p style="color:rgb(255,0,0);">Red Text</p>
<p style="color:rgb(0,255,0);">Green Text</p>
<p style="color:rgb(0,0,255);">Blue Text</p>Explanation:
- rgb(255, 0, 0) – Red
- rgb(0, 255, 0) – Green
- rgb(0, 0, 255) – Blue
Advantage – you can mix color intensity easily.
Using RGBA (with Transparency)
RGBA adds one more value called Alpha, which defines the transparency level of the color. Alpha values range from 0.0 (fully transparent) to 1.0 (fully opaque).
Syntax: rgba(red, green, blue, alpha)
Example:
<p style="color:rgba(255, 0, 0, 1);">Opaque Red</p>
<p style="color:rgba(255, 0, 0, 0.5);">Half Transparent Red</p>
<p style="color:rgba(255, 0, 0, 0.1);">Light Transparent Red</p>Great for creating overlays, hover effects, or text with opacity.
Using HSL Color Values
HSL stands for Hue, Saturation, and Lightness. It’s a more natural way to define colors.
Syntax: hsl(hue, saturation%, lightness%)
Hue – degree on color wheel (0–360)
Red = 0, Green = 120, Blue = 240
Saturation – color intensity (0%–100%)
Lightness – brightness (0%–100%)
Example:
<p style="color:hsl(0, 100%, 50%);">Red</p>
<p style="color:hsl(120, 100%, 50%);">Green</p>
<p style="color:hsl(240, 100%, 50%);">Blue</p>Using HSLA (with Transparency)
Just like RGBA, HSLA includes alpha for transparency.
Syntax: hsla(hue, saturation%, lightness%, alpha)
Example:
<p style="color:hsla(0, 100%, 50%, 0.5);">Semi Transparent Red</p>
<p style="color:hsla(240, 100%, 50%, 0.3);">Transparent Blue</p>Example of Background and Text Colors
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors Example</title>
</head>
<body style="background-color:#f2f2f2;">
<h2 style="color:tomato;">HTML Color Example</h2>
<p style="color:blue;">This text uses a named color.</p>
<p style="color:#ff6600;">This text uses a HEX color.</p>
<p style="color:rgb(0,128,0);">This text uses RGB color.</p>
<p style="color:hsl(200,100%,40%);">This text uses HSL color.</p>
</body>
</html>Color Combination Example (Text + Background)
<p style="color:white; background-color:black;">White text on black background</p>
<p style="color:yellow; background-color:blue;">Yellow text on blue background</p>
<p style="color:#333; background-color:#f0f0f0;">Dark text on light background</p>You can mix text and background colors to improve contrast and readability.