Color Spaces & Models (RGB, HSL, OKLCH, Hex)

A Color Space is a specific mathematical organization and geometric coordinate system that defines how colors are created, represented, and reproduced across physical display hardware and software interfaces. In digital web development, color representation has evolved from traditional 24-bit sRGB color models (such as Hexadecimal #0284c7 and RGB rgb(2, 132, 199)) to perceptual spaces like HSL and modern wide-gamut, perceptually uniform color spaces like OKLCH and Display P3 supported in modern CSS Color Module Level 4.

Convert seamlessly between Hex, RGB, HSL, HSV, CMYK, and OKLCH using our interactive Color Converter tool.

---

Technical Specifications at a Glance

Color Model	Channels & Syntax	Coordinate Range	Primary Use Case
Hexadecimal (Hex)	#RRGGBB or #RRGGBBAA	00 to FF (Base-16)	Standard CSS styling, design tokens
RGB / RGBA	rgb(R, G, B)	0 to 255 (8-bit per channel)	Web graphics, canvas pixel manipulation
HSL / HSLA	hsl(H, S%, L%)	0-360° (Hue), 0-100% (Sat/Light)	UI palettes, intuitive brightness tweaking
OKLCH	oklch(L, C, H)	Lightness 0-1, Chroma 0-0.4, Hue 0-360°	CSS Color 4, wide-gamut displays, perceptual uniformity
CMYK	cmyk(C%, M%, Y%, K%)	0% to 100%	Subtractive physical printing

---

Evolution of Web Color Systems

1996 (CSS 1)         2011 (CSS 3)         2023+ (CSS Color 4)
┌──────────────┐    ┌──────────────┐    ┌───────────────────────────┐
│ Hex & RGB    │ ─> │ HSL          │ ─> │ OKLCH & Display P3        │
│ sRGB Gamut   │    │ Intuitive UI │    │ Perceptually Uniform Wide │
│ #3b82f6      │    │ hsl(217,91%) │    │ Gamut (Vibrant Neons)     │
└──────────────┘    └──────────────┘    └───────────────────────────┘

Why HSL Has a Fundamental Flaw

In HSL, setting Lightness to 50% across different hues produces drastically different human perceived brightness. For example:

• Yellow (hsl(60, 100%, 50%)) looks blindingly bright to the human eye.
• Blue (hsl(240, 100%, 50%)) looks dark and shadowy.

This makes generating accessible UI color palettes with consistent WCAG contrast ratios in HSL very difficult.

Why Modern CSS Adopts OKLCH

OKLCH (Lightness, Chroma, Hue in the Oklab color space) is perceptually uniform:

• An OKLCH Lightness of 0.7 has the exact same perceived human brightness whether the hue is yellow, green, cyan, or blue.
• OKLCH accesses the full Display P3 wide color gamut on modern iPhones, iPads, and MacBooks, unlocking up to 30% more vibrant colors that traditional sRGB Hex cannot express.

---

Code Example: Modern CSS Color Declarations

/* Traditional 24-bit sRGB */
.legacy-brand {
  color: #0284c7;
  background-color: rgb(2, 132, 199);
}

/* Intuitive HSL with alpha channel */
.accent-badge {
  background-color: hsl(200deg 98% 39% / 0.15);
}

/* Modern Wide-Gamut OKLCH (CSS Color Level 4) */
.vibrant-banner {
  /* Ultra-vibrant P3 color unavailable in classic Hex */
  background-color: oklch(0.62 0.22 245);
  
  /* Fallback for older legacy browsers */
  @supports not (color: oklch(0 0 0)) {
    background-color: #0284c7;
  }
}

---

Frequently Asked Questions

What does the 8-digit Hex code #0284c780 mean?

An 8-character hexadecimal code appends a fourth 2-digit byte representing the Alpha (opacity) channel. In #0284c780, the trailing 80 in hexadecimal equals 128 in decimal, which is $128 / 255 \approx 50%$ transparency.

How does RGB differ from CMYK?

RGB is an additive color model used for luminous electronic screens where combining red, green, and blue light creates pure white (rgb(255, 255, 255)). CMYK is a subtractive color model used for physical ink printing where cyan, magenta, and yellow pigments absorb light, and combining them creates black.

How can I convert a Hex color to HSL or RGB?

Paste any color value into our free Color Converter Tool to view real-time conversions, CSS snippets, and contrast analysis.