A six-digit hexadecimal shorthand for RGB: #FF5733 means red=FF (255), green=57 (87), blue=33 (51). Three-digit form (#F53) expands by doubling each digit. It's the native color language of CSS and HTML.

How do I convert HEX to RGB?

Split the hex into three pairs and convert each from base-16 to decimal: #FF5733 → FF=255, 57=87, 33=51 → rgb(255, 87, 51). The tool above does it instantly in both directions — type in any field and the rest update live.

What's the difference between HSL and HSV?

Both separate hue from the rest, but define the second two components differently: HSL uses Saturation + Lightness (how much white/black is mixed in), HSV uses Saturation + Value (brightness). They're interconvertible but not interchangeable — pick HSL for CSS work, since that's what hsl() expects.

What is CMYK used for?

Print. Cyan, Magenta, Yellow, and Key (black) are ink amounts, not light intensities. Convert to CMYK when preparing artwork for physical printing — but treat the numbers as approximate, since real ink behavior depends on the printer, paper, and color profile.

What contrast ratio do I need for accessibility?

WCAG 2.x requires at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold) at level AA; level AAA raises those to 7:1 and 4.5:1. The checker above implements the official relative-luminance formula and tells you exactly where your pair lands.

Can I paste a color name?

Yes — the name field accepts common CSS color names like "coral", "teal", or "crimson" and converts them. Browsers define 148 named colors; this tool covers the most-used subset.

No. All conversion math runs in your browser with plain JavaScript. Nothing leaves your device.

Color Converter

Designers think in HEX, printers think in CMYK, and CSS increasingly thinks in HSL. This free color converter translates between HEX, RGB, HSL, and CMYK instantly — type in any field, pick visually, or paste a color name — and includes a WCAG contrast-ratio checker so your text stays readable. Everything runs 100% client-side.

HEX RGB (0–255) HSL (H 0–360, S/L 0–100) CMYK (approx.) Color name

Contrast checker (WCAG)

Text Background

Ratio: —

100% client-side — your data never leaves this browser.

What the formats are

Format	Looks like	Best for
HEX	`#FF5733`	CSS/HTML — compact, copy-pasteable
RGB	`rgb(255, 87, 51)`	Screens — direct channel intensities
HSL	`hsl(11, 100%, 60%)`	Humans — "same hue, darker" is trivial
CMYK	`0, 66, 80, 0`	Print — ink coverage, approximate

Common use cases

CSS development — convert a designer's HEX to hsl() so hover states are one lightness tweak away.
Brand audits — verify a logo's colors meet contrast requirements on every background.
Print prep — get approximate CMYK values before handing artwork to a printer.
Accessibility fixes — find the exact shade where gray text finally passes 4.5:1.
Palette building — lock the hue, sweep saturation and lightness for harmonious variants.

How to use it

Pick a color visually, paste HEX, enter RGB/HSL values, or type a color name.
All other formats update live — hit Copy on the one you need.
For the contrast checker, enter text and background hexes and read the ratio + verdict.

HSL vs HSV

This confuses everyone once. HSL (hue, saturation, lightness) models color as a double cone: lightness 50% is the pure hue, 0% is black, 100% is white. HSV/HSB (hue, saturation, value/brightness) models it as a single cone: value 100% with full saturation is the pure hue. Same hue wheel, different geometry — which is why converting between them needs real math, not a relabel. For web work, HSL is the practical choice: CSS speaks it natively, and "darken by 10% lightness" is the most intuitive palette operation there is.

Contrast and accessibility

Contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L is relative luminance — a perceptual brightness computed with gamma-corrected channel weights (green counts most, blue least). It ranges from 1:1 (identical) to 21:1 (black on white). WCAG 2.x level AA demands 4.5:1 for normal text and 3:1 for large text. The classic failure is medium gray on white (#777 on #fff is ~4.48:1 — just short). The fix is almost always darkening the foreground a touch, which the checker lets you iterate in seconds.

Print vs screen

Screens emit light (additive RGB); paper reflects it (subtractive CMYK). Converting between them is inherently approximate: some vivid screen colors simply don't exist in ink (out of gamut), and real output depends on printer, inks, and paper stock. Use the CMYK readout as a sanity check — "is this mostly magenta?" — not as a print proof. For anything that must match exactly, work with your printer's ICC profile, not a web converter.

Limitations

Conversion is not color management: this tool doesn't know your monitor's profile, so the "same" color can render slightly differently across displays. Named colors cover a popular subset, not all 148 CSS keywords. And the contrast checker evaluates the WCAG formula faithfully — but real readability also depends on font weight, size, and user vision, so treat a pass as necessary, not sufficient.

Frequently asked questions

What is HEX?: A six-digit hexadecimal shorthand for RGB: #FF5733 means red=FF (255), green=57 (87), blue=33 (51). Three-digit form (#F53) expands by doubling each digit. It's the native color language of CSS and HTML.
How do I convert HEX to RGB?: Split the hex into three pairs and convert each from base-16 to decimal: #FF5733 → FF=255, 57=87, 33=51 → rgb(255, 87, 51). The tool above does it instantly in both directions — type in any field and the rest update live.
What's the difference between HSL and HSV?: Both separate hue from the rest, but define the second two components differently: HSL uses Saturation + Lightness (how much white/black is mixed in), HSV uses Saturation + Value (brightness). They're interconvertible but not interchangeable — pick HSL for CSS work, since that's what hsl() expects.
What is CMYK used for?: Print. Cyan, Magenta, Yellow, and Key (black) are ink amounts, not light intensities. Convert to CMYK when preparing artwork for physical printing — but treat the numbers as approximate, since real ink behavior depends on the printer, paper, and color profile.
What contrast ratio do I need for accessibility?: WCAG 2.x requires at least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold) at level AA; level AAA raises those to 7:1 and 4.5:1. The checker above implements the official relative-luminance formula and tells you exactly where your pair lands.
Can I paste a color name?: Yes — the name field accepts common CSS color names like "coral", "teal", or "crimson" and converts them. Browsers define 148 named colors; this tool covers the most-used subset.
Is my data uploaded?: No. All conversion math runs in your browser with plain JavaScript. Nothing leaves your device.