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-09-10
Study Materials

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. 1
    Color Keywords (Names) (e.g., crimson, navy, gold)
  2. 2
    HEX Codes (e.g., #ff0000, #2563eb)
  3. 3
    RGB / RGBA Values (e.g., rgb(37, 99, 235), rgba(37, 99, 235, 0.5))
  4. 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:

CSS
h1 {
color: crimson;
}
 
p {
color: dimgray;
}
 
button {
background-color: royalblue;
color: white;
}

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:

Output
# 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:

CSS
/* Primary Colors */
.red-box { background-color: #ff0000; } /* Maximum Red, no green or blue */
.green-box { background-color: #00ff00; } /* Maximum Green, no red or blue */
.blue-box { background-color: #0000ff; } /* Maximum Blue, no red or green */
 
/* Extreme Colors */
.black-box { background-color: #000000; } /* All colors turned off (Pure Black) */
.white-box { background-color: #ffffff; } /* All colors at full blast (Pure White) */
 
/* Modern Brand Shades */
.brand-blue { background-color: #2563eb; }
.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:

CSS
/* Pure red: 255 red, 0 green, 0 blue */
h1 {
color: rgb(255, 0, 0);
}
 
/* Beautiful school navy blue */
header {
background-color: rgb(30, 58, 138);
}

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)
CSS
/* Semi-transparent black overlay for photo modal */
.overlay {
background-color: rgba(0, 0, 0, 0.6); /* 60% black, 40% see-through */
}
 
/* Soft light-blue glass card */
.glass-card {
background-color: rgba(37, 99, 235, 0.15); /* 15% opacity */
}
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:

CSS
/* Normal bright blue */
.button-normal {
background-color: hsl(217, 90%, 50%);
}
 
/* Make it slightly darker for button hover by lowering lightness! */
.button-hover {
background-color: hsl(217, 90%, 40%); /* Just lowered 50% to 40%! */
}

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

FormatSyntax ExampleWhen to UseTransparency Support
Color Namecolor: crimson;Quick tests, prototypes, basic colors❌ No
HEX Codecolor: #2563eb;Most common on the web, brand style guides✅ Yes (#2563eb80)
RGB / RGBAcolor: rgba(37, 99, 235, 0.5);When creating translucent backgrounds & overlays✅ Yes (alpha)
HSL / HSLAcolor: 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%).

Practice Quiz

Test your understanding with these multiple-choice questions:

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

A. Red B. Green C. Blue D. Yellow Answer: B Explanation: In #RRGGBB, the middle two characters represent Green. FF is the maximum value, while Red and Blue are both set to 00.

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

A. 0 to 100 B. 1 to 10 C. 0 to 255 D. 0 to 360 Answer: C Explanation: Standard RGB values range from 0 (minimum intensity) to 255 (maximum intensity) per channel.

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

A. Angle B. Alignment C. Alpha D. Ambient Answer: C Explanation: "A" stands for Alpha. It represents the opacity/transparency level, measured on a decimal scale from 0.0 (transparent) to 1.0 (opaque).

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

A. hsl(0, 100%, 50%) B. hsl(120, 100%, 50%) C. hsl(240, 100%, 50%) D. hsl(60, 100%, 50%) Answer: A Explanation: On the HSL color wheel, 0 degrees (and 360 degrees) corresponds to Red, 120 degrees is Green, and 240 degrees is Blue.

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

A. Because rgba works on older browsers from 1995 B. Because rgba only makes the background transparent, keeping text crisp and readable C. Because opacity requires an expensive software license D. Because rgba uses less computer memory Answer: B Explanation: Applying opacity: 0.5 makes the element and all child elements (including text and icons) transparent. In contrast, rgba() applies transparency exclusively to the background color.

Practice Challenge (Try It Yourself)

  1. 1
    Open your code editor and create palette.html.
  2. 2
    Build a color testing dashboard using all 4 formats:
HTML
<!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;
}
 
.container {
display: flex;
gap: 16px;
}
 
.box {
flex: 1;
padding: 24px;
border-radius: 8px;
color: white;
font-weight: bold;
text-align: center;
}
 
/* 1. Named color */
.color-named {
background-color: crimson;
}
 
/* 2. HEX color */
.color-hex {
background-color: #2563eb;
}
 
/* 3. RGBA color with 80% opacity */
.color-rgba {
background-color: rgba(16, 185, 129, 0.85);
color: white;
}
 
/* 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. 1
    Open the file in your browser to admire your 4 colorful cards.
  2. 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! 🎯
Next Lesson

Background Color, Image, Position, and Size

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

Related Lessons

Previous LessonNext Lesson
Grouping and Combinator SelectorsBackground Color, Image, Position, and Size

Practice Quiz

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

PreviousNext
PrevNext