Color Converter

What is Color Converter?

A professional color converter supporting 6 formats: HEX (web standard), RGB (screen mixing), HSL (intuitive lightness/saturation control), HSV/HSB (used in Figma and Photoshop), CMYK (print design), and HWB (modern CSS4 format). All formats stay in sync as you edit. Additional features include a native color picker, tints & shades generator, WCAG 2.1 contrast ratio checker, smart paste that auto-detects any format (including CSS named colors like "tomato"), color history, and a ready-to-copy CSS variables snippet.

How to Use Color Converter

1. Paste any color in the top input — HEX, RGB, HSL, or even a CSS name like "coral" 2. Or click the color swatch to open the native OS color picker 3. All 6 format cards update instantly and bidirectionally 4. Use the gradient sliders to fine-tune Hue, Saturation, Lightness, etc. 5. Click any swatch in the Tints & Shades strip to apply lighter/darker variants 6. Check WCAG contrast ratios for white and black text in the preview 7. Copy any format with one click — or grab the full CSS variables block

Common Use Cases

Converting designer HEX specs to HSL for CSS custom properties
Getting CMYK values from web colors for print-ready artwork
Checking WCAG AA/AAA contrast compliance for accessible design
Generating a complete tint/shade scale for a design system
Finding the HSV equivalent of a color to match Figma's color picker
Translating brand colors across all formats at once
Using CSS named colors and converting them to hex for code

Frequently Asked Questions

What is the difference between HSL and HSV?

Both share Hue (0–360°) and Saturation (0–100%). HSL (Lightness) uses 50% as the "full color" midpoint — 0% is black, 100% is white. HSV (Value/Brightness) uses 100% as the full color — 0% is always black. Figma and Photoshop use HSV; CSS uses HSL.

What is HWB and why use it?

HWB (Hue, Whiteness, Blackness) is a CSS Color Level 4 format natively supported in modern browsers. It's the most intuitive format: take a pure hue and mix in white and/or black. It maps directly to how paint mixing works.

What does the WCAG contrast ratio mean?

WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text (AA) and 7:1 for enhanced (AAA). A ratio ≥ 3:1 passes for large text only. The tool shows the ratio for both white and black text so you can choose the more accessible option.

Why use CMYK for web colors?

CMYK (Cyan, Magenta, Yellow, Key/Black) is the subtractive model used in printing. When creating brand assets that span both web and print, you need CMYK values to hand off to a printer. This tool converts your web HEX or RGB color to its closest CMYK equivalent.

What formats does the paste input accept?

The smart paste input accepts: #RRGGBB, #RGB, rgb(r,g,b), rgba(r,g,b,a), hsl(h,s%,l%), hsla(h,s%,l%,a), hwb(h w% b%), and all 140+ CSS named colors like tomato, cornflowerblue, rebeccapurple, etc.