What’s the difference between HSL and HSV?

Both have hue (H, 0–360°) and saturation (S, 0–100 %), but the third axis differs. HSL uses "lightness": 0 % = black, 50 % = pure color, 100 % = white. HSV uses "value": 0 % = black, 100 % = pure color (never white). HSL is more intuitive for shading colors towards black/white; HSV is closer to how screens produce light.

What does the WCAG contrast ratio say?

The contrast ratio is a number from 1 (no contrast) to 21 (black on white). WCAG 2.1 requires: AA = 4.5:1 for normal text and 3:1 for large text (18 pt / 14 pt bold); AAA = 7:1 normal, 4.5:1 large. Graphical elements and UI components need 3:1. The tool marks each level as pass/fail.

Why does CMYK often look different from RGB?

RGB is additive (screens combine light), CMYK is subtractive (ink absorbs light). CMYK has a smaller gamut than sRGB, especially saturated greens and blues look duller in print. Precise conversion requires an ICC profile for the printer and paper. The tool’s approximation is useful as an indication, not for final proofing.

Is #FFF the same as #FFFFFF?

Yes. The short form (3 digits) duplicates each digit: `#FFF` = `#FFFFFF` (white), `#F00` = `#FF0000` (red). The format is CSS-supported but only allows 4,096 colors. Alpha variants exist too: `#FFF8` = `#FFFFFF88` (white with ~53 % opacity).

HTML color picker

How it works

Pick a color from the map or type a value, and get it in HEX, RGB and HSL ready to paste into CSS. The contrast check shows whether your text color meets WCAG AA and AAA against a chosen background.

About this tool

Color tool for picking, converting and analysing colors across the popular color systems: HEX (`#ff8800`), RGB (`rgb(255,136,0)`), HSL (`hsl(32,100%,50%)`), HSV/HSB and CMYK. The tool provides a visual color picker, real-time conversion between formats, and WCAG contrast analysis against background colors, useful for accessibility. All common color formats from CSS, design software and print are supported. The picker and all calculations run locally in your browser, with no tracking or storage.

How to use it

Use the color picker or type a color in HEX, RGB, HSL or HSV.
All other formats update automatically.
Enter a background color to see the WCAG contrast ratio and rating (AA/AAA).
Copy the chosen color with one click from your preferred format.
Everything runs locally, your color choice is neither stored nor sent.

Examples

Brand color

Input#0055ff

Outputrgb(0, 85, 255) = hsl(220, 100%, 50%) = hsv(220, 100%, 100%)

An intense blue. HSL shows it’s a pure blue (hue 220°) with 100 % saturation and 50 % lightness.

Contrast check

InputText #333333 on #f5f5f5

OutputContrast 12.63:1, WCAG AAA ✓

AAA requires ≥ 7:1 for normal text. This combo passes with plenty of margin.

CMYK for print

Input#c8102e (Posten red)

Outputcmyk(0%, 92%, 77%, 22%)

CMYK is an approximation, screens use sRGB while print depends on paper, ink and ICC profile.

Common use cases

Designing brand identity with precise HEX/HSL values for style guides.
Checking that text color has sufficient contrast against background (WCAG 2.1 AA/AAA).
Converting design values from Figma/Sketch to CSS code.
Finding CMYK approximations before sending print material to a printer.
Building color palettes, tweak HSL for variants (darker/lighter) while staying on brand.
Debugging unexpected CSS colors by comparing rendered vs specified values.

Frequently asked questions

What’s the difference between HSL and HSV?: Both have hue (H, 0–360°) and saturation (S, 0–100 %), but the third axis differs. HSL uses "lightness": 0 % = black, 50 % = pure color, 100 % = white. HSV uses "value": 0 % = black, 100 % = pure color (never white). HSL is more intuitive for shading colors towards black/white; HSV is closer to how screens produce light.
What does the WCAG contrast ratio say?: The contrast ratio is a number from 1 (no contrast) to 21 (black on white). WCAG 2.1 requires: AA = 4.5:1 for normal text and 3:1 for large text (18 pt / 14 pt bold); AAA = 7:1 normal, 4.5:1 large. Graphical elements and UI components need 3:1. The tool marks each level as pass/fail.
Why does CMYK often look different from RGB?: RGB is additive (screens combine light), CMYK is subtractive (ink absorbs light). CMYK has a smaller gamut than sRGB, especially saturated greens and blues look duller in print. Precise conversion requires an ICC profile for the printer and paper. The tool’s approximation is useful as an indication, not for final proofing.
Is #FFF the same as #FFFFFF?: Yes. The short form (3 digits) duplicates each digit: `#FFF` = `#FFFFFF` (white), `#F00` = `#FF0000` (red). The format is CSS-supported but only allows 4,096 colors. Alpha variants exist too: `#FFF8` = `#FFFFFF88` (white with ~53 % opacity).

Technical background

The sRGB color space (IEC 61966-2-1, 1996) is the de facto standard for screens and web. RGB values are integers 0–255 per channel (8-bit), giving 16.7 million colors. HSL and HSV are cylindrical transformations of RGB, conversion is algebraic (no profile needed). CMYK conversion is non-linear and in practice requires ICC profiles for accuracy. WCAG contrast formula: (L1 + 0.05) / (L2 + 0.05) where L is relative luminance computed with sRGB gamma correction: L = 0.2126R + 0.7152G + 0.0722B (after linearisation). Newer color spaces like Display P3 and Rec. 2020 provide wider gamuts for HDR and professional use.