dev.rean.me
css

CSS Colors Explained: Short & Clear Guide with Examples (HEX, RGB, HSL, OKLCH, Gradients), Tips & Related Posts

Master CSS colors fast with short, clear visual examples. Learn HEX, RGB, HSL, modern OKLCH color spaces, linear gradients, accessibility contrast tips, and related posts opening in a new tab.

2026-10-02 · 6 min read

#css#colors#css-colors#hsl#oklch#frontend#web-development
Share:

Color is one of the most vital aesthetic elements in web design. CSS offers multiple ways to define colors—from traditional named colors and HEX codes to flexible HSL values and modern perceptual color spaces like OKLCH.

Here is a short, clear, and visual guide to CSS colors and gradients. 🚀

💡 Core Concept: Color Formats in CSS

In modern CSS, you can specify colors using several syntax formats:

  1. Named Colors: Built-in keywords (red, blue, tomato, transparent).
  2. HEX: Hexadecimal notation based on RGB values (#3b82f6).
  3. RGB / RGBA: Red, Green, Blue intensity (0–255) with optional alpha transparency (rgb(59 130 246 / 80%)).
  4. HSL / HSLA: Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Intuitive for humans!
  5. OKLCH: Perceptually uniform color space designed for modern wide-gamut displays (oklch(0.62 0.21 259)).

⚡ Quick Cheatsheet

Color FormatExample SyntaxAlpha (Transparency) SupportPrimary Use Case
Namedcolor: dodgerblue;No (except transparent)Quick debugging / rapid prototyping
HEXcolor: #3b82f6;#3b82f680 (last 2 digits)Production design systems & Figma exports
RGBrgb(59 130 246)rgb(59 130 246 / 0.5)UI components requiring opacity control
HSLhsl(217 91% 60%)hsl(217 91% 60% / 0.5)Dynamic theme generators & color variations
OKLCHoklch(0.62 0.21 259)oklch(0.62 0.21 259 / 80%)Modern, vibrant wide-gamut web apps

📦 Essential Code Examples

1. Same Blue Color in 4 Formats

Notice how each format specifies the exact same vibrant blue hue:

.card-hex   { background-color: #3b82f6; }
.card-rgb   { background-color: rgb(59, 130, 246); }
.card-hsl   { background-color: hsl(217, 91%, 60%); }
.card-oklch { background-color: oklch(0.62 0.21 259); }

⚡ Live Result Preview:

Visual Comparison (All rendering the same blue)
HEX (#3b82f6)
RGB (59,130,246)
HSL (217,91%,60%)
OKLCH (0.62...)

2. Alpha Transparency (Slash Syntax)

Modern CSS allows setting transparency by adding / alpha inside rgb(), hsl(), or oklch():

.card-overlay {
  /* 50% transparent blue background */
  background-color: rgb(59 130 246 / 50%);
  /* Equivalent in HSL */
  background-color: hsl(217 91% 60% / 0.5);
}

3. Modern CSS Gradients

  • Linear Gradient: Smooth transition along a straight line angle (135deg).
  • Radial Gradient: Smooth transition expanding outward from a central point.
/* Linear Gradient */
.hero-gradient {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
}

/* Text Gradient Effect */
.gradient-text {
  background: linear-gradient(135deg, #38bdf8, #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

⚡ Live Result Preview:

Linear Gradient Box & Text Gradient
Linear Gradient (#3b82f6 to #8b5cf6 to #ec4899)
✨ Gradient Text Effect with CSS

4. Theme Palettes with CSS Variables

Organize your colors inside :root variables to create instant dark/light themes!

:root {
  --primary-color: #2563eb;
  --surface-bg: #ffffff;
  --text-main: #0f172a;
}

[data-theme="dark"] {
  --primary-color: #3b82f6;
  --surface-bg: #0f172a;
  --text-main: #f8fafc;
}

.button {
  background-color: var(--primary-color);
}

🎯 5 Essential CSS Color Pro Tips

Tip 1: Use currentColor for SVG Icons & Borders

currentColor is a built-in keyword that references the element's active text color. If you change the hover text color, your icon or border updates automatically!

.btn {
  color: #2563eb;
  border: 2px solid currentColor; /* Automatically #2563eb */
}

.btn:hover {
  color: #1d4ed8; /* Border automatically updates to #1d4ed8! */
}

Tip 2: Always Check WCAG Color Contrast Ratios

Ensure text contrast meets WCAG 2.1 AA standards:

  • Normal text requires a minimum contrast ratio of 4.5:1.
  • Large headings (24px+) require a minimum contrast ratio of 3:1.
  • Avoid light gray text (#94a3b8) on white backgrounds!

Tip 3: Why HSL is Superior for UI Designers

HSL makes creating hover states effortless. Want a darker hover state for a button? Just decrease the Lightness (L) percentage by 10%!

.btn {
  background-color: hsl(217, 91%, 60%); /* Normal */
}

.btn:hover {
  background-color: hsl(217, 91%, 50%); /* 10% darker on hover */
}

Tip 4: Glassmorphism Effect with Semi-Transparent Alpha

Combine rgba() / hsl() background transparency with backdrop-filter: blur() to create modern frosted glass UI cards:

.glass-card {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

Tip 5: Use oklch() for Consistent Perceptual Brightness

Unlike HSL (where yellow at 50% lightness looks blindingly bright while blue at 50% lightness looks dark), oklch() keeps visual brightness consistent across all hues!

🌐 Related Posts & Useful Resources

Explore these official color specifications, contrast checkers, and related CSS guides on our platform. All external and internal reference links open in a new tab.

📚 Official Color Specs & Contrast Tools (New Tab)

Happy color designing! If you found this short & clear CSS Colors guide helpful, feel free to share it with fellow developers! 🎨⚡

← Back to css
Share: