WebToolsPlanet
color Tools

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

Client-Side Processing
Input Data Stays on Device
Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

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.

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

Pure JS mathCSS Color Level 4WCAG 2.1 relative luminanceCanvas APIClient-side only

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 WCAG color contrast ratios for accessibility.
Color Palette Generator
Generate harmonious color palettes and schemes.
CSS Gradient Generator
Create beautiful CSS gradients with a visual editor.
Box Shadow Generator
Create CSS box shadows with a visual editor.