Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
- HEX
#3B82F6 - RGB
rgb(59 130 246) - RGB (legacy)
rgb(59, 130, 246) - HSL
hsl(217 91% 60%) - HSV
hsv(217, 76%, 96%) - OKLCH
oklch(62.3% 0.188 259.8) - CSS var
--color: #3B82F6;
How to use
- Use the color picker or paste a HEX value (3 or 6 digits, # optional).
- Every format updates instantly.
- Copy the format you need with the button on the right of each row.
About this tool
ShowHide
Enter a colour once and read it back in every notation a stylesheet or a design tool might want — hex, rgb(), hsl(), hsv and oklch — each with its own copy button. The interesting one is oklch. Unlike HSL, whose lightness is a crude arithmetic mean, it is built on a perceptual model, so two colours with the same L look equally bright to the eye and changing the hue does not drag the brightness with it. That is what makes it the sane way to build a palette where every step actually reads as one step, and why it is increasingly used in modern CSS colour work. All the conversions run in the page as you type, and nothing you enter is uploaded.
Frequently asked questions
What is OKLCH?
OKLCH is a perceptually-uniform color space — equal numeric distances feel like equal visual distances. Modern CSS supports it natively and some design tools have started to support it for smoother gradients and consistent contrast.
Why two RGB rows?
Modern CSS uses space-separated 'rgb(59 130 246)'. Legacy CSS and older browsers expect comma-separated 'rgb(59, 130, 246)'. Both produce the same color.
What about alpha (RGBA / HSLA)?
This tool focuses on opaque colors. For transparency, append '/ 0.5' inside the modern syntax (e.g. 'rgb(59 130 246 / 0.5)') or use the legacy 'rgba(…, 0.5)' form.
Is HSV the same as HSB?
Yes — HSV (Value) and HSB (Brightness) are two names for the exact same color model. CSS doesn't accept hsv() directly; use HSL for stylesheets.
Guides on this topic
- Colour Contrast and Accessible PalettesWhat the WCAG contrast ratios actually measure, why a colour that looks fine can still fail, how colour blindness changes the picture, and how to build a palette that holds up.
- HEX, RGB, HSL and OKLCH: Choosing a Colour FormatWhat HEX, RGB, HSL and OKLCH store, why HSL lightness is not perceived lightness, when OKLCH helps, and why screen colour is not print colour.
Related tools
HSL Color Picker
Drag hue, saturation, lightness, and alpha sliders to dial in a color — copy HEX, RGB, HSL, or a Tailwind arbitrary value.
Color & CSS
Random Color Generator
Generate a grid of random colors in HEX, RGB or HSL — pick how many, copy any value with one click, and regenerate instantly for design inspiration.
Random
OKLCH Color Picker
Pick colours in the perceptually uniform OKLCH space (lightness · chroma · hue) — and see whether each pick fits inside the sRGB display gamut.
Color & CSS
CSS color-mix() Preview (Interpolation Space Comparison)
Compare how CSS color-mix() blends two colors across interpolation spaces (srgb, hsl, oklch, lab, lch, hwb) — live swatches and copyable CSS.
Color & CSS
Wavelength to Color Converter (nm → sRGB)
Convert a light wavelength in nanometres (380–780 nm) to an approximate sRGB color, with a clickable rainbow bar and Fraunhofer reference lines.
Color & CSS
CMYK ↔ RGB Color Converter (Print Color Space)
Convert between RGB / hex screen colors and CMYK percentages for print — simple, GCR and UCR black generation, plus a total ink coverage readout.
Color & CSS