Color Converter
Convert colors between HEX, RGB, HSL and OKLCH formats instantly. Type in any format and all others update in real time with a live color preview.
HEX
RGB
HSL
OKLCH (from HEX/RGB/HSL)
About This Tool
Colour codes appear in four main formats across modern web and design workflows. HEX (#3b82f6) is the most common in HTML and CSS. RGB is used when you need per-channel control in CSS and canvas drawing. HSL makes it intuitive to lighten, darken or change the hue of a colour. OKLCH is the newest perceptually uniform colour space gaining adoption in CSS Color Level 4, enabling predictable contrast and consistent chroma across hues. QuickKit's Color Converter lets you enter a colour in any of these four formats and instantly see the equivalents in all others, with a live preview swatch.
Features
- ✓Four-format Conversion — Convert between HEX, RGB, HSL and OKLCH instantly. Enter any value and all other fields update in real time.
- ✓Live Color Preview — A colour swatch updates immediately as you type, giving you visual confirmation that your colour value is correct.
- ✓One-click Copy — Each format has its own copy button — copy the exact string you need (e.g. "hsl(211, 90%, 60%)") without reformatting.
- ✓OKLCH Support — Calculates OKLCH values from any input using the standard conversion via OKLab, the perceptually uniform colour space designed by Björn Ottosson.
FAQ
- What is OKLCH?
- OKLCH is a perceptually uniform colour space (Lightness, Chroma, Hue) based on the OKLab colour model. Unlike HSL, equal numerical changes in OKLCH produce perceptually equal changes in colour appearance — making it ideal for generating colour palettes, accessible contrast ratios, and gradients that look consistent across different hues.
- Why does my HEX colour show wrong RGB values?
- Make sure your HEX code is either 3 or 6 hex digits (0–9, a–f), with or without the leading #. Shorthand 3-digit codes like #f0a are expanded to #ff00aa.
- Can I type directly into the OKLCH fields?
- Currently the OKLCH fields are read-only output — they are calculated from whatever you type in HEX, RGB or HSL. Direct OKLCH input will be added in a future update.