Color Converter
Convert colors between HEX, RGB, HSL, HSV, CMYK, and HWB. Includes tints & shades, WCAG contrast ratio, CSS snippets, and color history.
Last updated: March 26, 2026
Find this tool useful? Support the project to keep it free!
Buy me a coffeeWhat 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
Paste any color in the top input — HEX, RGB, HSL, or even a CSS name like "coral"
Or click the color swatch to open the native OS color picker
All 6 format cards update instantly and bidirectionally
Use the gradient sliders to fine-tune Hue, Saturation, Lightness, etc.
Click any swatch in the Tints & Shades strip to apply lighter/darker variants
Check WCAG contrast ratios for white and black text in the preview
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
How This Tool Works
All color conversions are pure mathematical functions running synchronously in the browser — no libraries, no server calls. HEX↔RGB is a direct bitwise parse. RGB→HSL and RGB→HSV use standard normalisation formulas. RGB→CMYK uses the CMY subtractive model with black-key extraction. The WCAG 2.1 contrast ratio is computed from the relative luminance formula (sRGB gamma-corrected). Tints and shades are generated by interpolating the HSL lightness value toward 100% (white) and 0% (black) across 10 equal steps. Smart paste uses a cascade of regex patterns to detect the input format before conversion.
Technical Stack
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.
Related Tools
Color Picker from Image
Extract exact Hex, RGB, and HSL color codes from any image using a precision eyedropper tool.
Color Contrast Checker
Check color contrast ratios for WCAG AA and AAA across text, buttons, icons, and UI components.
Color Palette Generator
Generate harmonious color palettes and schemes.
Invert Colors
Invert a colour by flipping its RGB channels. Shows the mathematical RGB inverse, hue complement, and a readable-text recommendation.
CSS Gradient Generator
Create beautiful CSS gradients with a visual editor.
Box Shadow Generator
Create CSS box shadows visually — adjust offsets, blur, spread, opacity, and inset, then copy ready-to-use CSS code.
Part of Collections
Posts for This Tool
Broader workflow content that links this tool back into the wider cluster.
How to Choose Accessible Button Colors
Pick accessible button colors for labels, fills, borders, hover states, disabled states, and focus rings without flattening your UI.
WCAG AA vs AAA Contrast: Simple Guide for Designers
Understand the difference between WCAG AA and AAA contrast targets, when each one is realistic, and how to apply them without overcorrecting your palette.
What Is a Good Color Contrast Ratio?
A practical explanation of good contrast ratios for body text, large headings, icons, buttons, and muted interface states.