⌘ K
css colors · 14 forms · cheatsheet · live filter

Every CSS color format in one view

HEX, RGB, HSL, HWB, OKLCH, LCH, LAB, color(), named, currentColor — examples, notes and live swatches.

Color Format Cheatsheet
Forms
14
css color
Visible
14
all
Filter
—
query
Status
ready
live
input · color
HEX
#3b82f6
RGB
rgb(59, 130, 246)
RGBA (legacy)
rgba(59, 130, 246, 0.5)
HSL
hsl(217, 91%, 60%)
HSLA
hsla(217, 91%, 60%, 0.5)
HWB
hwb(217 23% 4%)
OKLCH
oklch(62% 0.2 254)
OKLAB
oklab(62% -0.05 -0.18)
LCH (CIE)
lch(60% 65 270)
LAB (CIE)
lab(60% -10 -55)
color()
color(display-p3 0.23 0.51 0.96)
Named
cornflowerblue
currentColor
currentColor
transparent
transparent
output · preview
Most common. #RGB / #RGBA / #RRGGBB / #RRGGBBAA all valid.
Modern syntax accepts space-separated and slash for alpha: rgb(59 130 246 / 0.5).
Comma syntax. Modern equivalent uses rgb() with slash.
Hue (0-360deg) / saturation% / lightness%. Intuitive for tweaks.
HSL with alpha. Comma syntax.
Hue + whiteness + blackness. Mirrors how painters mix.
Perceptually uniform. Best for modern design systems.
Cartesian version of OKLCH (a/b axes).
Older perceptual model, mostly superseded by OKLCH.
Cartesian CIE LAB. Less uniform than OKLAB.
Wide-gamut color spaces — display-p3, rec2020, srgb-linear, etc.
148 CSS named colors. Use only for examples / quick prototypes.
Inherits the parent's color value.
Shorthand for rgba(0,0,0,0).
Quick Start

How to use the format cheatsheet

Filter or scroll — click any row to copy the example value.

  1. 01

    Scan formats

    HEX, RGB, HSL, HWB, OKLCH, LCH, LAB, color(), named, plus keywords.

    Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.

    navOKLCHCSS Color 4perceptuallive
    rows · color14 · sRGB
    14 forms
    loaded · normalisedOKLCH · ready
  2. 02

    Filter syntax

    Type oklch or perceptual to jump to relevant rows.

    Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.

    searchhex · rgb · hslP3gamut-mappedlive
    q · optionsoklch · live
    OKLCH oklch(…)
    options applied · livelive
  3. 03

    Read notes

    Right column explains when to use each format.

    Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.

    readWCAG 2.2APCAAA · AAAcontrast
    notes · convertedready · ready
    use for tokens
    converted · liveWCAG-aware
  4. 04

    Copy example

    One click on any row copies the example syntax.

    Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.

    copyclipboardCSS varspalette JSONblob
    ok · copiedready · done
    ✓ Copied OKLCH
    shipped · ready to shipsuccess
Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Related toolsColor ConverterColor PickerHEX ↔ RGBHSL ConverterOKLCHColor Info
Use Cases

When to reach for the cheatsheet

Learning, code review, debugging unfamiliar syntax.

Learning CSS

One-page overview of every color form. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Code review

Confirm the right format for an unknown value. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Modern syntax

Remember the slash-alpha vs comma-alpha variants. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Design tokens

Decide which CSS form to use for your tokens. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Onboarding

Quick reference for new front-end engineers. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Wide-gamut intro

See color() and display-p3 examples in context. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

p3
FAQ

Frequently asked questions

OKLCH for tokens; HEX for legacy compatibility. Both are well-supported.
Wide-gamut output for modern iPhones, iPads, and 4K monitors.
It's a keyword inheriting the parent's color — useful in SVG and icons.
LAB is CIE 1976; OKLAB is the modern, more uniform perceptual variant.
No — the catalog is static and filtering is local.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!