How do I convert a HEX color to RGB and HSL?

Type or paste the color into Color input, for example #14b8a6, or use the color picker. The tool shows HEX, rgb(), hsl(), hsv() and cmyk() values, plus oklch(), lab() and lch(), each with a Copy button.

Which color formats can I type in?

HEX with 3, 4, 6 or 8 digits, rgb() or rgba(), hsl() or hsla() in comma or space syntax, and bare number triples. If the input is not recognised, the tool shows a parse error.

Can I convert colors with transparency?

Yes. Use the Opacity control or enter an alpha value in the input. The outputs then include the alpha channel, such as an 8-digit HEX, rgba(), or a slash alpha in modern syntax.

Are the CMYK values accurate for printing?

No, they are a standard sRGB to CMYK approximation, shown under For print. For accurate print color, use your printer's color profile or request a proof, as bright screen colors often print duller.

How do I check if my color has enough contrast for text?

See the WCAG contrast section. It shows the contrast ratio of your color on white and on black, graded AAA, AA, AA Large or Fail. The Lightness scale offers lighter or darker shades to try.

Yes. Every tool is free to use, with no account and no credit card. The work runs on your device rather than on our servers, which is what keeps it free to run.

Does it work on mobile?

Yes. It runs in current mobile browsers on iOS and Android, with nothing to install.

🎨

Free Color Converter

Convert colors between HEX, RGB, HSL, HSV, and CMYK formats instantly. Includes a lightness scale and preset swatches.

Runs in your browserNo sign-up, no pop-upsNo login requiredFree forever

Works offline once loaded

Convert a color between HEX, RGB, HSL, HSV and CMYK — with a live preview and one-tap copy. Everything runs in your browser.

Color input

Accepts: HEX (#fff or #ffffff), RGB (255, 255, 255), or HSL (360, 100%, 50%)

Opacity100%

Presets:

HEX#14B8A6

rgb() · legacyrgb(20, 184, 166)

rgb() · modernrgb(20 184 166)

hsl() · legacyhsl(173, 80%, 40%)

hsl() · modernhsl(173 80% 40%)

oklch()oklch(70.4% 0.123 182.5)

lab()lab(67.1% -42.9 -2.3)

lch()lch(67.1% 43.0 183.1)

hsv()hsv(173, 89%, 72%)

cmyk()cmyk(89%, 0%, 10%, 28%)

RGB values20, 184, 166

WCAG contrast

On white background

2.49:1

Fail

On black background

8.44:1

AAA

🖨️ For print: These CMYK values (89%, 0%, 10%, 28%) are a standard sRGB→CMYK approximation for reference. For accurate print colour, use your printer's ICC profile or a printed proof — screen CMYK can't match every ink/paper.

Lightness scale

Click any swatch to switch to that shade

Common uses

Convert Colors for Web DesignGet HEX, RGB, and HSL values for any colour — ready to paste into CSS or Tailwind.
Convert Colors for Print (CMYK)Convert screen colours (HEX/RGB) to CMYK values for use in print design and professional printing.
Build Color Palettes for Design SystemsConvert brand colours across all formats and generate consistent lightness scales for a full design system.
Check Colour Contrast for AccessibilityConvert colours to get RGB values for use in contrast ratio tools — WCAG compliance for accessible design.
Convert Colors for FigmaGet the exact HEX and RGB values to paste into Figma colour pickers and design token systems.

How It Works

All conversion logic is hand-written JavaScript running entirely in your browser — no library, no server call. The tool parses your input, routes it through a chain of pure math functions, and simultaneously produces eleven output formats including the modern CSS Color 4 spaces oklch() and lab().

1
Flexible input parsing
A custom parser accepts hex (3, 4, 6, or 8 digits), rgb()/rgba(), hsl()/hsla() in both legacy comma syntax and modern space syntax, and bare numeric triples. Alpha values as decimals or percentages are normalized to the 0–1 range before any conversion begins.
2
RGB as the conversion hub
Every accepted format is first resolved to a canonical RGB triplet. From that single representation the tool fans out: HSL and HSV use the standard min/max/chroma formulas; CMYK is derived by finding the key channel; and sRGB linearization (the piecewise gamma curve defined in IEC 61966-2-1) is applied before the perceptual-space calculations.
3
Perceptual color spaces computed from scratch
oklch() is computed using Björn Ottosson's reference 3×3 matrices (LMS cube-root space). lab() and lch() use Bradford chromatic adaptation to convert from the D65 white point to D50, which matches how CSS Color 4 defines lab(). These are the same formulas used in browser rendering engines — implemented here without any external dependency.
4
WCAG contrast and lightness scale
Relative luminance is calculated per the WCAG 2.1 formula (linearized R, G, B weighted 0.2126/0.7152/0.0722) and the contrast ratio against white and black is graded AA-large, AA, AAA, or Fail. A nine-step lightness strip is generated by stepping the HSL lightness channel from 10% to 90%, letting you click any swatch to convert that shade.

Related Tools

🎨

Color Picker & Palette Generator

Pick colors, convert between HEX/RGB/HSL, and generate harmonious palettes.

Try it

🎨

Random Color Generator

Generate random colours one at a time or as a palette of five, lock the ones you like, copy HEX, RGB or HSL values and export the palette as PNG or CSS.

Try it

🎨

Color Palette Generator

Generate complementary, analogous, triadic, and monochromatic color palettes from any base color. Copy hex codes in one click.

Try it

Free Color Converter

Common uses

How It Works

Related Tools

Color Picker & Palette Generator

Random Color Generator

Color Palette Generator

Frequently Asked Questions