#1CSS color formats: what I actually use and why

What we tested: We evaluated color contrast ratios, format conversions, and visual rendering across Chrome, Firefox, and Safari. All calculations use the same formulas as the browser rendering engine.

In day-to-day UI work, the main decision is not “which color format is newest?” It is “which format makes the design easiest to maintain and the palette easiest to reason about?”

This is the point where you stop choosing colors by eye and start managing them as part of a design system.

#2The formats at a glance

/* All represent the same #3B82F6 blue */
color: #3b82f6;                           /* HEX */
color: rgb(59, 130, 246);                 /* RGB */
color: rgba(59, 130, 246, 0.5);          /* RGBA, with 50% opacity */
color: hsl(217deg 91% 60%);              /* HSL */
color: hsla(217deg 91% 60% / 0.5);      /* HSLA, with opacity */
color: oklch(0.624 0.196 259.8);         /* OKLCH, perceptual */
color: oklch(0.624 0.196 259.8 / 0.5);  /* OKLCH with opacity */

Browser support in 2026:

• HEX, RGB, HSL: Universal, all browsers, all versions
• OKLCH: Chrome 111+, Firefox 113+, Safari 15.4+, 97%+ global coverage

#2HEX. The Default

/* Full 6-digit */
color: #3b82f6;

/* Shorthand, only when each pair repeats */
color: #fff;  /* same as #ffffff */
color: #000;  /* same as #000000 */
color: #09f;  /* same as #0099ff */

/* 8-digit HEX, with alpha (last 2 digits) */
color: #3b82f680;  /* 50% opacity, the last "80" is hex for 128/255 */

When to use: Copying colors from design tools (Figma exports HEX), hardcoded brand colors, anywhere you need to share a color as a string (email templates, Slack messages).

Limitation: You cannot mathematically manipulate HEX intuitively. Darkening #3b82f6 by 10% requires converting to another format first.

#2RGB, Explicit Channel Values

color: rgb(59 130 246);          /* Modern syntax, space-separated */
color: rgb(59, 130, 246);        /* Legacy syntax, comma-separated */
color: rgb(59 130 246 / 50%);    /* With opacity, modern syntax */
color: rgba(59, 130, 246, 0.5);  /* With opacity, legacy */

When to use: When you need to control individual channels in JavaScript:

// Dynamic color manipulation in JS
function tint(r, g, b, amount) {
  return `rgb(${Math.min(255, r + amount)} ${Math.min(255, g + amount)} ${Math.min(255, b + amount)})`;
}

tint(59, 130, 246, 40); // lighter blue

Limitation: RGB is not perceptually uniform. Adding 50 to each channel does not produce a color that looks 50 units brighter to a human eye. You need HSL or OKLCH for intuitive manipulation.

#2HSL, Human-Readable Color Thinking

HSL separates color into three human-intuitive components:

• Hue, the color wheel position (0–360 degrees)
• Saturation, how vivid vs. grey (0%–100%)
• Lightness, how light vs. dark (0% = black, 100% = white)

/* Blue at full saturation, medium lightness */
color: hsl(217deg 91% 60%);

/* Tints (lighter), increase L */
color: hsl(217deg 91% 70%);   /* lighter */
color: hsl(217deg 91% 80%);   /* lightest */

/* Shades (darker), decrease L */
color: hsl(217deg 91% 50%);   /* darker */
color: hsl(217deg 91% 40%);   /* darkest */

/* Desaturated (more grey) */
color: hsl(217deg 50% 60%);

/* With opacity */
color: hsl(217deg 91% 60% / 0.5);

When to use: Building tint/shade scales in CSS custom properties:

:root {
  --color-blue-h: 217deg;
  --color-blue-s: 91%;
  
  --color-blue-100: hsl(var(--color-blue-h) var(--color-blue-s) 90%);
  --color-blue-200: hsl(var(--color-blue-h) var(--color-blue-s) 80%);
  --color-blue-300: hsl(var(--color-blue-h) var(--color-blue-s) 70%);
  --color-blue-400: hsl(var(--color-blue-h) var(--color-blue-s) 60%);
  --color-blue-500: hsl(var(--color-blue-h) var(--color-blue-s) 50%);
  --color-blue-600: hsl(var(--color-blue-h) var(--color-blue-s) 40%);
  --color-blue-700: hsl(var(--color-blue-h) var(--color-blue-s) 30%);
  --color-blue-800: hsl(var(--color-blue-h) var(--color-blue-s) 20%);
  --color-blue-900: hsl(var(--color-blue-h) var(--color-blue-s) 10%);
}

Limitation: HSL is not perceptually uniform. A yellow at 50% lightness looks much brighter than a blue at 50% lightness. This causes problems with contrast ratios and accessible color palettes.

#2OKLCH. The 2026 Standard for Design Systems

OKLCH is part of CSS Color Level 4. It works in a perceptually uniform color space, meaning:

• Equal changes in lightness produce equally noticeable changes to the human eye
• Gradients between two hues stay vibrant, they do not desaturate through grey in the middle
• You can reliably generate accessible color palettes by adjusting lightness only

/* oklch(lightness chroma hue) */
color: oklch(0.624 0.196 259.8);

/* Lightness: 0 = black, 1 = white */
/* Chroma: 0 = grey, 0.4 = maximum vibrant */
/* Hue: 0–360 degrees (different wheel than HSL) */

/* Generating a perceptually consistent scale */
--blue-100: oklch(0.95 0.05 259.8);   /* very light */
--blue-300: oklch(0.80 0.12 259.8);
--blue-500: oklch(0.624 0.196 259.8); /* base */
--blue-700: oklch(0.45 0.18 259.8);
--blue-900: oklch(0.25 0.10 259.8);   /* very dark */

The key difference from HSL: Each step in lightness looks proportionally similar because it maps to how human vision actually works (based on the CIECAM02 color appearance model).

#2Generating OKLCH Palettes

#3In CSS (custom property cascade)

:root {
  /* Base brand color */
  --brand-hue: 259.8;
  --brand-chroma: 0.196;
  
  /* Automatic scale */
  --brand-50:  oklch(0.97 0.03 var(--brand-hue));
  --brand-100: oklch(0.94 0.06 var(--brand-hue));
  --brand-200: oklch(0.88 0.10 var(--brand-hue));
  --brand-300: oklch(0.80 0.14 var(--brand-hue));
  --brand-400: oklch(0.72 0.17 var(--brand-hue));
  --brand-500: oklch(0.624 var(--brand-chroma) var(--brand-hue));
  --brand-600: oklch(0.54 0.18 var(--brand-hue));
  --brand-700: oklch(0.44 0.17 var(--brand-hue));
  --brand-800: oklch(0.34 0.14 var(--brand-hue));
  --brand-900: oklch(0.24 0.10 var(--brand-hue));
}

#3Converting HEX to OKLCH (for existing brand colors)

// Using the culori library
import { parse, formatOklch, convert } from 'culori';

const hex = '#3b82f6';
const rgb = parse(hex);
const oklch = convert('oklch')(rgb);

console.log(formatOklch(oklch));
// oklch(62.4% 0.196 259.8)

Or use the AllDevToolsHub Color Converter to paste any HEX and see the OKLCH equivalent instantly.

#2When to Use Each Format

#2Common Mistakes

• Using HSL for accessibility work. HSL's lightness does not map to perceived brightness. Two colors with the same HSL lightness can have wildly different contrast ratios. Use OKLCH lightness for accessible palettes, then verify with a WCAG contrast checker.
• Forgetting that OKLCH hue degrees do not match HSL. A hue of 260 in OKLCH is roughly blue-purple, similar to HSL. But the scales are different, a color's HSL hue and OKLCH hue will not be the same number. Use a converter when translating between the two.
• Relying on rgba() with HEX for opacity. #3b82f680 is harder to read than oklch(0.624 0.196 259.8 / 50%). Use the slash syntax for opacity across all modern formats.
• Using OKLCH without a fallback for older browsers. Despite 97% global coverage, some enterprise environments run older browsers. Use @supports:

color: hsl(217deg 91% 60%);    /* fallback */
@supports (color: oklch(0 0 0)) {
  color: oklch(0.624 0.196 259.8);
}

#2Try It In Your Browser

The AllDevToolsHub Color Converter converts between HEX, RGB, HSL, and OKLCH in both directions, paste any color format and see all the equivalents instantly, with a visual swatch to confirm the color looks right.

#2Frequently Asked Questions

#3Is OKLCH ready to use in production in 2026?

Yes. Browser support is 97%+ globally (Chrome 111+, Firefox 113+, Safari 15.4+). For the remaining ~3%, provide a HEX or HSL fallback using @supports. Most design systems (Tailwind CSS 4, Radix UI Primitives) have adopted OKLCH internally.

#3Why do OKLCH gradients look better than HSL gradients?

HSL gradients between distant hues pass through grey in the middle, the "muddy gradient" problem. OKLCH gradients stay vibrant because they travel through the perceptually uniform color space, which more closely matches how human vision perceives color transitions.

#3How do I convert my existing HSL palette to OKLCH?

Use the Color Converter or the culori npm library. Convert each color individually, then compare the OKLCH lightness values, they will likely be more consistent than your HSL lightness values appeared.

#3What is the chroma value in OKLCH?

Chroma is the vividness or colorfulness. 0 is grey (no chroma). 0.4 is the approximate maximum for sRGB colors (colors your monitor can display). Colors at chroma: 0.3+ are highly saturated. Most "normal" colors sit between 0.05 and 0.25.

#3Should I convert all my CSS to OKLCH today?

Not necessarily, a progressive approach is better. Use OKLCH for new design tokens and color scales. Keep existing specific color values as HEX. The goal is not a rewrite, it is adopting OKLCH where its perceptual uniformity provides real benefit (gradient design, palette generation, accessibility work).

Written by Rahul Jalavadiya, founder of AllDevToolsHub. All tools run locally in your browser.

#2Sources / Further reading

• W3C - CSS Color Module Level 4
• MDN Web Docs - oklch() color function
• Lea Verou - OKLCH in CSS
• W3C - CSS Color HDR Module

#2Try These Tools

• Color Picker
• Color Contrast