CSS Color Values | CSS Tutorial for Beginners

Color is one of the most important aspects of web design. CSS provides multiple ways to specify colors, each with its own advantages. Whether you're setting text color, backgrounds, borders, or shadows, understanding CSS color values is essential for creating beautiful, accessible websites.

Color in CSS

CSS allows you to specify colors in several different formats. The same color can be represented in multiple ways, and you can choose the format that works best for your needs.

For example, all of these represent the same shade of blue:

same-color-different-formats.css

/* All of these are the same blue color */
.element {
  color: blue;                    /* Named color */
  color: #0000FF;                 /* Hex (6-digit) */
  color: #00F;                    /* Hex (3-digit) */
  color: rgb(0, 0, 255);          /* RGB */
  color: rgba(0, 0, 255, 1);      /* RGBA */
  color: hsl(240, 100%, 50%);     /* HSL */
  color: hsla(240, 100%, 50%, 1); /* HSLA */
}

Blue

Hex:#0000FF

RGB:rgb(0, 0, 255)

HSL:hsl(240, 100%, 50%)

Named Colors

CSS includes 147 predefined color names that you can use directly. These are easy to remember and read, making them great for quick prototyping or teaching.

named-colors.css

/* Named colors are simple to use */
h1 {
  color: crimson;
}

p {
  color: darkslateblue;
}

.highlight {
  background-color: gold;
}

a {
  color: dodgerblue;
}

.warning {
  color: orangered;
}

Popular Named Colors

Common Named Colors

Red

#FF0000

Blue

#0000FF

Green

#008000

Yellow

#FFFF00

Purple

#800080

Orange

#FFA500

Pink

#FFC0CB

Cyan

#00FFFF

Magenta

#FF00FF

Lime

#00FF00

Navy

#000080

Teal

#008080

Maroon

#800000

Olive

#808000

Coral

#FF7F50

Crimson

#DC143C

Gold

#FFD700

Indigo

#4B0082

Tomato

#FF6347

SlateBlue

#6A5ACD

Special Named Colors

Special Colors

Transparent

#00000000

Black

#000000

White

#FFFFFF

Gray

#808080

Silver

#C0C0C0

Named Colors in Action

When to use named colors: Named colors are great for quick prototyping, learning, or when the exact shade doesn't matter much. However, for production sites, hex or RGB values give you more precise control over your color palette.

Hexadecimal Colors (Hex)

Hexadecimal (hex) color codes are the most common way to specify colors in CSS. They start with a hash symbol (#) followed by six characters representing red, green, and blue values.

How Hex Colors Work

A hex color is formatted as #RRGGBB where:

RR = Red component (00 to FF)
GG = Green component (00 to FF)
BB = Blue component (00 to FF)

Breaking Down a Hex Color

#FFA500

Red: FF
255 (maximum)

Green: A5
165 (medium)

Blue: 00
0 (none)

Result: Orange (#FFA500)

hex-colors.css

/* 6-digit hex colors */
.element {
  color: #FF0000;        /* Pure red */
  color: #00FF00;        /* Pure green */
  color: #0000FF;        /* Pure blue */
  color: #FFFFFF;        /* White */
  color: #000000;        /* Black */
  color: #808080;        /* Gray */
  color: #FF6B6B;        /* Light red */
  color: #4ECDC4;        /* Turquoise */
  color: #FFD93D;        /* Yellow */
}

3-Digit Shorthand Hex

When both digits in each pair are the same, you can use a 3-digit shorthand:

hex-shorthand.css

/* These pairs are equivalent */
#FF0000 = #F00    /* Red */
#00FF00 = #0F0    /* Green */
#0000FF = #00F    /* Blue */
#FFFFFF = #FFF    /* White */
#000000 = #000    /* Black */
#336699 = #369    /* Blue-gray */

/* But #123456 CANNOT be shortened */
/* Because digits don't repeat: 1≠2, 3≠4, 5≠6 */

8-Digit Hex with Transparency (Alpha)

Modern CSS supports an 8-digit hex format that includes transparency:

hex-alpha.css

/* Format: #RRGGBBAA (AA = alpha/transparency) */
.element {
  color: #FF0000FF;   /* Fully opaque red (FF = 100%) */
  color: #FF000080;   /* 50% transparent red (80 = 50%) */
  color: #00FF0040;   /* 25% transparent green (40 = 25%) */
  color: #0000FF00;   /* Fully transparent blue (00 = 0%) */
}

/* Shorthand also works with alpha */
#F00F = #FF0000FF   /* Opaque red */
#F008 = #FF000088   /* Semi-transparent red */

Popular Hex Colors

Red

#E74C3C

Orange

#E67E22

Yellow

#F39C12

Green

#27AE60

Teal

#16A085

Blue

#3498DB

Purple

#9B59B6

Pink

#E91E63

Gray Dark

#2C3E50

Gray

#7F8C8D

Gray Light

#BDC3C7

Gray Lighter

#ECF0F1

🎨 Pro Tip:

Use a color picker tool (built into most code editors and browsers) to visually select colors and get their hex codes. Most designers prefer hex codes because they're compact and widely supported.

RGB Colors

RGB stands for Red, Green, Blue. This format uses decimal values (0-255) for each color channel, making it more human-readable than hex codes.

RGB Syntax

rgb-syntax.css

/* Syntax: rgb(red, green, blue) */
/* Each value ranges from 0 to 255 */

.element {
  color: rgb(255, 0, 0);      /* Pure red */
  color: rgb(0, 255, 0);      /* Pure green */
  color: rgb(0, 0, 255);      /* Pure blue */
  color: rgb(255, 255, 255);  /* White */
  color: rgb(0, 0, 0);        /* Black */
  color: rgb(128, 128, 128);  /* Gray (50%) */
  color: rgb(255, 165, 0);    /* Orange */
}

Understanding RGB Values

rgb(255, 0, 0)

Red: Maximum
Green: None
Blue: None

rgb(255, 255, 0)

Red: Maximum
Green: Maximum
Blue: None = Yellow

rgb(128, 128, 128)

Red: 50%
Green: 50%
Blue: 50% = Gray

When to Use RGB

Dynamic colors: When calculating colors with JavaScript
Readability: Easier to understand than hex for some people
Manipulation: Easier to lighten/darken by adjusting values

RGB Color Examples

RGBA Colors (RGB with Alpha)

RGBA is RGB with an additional alpha channel for transparency. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque).

rgba-syntax.css

/* Syntax: rgba(red, green, blue, alpha) */
/* Alpha: 0 = transparent, 1 = opaque, 0.5 = 50% transparent */

.element {
  color: rgba(255, 0, 0, 1);      /* Fully opaque red */
  color: rgba(255, 0, 0, 0.5);    /* 50% transparent red */
  color: rgba(255, 0, 0, 0.25);   /* 25% transparent red */
  color: rgba(255, 0, 0, 0);      /* Fully transparent red */
  
  /* Useful for overlays */
  background: rgba(0, 0, 0, 0.7); /* Dark overlay */
  background: rgba(255, 255, 255, 0.9); /* Light overlay */
}

RGBA Transparency Examples

Common RGBA Use Cases

Overlays: Dark or light overlays on images/videos
Shadows: Semi-transparent shadows for depth
Glassmorphism: Translucent UI elements
Hover effects: Subtle transparency changes

RGBA Practical Use Cases

HSL Colors

HSL stands for Hue, Saturation, and Lightness. This format is often more intuitive than RGB because it matches how humans naturally think about color.

Understanding HSL Components

Hue (0-360)

Position on the color wheel in degrees:

0° = Red
120° = Green
240° = Blue
360° = Red (full circle)

Saturation (0-100%)

Color intensity:

0% = Gray (no color)
50% = Moderate
100% = Vivid (full color)

Lightness (0-100%)

Brightness level:

0% = Black
50% = Normal
100% = White

hsl-syntax.css

/* Syntax: hsl(hue, saturation, lightness) */

.element {
  color: hsl(0, 100%, 50%);     /* Red */
  color: hsl(120, 100%, 50%);   /* Green */
  color: hsl(240, 100%, 50%);   /* Blue */
  color: hsl(0, 0%, 100%);      /* White */
  color: hsl(0, 0%, 0%);        /* Black */
  color: hsl(0, 0%, 50%);       /* Gray */
  color: hsl(39, 100%, 50%);    /* Orange */
}

Hue Wheel Demonstration

HSL Hue Wheel (0-360°)

Saturation Demonstration

HSL Saturation (0-100%)

Lightness Demonstration

HSL Lightness (0-100%)

Why Use HSL?

Intuitive: Easier to create color variations
Color schemes: Simple to create complementary colors
Consistency: Keep same hue, adjust lightness/saturation
Dynamic theming: Easy to programmatically adjust

hsl-variations.css

/* Easy to create color variations with HSL */

/* Base color */
.primary {
  background: hsl(210, 100%, 50%); /* Blue */
}

/* Lighter version - just increase lightness */
.primary-light {
  background: hsl(210, 100%, 70%);
}

/* Darker version - decrease lightness */
.primary-dark {
  background: hsl(210, 100%, 30%);
}

/* Muted version - decrease saturation */
.primary-muted {
  background: hsl(210, 50%, 50%);
}

/* Complementary color - add 180° to hue */
.complementary {
  background: hsl(30, 100%, 50%); /* Orange (210 - 180 = 30) */
}

Creating Color Variations with HSL

HSLA Colors (HSL with Alpha)

HSLA adds transparency to HSL colors, just like RGBA does for RGB:

hsla-syntax.css

/* Syntax: hsla(hue, saturation, lightness, alpha) */

.element {
  color: hsla(0, 100%, 50%, 1);     /* Fully opaque red */
  color: hsla(0, 100%, 50%, 0.5);   /* 50% transparent red */
  color: hsla(120, 100%, 50%, 0.3); /* 30% transparent green */
  color: hsla(240, 100%, 50%, 0);   /* Fully transparent blue */
}

HSLA with Transparency

The currentColor Keyword

currentColor is a special keyword that references the current value of the color property. It's incredibly useful for creating cohesive designs.

currentcolor.css

/* currentColor inherits the text color */
.element {
  color: red;
  border: 2px solid currentColor; /* Border will be red */
  box-shadow: 0 0 10px currentColor; /* Shadow will be red */
}

/* Useful for icons that match text color */
.icon {
  color: blue;
}

.icon svg {
  fill: currentColor; /* SVG will be blue */
}

/* Changes with hover */
.button:hover {
  color: green;
  border-color: currentColor; /* Border becomes green */
}

currentColor Keyword Example

Choosing the Right Color Format

When to Use Each Format

Property	Values	Description
`Named Colors`	`crimson, dodgerblue`	Quick prototyping, simple colors. Limited selection.
`Hex (#RRGGBB)`	`#3498db, #e74c3c`	Most popular. Compact, widely supported, design tools standard.
`RGB/RGBA`	`rgb(52, 152, 219)`	Good for JavaScript manipulation, transparency needs.
`HSL/HSLA`	`hsl(204, 70%, 53%)`	Most intuitive for creating variations, color schemes.
`currentColor`	`Keyword`	Inherits text color. Great for consistent theming.

💡 Best Practice:

In professional projects, most developers use hex for basic colors, RGBA or HSLA when transparency is needed, and HSL for creating color variations. Choose the format that makes your code most maintainable!

Color Accessibility

When choosing colors, always consider accessibility and readability:

Contrast Ratios

WCAG (Web Content Accessibility Guidelines) requires minimum contrast ratios:

Normal text: 4.5:1 minimum
Large text: 3:1 minimum
UI components: 3:1 minimum

Color Contrast Examples

Tool Recommendation: Use online contrast checkers like WebAIM's Contrast Checker or browser DevTools to verify your color combinations meet accessibility standards.

Key Takeaways

CSS supports multiple color formats: named, hex, RGB, HSL
Named colors are simple but limited (147 colors)
Hex (#RRGGBB) is the most popular format, compact and widely supported
RGB/RGBA uses 0-255 values with optional transparency
HSL/HSLA is most intuitive for creating color variations
Alpha channel (0-1) controls transparency in RGBA and HSLA
HSL components: Hue (0-360°), Saturation (0-100%), Lightness (0-100%)
currentColor keyword inherits the text color
Always check color contrast for accessibility (4.5:1 minimum)
Choose format based on use case and maintainability
Use transparency for overlays, shadows, and modern effects

What's Next?

Now that you understand how to specify colors in CSS, you're ready to learn about Backgrounds and Gradients. In the next lesson, we'll explore how to use colors with background properties, create beautiful gradients, work with background images, and layer multiple backgrounds for stunning visual effects.

Colors are fundamental to web design—they set mood, create visual hierarchy, and enhance usability. Practice using different color formats and always keep accessibility in mind. Great color choices can make or break a design!

Color in CSS

CSS allows you to specify colors in several different formats. The same color can be represented in multiple ways, and you can choose the format that works best for your needs.

For example, all of these represent the same shade of blue:

same-color-different-formats.css

/* All of these are the same blue color */
.element {
  color: blue;                    /* Named color */
  color: #0000FF;                 /* Hex (6-digit) */
  color: #00F;                    /* Hex (3-digit) */
  color: rgb(0, 0, 255);          /* RGB */
  color: rgba(0, 0, 255, 1);      /* RGBA */
  color: hsl(240, 100%, 50%);     /* HSL */
  color: hsla(240, 100%, 50%, 1); /* HSLA */
}

Blue

Hex:#0000FF

RGB:rgb(0, 0, 255)

HSL:hsl(240, 100%, 50%)

Named Colors

CSS includes 147 predefined color names that you can use directly. These are easy to remember and read, making them great for quick prototyping or teaching.

named-colors.css

/* Named colors are simple to use */
h1 {
  color: crimson;
}

p {
  color: darkslateblue;
}

.highlight {
  background-color: gold;
}

a {
  color: dodgerblue;
}

.warning {
  color: orangered;
}

Popular Named Colors

Common Named Colors

Red

#FF0000

Blue

#0000FF

Green

#008000

Yellow

#FFFF00

Purple

#800080

Orange

#FFA500

Pink

#FFC0CB

Cyan

#00FFFF

Magenta

#FF00FF

Lime

#00FF00

Navy

#000080

Teal

#008080

Maroon

#800000

Olive

#808000

Coral

#FF7F50

Crimson

#DC143C

Gold

#FFD700

Indigo

#4B0082

Tomato

#FF6347

SlateBlue

#6A5ACD

Special Named Colors

Special Colors

Transparent

#00000000

Black

#000000

White

#FFFFFF

Gray

#808080

Silver

#C0C0C0

Named Colors in Action

Hexadecimal Colors (Hex)

Hexadecimal (hex) color codes are the most common way to specify colors in CSS. They start with a hash symbol (#) followed by six characters representing red, green, and blue values.

How Hex Colors Work

A hex color is formatted as #RRGGBB where:

RR = Red component (00 to FF)
GG = Green component (00 to FF)
BB = Blue component (00 to FF)

Breaking Down a Hex Color

#FFA500

Red: FF
255 (maximum)

Green: A5
165 (medium)

Blue: 00
0 (none)

Result: Orange (#FFA500)

hex-colors.css

/* 6-digit hex colors */
.element {
  color: #FF0000;        /* Pure red */
  color: #00FF00;        /* Pure green */
  color: #0000FF;        /* Pure blue */
  color: #FFFFFF;        /* White */
  color: #000000;        /* Black */
  color: #808080;        /* Gray */
  color: #FF6B6B;        /* Light red */
  color: #4ECDC4;        /* Turquoise */
  color: #FFD93D;        /* Yellow */
}

3-Digit Shorthand Hex

When both digits in each pair are the same, you can use a 3-digit shorthand:

hex-shorthand.css

/* These pairs are equivalent */
#FF0000 = #F00    /* Red */
#00FF00 = #0F0    /* Green */
#0000FF = #00F    /* Blue */
#FFFFFF = #FFF    /* White */
#000000 = #000    /* Black */
#336699 = #369    /* Blue-gray */

/* But #123456 CANNOT be shortened */
/* Because digits don't repeat: 1≠2, 3≠4, 5≠6 */

8-Digit Hex with Transparency (Alpha)

Modern CSS supports an 8-digit hex format that includes transparency:

hex-alpha.css

/* Format: #RRGGBBAA (AA = alpha/transparency) */
.element {
  color: #FF0000FF;   /* Fully opaque red (FF = 100%) */
  color: #FF000080;   /* 50% transparent red (80 = 50%) */
  color: #00FF0040;   /* 25% transparent green (40 = 25%) */
  color: #0000FF00;   /* Fully transparent blue (00 = 0%) */
}

/* Shorthand also works with alpha */
#F00F = #FF0000FF   /* Opaque red */
#F008 = #FF000088   /* Semi-transparent red */

Popular Hex Colors

Red

#E74C3C

Orange

#E67E22

Yellow

#F39C12

Green

#27AE60

Teal

#16A085

Blue

#3498DB

Purple

#9B59B6

Pink

#E91E63

Gray Dark

#2C3E50

Gray

#7F8C8D

Gray Light

#BDC3C7

Gray Lighter

#ECF0F1

🎨 Pro Tip:

Use a color picker tool (built into most code editors and browsers) to visually select colors and get their hex codes. Most designers prefer hex codes because they're compact and widely supported.

RGB Colors

RGB stands for Red, Green, Blue. This format uses decimal values (0-255) for each color channel, making it more human-readable than hex codes.

RGB Syntax

rgb-syntax.css

/* Syntax: rgb(red, green, blue) */
/* Each value ranges from 0 to 255 */

.element {
  color: rgb(255, 0, 0);      /* Pure red */
  color: rgb(0, 255, 0);      /* Pure green */
  color: rgb(0, 0, 255);      /* Pure blue */
  color: rgb(255, 255, 255);  /* White */
  color: rgb(0, 0, 0);        /* Black */
  color: rgb(128, 128, 128);  /* Gray (50%) */
  color: rgb(255, 165, 0);    /* Orange */
}

Understanding RGB Values

rgb(255, 0, 0)

Red: Maximum
Green: None
Blue: None

rgb(255, 255, 0)

Red: Maximum
Green: Maximum
Blue: None = Yellow

rgb(128, 128, 128)

Red: 50%
Green: 50%
Blue: 50% = Gray

When to Use RGB

Dynamic colors: When calculating colors with JavaScript
Readability: Easier to understand than hex for some people
Manipulation: Easier to lighten/darken by adjusting values

RGB Color Examples

RGBA Colors (RGB with Alpha)

RGBA is RGB with an additional alpha channel for transparency. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque).

rgba-syntax.css

/* Syntax: rgba(red, green, blue, alpha) */
/* Alpha: 0 = transparent, 1 = opaque, 0.5 = 50% transparent */

.element {
  color: rgba(255, 0, 0, 1);      /* Fully opaque red */
  color: rgba(255, 0, 0, 0.5);    /* 50% transparent red */
  color: rgba(255, 0, 0, 0.25);   /* 25% transparent red */
  color: rgba(255, 0, 0, 0);      /* Fully transparent red */
  
  /* Useful for overlays */
  background: rgba(0, 0, 0, 0.7); /* Dark overlay */
  background: rgba(255, 255, 255, 0.9); /* Light overlay */
}

RGBA Transparency Examples

Common RGBA Use Cases

Overlays: Dark or light overlays on images/videos
Shadows: Semi-transparent shadows for depth
Glassmorphism: Translucent UI elements
Hover effects: Subtle transparency changes

RGBA Practical Use Cases

HSL Colors

HSL stands for Hue, Saturation, and Lightness. This format is often more intuitive than RGB because it matches how humans naturally think about color.

Understanding HSL Components

Hue (0-360)

Position on the color wheel in degrees:

0° = Red
120° = Green
240° = Blue
360° = Red (full circle)

Saturation (0-100%)

Color intensity:

0% = Gray (no color)
50% = Moderate
100% = Vivid (full color)

Lightness (0-100%)

Brightness level:

0% = Black
50% = Normal
100% = White

hsl-syntax.css

/* Syntax: hsl(hue, saturation, lightness) */

.element {
  color: hsl(0, 100%, 50%);     /* Red */
  color: hsl(120, 100%, 50%);   /* Green */
  color: hsl(240, 100%, 50%);   /* Blue */
  color: hsl(0, 0%, 100%);      /* White */
  color: hsl(0, 0%, 0%);        /* Black */
  color: hsl(0, 0%, 50%);       /* Gray */
  color: hsl(39, 100%, 50%);    /* Orange */
}

Hue Wheel Demonstration

HSL Hue Wheel (0-360°)

Saturation Demonstration

HSL Saturation (0-100%)

Lightness Demonstration

HSL Lightness (0-100%)

Why Use HSL?

Intuitive: Easier to create color variations
Color schemes: Simple to create complementary colors
Consistency: Keep same hue, adjust lightness/saturation
Dynamic theming: Easy to programmatically adjust

hsl-variations.css

/* Easy to create color variations with HSL */

/* Base color */
.primary {
  background: hsl(210, 100%, 50%); /* Blue */
}

/* Lighter version - just increase lightness */
.primary-light {
  background: hsl(210, 100%, 70%);
}

/* Darker version - decrease lightness */
.primary-dark {
  background: hsl(210, 100%, 30%);
}

/* Muted version - decrease saturation */
.primary-muted {
  background: hsl(210, 50%, 50%);
}

/* Complementary color - add 180° to hue */
.complementary {
  background: hsl(30, 100%, 50%); /* Orange (210 - 180 = 30) */
}

Creating Color Variations with HSL

HSLA Colors (HSL with Alpha)

HSLA adds transparency to HSL colors, just like RGBA does for RGB:

hsla-syntax.css

/* Syntax: hsla(hue, saturation, lightness, alpha) */

.element {
  color: hsla(0, 100%, 50%, 1);     /* Fully opaque red */
  color: hsla(0, 100%, 50%, 0.5);   /* 50% transparent red */
  color: hsla(120, 100%, 50%, 0.3); /* 30% transparent green */
  color: hsla(240, 100%, 50%, 0);   /* Fully transparent blue */
}

HSLA with Transparency

The currentColor Keyword

currentColor is a special keyword that references the current value of the color property. It's incredibly useful for creating cohesive designs.

currentcolor.css

/* currentColor inherits the text color */
.element {
  color: red;
  border: 2px solid currentColor; /* Border will be red */
  box-shadow: 0 0 10px currentColor; /* Shadow will be red */
}

/* Useful for icons that match text color */
.icon {
  color: blue;
}

.icon svg {
  fill: currentColor; /* SVG will be blue */
}

/* Changes with hover */
.button:hover {
  color: green;
  border-color: currentColor; /* Border becomes green */
}

currentColor Keyword Example

Choosing the Right Color Format

When to Use Each Format

Property	Values	Description
`Named Colors`	`crimson, dodgerblue`	Quick prototyping, simple colors. Limited selection.
`Hex (#RRGGBB)`	`#3498db, #e74c3c`	Most popular. Compact, widely supported, design tools standard.
`RGB/RGBA`	`rgb(52, 152, 219)`	Good for JavaScript manipulation, transparency needs.
`HSL/HSLA`	`hsl(204, 70%, 53%)`	Most intuitive for creating variations, color schemes.
`currentColor`	`Keyword`	Inherits text color. Great for consistent theming.

💡 Best Practice:

Color Accessibility

When choosing colors, always consider accessibility and readability:

Contrast Ratios

WCAG (Web Content Accessibility Guidelines) requires minimum contrast ratios:

Normal text: 4.5:1 minimum
Large text: 3:1 minimum
UI components: 3:1 minimum

Color Contrast Examples

Tool Recommendation: Use online contrast checkers like WebAIM's Contrast Checker or browser DevTools to verify your color combinations meet accessibility standards.

Key Takeaways

CSS supports multiple color formats: named, hex, RGB, HSL
Named colors are simple but limited (147 colors)
Hex (#RRGGBB) is the most popular format, compact and widely supported
RGB/RGBA uses 0-255 values with optional transparency
HSL/HSLA is most intuitive for creating color variations
Alpha channel (0-1) controls transparency in RGBA and HSLA
HSL components: Hue (0-360°), Saturation (0-100%), Lightness (0-100%)
currentColor keyword inherits the text color
Always check color contrast for accessibility (4.5:1 minimum)
Choose format based on use case and maintainability
Use transparency for overlays, shadows, and modern effects

Color Values

Color in CSS

Named Colors

Popular Named Colors

Common Named Colors

Special Named Colors

Special Colors

Named Colors in Action

Hexadecimal Colors (Hex)

How Hex Colors Work

Breaking Down a Hex Color

3-Digit Shorthand Hex

8-Digit Hex with Transparency (Alpha)

Popular Hex Colors

RGB Colors

RGB Syntax

Understanding RGB Values

When to Use RGB

RGB Color Examples

RGBA Colors (RGB with Alpha)

RGBA Transparency Examples

Common RGBA Use Cases

RGBA Practical Use Cases

HSL Colors

Understanding HSL Components

Hue (0-360)

Saturation (0-100%)

Lightness (0-100%)

Hue Wheel Demonstration

HSL Hue Wheel (0-360°)

Saturation Demonstration

HSL Saturation (0-100%)

Lightness Demonstration

HSL Lightness (0-100%)

Why Use HSL?

Creating Color Variations with HSL

HSLA Colors (HSL with Alpha)

HSLA with Transparency

The currentColor Keyword

currentColor Keyword Example

Choosing the Right Color Format

When to Use Each Format

Color Accessibility

Contrast Ratios

Color Contrast Examples

Key Takeaways

What's Next?

Know someone who'd find this guide helpful? Please share!

Never Miss a New CSS Tutorial

You might also like

UI Components

Developer Tools

HTML Game

Join Our Web Development Training Program

Join Our Social Communities

CSS Tutorials

Color Values

Color in CSS

Named Colors

Popular Named Colors

Common Named Colors

Special Named Colors

Special Colors

Named Colors in Action

Hexadecimal Colors (Hex)

How Hex Colors Work

Breaking Down a Hex Color

3-Digit Shorthand Hex

8-Digit Hex with Transparency (Alpha)

Popular Hex Colors

RGB Colors

RGB Syntax

Understanding RGB Values

When to Use RGB

RGB Color Examples

RGBA Colors (RGB with Alpha)

RGBA Transparency Examples

Common RGBA Use Cases

RGBA Practical Use Cases

HSL Colors