CSS Colors Tutorial – HEX, RGB, and HSL Explained

CSS Colors Tutorial – HEX, RGB, and HSL Explained

CSS Colors – Color Names, HEX, RGB, RGBA, HSL Explained | TipsInLearning
Home CSS Course CSS Colors
CSS Lesson 4 of 12

CSS Colors

Learn all CSS color formats — color names, HEX codes, RGB, RGBA, HSL, and HSLA — with live color swatches, visual diagrams, and code examples to use each format.

10 min read
Beginner
CSS Fundamentals
CSS Course
In This Lesson
10 min read Beginner
Progress0/12
New developers often think colors are simple — pick a color, copy the code. Not quite. Understanding when to use HEX, RGB, or HSL fundamentally changes how you think about color. By the end of this lesson, you'll know exactly which format to reach for and why. Most professionals use HEX. But HSL is your secret weapon for quick color variants.
What You'll Learn
5 CSS color formats
140+ built-in color names
HEX codes (#rrggbb)
RGB and RGBA values
HSL and HSLA values
When to use each format

What are CSS Colors?

CSS colors are used to change the color of text, backgrounds, borders, shadows, and other elements on a webpage. CSS provides five different ways to specify a color — each useful in different scenarios.

Every color you see on a website is created by mixing Red, Green, and Blue light. CSS lets you control these three channels using different formats — it's all the same underlying color system, just expressed differently.

Color Names
140+ predefined names like 'red', 'tomato', 'dodgerblue' — great for quick prototyping.
HEX Codes
#rrggbb format — most common in professional web development and color pickers.
RGB/RGBA
rgb(r,g,b) — great for transparency with alpha channel — rgba(r,g,b,a).
HSL/HSLA
Hue, Saturation, Lightness — easiest for creating color variants by adjusting one value.

5 CSS Color Formats

Names
red, tomato
HEX
#ff6347
RGB
rgb(255,99,71)
RGBA
+alpha/opacity
HSL/HSLA
hsl(9,100%,64%)

1. Color Names

140+ Predefined Color Names

CSS supports over 140 built-in color names. Simply type the color name directly in your CSS. Simple to use — no numbers or symbols needed. Perfect for prototyping and learning.

red
blue
green
yellow
orange
tomato
dodgerblue
violet
black
white
gray
lightblue
CSS — Color Names
h1   { color: blue; }
p    { color: green; }
body { background-color: lightblue; }
div  { border: 2px solid tomato; }

2. HEX Color Codes

Hexadecimal Colors — #RRGGBB

HEX colors start with # followed by 6 hex digits (0-9, a-f) — 2 for Red, 2 for Green, 2 for Blue. Each pair ranges from 00 (none) to ff (maximum). HEX is the most popular format in professional web development — all color pickers output HEX codes.

#ff6347
#e85d04
#f97316
#fb923c
#f97316
#ea580c
#d97706
#b45309
CSS — HEX Colors
h1   { color: #ff0000; }          /* pure red */
p    { color: #00ff00; }          /* pure green */
body { background-color: #0000ff; } /* pure blue */
div  { color: #e85d04; }          /* orange */

/* Shorthand: #rgb when digits repeat */
p { color: #f00; }               /* same as #ff0000 */
p { color: #000; }               /* black */

Pro developer tip: All professional color tools (Figma, Adobe, browser DevTools) output HEX codes. Learn to work with HEX — it's the industry standard. When copying colors from a design, you'll always get HEX format.

3. RGB Colors

RGB — rgb(red, green, blue)

RGB uses three numbers (0–255) — one for each color channel: Red, Green, and Blue. Mixing these three channels creates any color. rgb(0,0,0) is black, rgb(255,255,255) is white, and rgb(255,0,0) is pure red.

CSS — RGB Colors
h1   { color: rgb(255, 0, 0); }    /* red */
p    { color: rgb(0, 255, 0); }    /* green */
body { background-color: rgb(0, 0, 255); }  /* blue */
div  { color: rgb(232, 93, 4); }   /* orange */

/* rgb(0,0,0)       = black */
/* rgb(255,255,255) = white */
/* rgb(128,128,128) = gray  */

4. RGBA — RGB with Opacity

RGBA — rgba(r, g, b, alpha)

RGBA adds a 4th value (alpha) for transparency. Alpha ranges from 0 (fully transparent) to 1 (fully opaque). Perfect for overlays, cards with glass effects, and semi-transparent backgrounds.

rgba(232, 93, 4, alpha) — transparency scale:
1.0
0.8
0.6
0.4
0.2
0
← transparent
CSS — RGBA Colors
p        { color: rgba(232, 93, 4, 0.5); }
.overlay { background-color: rgba(232, 93, 4, 0.3); }
div      { background: rgba(0, 0, 0, 1); }  /* opaque */
div      { background: rgba(0, 0, 0, 0); }  /* transparent */

5. HSL Colors

HSL — hsl(hue, saturation%, lightness%)

Hue is the color on a 0–360° wheel: 0/360°=red, 120°=green, 240°=blue. Saturation ranges 0–100% (0%=gray, 100%=vivid). Lightness ranges 0–100% (0%=black, 50%=normal, 100%=white). HSL makes creating color variants trivial — just change lightness!

CSS — HSL Colors
h1       { color: hsl(0, 100%, 50%); }    /* red */
p        { color: hsl(120, 100%, 35%); } /* green */
div      { color: hsl(240, 100%, 60%); } /* blue */
span     { color: hsl(26, 98%, 52%); }  /* orange */

/* Easy shade variants — just change lightness */
.dark   { color: hsl(26, 98%, 25%); }  /* dark orange */
.normal { color: hsl(26, 98%, 52%); }  /* normal */
.light  { color: hsl(26, 98%, 80%); }  /* light orange */

6. HSLA — HSL with Opacity

HSLA — hsla(h, s%, l%, alpha)

HSLA adds alpha transparency to HSL — exactly like RGBA does for RGB. Alpha is 0 (transparent) to 1 (opaque). Combine HSL's easy shade control with transparency for ultimate color control.

CSS — HSLA Colors
p     { color: hsla(200, 100%, 50%, 1.0); }  /* opaque */
p     { color: hsla(200, 100%, 50%, 0.6); }  /* 60% visible */
.card { background: hsla(26, 98%, 52%, 0.2); } /* subtle tint */

Where to Apply CSS Colors

Colors can be applied to many CSS properties. Here are the three most common:

color
Sets the text color of an element
background-color
Sets the background color of an element
border-color
Sets the border color via the border property
CSS — Colors on Different Properties
p      { color: darkgreen; }
body   { background-color: lightblue; }
div    { border: 2px solid red; }
.card {
  color: white;
  background-color: #e85d04;
  border: 3px solid #f97316;
}

Complete Example — All Five Formats

HTML + CSS — All Color Formats Together
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    body  { background-color: #f0f0f0; }          /* HEX */
    h1    { color: blue; text-align: center; }      /* name */
    p     { color: rgb(0, 150, 0); }                  /* RGB */
    .box  {
      background-color: rgba(255, 0, 0, 0.3);         /* RGBA */
      border: 2px solid hsl(270, 70%, 50%);           /* HSL */
      padding: 1rem;
    }
  </style>
</head>
<body>
  <h1>CSS Colors Demo</h1>
  <p>This text is green using RGB.</p>
  <div class="box">Light red box with purple border.</div>
</body>
</html>

CSS Colors Demo

This text is green using RGB.

Light red box with purple border.
All five color formats — name, HEX, RGB, RGBA, HSL — used in one page

Which format should you use? Use HEX when copying from a color picker. Use RGB/RGBA when you need transparency or dynamic colors in JavaScript. Use HSL when designing color systems — it makes shade variants instant. Use color names for quick prototyping.

Try It Yourself

Challenge — Create a Colorful Webpage
1Set the body background to a color name of your choice (e.g., lightblue)
2Make an h1 heading using a HEX color code for the text
3Create a p with color: rgb() using three custom values
4Add a div with background: rgba() at 0.4 opacity
5Create three paragraphs using the same HSL hue but lightness 20%, 50%, 80%
Quick Summary
1Color names — 140+ built-in names like red, tomato, dodgerblue
2HEX — #rrggbb — most common, copy directly from color pickers
3RGB — rgb(r,g,b) — each channel 0–255
4RGBA — adds alpha channel for 0 (transparent) to 1 (opaque) opacity
5HSL — Hue, Saturation, Lightness — easiest for creating color variants
✓Apply via color, background-color, and border properties

Questions About CSS Colors

The most common questions beginners ask when learning CSS colors:

What are CSS color formats?
CSS supports multiple color formats: color names (red, blue), HEX codes (#ff0000), RGB (rgb(255,0,0)), RGBA (rgba(255,0,0,0.5)), HSL (hsl(0,100%,50%)), and HSLA (hsla(0,100%,50%,0.5)). Each format has different advantages for different situations.
Which CSS color format should I use?
Use HEX when copying from a color picker tool — it's the industry standard. Use RGB/RGBA when you need transparency or dynamic colors in JavaScript. Use HSL when you want easy shade variants — just change the lightness value. Color names are great for quick prototyping and learning.
What is the difference between RGB and RGBA?
RGB defines colors using Red, Green, Blue values (0-255). RGBA adds an Alpha channel for transparency — alpha ranges from 0 (fully transparent) to 1 (fully opaque). Use RGBA when you need semi-transparent colors for overlays, glass effects, or fading elements.
What does HSL stand for?
HSL stands for Hue (0-360°), Saturation (0-100%), Lightness (0-100%). Hue is the color on the color wheel, Saturation controls vibrancy from gray to pure color, and Lightness controls brightness from black to white. HSL is intuitive for creating color variants — just adjust one value.
Can I mix different color formats in CSS?
Yes, you can use different color formats in different parts of your CSS. For example, use HEX for main theme colors and RGBA for overlays. Browsers support all formats simultaneously — use whichever format best fits each situation and improves your code readability.
How do I create semi-transparent colors?
Use RGBA or HSLA formats — they both include an alpha value from 0 (fully transparent) to 1 (fully opaque). Example: rgba(255, 0, 0, 0.5) is 50% transparent red. HSLA example: hsla(0, 100%, 50%, 0.5) is 50% transparent pure red.
What You'll Learn
5 CSS color formats
140+ built-in color names
HEX codes (#rrggbb)
RGB and RGBA values
HSL and HSLA values
color, background-color, border

What are CSS Colors?

CSS colors are used to change the color of text, backgrounds, borders, shadows, and other elements on a webpage. CSS provides several different ways to specify a color — each useful in different situations.

5 CSS Color Formats

Names
tomato, blue
HEX
#ff6347
RGB
rgb(255,0,0)
RGBA
+opacity
HSL/HSLA
hsl(270,70%,50%)

1. Color Names

Named Colors

CSS supports over 140 predefined color names you can use directly by typing the name. Simple to use — no numbers needed. Best for quick styling and learning.

red
blue
green
yellow
orange
tomato
dodgerblue
violet
black
white
gray
lightblue
CSS — Color Names
h1   { color: blue; }
p    { color: green; }
body { background-color: lightblue; }
div  { border: 2px solid tomato; }

2. HEX Color Codes

Hexadecimal Colors — #RRGGBB

HEX colors start with # followed by 6 hex digits — 2 for Red, 2 for Green, 2 for Blue. Each pair ranges from 00 (none) to FF (maximum). HEX is the most widely used format in professional web development.

#ff6347
#7c3aed
#3b82f6
#059669
#e85d04
#fbbf24
#0f172a
#f8fafc
CSS — HEX Colors
h1   { color: #ff0000; }          /* pure red */
p    { color: #00ff00; }          /* pure green */
body { background-color: #0000ff; } /* pure blue */
div  { color: #7c3aed; }          /* purple */

/* Shorthand: #rgb when digits repeat */
p { color: #f00; }               /* same as #ff0000 */
p { color: #000; }               /* black */

3. RGB Colors

RGB — rgb(red, green, blue)

RGB uses three numbers — one each for Red, Green, and Blue. Each ranges from 0 (none) to 255 (maximum). Mix these channels to create any colour.

CSS — RGB Colors
h1   { color: rgb(255, 0, 0); }    /* red */
p    { color: rgb(0, 255, 0); }    /* green */
body { background-color: rgb(0, 0, 255); }  /* blue */
div  { color: rgb(124, 58, 237); }  /* purple */
/* rgb(0,0,0)       = black   */
/* rgb(255,255,255) = white   */
/* rgb(128,128,128) = gray    */

4. RGBA — RGB with Opacity

RGBA — rgba(r, g, b, alpha)

RGBA adds a 4th value (alpha) to control transparency. Alpha ranges from 0 (fully transparent) to 1 (fully opaque). Perfect for overlays, cards, and glass effects.

rgba(255, 0, 0, alpha) — transparency scale:
1.0
0.8
0.6
0.4
0.2
0
← transparent
CSS — RGBA Colors
p        { color: rgba(255, 0, 0, 0.5); }
.overlay { background-color: rgba(124, 58, 237, 0.3); }
div      { background: rgba(0, 0, 0, 1); }  /* opaque */
div      { background: rgba(0, 0, 0, 0); }  /* transparent */

5. HSL Colors

HSL — hsl(hue, saturation%, lightness%)

Hue is the color wheel angle (0–360°): 0/360=red, 120=green, 240=blue. Saturation is vibrancy (0%=gray, 100%=vivid). Lightness is brightness (0%=black, 50%=normal, 100%=white). HSL makes shade variants easy — just change lightness!

CSS — HSL Colors
h1       { color: hsl(0, 100%, 50%); }    /* red */
p        { color: hsl(120, 100%, 35%); } /* green */
div      { color: hsl(240, 100%, 60%); } /* blue */
span     { color: hsl(270, 70%, 50%); }  /* purple */
/* Easy shade variants — just change lightness */
.dark   { color: hsl(270, 70%, 20%); }  /* dark purple */
.normal { color: hsl(270, 70%, 50%); }  /* normal */
.light  { color: hsl(270, 70%, 80%); }  /* light purple */

6. HSLA — HSL with Opacity

HSLA — hsla(h, s%, l%, alpha)

HSLA adds an alpha transparency value to HSL — exactly like RGBA does for RGB. Alpha is 0 (transparent) to 1 (opaque). Combine HSL's easy shade control with transparency for glass and overlay effects.

CSS — HSLA Colors
p     { color: hsla(200, 100%, 50%, 1.0); }  /* opaque */
p     { color: hsla(200, 100%, 50%, 0.6); }  /* 60% visible */
.card { background: hsla(270, 70%, 50%, 0.2); } /* subtle tint */

Where to Apply CSS Colors

Colors can be applied to many CSS properties. Here are the three most common:

color
Sets the text color of an element
background-color
Sets the background color of an element
border-color
Sets the border color via the border property
CSS — Colors on Different Properties
p      { color: darkgreen; }
body   { background-color: lightblue; }
div    { border: 2px solid red; }
.card {
  color: white;
  background-color: #7c3aed;
  border: 3px solid #e85d04;
}

Complete Example

HTML + CSS — All Color Formats Together
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    body  { background-color: #f0f0f0; }          /* HEX */
    h1    { color: blue; text-align: center; }      /* name */
    p     { color: rgb(0, 150, 0); }                  /* RGB */
    .box  {
      background-color: rgba(255, 0, 0, 0.3);         /* RGBA */
      border: 2px solid hsl(270, 70%, 50%);           /* HSL */
      padding: 1rem;
    }
  </style>
</head>
<body>
  <h1>CSS Colors Demo</h1>
  <p>This text is green using RGB.</p>
  <div class="box">Light red box with purple border.</div>
</body>
</html>

CSS Colors Demo

This text is green using RGB.

Light red box with purple border.
All five color formats — name, HEX, RGB, RGBA, HSL — used in one page

Which format should you use? Use HEX when copying from a color picker tool. Use RGB/RGBA when you need transparency or dynamic colors in JavaScript. Use HSL when you want easy shade variants — just change the lightness value.

Try It Yourself

Challenge — Create a Colorful Webpage
1Set the body background to a color name of your choice (e.g. lightblue)
2Make an h1 heading using a HEX color code for the text
3Create a p with color: rgb() using three custom values
4Add a div with background: rgba() at 0.4 opacity — see the transparency
5Create three paragraphs using the same HSL hue but lightness 20%, 50%, 80% to see dark/normal/light variants
Quick Summary
1Color names — 140+ built-in names like red, tomato, dodgerblue
2HEX — #rrggbb — most common, copy from any color picker
3RGB — rgb(r,g,b) — each channel 0–255
4RGBA — adds alpha 0 (transparent) to 1 (opaque)
5HSL — Hue 0–360°, Saturation%, Lightness% — easiest for shades
✓Apply via color, background-color, and border properties

Questions About CSS Colors

The most common questions beginners ask when learning CSS colors:

What are CSS color formats?
CSS supports multiple color formats: color names (red, blue), HEX codes (#ff0000), RGB (rgb(255,0,0)), RGBA (rgba(255,0,0,0.5)), HSL (hsl(0,100%,50%)), and HSLA (hsla(0,100%,50%,0.5)). Each format has different use cases and advantages for different situations.
Which CSS color format should I use?
Use HEX when copying from a color picker tool — it's the most common web format. Use RGB/RGBA when you need transparency or dynamic colors in JavaScript. Use HSL when you want easy shade variants by just changing the lightness value. Color names are great for quick prototyping and common colors.
What is the difference between RGB and RGBA?
RGB defines colors using Red, Green, Blue values (0-255). RGBA adds an Alpha channel for transparency — alpha ranges from 0 (fully transparent) to 1 (fully opaque). Use RGBA when you need semi-transparent colors for overlays, glass effects, or fading elements.
What does HSL stand for?
HSL stands for Hue (0-360°), Saturation (0-100%), Lightness (0-100%). Hue is the color on the color wheel, Saturation controls vibrancy from gray to pure color, and Lightness controls brightness from black to white. HSL is intuitive for creating color variants — just adjust one value.
Can I mix different color formats in CSS?
Yes, you can use different color formats in different parts of your CSS. For example, use HEX for main theme colors and RGBA for overlays. Browsers support all formats simultaneously — use whichever format best fits each situation and improves your code readability.
How do I create semi-transparent colors?
Use RGBA or HSLA formats — they both include an alpha value from 0 (fully transparent) to 1 (fully opaque). Example: rgba(255, 0, 0, 0.5) is 50% transparent red. HSLA example: hsla(0, 100%, 50%, 0.5) is 50% transparent pure red.

Post a Comment