Free SEO Tool

Hex / RGB Color Converter

Live HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK ↔ HWB ↔ OKLCH converter with WCAG contrast, 10-step shade & tint palettes, color harmonies, and exportable CSS / SCSS / Tailwind / JSON tokens.

Free · no sign-up
Instant results
Privacy-friendly

Preview #0EA5E9

Every CSS format

HEX #0EA5E9

HEX3 — (needs 6 digits)

HEX+A #0EA5E9FF

RGB rgb(14, 165, 233)

RGBA rgba(14, 165, 233, 1)

HSL hsl(199, 89%, 48%)

HSV hsv(199, 94%, 91%)

CMYK cmyk(94%, 29%, 0%, 9%)

HWB hwb(199 5% 9%)

OKLCH oklch(68% 0.148 237)

Name dodgerblue (≈)

Tailwind sky-500 (≈)

WCAG 2.1 contrast check

Shades

Tints

Color harmonies

Export this palette CSS variables, SCSS, Tailwind config, or JSON design tokens.

No spam, unsubscribe anytime.

Common colors

Click any swatch to load it into the converter.

About this tool

Live HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK ↔ HWB ↔ OKLCH converter with WCAG contrast, 10-step shade & tint palettes, color harmonies, and exportable CSS / SCSS / Tailwind / JSON tokens.

Conversion runs entirely in your browser — nothing is sent to a server until you opt in to download a palette. The tool covers HEX (3, 6, 8 digits), RGB / RGBA, HSL, HSV, CMYK, HWB, OKLCH, plus the nearest CSS-named color and Tailwind class. Use the share link to keep a permanent URL for any color you preview.

Frequently asked questions

How do I convert RGB to Hex?

Divide each RGB channel by 16 for the first hex digit and take the remainder for the second (0–9 stays, 10–15 becomes A–F). Concatenate the three pairs and prefix a #. Example: rgb(255, 87, 51) → #FF5733.

What is the difference between HEX, HEX3 and HEX8?

HEX6 is the full #RRGGBB code. HEX3 is shorthand only when every channel has duplicate digits (#FFF = #FFFFFF). HEX8 appends a two-digit alpha channel for opacity (#FF5733CC).

What is OKLCH and why use it?

OKLCH is a modern, perceptually-uniform color space supported in CSS. Unlike HSL, its lightness value is consistent across hues, making it ideal for design systems and accessible palettes.

How does the WCAG contrast check work?

We compute the WCAG 2.1 contrast ratio between your color and both white and black text. AA passes at 4.5:1 for body copy, AAA at 7:1. Large text and non-text UI can pass at 3:1.

Is the palette export really free?

Yes. We ask for an email the first time because palette exports are high-intent — most designers exporting tokens want occasional tips. You can unsubscribe anytime.

Menu