Translating a brand hex code into rgb() with alpha for a CSS overlay. Converting between HSL and OKLCH while migrating a design system to perceptual color. Reading a pasted rgb(52, 152, 219) from a screenshot tool back into a hex code for your stylesheet. Sanity-checking an OKLCH chroma value (anything above ~0.4 is likely outside the sRGB gamut).

OKLCH lightness uses 0–1, not 0–100. CSS accepts both ( 0.65 or 65% ); this tool accepts either form. Some OKLCH values fall outside sRGB (e.g. high chroma for blue). The tool clamps to displayable sRGB on conversion — the result is approximate, not exact. HSL is not the same as HSV. HSV's "value" is the brightest channel; HSL's "lightness" is the midpoint of the brightest and darkest. They give different numbers for the same colour. Round-tripping isn't always lossless. hex → hsl → hex can shift a single integer due to rounding. For exact reproduction, store hex. Hex and RGB are sRGB by default, not Display P3 or Rec. 2020. If your design tool is in a wide-gamut profile, the same hex looks different.

OKLCH is the colour space worth learning in 2026. CSS Color Module Level 4 brought oklch() , oklab() , and display-p3() to all evergreen browsers. OKLCH (a perceptually-uniform variant of LCH) is the modern recommendation for design-system colour scales because evenly-spaced numbers actually look evenly-spaced to the eye — HSL's "L = 50%" looks much brighter for yellow than for blue, while OKLCH's lightness is consistent across hues. If you're building a new colour scale, OKLCH first. Gamma is the reason colour math is "wrong". Mixing #ff0000 and #00ff00 at 50% naïvely gives #808000 (dark olive) — perceived as much darker than expected. The reason: sRGB is gamma-encoded for display, so the midpoint of two gamma-encoded values isn't the perceptual midpoint. Real colour blending should happen in a linear space (linear-sRGB or OKLab), then re-encode back to sRGB. Designs that look "muddy" at gradients usually have this bug. WCAG contrast uses relative luminance, not lightness. The contrast ratio between two colours depends on a luminance calculation that weights green most, red middle, blue least (matching human eye sensitivity). This is why "blue on black" can fail WCAG even when both look "dark" — blue carries very little luminance. The newer APCA contrast algorithm (proposed for WCAG 3) addresses some shortcomings of the current formula but isn't yet standard. Hex isn't always 6 characters. Short form ( #f00 ) is 3 hex digits, each duplicated to form 6 ( #ff0000 ). 8-character hex ( #ff000080 ) includes alpha (the last two are the alpha channel, 80 = 50%). The 4-character short form ( #f008 ) is also legal alpha form. Many parsers handle the 6 and 8 forms but choke on the 3 and 4 forms; this tool handles all four. Naming colours is harder than it looks. CSS has 147 named colours, mostly inherited from X11 in 1985, including such uniquely useful names as "papayawhip" and "lemonchiffon". For design tokens, ignore the named colours entirely — they encode no semantic information and have unpredictable values. Use hex or OKLCH and name them by purpose (primary, danger, surface-low) in your design system instead.

Color Converter

Convert any color between hex, RGB, HSL, and OKLCH. Live preview, copy in one click.

Hex

RGB

HSL

OKLCH

Picker

Result

What is this for?

Designers and front-end developers shuffle colors between formats constantly — Figma gives you hex, the design tokens spec wants OKLCH, your CSS uses HSL, and the image you grabbed is in RGB. This tool keeps every notation in sync: edit one, the others update live. Includes the modern oklch() format added in CSS Color Module 4 (and supported in all major browsers since 2023), which produces perceptually uniform colors that are far easier to reason about than HSL.

When to use it

Translating a brand hex code into rgb() with alpha for a CSS overlay.
Converting between HSL and OKLCH while migrating a design system to perceptual color.
Reading a pasted rgb(52, 152, 219) from a screenshot tool back into a hex code for your stylesheet.
Sanity-checking an OKLCH chroma value (anything above ~0.4 is likely outside the sRGB gamut).

Format quick reference

Hex — #RRGGBB (or 3-digit shorthand #RGB). Universal, no alpha unless 8-digit (#RRGGBBAA).
RGB — rgb(0–255, 0–255, 0–255). The actual sRGB channel values your screen receives.
HSL — hue (0–360°), saturation (0–100%), lightness (0–100%). Easy to reason about colour families, but lightness is non-perceptual: HSL 50% green looks brighter than HSL 50% blue.
OKLCH — perceptual lightness (0–1), chroma (0–~0.4 in sRGB), hue (0–360°). Two colours with the same L look equally bright; ideal for design systems and accessibility.

Common gotchas

OKLCH lightness uses 0–1, not 0–100. CSS accepts both (0.65 or 65%); this tool accepts either form.
Some OKLCH values fall outside sRGB (e.g. high chroma for blue). The tool clamps to displayable sRGB on conversion — the result is approximate, not exact.
HSL is not the same as HSV. HSV's "value" is the brightest channel; HSL's "lightness" is the midpoint of the brightest and darkest. They give different numbers for the same colour.
Round-tripping isn't always lossless. hex → hsl → hex can shift a single integer due to rounding. For exact reproduction, store hex.
Hex and RGB are sRGB by default, not Display P3 or Rec. 2020. If your design tool is in a wide-gamut profile, the same hex looks different.

Expert notes

OKLCH is the colour space worth learning in 2026. CSS Color Module Level 4 brought oklch(), oklab(), and display-p3() to all evergreen browsers. OKLCH (a perceptually-uniform variant of LCH) is the modern recommendation for design-system colour scales because evenly-spaced numbers actually look evenly-spaced to the eye — HSL's "L = 50%" looks much brighter for yellow than for blue, while OKLCH's lightness is consistent across hues. If you're building a new colour scale, OKLCH first.
Gamma is the reason colour math is "wrong". Mixing #ff0000 and #00ff00 at 50% naïvely gives #808000 (dark olive) — perceived as much darker than expected. The reason: sRGB is gamma-encoded for display, so the midpoint of two gamma-encoded values isn't the perceptual midpoint. Real colour blending should happen in a linear space (linear-sRGB or OKLab), then re-encode back to sRGB. Designs that look "muddy" at gradients usually have this bug.
WCAG contrast uses relative luminance, not lightness. The contrast ratio between two colours depends on a luminance calculation that weights green most, red middle, blue least (matching human eye sensitivity). This is why "blue on black" can fail WCAG even when both look "dark" — blue carries very little luminance. The newer APCA contrast algorithm (proposed for WCAG 3) addresses some shortcomings of the current formula but isn't yet standard.
Hex isn't always 6 characters. Short form (#f00) is 3 hex digits, each duplicated to form 6 (#ff0000). 8-character hex (#ff000080) includes alpha (the last two are the alpha channel, 80 = 50%). The 4-character short form (#f008) is also legal alpha form. Many parsers handle the 6 and 8 forms but choke on the 3 and 4 forms; this tool handles all four.
Naming colours is harder than it looks. CSS has 147 named colours, mostly inherited from X11 in 1985, including such uniquely useful names as "papayawhip" and "lemonchiffon". For design tokens, ignore the named colours entirely — they encode no semantic information and have unpredictable values. Use hex or OKLCH and name them by purpose (primary, danger, surface-low) in your design system instead.