What is the difference between RGB and CMYK?

RGB (Red, Green, Blue) is an additive color model used for screens and digital displays. CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive color model used in print. The same color will look different on screen vs print, so always convert to CMYK before sending designs to a print shop.

How do I read an HSL value?

HSL stands for Hue, Saturation, Lightness. Hue is the color angle on a wheel (0=red, 120=green, 240=blue). Saturation is the intensity (0%=gray, 100%=vivid). Lightness is brightness (0%=black, 50%=normal, 100%=white). HSL is very intuitive for designers.

When should I use HEX vs RGB in CSS?

HEX (#RRGGBB) is the most compact format and is universally supported. RGB/RGBA is preferred when you need transparency (alpha channel), or when you want to manipulate individual color channels in JavaScript. Modern CSS also supports HSL and OKLCH for more perceptually uniform color adjustments.

What is OKLCH and when should I use it?

OKLCH is a perceptually uniform color space, meaning equal numerical steps produce equal perceived changes in color. This makes it ideal for generating color scales and design systems where you want consistent visual contrast across all shades. It is supported in modern browsers via CSS oklch().

What color formats does this tool support?

HEX (#RRGGBB and 8-digit #RRGGBBAA), RGB/RGBA, HSL/HSLA, HSV, CMYK, and OKLCH. Paste any of these into the input and the tool converts to all other formats instantly.

Is my color data sent to a server?

No. All conversions, palette generation, and contrast calculations run 100% in your browser. Nothing is transmitted.

What is OKLCH and why should I use it?

OKLCH is a perceptually uniform color space — equal numerical steps look like equal visual changes. This makes it ideal for generating accessible color scales and design tokens. It is supported natively in modern browsers via oklch() in CSS.

How is WCAG contrast ratio calculated?

WCAG contrast ratio is the relative luminance of the lighter color divided by the relative luminance of the darker color, plus 1. A ratio of 4.5:1 meets AA for normal text; 7:1 meets AAA. This tool calculates it automatically when you enter a foreground and background color.

What is the difference between HSL and HSV?

Both use Hue and Saturation, but the third channel differs. HSL Lightness of 100% is always white regardless of saturation. HSV Value of 100% is the pure hue at full brightness. HSL is more intuitive for CSS; HSV is common in design tool color pickers.

Free Online HEX, RGB, CMYK & HSL Color Converter

Convert between HEX, RGB, HSL, CMYK, OKLCH. Alpha channel, named CSS colors, WCAG contrast, Tailwind matching, and developer exports.

Open color picker

Alpha1

#3B82F6

HEX#3B82F6

RGBrgb(59, 130, 246)

HSLhsl(217, 91%, 60%)

HSBhsb(217, 76%, 96%)

CMYKcmyk(76%, 47%, 0%, 4%)

OKLCHoklch(0.623 0.188 259.8)

WCAG Contrast Checker

On White · 3.68:1

✕ AA✕ AAA

On Black · 5.71:1

✓ AA✕ AAA

Custom Background

3.68:1✕ AA✓ AA Large✕ AAA✕ AAA Large

Complementary

Analogous

Triadic

Split-Complementary

Tetradic

Click any swatch to copy its HEX and set it as the active color.

About the Color Converter

Color values look different depending on where you encounter them — a designer hands you a HEX code, a CSS variable uses HSL, a print spec requires CMYK, and a modern design system uses OKLCH tokens. This tool converts between all major color formats instantly, generates harmonious palettes, checks WCAG accessibility contrast ratios, and finds the nearest Tailwind CSS color — all in one place.

Color space guide

HEX & RGB — Web & Screens

The web's native formats. HEX is compact and universally supported. Use rgba() when you need alpha transparency in CSS or JavaScript.

HSL — Designer-Friendly

Adjusting lightness by 10% is predictable in HSL, unlike RGB. Ideal for generating shades and tints programmatically in design systems.

CMYK — Print

Mandatory for print production. RGB adds light (screens); CMYK subtracts light (ink on paper). Always convert before sending artwork to a printer.

OKLCH — Modern Design Systems

Perceptually uniform — equal steps look equal visually. Perfect for accessible color scales and CSS custom properties in modern browsers.

Pipeline

Related tools for color work:

Color Palette Extractor — extract a palette from any image.
SVG Optimizer — clean up SVG icons before applying color tokens.

Privacy

All conversions run in your browser. No color data is sent to any server. Read our privacy policy.

Frequently asked

What color formats does this tool support?: HEX (#RRGGBB and 8-digit #RRGGBBAA), RGB/RGBA, HSL/HSLA, HSV, CMYK, and OKLCH. Paste any of these into the input and the tool converts to all other formats instantly.
Is my color data sent to a server?: No. All conversions, palette generation, and contrast calculations run 100% in your browser. Nothing is transmitted.
What is OKLCH and why should I use it?: OKLCH is a perceptually uniform color space — equal numerical steps look like equal visual changes. This makes it ideal for generating accessible color scales and design tokens. It is supported natively in modern browsers via oklch() in CSS.
How is WCAG contrast ratio calculated?: WCAG contrast ratio is the relative luminance of the lighter color divided by the relative luminance of the darker color, plus 1. A ratio of 4.5:1 meets AA for normal text; 7:1 meets AAA. This tool calculates it automatically when you enter a foreground and background color.
What is the difference between HSL and HSV?: Both use Hue and Saturation, but the third channel differs. HSL Lightness of 100% is always white regardless of saturation. HSV Value of 100% is the pure hue at full brightness. HSL is more intuitive for CSS; HSV is common in design tool color pickers.