Color Converter
Convert colors between HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK, and OKLCH formats instantly. Pick a color visually or type any format — all other formats update in real time.
About Color Converter
Colors on the web can be expressed in half a dozen equivalent formats — HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK, OKLCH — and different tools expect different formats. Designers work in HEX; developers write RGB or HSL for programmatic manipulation; print production needs CMYK; modern CSS supports OKLCH for perceptually-uniform color scales. This Color Converter converts between all common formats bidirectionally with live sliders for RGB and HSL channels.
OKLCH is the modern perceptually-uniform format popularized by Björn Ottosson — changing lightness in OKLCH produces a color that looks equally lighter/darker across all hues, unlike HSL which produces uneven perceived changes. Supported in CSS since 2023 and increasingly used in design systems. Every format value can be copied to clipboard with a single click.
How to Use
Use the color picker or type a HEX value to set the color.
Adjust individual RGB or HSL channels with the number inputs — all formats stay in sync.
Every format shows the exact CSS-ready syntax. Click any value to copy it.
OKLCH is the modern perceptually-uniform color space — supported in modern browsers for CSS `oklch()`.
Frequently Asked Questions
Which color format should I use in CSS?
HEX is the classic default. RGB/RGBA is best when you need transparency and modern browser support is guaranteed. HSL/HSLA is best for programmatic manipulation (easy to tweak hue independently of brightness). OKLCH is the future — perceptually uniform, supported in all modern browsers since 2023.
Are these conversions lossless?
HEX ↔ RGB is lossless (both are 8-bit-per-channel sRGB). HSL and CMYK conversions round to integers so you may see 1-bit drift on repeated conversions. For pixel-perfect brand color work, always store the source format and convert on export.
What is OKLCH?
OKLCH is a perceptually-uniform color space based on Björn Ottosson's OKLab. Unlike HSL, changing OKLCH lightness produces a color that looks equally lighter/darker to human eyes across all hues. Great for design systems and accessibility work. Supported in CSS since 2023.
Does CMYK conversion match print output?
Approximately — pure RGB-to-CMYK math (as this tool does) gives you the theoretical values. Actual print output depends on the printer's color profile, paper stock, and ICC settings. For production print, use a color-managed workflow in Photoshop/Illustrator with the correct ICC profile.