Color Formats: Names, HEX, RGB, and HSL0%

Background Color, Image, Position, and Size

Color Formats: Names, HEX, RGB, and HSL

Beginner9 min read•Updated: 2026-10-01

Color Formats: Names, HEX, RGB, and HSL

Welcome to Chapter 3! 🎨

Colors give life, emotion, and personality to a website. A medical website might use calm blues and teals, a school sports portal might burst with energetic reds and oranges, while an eco-friendly nature blog shines with lush greens.

In CSS, you have 4 standard ways to pick and declare colors:

1
Color Keywords (Names) (e.g., crimson, navy, gold)
2
HEX Codes (e.g., #ff0000, #2563eb)
3
RGB / RGBA Values (e.g., rgb(37, 99, 235), rgba(37, 99, 235, 0.5))
4
HSL / HSLA Values (e.g., hsl(217, 83%, 53%))

Let us explore each format using a fun watercolor palette analogy!

The Art Room Paint Palette Analogy 🎨

Imagine you are sitting in your school art class with an empty white paper and a paint palette:

Visual Architecture & Process Flow

How data and code flow step-by-step

Flowchart

Step 1

| 1. COLOR NAMES

Step 2

Asking your friend: "Pass me the Sky Blue tube!" |

1. Color Names (Keywords)

CSS comes with 140 built-in color names that modern browsers understand directly. You can simply write the name as the value:

1h1 {
2  color: crimson;
3}
4 
5p {
6  color: dimgray;
7}
8 
9button {
10  background-color: royalblue;
11  color: white;
12}

Popular CSS Color Names:

Reds/Pinks: crimson, coral, tomato, hotpink
Blues: navy, royalblue, deepskyblue, steelblue
Greens: forestgreen, seagreen, lime, mediumseagreen
Neutrals: whitesmoke, slategray, darkslategray, gold

Limitations:

While color names are easy to remember, you cannot fine-tune the shade. If royalblue is slightly too dark for your school logo, you cannot adjust it using color names. For exact branding, professionals use HEX or RGB.

2. HEX Codes (Hexadecimal)

A HEX color code is the most widely used color format on the web. It always begins with a hash symbol (#) followed by 6 characters representing three color channels:

     #  R R   G G   B B
        ───   ───   ───
         │     │     │
         │     │     └─ Blue intensity   (00 to FF)
         │     └─────── Green intensity  (00 to FF)
         └───────────── Red intensity    (00 to FF)

In the hexadecimal number system, numbers count from 0 to 9, and then use letters A to F (where A = 10 and F = 15).

00 means zero intensity (completely dark / off).
FF means maximum intensity (full blast: 255).

Common HEX Examples:

1/* Primary Colors */
2.red-box   { background-color: #ff0000; } /* Maximum Red, no green or blue */
3.green-box { background-color: #00ff00; } /* Maximum Green, no red or blue */
4.blue-box  { background-color: #0000ff; } /* Maximum Blue, no red or green */
5 
6/* Extreme Colors */
7.black-box { background-color: #000000; } /* All colors turned off (Pure Black) */
8.white-box { background-color: #ffffff; } /* All colors at full blast (Pure White) */
9 
10/* Modern Brand Shades */
11.brand-blue { background-color: #2563eb; }
12.brand-emerald { background-color: #10b981; }

3-Digit Shorthand HEX:

If each pair of characters has matching digits, you can shorten it to 3 digits:

#ffffff can be written as #fff
#000000 can be written as #000
#ff0000 can be written as #f00

3. RGB and RGBA (Red, Green, Blue + Alpha)

Every computer screen and phone display produces color by shining tiny Red, Green, and Blue light sub-pixels.

The RGB Syntax:

rgb(red, green, blue) takes 3 values ranging from 0 to 255:

1/* Pure red: 255 red, 0 green, 0 blue */
2h1 {
3  color: rgb(255, 0, 0);
4}
5 
6/* Beautiful school navy blue */
7header {
8  background-color: rgb(30, 58, 138);
9}

Adding Transparency with RGBA (Alpha):

What if you want a color to be semi-transparent (like tinted sunglasses)? You add a 4th value called Alpha (a): rgba(red, green, blue, alpha)

alpha is a decimal number between 0 and 1:
0 = completely invisible (100% transparent)
0.5 = half transparent (50% see-through)
1 = completely solid (opaque)

1/* Semi-transparent black overlay for photo modal */
2.overlay {
3  background-color: rgba(0, 0, 0, 0.6); /* 60% black, 40% see-through */
4}
5 
6/* Soft light-blue glass card */
7.glass-card {
8  background-color: rgba(37, 99, 235, 0.15); /* 15% opacity */
9}

Pro Tip

Alpha vs Opacity: If you use opacity: 0.5;, the entire box AND all the text inside it becomes see-through! If you use background-color: rgba(...);, only the background is see-through, keeping your text 100% crisp and readable!

4. HSL and HSLA (Hue, Saturation, Lightness)

Many designers consider HSL the easiest color format to understand because it matches human intuition rather than computer sub-pixels!

hsl(hue, saturation, lightness)

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                        UNDERSTANDING HSL                                |
+-------------------------------------------------------------------------+
| 1. HUE (0 to 360 degrees on the color wheel):                           |
|    0° / 360° = Red       120° = Green      240° = Blue                  |
|    60° = Yellow          180° = Cyan       300° = Magenta               |
|                                                                         |
| 2. SATURATION (0% to 100%):                                             |
|    0% = Dull gray (no color)      100% = Full vibrant vivid color       |
|                                                                         |
| 3. LIGHTNESS (0% to 100%):                                              |
|    0% = Completely Black          100% = Completely White               |
|    50% = Perfect normal color shade                                     |
+-------------------------------------------------------------------------+

Example:

1/* Normal bright blue */
2.button-normal {
3  background-color: hsl(217, 90%, 50%);
4}
5 
6/* Make it slightly darker for button hover by lowering lightness! */
7.button-hover {
8  background-color: hsl(217, 90%, 40%); /* Just lowered 50% to 40%! */
9}

Notice how easy it is to create darker or lighter shades with HSL: you only need to change the Lightness percentage without recalculating any hex numbers!

Comparison of the 4 Formats

Format	Syntax Example	When to Use	Transparency Support
Color Name	`color: crimson;`	Quick tests, prototypes, basic colors	❌ No
HEX Code	`color: #2563eb;`	Most common on the web, brand style guides	✅ Yes (`#2563eb80`)
RGB / RGBA	`color: rgba(37, 99, 235, 0.5);`	When creating translucent backgrounds & overlays	✅ Yes (`alpha`)
HSL / HSLA	`color: hsl(217, 83%, 53%);`	Dynamic color themes, hover states (tints & shades)	✅ Yes (`hsla`)

Common Beginner Mistakes (Do's and Don'ts)

What Beginners Do (Don't ❌)	What You Should Do Instead (Do ✅)	Why?
Forgetting the hash: `color: 2563eb;`	Always include `#`: `color: #2563eb;`	Without `#`, the browser does not recognize it as a HEX code.
Using `opacity: 0.5` on a card with text.	Use `background-color: rgba(...)`.	`opacity` makes the text inside hard to read; `rgba` keeps text solid.
Writing RGB values greater than 255: `rgb(300, 0, 0)`.	Keep values between 0 and 255: `rgb(255, 0, 0)`.	255 is the maximum allowed integer for standard 8-bit color channels.

Quick Revision Summary

CSS supports 4 main color formats: Keywords, HEX, RGB/RGBA, and HSL/HSLA.
HEX codes use #RRGGBB with values from 00 (darkest) to FF (brightest).
RGB mixes Red, Green, and Blue light from 0 to 255.
RGBA adds an Alpha channel (0 to 1) to control transparency without fading text.
HSL represents Hue (0–360° on color wheel), Saturation (0–100%), and Lightness (0–100%).

Interactive Quiz• Knowledge Check

Practice Quiz

Test your understanding with these multiple-choice questions:

Question 1

In the HEX color code #00FF00, which color channel is set to maximum intensity?

Question 2

What is the valid range of numbers for the Red, Green, and Blue values in the rgb() function?

Question 3

What does the "A" stand for in the rgba() color format?

Question 4

Which of the following HSL values represents pure Red on the 360-degree color wheel?

Question 5

Why is background-color: rgba(0, 0, 0, 0.5) usually preferred over opacity: 0.5 for card backgrounds?

Practice Challenge (Try It Yourself)

1
Open your code editor and create palette.html.
2
Build a color testing dashboard using all 4 formats:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>CSS Color Formats Challenge</title>
   <style>
     body {
       font-family: Arial, sans-serif;
       background-color: #f1f5f9;
       padding: 30px;
     }
12 
     .container {
       display: flex;
       gap: 16px;
     }
17 
     .box {
       flex: 1;
       padding: 24px;
       border-radius: 8px;
       color: white;
       font-weight: bold;
       text-align: center;
     }
26 
     /* 1. Named color */
     .color-named {
       background-color: crimson;
     }
31 
     /* 2. HEX color */
     .color-hex {
       background-color: #2563eb;
     }
36 
     /* 3. RGBA color with 80% opacity */
     .color-rgba {
       background-color: rgba(16, 185, 129, 0.85);
       color: white;
     }
42 
     /* 4. HSL color */
     .color-hsl {
       background-color: hsl(280, 80%, 50%);
     }
   </style>
 </head>
 <body>
   <h1>CSS Color Formats in Action</h1>
   <div class="container">
     <div class="box color-named">Named (Crimson)</div>
     <div class="box color-hex">HEX (#2563eb)</div>
     <div class="box color-rgba">RGBA (Emerald 85%)</div>
     <div class="box color-hsl">HSL (Purple 280°)</div>
   </div>
 </body>
 </html>

1
Open the file in your browser to admire your 4 colorful cards.
2
Try changing the lightness of .color-hsl from 50% to 30% (dark purple) and then 80% (light pastel lavender) to see how intuitive HSL is! 🎯

🚀 What's Next?

In the next lesson, we will continue your web styling journey with Background Color, Image, Position, and Size (Colors and Backgrounds).

👉 Continue to Next Lesson: Background Color, Image, Position, and Size →

Next Lesson

Background Color, Image, Position, and Size

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Grouping and Combinator Selectors	Background Color, Image, Position, and Size

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext

MSK Institute • Shikohabad

Loading Page Content...

Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...

Connecting serverPlease wait...

💻 Practical Labs🚀 Free Demo📜 Verified Certificates

Background Color, Image, Position, and Size

Color Formats: Names, HEX, RGB, and HSL

Beginner9 min read•Updated: 2026-10-01

Study Materials Cheatsheet

Color Formats: Names, HEX, RGB, and HSL

Welcome to Chapter 3! 🎨

In CSS, you have 4 standard ways to pick and declare colors:

1
Color Keywords (Names) (e.g., crimson, navy, gold)
2
HEX Codes (e.g., #ff0000, #2563eb)
3
RGB / RGBA Values (e.g., rgb(37, 99, 235), rgba(37, 99, 235, 0.5))
4
HSL / HSLA Values (e.g., hsl(217, 83%, 53%))

Let us explore each format using a fun watercolor palette analogy!

The Art Room Paint Palette Analogy 🎨

Imagine you are sitting in your school art class with an empty white paper and a paint palette:

Visual Architecture & Process Flow

How data and code flow step-by-step

Flowchart

Step 1

| 1. COLOR NAMES

Step 2

Asking your friend: "Pass me the Sky Blue tube!" |

1. Color Names (Keywords)

CSS comes with 140 built-in color names that modern browsers understand directly. You can simply write the name as the value:

1h1 {
2  color: crimson;
3}
4 
5p {
6  color: dimgray;
7}
8 
9button {
10  background-color: royalblue;
11  color: white;
12}

Popular CSS Color Names:

Reds/Pinks: crimson, coral, tomato, hotpink
Blues: navy, royalblue, deepskyblue, steelblue
Greens: forestgreen, seagreen, lime, mediumseagreen
Neutrals: whitesmoke, slategray, darkslategray, gold

Limitations:

2. HEX Codes (Hexadecimal)

A HEX color code is the most widely used color format on the web. It always begins with a hash symbol (#) followed by 6 characters representing three color channels:

     #  R R   G G   B B
        ───   ───   ───
         │     │     │
         │     │     └─ Blue intensity   (00 to FF)
         │     └─────── Green intensity  (00 to FF)
         └───────────── Red intensity    (00 to FF)

In the hexadecimal number system, numbers count from 0 to 9, and then use letters A to F (where A = 10 and F = 15).

00 means zero intensity (completely dark / off).
FF means maximum intensity (full blast: 255).

Common HEX Examples:

1/* Primary Colors */
2.red-box   { background-color: #ff0000; } /* Maximum Red, no green or blue */
3.green-box { background-color: #00ff00; } /* Maximum Green, no red or blue */
4.blue-box  { background-color: #0000ff; } /* Maximum Blue, no red or green */
5 
6/* Extreme Colors */
7.black-box { background-color: #000000; } /* All colors turned off (Pure Black) */
8.white-box { background-color: #ffffff; } /* All colors at full blast (Pure White) */
9 
10/* Modern Brand Shades */
11.brand-blue { background-color: #2563eb; }
12.brand-emerald { background-color: #10b981; }

3-Digit Shorthand HEX:

If each pair of characters has matching digits, you can shorten it to 3 digits:

#ffffff can be written as #fff
#000000 can be written as #000
#ff0000 can be written as #f00

3. RGB and RGBA (Red, Green, Blue + Alpha)

Every computer screen and phone display produces color by shining tiny Red, Green, and Blue light sub-pixels.

The RGB Syntax:

rgb(red, green, blue) takes 3 values ranging from 0 to 255:

1/* Pure red: 255 red, 0 green, 0 blue */
2h1 {
3  color: rgb(255, 0, 0);
4}
5 
6/* Beautiful school navy blue */
7header {
8  background-color: rgb(30, 58, 138);
9}

Adding Transparency with RGBA (Alpha):

What if you want a color to be semi-transparent (like tinted sunglasses)? You add a 4th value called Alpha (a): rgba(red, green, blue, alpha)

alpha is a decimal number between 0 and 1:
0 = completely invisible (100% transparent)
0.5 = half transparent (50% see-through)
1 = completely solid (opaque)

1/* Semi-transparent black overlay for photo modal */
2.overlay {
3  background-color: rgba(0, 0, 0, 0.6); /* 60% black, 40% see-through */
4}
5 
6/* Soft light-blue glass card */
7.glass-card {
8  background-color: rgba(37, 99, 235, 0.15); /* 15% opacity */
9}

Pro Tip

4. HSL and HSLA (Hue, Saturation, Lightness)

Many designers consider HSL the easiest color format to understand because it matches human intuition rather than computer sub-pixels!

hsl(hue, saturation, lightness)

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                        UNDERSTANDING HSL                                |
+-------------------------------------------------------------------------+
| 1. HUE (0 to 360 degrees on the color wheel):                           |
|    0° / 360° = Red       120° = Green      240° = Blue                  |
|    60° = Yellow          180° = Cyan       300° = Magenta               |
|                                                                         |
| 2. SATURATION (0% to 100%):                                             |
|    0% = Dull gray (no color)      100% = Full vibrant vivid color       |
|                                                                         |
| 3. LIGHTNESS (0% to 100%):                                              |
|    0% = Completely Black          100% = Completely White               |
|    50% = Perfect normal color shade                                     |
+-------------------------------------------------------------------------+

Example:

1/* Normal bright blue */
2.button-normal {
3  background-color: hsl(217, 90%, 50%);
4}
5 
6/* Make it slightly darker for button hover by lowering lightness! */
7.button-hover {
8  background-color: hsl(217, 90%, 40%); /* Just lowered 50% to 40%! */
9}

Notice how easy it is to create darker or lighter shades with HSL: you only need to change the Lightness percentage without recalculating any hex numbers!

Comparison of the 4 Formats

Format	Syntax Example	When to Use	Transparency Support
Color Name	`color: crimson;`	Quick tests, prototypes, basic colors	❌ No
HEX Code	`color: #2563eb;`	Most common on the web, brand style guides	✅ Yes (`#2563eb80`)
RGB / RGBA	`color: rgba(37, 99, 235, 0.5);`	When creating translucent backgrounds & overlays	✅ Yes (`alpha`)
HSL / HSLA	`color: hsl(217, 83%, 53%);`	Dynamic color themes, hover states (tints & shades)	✅ Yes (`hsla`)

Common Beginner Mistakes (Do's and Don'ts)

What Beginners Do (Don't ❌)	What You Should Do Instead (Do ✅)	Why?
Forgetting the hash: `color: 2563eb;`	Always include `#`: `color: #2563eb;`	Without `#`, the browser does not recognize it as a HEX code.
Using `opacity: 0.5` on a card with text.	Use `background-color: rgba(...)`.	`opacity` makes the text inside hard to read; `rgba` keeps text solid.
Writing RGB values greater than 255: `rgb(300, 0, 0)`.	Keep values between 0 and 255: `rgb(255, 0, 0)`.	255 is the maximum allowed integer for standard 8-bit color channels.

Quick Revision Summary

CSS supports 4 main color formats: Keywords, HEX, RGB/RGBA, and HSL/HSLA.
HEX codes use #RRGGBB with values from 00 (darkest) to FF (brightest).
RGB mixes Red, Green, and Blue light from 0 to 255.
RGBA adds an Alpha channel (0 to 1) to control transparency without fading text.
HSL represents Hue (0–360° on color wheel), Saturation (0–100%), and Lightness (0–100%).

Interactive Quiz• Knowledge Check

Practice Quiz

Test your understanding with these multiple-choice questions:

Question 1

In the HEX color code #00FF00, which color channel is set to maximum intensity?

Question 2

What is the valid range of numbers for the Red, Green, and Blue values in the rgb() function?

Question 3

What does the "A" stand for in the rgba() color format?

Question 4

Which of the following HSL values represents pure Red on the 360-degree color wheel?

Question 5

Why is background-color: rgba(0, 0, 0, 0.5) usually preferred over opacity: 0.5 for card backgrounds?

Practice Challenge (Try It Yourself)

1
Open your code editor and create palette.html.
2
Build a color testing dashboard using all 4 formats:

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>CSS Color Formats Challenge</title>
   <style>
     body {
       font-family: Arial, sans-serif;
       background-color: #f1f5f9;
       padding: 30px;
     }
12 
     .container {
       display: flex;
       gap: 16px;
     }
17 
     .box {
       flex: 1;
       padding: 24px;
       border-radius: 8px;
       color: white;
       font-weight: bold;
       text-align: center;
     }
26 
     /* 1. Named color */
     .color-named {
       background-color: crimson;
     }
31 
     /* 2. HEX color */
     .color-hex {
       background-color: #2563eb;
     }
36 
     /* 3. RGBA color with 80% opacity */
     .color-rgba {
       background-color: rgba(16, 185, 129, 0.85);
       color: white;
     }
42 
     /* 4. HSL color */
     .color-hsl {
       background-color: hsl(280, 80%, 50%);
     }
   </style>
 </head>
 <body>
   <h1>CSS Color Formats in Action</h1>
   <div class="container">
     <div class="box color-named">Named (Crimson)</div>
     <div class="box color-hex">HEX (#2563eb)</div>
     <div class="box color-rgba">RGBA (Emerald 85%)</div>
     <div class="box color-hsl">HSL (Purple 280°)</div>
   </div>
 </body>
 </html>

1
Open the file in your browser to admire your 4 colorful cards.
2
Try changing the lightness of .color-hsl from 50% to 30% (dark purple) and then 80% (light pastel lavender) to see how intuitive HSL is! 🎯

🚀 What's Next?

In the next lesson, we will continue your web styling journey with Background Color, Image, Position, and Size (Colors and Backgrounds).

👉 Continue to Next Lesson: Background Color, Image, Position, and Size →

Next Lesson

Background Color, Image, Position, and Size

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Grouping and Combinator Selectors	Background Color, Image, Position, and Size

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next