100% offline
Media & Design
Free · no signup
Updated
Color Converter
A Color Converter translates a color value between the most common web color spaces — HEX, RGB, HSL, and OKLCH (the perceptually-uniform color space used by modern CSS) — with live previews and copy-ready CSS, all in your browser.
- HEX
#16a34a - RGB
rgb(22, 163, 74) - HSL
hsl(142, 76%, 36%) - OKLCH
oklch(0.6271 0.1699 149.21)
About Color Converter
Pick a color from the picker or paste any HEX, RGB, HSL, or OKLCH value to see the equivalent in every other format alongside a live swatch. OKLCH conversions follow the CSS Color Module Level 4 specification, so the values match what your browser will render.
What Color Converter does
- Convert between HEX, RGB, HSL, and OKLCH
- Live color picker plus paste-any-format text input
- Per-format swatches and copy-ready CSS strings
- Alpha channel preserved across every format (hex8, rgba, hsla, oklch /a)
- OKLCH conversions follow CSS Color Module Level 4 exactly
When to reach for Color Converter
- Translating a designer's HEX value into OKLCH for a perceptually-uniform CSS palette
- Picking a color from a screenshot and copying the HSL string into Tailwind config
- Building an accessible color ramp by walking lightness in OKLCH
- Sanity-checking that a color converted between formats round-trips correctly
How to use Color Converter
- 01
Pick or paste a color
Use the color picker, or paste any value (HEX, RGB, HSL, OKLCH — with or without alpha).
- 02
Read every format
Each format appears in a labeled card with the CSS-ready string and a swatch preview.
- 03
Copy what you need
Per-format copy button puts the string on your clipboard.
When to use Color Converter vs alternatives
| Alternative | Use Color Converter when… | Use the alternative when… |
|---|---|---|
| colorpicker.com / coolors.co | you want OKLCH support and zero analytics tracking. | you want palette generation and saved swatches. |
| DevTools color picker | you are starting from a value, not a rendered element. | you are picking a color from a live page. |
Frequently asked questions
What is OKLCH and why is it in CSS?
OKLCH is a perceptually-uniform color space — equal numeric distance corresponds to equal perceived distance. Designers use it because color ramps generated in OKLCH look balanced where RGB or HSL ramps drift in lightness. It is part of CSS Color Module Level 4.
Why do my HSL and OKLCH values look different?
HSL uses a cylindrical projection of sRGB and is not perceptually uniform. OKLCH is built on the OKLab perceptual model. The same color renders identically in both, but the numbers (especially the lightness coordinate) differ substantially.
Does this support alpha channels?
Yes — alpha is preserved across conversions and surfaced in every output format using the appropriate syntax (rgba(), hsla(), oklch(l c h / a), #rrggbbaa).