Skip to main content

Color Converter

Instantly translate any color across RGB, HEX, HSL, HWB, and CMYK - with WCAG contrast checking built in.

Designing across web, mobile, and print? This free, client-side color converter handles five industry-standard formats simultaneously. Type a hex code, pick from the visual picker, or just type a CSS name like cornflowerblue. It also checks WCAG accessibility contrast ratios and generates a full tints-and-shades palette - no server, no sign-up, no tracking.

Use the Tool​

HEX#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)
HWBhwb(217 23% 4%)
CMYKcmyk(76%, 47%, 0%, 4%)

WCAG Contrast Ratio

vs White3.68:1
AAAAAAA Large
vs Black5.71:1
AAAAAAA Large

AA ≥ 4.5:1  ·  AAA ≥ 7:1  ·  AA Large ≥ 3:1 (18pt+)

Tints & Shades

Click any swatch to select it


Have feature request?
If you want to see a specific feature or integration, let me know!
Contact Me

Get notified about updates to this tool

No spam. Just high-quality updates about new features and guides.

What This Tool Does​

What the tool does​

The Color Converter translates any color input - a HEX code, a CSS color name, an rgb() string, or a color-picker selection - into five technical formats simultaneously: HEX, RGB, HSL, HWB, and CMYK. It also computes WCAG 2.1 contrast ratios against white and black, displays AA/AAA compliance badges, and generates a nine-step tints-and-shades palette derived from the selected color.

What problems it solves​

Designers and developers constantly juggle color models: CSS expects HEX or hsl(), print workflows require CMYK, accessibility audits need contrast ratios, and brand guidelines might define colors as RGB triples. This tool collapses all of that into one place - no switching tabs, no mental math, no separate accessibility checker.

Who should use it​

  • UI/UX designers building design tokens and checking accessibility compliance
  • Frontend developers translating design-file colors into CSS
  • Graphic designers converting screen colors for four-color print production
  • Content creators exploring color palettes from a starting hue

Why it matters​

A single color value means different things to different tools. A web #3b82f6 looks different in print if the CMYK conversion is imprecise. A background that "looks fine" might fail WCAG AA contrast for body text. Having conversions and compliance in one step prevents downstream errors.

How It Works​

Input​

Enter color in any of these formats:

  • HEX - #3b82f6 or shorthand #f60
  • RGB - rgb(59, 130, 246)
  • HSL - hsl(217, 91%, 60%)
  • HWB - hwb(217 23% 3%)
  • CSS named colors - cornflowerblue, tomato, rebeccapurple, etc.
  • Visual color picker - click the color square to open your browser's native picker
  • Random - click the Random button to generate a random color

Processing​

All math runs entirely inside your browser - no data is sent anywhere. RGB is the universal intermediate: every other format converts through it. The WCAG contrast ratio is calculated from relative luminance per the WCAG 2.1 specification. The tints-and-shades palette is generated by shifting the HSL lightness value across nine evenly spaced steps while preserving hue and saturation.

Limitations​

CMYK is an approximation. CMYK is a subtractive model for physical ink on white paper; RGB is additive for light-emitting screens. Highly saturated or "neon" RGB colors like #00ff00 fall outside printable gamut and will be approximated to the nearest reproducible ink value. Final print output should always be proofed with professional tools and physical samples.

HSL rounding. All output values are rounded to the nearest whole number. This means converting in a chain (e.g., HEX → HSL → HEX) may produce a value off by 1 in the last hex digit due to integer rounding.

Output​

Every format is shown as a copy-ready string. Click Copy next to any format to put it on your clipboard. The tints-and-shades palette swatches are clickable - selecting one updates all five formats and the contrast checker instantly.

Developer API Available
Need to run color conversions programmatically? Get an API key.
Get API Key

Frequently Asked Questions​

What is the difference between HSL and HWB?​

Both are human-readable alternatives to RGB. HSL describes a color by Hue (0–360°), Saturation (how vivid), and Lightness (how bright). HWB describes it by Hue, Whiteness (how much white is mixed in), and Blackness (how much black). HWB is often considered more intuitive for creating tints and shades because you directly control the white and black mixture. Both are fully supported in modern CSS.

Why does my CMYK conversion look different in Photoshop?​

Professional tools use ICC color profiles and device-specific ink gamut mappings. This converter uses a mathematical "device-independent" formula that gives a close approximation, but will differ from software that accounts for a specific printer's ink behavior. For production print work, verify with your print shop's color profile.

What are WCAG AA and AAA contrast levels?​

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable for people with low vision. AA requires 4.5:1 for normal text and 3:1 for large text (18pt+). AAA (enhanced) requires 7:1 for normal text and 4.5:1 for large text. Failing AA means the color combination is likely inaccessible to many users.

Which CSS color formats should I use in 2025?​

hsl() and oklch() are widely recommended for design systems because they're perceptually meaningful - lightening a color by 10% in HSL actually looks like 10% lighter. HEX remains ubiquitous for copy-pasting and compatibility. rgb() is straightforward but hard to reason about visually. CMYK is not a CSS format; it's for print.

Does this tool work offline?​

Yes. All conversions run in your browser with no network requests. Once the page loads, the tool works without an internet connection.

Get Early Access to New Tools

Be the first to try new APIs and applications. No noise. Only meaningful releases and practical engineering insights.

Last updated on