Color Picker

OKLCH: Lightness, chroma and hue in a perceptually uniform space. Two colours with the same L look equally bright no matter their hue, which is why Tailwind v4, shadcn/ui and most current design systems author their palettes here. Supported in every major browser since 2023.

OKLab: The rectangular form of OKLCH. This is the space CSS color-mix() and gradients interpolate through by default.

Lab and LCH: The older CIE spaces, still perceptual but less even across the blues. CSS defines both against the D50 white point, which is what this tool uses.

Display P3: A wide gamut roughly 25% larger than sRGB, covering most current laptop and phone screens. Written as color(display-p3 r g b).

HWB: Hue plus whiteness and blackness. A CSS Color 4 notation that maps closely to how people describe tints and shades.

HEX: Hexadecimal, in 3, 4, 6 or 8 digits. The 4 and 8 digit forms carry an alpha channel.

RGB: Red, green and blue from 0 to 255. Both the modern space separated syntax, rgb(59 130 246 / 50%), and the legacy comma form are produced.

HSL and HSV: Hue with saturation and either lightness or value. Convenient to reason about, but their lightness is an arithmetic mean rather than a perceptual one, so rotating hue changes apparent brightness.

CMYK: A device independent approximation for print. Real print work needs an ICC profile, so treat these numbers as a starting point.

WCAG 2.2: A ratio from 1:1 to 21:1. Normal body text needs 4.5:1 for AA and 7:1 for AAA. Text at 18pt, or 14pt bold and larger, along with UI components and graphics, needs 3:1 for AA.

APCA: The lightness contrast (Lc) metric from the WCAG 3 draft. It accounts for polarity, so dark text on a light background scores differently from the reverse, something the WCAG 2 ratio cannot express. Positive values mean dark text on a light background.

Translucent colours are composited over the backdrop before measuring, because contrast depends on what is actually rendered rather than on the unblended value.

• Paste any CSS colour, named colours included, and convert to every format
• Alpha channel throughout, with a checkerboard preview
• Eyedropper to sample any pixel on screen (Chromium browsers)
• Perceptual 50 to 950 tonal scale, ready to drop into a design system
• WCAG and APCA contrast checking against white, black or any other colour
• Colour blindness simulation across the whole ramp
• Export to CSS variables, Tailwind v3 and v4, SCSS, JSON or SVG
• Shareable links that carry the colour in the URL