CSS Colors

Html Color Codes

Overview

Colors are a fundamental part of web design. They set the mood, establish brand identity, and improve readability. In HTML and CSS, colors can be specified using several different formats. This lesson covers all the major color code systems: named colors, hexadecimal (hex), RGB, RGBA, HSL, and HSLA.

1. Named Colors

HTML supports 140 standard color names that you can use directly. These are the simplest to remember and use, but they offer a limited palette.

                    .example {

                      color: red;

                      background-color: lightblue;

                    }

Common named colors: red, blue, green, yellow, orange, purple, pink, black, white, gray, tomato, skyblue, gold, and many more.

2. Hexadecimal (Hex) Color Codes

Hex codes are the most common way to specify colors in web development. They are represented by a # symbol followed by six hexadecimal digits (0–9 and A–F). The six digits are grouped in pairs representing Red, Green, and Blue channels.

Format: #RRGGBB

#FF0000 – pure Red
#00FF00 – pure Green
#0000FF – pure Blue
#000000 – Black
#FFFFFF – White
#FFA500 – Orange

Shorthand Hex (3-digit): When each pair has identical digits, you can use a 3-digit shorthand.

#F00 is the same as #FF0000
#0F0 is the same as #00FF00
#FFF is the same as #FFFFFF

                    .primary { color: #3498db; }

                    .danger  { color: #e74c3c; }

3. RGB Color Model

RGB stands for Red, Green, and Blue. Each color channel is specified as a number between 0 and 255. The syntax is rgb(red, green, blue).

rgb(255, 0, 0) – Red
rgb(0, 255, 0) – Green
rgb(0, 0, 255) – Blue
rgb(0, 0, 0) – Black
rgb(255, 255, 255) – White

RGBA – RGB with Alpha (Opacity)

RGBA adds an alpha channel to control opacity. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque).

                    .semi-transparent {

                      background-color: rgba(52, 152, 219, 0.5);

                    }

In this example, the color is blue with 50% opacity.

4. HSL Color Model

HSL stands for Hue, Saturation, and Lightness. This model is more intuitive for designers because it allows you to pick a color by its hue on the color wheel, then adjust saturation and lightness.

Hue: A degree on the color wheel (0–360). 0 is red, 120 is green, 240 is blue.
Saturation: Percentage (0% – gray, 100% – full color).
Lightness: Percentage (0% – black, 100% – white).

                    .hsl-example {

                      color: hsl(240, 100%, 50%); /* pure blue */

                      color: hsl(0, 80%, 50%);  /* a rich red */

                    }

HSLA – HSL with Alpha

Similar to RGBA, HSLA adds an alpha channel for opacity.

                    .hsl-alpha {

                      background-color: hsla(120, 100%, 50%, 0.3); /* 30% opaque green */

                    }

5. Comparison Table

Format	Example	Use Case
Named Color	`tomato`	Quick prototyping
Hex	`#FF6347`	General web use, best performance
RGB	`rgb(255, 99, 71)`	When you have numeric RGB values
RGBA	`rgba(255, 99, 71, 0.5)`	Need transparency
HSL	`hsl(9, 100%, 64%)`	Intuitive color adjustments
HSLA	`hsla(9, 100%, 64%, 0.5)`	Transparency with intuitive hues

6. Practical Examples

Here's a simple card component styled with different color formats:

                    <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; border-left: 5px solid #007bff;">

                      <h3 style="color: #333;">Card Title</h3>

                      <p style="color: rgba(0,0,0,0.7);">This is a sample card using hex, named, and rgba colors.</p>

                      <button style="background: hsl(211, 100%, 50%); color: white; border: none; padding: 8px 16px; border-radius: 4px;">Click Me</button>

                    </div>

Card Title

This is a sample card using hex, named, and rgba colors.

7. Choosing the Right Format

Hex (#RRGGBB): Best for performance and compactness. Most widely used in designs.
RGB: Useful when you have color values from design tools or need to manipulate channels programmatically.
RGBA/HSLA: Essential for overlays, shadows, and any effect requiring transparency.
HSL: Great for theme systems where you want to adjust lightness or saturation dynamically.

8. Browser Support

All color formats covered here (named, hex, rgb, rgba, hsl, hsla) are supported by every modern browser, including Chrome, Firefox, Safari, Edge, and Opera. They also work in Internet Explorer 9 and above (with partial support for alpha channels in IE9).

9. Common Mistakes

Missing the # in hex codes: FF0000 is invalid; must be #FF0000.
Forgetting alpha values: When using rgba() or hsla(), always include the fourth parameter.
Using names that don't exist: Only 140 named colors are supported. Check your spelling.
Confusing hue values: In HSL, hue is a degree (0–360). Values like 0.5 are not valid unless in percentage.

Summary

HTML color codes give you a variety of ways to express colors, from simple named colors to precise hex codes and flexible HSL values. Each format has its strengths, and as a developer, you should be comfortable using all of them. Hex remains the most popular for its brevity, while RGBA and HSLA are indispensable for modern design with transparency.

Experiment with different formats to understand how they work, and choose the one that best fits your project's needs.

PreviousCSS to force long text and urls to wrap on all browser Next CSS Inline, block and none display style

Ready to master real-world web development?

Learn HTML, CSS3, Bootstrap and JavaScript hands-on with mentor-led sessions.

Explore Course