How to use the Color Converter
- Click the color swatch or the color picker to choose a color visually.
- Or type any value directly into a format field, HEX, RGB, HSL, or OKLCH, and all others update instantly.
- Click Copy next to any format to copy it to your clipboard.
HEX, RGB, HSL, OKLCH, what are the differences?
HEX (#RRGGBB) is the most common color format on the web. Each pair of digits is a hexadecimal value from 00 (0) to FF (255), representing red, green, and blue channels. Example: #3498db is a medium blue. A shorthand form #RGB exists for colors where each pair repeats (e.g. #fff = #ffffff).
RGB (red, green, blue) expresses each channel as a number from 0 to 255. It maps directly to HEX: R=52, G=152, B=219 equals #3498db. CSS accepts both rgb(52, 152, 219) and the modern rgb(52 152 219) syntax.
HSL (hue, saturation, lightness) is the most intuitive format for designers. Hue is an angle on the color wheel (0-360°). Saturation controls intensity (0% is grey). Lightness adjusts brightness (0% = black, 100% = white). Incrementing or decrementing the lightness value creates tints and shades of the same hue.
OKLCH (lightness, chroma, hue) is the modern perceptual color space defined in CSS Color Level 4. Its lightness value is perceptually uniform, equal steps produce equally visible changes, unlike HSL. OKLCH also covers a wider color gamut, including the P3 wide-gamut colors available on modern screens.
Which format should you use in CSS?
- Use HEX for quick reference and design tokens, it is compact and universally understood
- Use HSL for theme systems where you generate variations by adjusting a single value
- Use OKLCH for modern CSS design systems; it enables consistent color ramps and wide-gamut support
- Use RGB when working with canvas, WebGL, or libraries that expect numeric channels