Toolcedar

Color Converter

Convert colors between HEX, RGB, HSL and OKLCH. Pick a color or paste any format, and see every equivalent at once.

HEX
#3b82f6
RGB
rgb(59 130 246)
HSL
hsl(217 91% 60%)
OKLCH
oklch(62.3% 0.188 259.8)

How to use the Color Converter

  1. Pick or paste. Use the color picker, or paste a HEX, RGB or HSL value.
  2. Copy the format you need. Every equivalent is listed with its own copy button.

Frequently asked questions

What is OKLCH and why does it keep appearing?
OKLCH is a perceptually uniform color space added to CSS in 2023. Unlike HSL, changing only its lightness leaves the perceived hue alone, which makes it far better for building consistent color scales.
Why does HSL lightness not match how bright a color looks?
Because HSL is a simple mathematical transform of RGB, not a model of human vision. Pure yellow and pure blue both sit at 50 percent lightness in HSL, yet yellow looks dramatically brighter.
Should I still use HEX colors?
For fixed brand values, yes, and it remains the most widely understood format. For generating tints, shades and accessible contrast pairs, a perceptual space like OKLCH will save you a great deal of manual tweaking.
Can every OKLCH color be shown on screen?
No. OKLCH can describe colors outside the sRGB gamut that a standard display cannot reproduce. Converting such a value back to HEX clips it to the nearest color that can be shown.

Learn more

Related tools

Last updated