About Color Converter

Color Converter lets you translate any color between six popular formats — HEX, RGB, HSL, CMYK, CSS HSL, and OKLab/OKLCH — with a fully interactive color picker and live RGB/HSL sliders. Every change you make in one field instantly propagates to all other formats, eliminating manual calculation errors.

Beyond format conversion the tool generates a perceptual 11-step palette in the OKLCH color space for uniform lightness steps, and computes five color harmony sets (complementary, analogous, triadic, split-complementary, tetradic). All processing runs entirely in your browser — no color data is ever sent to a server.

Common Use Cases

Translating a designer's HEX color from Figma into an RGB value for use in an HTML canvas or CSS gradient.
Picking an accessible foreground color by adjusting HSL lightness until contrast requirements are met.
Generating a complementary or triadic palette for a brand style guide without purchasing dedicated design software.
Converting a CMYK print color into a screen-safe HEX or OKLab equivalent for a web campaign.

How to Use

Click the native color picker in the top-right of the Color Picker panel or drag the RGB/HSL sliders to choose a starting color.
Alternatively, type or paste any HEX, RGB, HSL, CMYK, OKLab, or CSS HSL value directly into the corresponding text field.
Click Copy next to any format field to copy that value to your clipboard instantly.
Scroll down to explore the generated perceptual palette and click any swatch to set it as the active color, then browse the harmony sets for coordinated accent options.

Frequently Asked Questions

What is the difference between HSL and OKLCH?

HSL (Hue, Saturation, Lightness) is a cylindrical remapping of RGB that is intuitive but not perceptually uniform — two colors with the same L value can look very different in brightness to the human eye. OKLCH is a modern perceptual color space where equal steps in lightness, chroma, and hue correspond to equal perceived differences, making it far more reliable for generating accessible palettes and smooth gradients.

Why does the CMYK value look different from my print software?

This tool converts RGB to CMYK using a standard mathematical formula without ICC color profiles. Professional print software applies device-specific profiles (e.g., SWOP, ISO Coated) that adjust ink densities for a particular printer and paper. The result here is a good approximation for web-to-print work, but final print colors should always be verified in color-managed software.

Can I use the generated palette directly in Tailwind CSS or CSS custom properties?

Yes. Each palette swatch displays a HEX value you can copy and paste into a Tailwind config under theme.extend.colors, or into a CSS file as a custom property (e.g., --brand-500: #5B8CF7;). For modern CSS you can also use the OKLCH output directly in browsers that support CSS Color Level 4.