Color Converter & Picker
Convert and pick colors in any format — hex, RGB, HSL, HSV or OKLCH, with gamut checking and wide-gamut output.
Eleven even lightness steps at hue 277.1°. Chroma is capped per step at what sRGB can reach there, so the ends taper instead of clipping to flat grey.
Hue rotated, lightness and chroma held. Because the lightness held is OKLCH lightness, every colour in the set looks equally light — which is not true of the same rotation in HSL.
Sample Text
Small text sample
- oklch.com — Interactive OKLCH color picker with gamut visualization and CSS output.
RGB (Red, Green, Blue) is the native color model for screens. Each channel ranges from 0–255, mixing additive light. White is 255,255,255; black is 0,0,0.
HSL (Hue, Saturation, Lightness) is more intuitive for humans — hue selects the color (0–360°), saturation controls intensity (0=grey, 100=vivid), and lightness goes from black (0) to white (100), with the pure color at 50.
HSV (Hue, Saturation, Value) is similar to HSL but Value controls brightness differently — at full value the color is its most vivid, not white. It's the model used by most visual color pickers, which is why it drives the square above.
Hex encodes RGB as three 2-digit hexadecimal pairs: #RRGGBB.
A fourth pair (#RRGGBBAA) adds the alpha channel. 3-digit shorthand
(#RGB) doubles each nibble.
OKLCH is a perceptually uniform color space introduced in CSS Color Level 4. L (lightness, 0–100%) and C (chroma, 0–0.4) behave consistently across hues — doubling L actually looks twice as bright, which isn't true in HSL. H is the same hue angle (0–360°).
Gamut is the set of colors a display can actually produce. OKLCH is not bounded by any display, so it can name colors no screen reproduces — and unlike hex or RGB, where every value is by definition showable, an OKLCH triple has to be checked. Type a chroma past what your hue and lightness allow and the badge above says so, naming the color it falls back to. The three states are: inside sRGB (safe everywhere); outside sRGB but inside Display P3, the wider gamut of most modern phone and laptop screens; and outside both, which nothing on sale today can show.
Maximum chroma varies enormously with lightness and hue, which is the part that surprises people coming from HSL, where 100% saturation is always available. At the lightness of pure blue (L 45.2), sRGB allows a chroma of 0.3134 at blue's own hue of 264° — but only 0.1089 at 120°, a green of exactly the same lightness. Push toward the ends and the ceiling collapses: at L 95, a near-white, that same blue hue allows just 0.0238, because there is no such thing as a vivid near-white. The two buttons on the OKLCH row find the ceiling for the current lightness and hue by binary search, in sRGB and in P3, giving you the most saturated version of a color that will still display correctly. The gap between the two is what wide gamut actually buys: at L 45.2 and hue 142°, sRGB stops at 0.1543 while P3 reaches 0.1819.
Tonal scales take one hue and step through lightness — the standard way to
build a design system's color ramp (a --blue-100 through --blue-900 set). Doing this in OKLCH rather than HSL is what makes the steps look evenly spaced instead
of bunching in the middle, and capping each step's chroma at that step's gamut ceiling keeps
the light end from flattening into grey.
Harmonies rotate the hue while holding lightness and chroma: complementary (opposite, +180°), analogous (neighboring, ±30°) and triadic (evenly spaced, +120° and +240°). Rotating at constant OKLCH lightness gives a set that reads as equally weighted; rotating at constant HSL lightness does not, because HSL calls a fully saturated yellow and a fully saturated blue both "50% light" when one is obviously far brighter.
WCAG contrast measures the luminance difference between two colors.
AA Normal requires a 4.5:1 ratio for body text; AA Large requires 3:1 for large text (18pt+
or 14pt bold). AAA is stricter: 7:1 and 4.5:1. Relative luminance converts sRGB to linear
light using the formula 0.2126·R + 0.7152·G + 0.0722·B.
How do I convert hex to RGB?
Split the hex code into three 2-digit pairs and convert each from hexadecimal to decimal. Example: #3b82f6 → R=0x3b=59, G=0x82=130, B=0xf6=246 → rgb(59, 130, 246). This tool converts automatically across all formats.
What is the difference between HSL and HSV?
Both use Hue and Saturation. HSL's Lightness goes from black (0%) through pure color (50%) to white (100%). HSV's Value goes from black (0%) to the most vivid version of the color (100%) — white is never reached by increasing Value alone. HSV is the model behind most visual color pickers.
What is OKLCH and why should I care?
OKLCH is a perceptually uniform color space available in CSS Color Level 4. Unlike HSL, equal steps in OKLCH Lightness look equally different to the human eye. It's ideal for generating accessible color palettes, tonal scales, and accessible contrast pairs.
Why does my OKLCH color say it is outside the sRGB gamut?
Because OKLCH can describe colors no display produces. Unlike hex or RGB — where every value you can write is by definition showable — an OKLCH lightness, chroma and hue combination may simply have no sRGB equivalent, and the browser silently clips it to the nearest one it can show. The badge tells you when that has happened and what the clipped color is. The usual cause is a chroma too high for that lightness and hue; the "Max chroma" buttons show the highest value that fits.
What is Display P3 and when should I use color(display-p3 ...)?
Display P3 is the wider color gamut supported by most modern phones, tablets and laptops. Colors outside sRGB but inside P3 can be shown exactly on those screens, and the CSS notation color(display-p3 r g b) is how you ask for them. Wrap it in @media (color-gamut: p3) with an sRGB fallback outside, so older displays still get a sensible color rather than nothing.
How do I build a tonal color scale for a design system?
Pick your brand hue, then step through lightness at that fixed hue rather than adjusting hex values by eye. The tonal scale here does exactly that: eleven even OKLCH lightness steps, each capped at the highest chroma sRGB can reach at that lightness, copyable as CSS custom properties. Even steps only look even because OKLCH lightness is perceptually uniform — the same eleven steps in HSL crowd every distinguishable shade into the middle.
What is the difference between an OKLCH and an HSL color harmony?
Both rotate the hue by the same angles — 180° for complementary, ±30° for analogous, 120°/240° for triadic. The difference is what stays constant. HSL harmonies hold HSL lightness, which is not perceptual, so a triad can come out with one colour looking far brighter than the others. OKLCH harmonies hold perceived lightness, so the set reads as evenly weighted. Use the Color Palette Generator for the full HSL workflow with more schemes and export formats.
What is WCAG contrast ratio and what does AA compliance mean?
WCAG (Web Content Accessibility Guidelines) defines contrast ratios for text legibility. AA compliance requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). AAA is stricter: 7:1 and 4.5:1. Use this tool to check any text/background color combination.
Related Tools
Updated August 18, 2026