What is the HSL color format and when should I use it?

HSL stands for Hue, Saturation, and Lightness, and it lets you adjust a color in terms that are easy to reason about: raise lightness for a pastel version, lower saturation to gray it out. It's the format most developers reach for in CSS when they need predictable variations like hover or disabled states.

How does the WCAG contrast checker work?

It calculates the color's relative luminance and compares it against white using the official WCAG formula. A ratio of 4.5:1 or higher passes AA for normal text, and 7:1 or higher passes the stricter AAA level.

What's the difference between HEX and RGB colors?

HEX is simply RGB encoded in hexadecimal. `#3A86FF` is exactly `rgb(58, 134, 255)` — each pair of hex digits represents the red, green, and blue channel as a value from 00 to FF.

How do I convert HEX to CMYK for printing?

Enter the hex code and the CMYK values appear automatically alongside RGB and HSL. Keep in mind that CMYK is a print-oriented model, so very saturated screen colors can look slightly muted once printed — check a physical proof for critical brand colors.

How are the complementary colors generated?

They're calculated by rotating the hue angle in HSL space while keeping saturation and lightness fixed. This tool generates four complements at +90°, +150°, +180°, and +270° from your base hue.

Color Converter

Convert colors between HEX, RGB, HSL, and CMYK instantly. Free online color picker with WCAG contrast checker and palette generator.

Updated April 2026

Active Preview

#197FE6

Complementary Colors

Format Conversions

Hexadecimal

RGB (Red, Green, Blue)

HSL (Hue, Saturation, Lightness)

CMYK (Cyan, Magenta, Yellow, Key)

WCAG AA: Fail

WCAG AAA: Fail

4.02:1 vs white

Tip: Click a complementary color swatch to use it. Press Shift+Enter to copy the HEX value.

How to use the color converter

One value, four formats at once — plus a built-in contrast checker

1. Pick or type a color

Use the native color picker, or type a 6-digit hex code like `#3A86FF` directly into the field.

2. Copy the format you need

HEX, RGB, HSL, and CMYK update instantly — click the copy icon next to any of them.

3. Save to a palette and export

"Save to Palette" collects colors as you go; "Export Palette" downloads a ready-to-use CSS file with custom properties.

What this color converter does

Accurate conversion between HEX, RGB, HSL, and CMYK

Built-in WCAG contrast checker

Automatically compares your color against white and tells you whether it passes WCAG AA (4.5:1) and AAA (7:1).

Complementary colors on click

Explore harmonies from four generated swatches at +90°, +150°, +180°, and +270° around the base hue.

CSS custom properties export

Collect colors into a palette and download a finished CSS file with --palette-* variables in one click.

Exact, rounding-free precision

Runs the same formulas browsers use internally, avoiding the small rounding errors common in manual conversions.

Color formats explained

What each notation means and where it's used

Format

Example

HEX

#1A73E8 — the universal shorthand in CSS and design tools

RGB

rgb(26, 115, 232) — red, green, blue channels, 0–255 each

HSL

hsl(217, 89%, 51%) — hue, saturation, lightness

CMYK

cyan/magenta/yellow/key(black) — the standard for print

When you'll reach for this tool

The scenarios that come up most often

Design-to-code handoff

Designers hand off colors in HEX; developers often need RGB for color() functions or HSL for dynamic theming and hover states.

Accessibility audits

Quickly check whether a brand's primary color passes WCAG AA contrast before it ships on a button or headline.

Prepping assets for print

Convert on-screen colors to CMYK before sending logos or brochures to a print shop, so nothing shifts unexpectedly.

Building a design system

Save every brand color into one palette, then export the whole set as CSS custom properties in a single download.

Common mistakes

Assuming on-screen RGB matches printed CMYK exactly

Some vivid screen blues and greens fall outside the printable gamut — always preview the CMYK values before sending files to a printer.

Misreading HSL lightness at 50%

50% lightness is the pure hue; values above it lighten toward white, below it darken toward black — it's not the same axis as HSV brightness.

Forgetting the `#` when pasting hex

Hex codes work here with or without the leading #, but keep the habit — plenty of other tools and CSS itself require it.

Why use this color converter

It shows HEX, RGB, HSL, and CMYK at the same time, so there's no bouncing between four separate single-format converters to get every value you need.

The built-in WCAG contrast checker saves an extra step: you already know whether a color works for text before you leave the conversion screen.

Frequently asked questions

Type or paste a 6-digit hex code and the tool shows the RGB equivalent instantly, no calculation needed. For example, #FF8000 converts to rgb(255, 128, 0) — the pairs of hex digits map directly to the red, green, and blue channels.