Color Picker (hex / rgb / hsl / hwb)

Convert a color between hex, RGB, HSL, HWB, and CMYK. Reports relative luminance and WCAG 2.2 contrast ratio against white and black.

Inputs

With or without #. 3-digit shorthand (#1AE) is expanded.

Result

Loading calculator…
—

How to use this calculator

  • Pick an input format.
  • Read the equivalent representations in the breakdown.
  • Use the contrast rows to check WCAG AA (≥4.5:1) or AAA (≥7:1) against your background.

About this calculator

Designers move between hex, RGB, HSL, and HWB depending on context — hex for code, RGB for raster pipelines, HSL for theme tokens, HWB for accessible-design tooling. This converter does all four at once and adds the CSS-modern CMYK approximation plus the WCAG-2.2 contrast ratio against pure white and pure black. The luminance is computed exactly the way browsers and accessibility checkers do it, so the contrast numbers match what axe, Lighthouse, and Stark will report.

How it works — the formula

L = 0.2126·R’ + 0.7152·G’ + 0.0722·B’ (sRGB linear) contrast = (max(L1,L2)+0.05) / (min(L1,L2)+0.05)

The CIE luminance weights match human luminous-efficiency sensitivity. The +0.05 offset prevents division-by-zero and matches CRT ambient-light assumptions baked into the WCAG formula.

Sources: W3C WCAG 2.2 §1.4.3 · CSS Color Module Level 4 · IEC 61966-2-1 — sRGB colour space

Worked examples

Example 1
Brand blue #1A8FE3
Inputs:
hex=#1A8FE3
Output:
rgb(26,143,227), hsl(207 78% 50%)
Example 2
Pure white
Inputs:
hex=#FFFFFF
Output:
L=1.0, contrast vs black = 21.00:1 (AAA)
Example 3
Mid-gray #808080
Inputs:
hex=#808080
Output:
L≈0.216, contrast vs white = 3.95:1

Limitations

  • CMYK is uncalibrated — use a colour-managed profile for print.
  • WCAG contrast is sRGB-display-targeted.
  • No APCA (WCAG 3 draft) contrast model.

Conversions use standard W3C / CIE / sRGB formulae and match browser-native colour-conversion behaviour.

Frequently asked

What is the difference between HSL and HWB?+
HSL parameterises a colour by lightness (0=black, 1=white) with saturation as a separate axis. HWB uses whiteness (how much white is mixed in) and blackness (how much black) — it is easier to reason about in design tooling.
How is the contrast ratio computed?+
Per WCAG 2.2 §1.4.3: compute relative luminance L using sRGB linearisation, then contrast = (L_brighter+0.05)/(L_darker+0.05). Threshold: ≥4.5 for AA, ≥7 for AAA.
Why is CMYK only approximate?+
CMYK is device-dependent — the actual ink mix depends on the press, paper, and ICC profile. Use a real CMYK profile for print colour matching.
What is the WCAG contrast threshold for UI components?+
WCAG 2.2 §1.4.11 requires 3:1 minimum contrast for non-text components (form borders, icons, focus rings).
Does this match what my browser displays?+
Yes — the conversions use the canonical W3C / CIE formulae implemented by every modern browser CSS engine.

Related calculators

Percentage Math Calculator
Calculate what X% of a value is, find what percentage one number is of another, or compute the percentage change between two numbers.
Hex / Binary / Octal / Decimal Converter
Convert numbers between hexadecimal, binary, octal, and decimal. Shows the bit pattern grouped by nibble + the two’s-complement representation for negative values.
Tip Split Calculator
Compute tip and split a restaurant bill evenly among diners.
Fuel vs Electric Car Cost Comparison
Annual fuel cost (gas car) vs annual electricity cost (EV) for the same mileage.
EV Charging Cost Calculator
Cost per session: kWh delivered × $/kWh, accounting for charger efficiency.
Solar Panel Payback Period
System cost / annual savings = years to break even on a residential solar install.

More tools you might like

Hand-picked tools that pair well with this one — same audience, same intent.

Hex / Binary / Octal / Decimal Converter
Calc

Convert numbers between hexadecimal, binary, octal, and decimal. Shows the bit pattern grouped by nibble + the two’s-complement representation for negative values.

Percentage Math Calculator
Calc

Calculate what X% of a value is, find what percentage one number is of another, or compute the percentage change between two numbers.

Percentage Calculator
Finance

Six-mode percentage tool — X% of Y, X is what % of Y, % change, % difference (symmetric), add %, and subtract %.

Hex / RGB / HSL Color Converter
Calc

Convert a color between HEX, RGB, and HSL formats, with the parsed channel values and CSS-ready strings.

WCAG Color Contrast Checker
Calc

Check the contrast ratio between a text color and background and whether it passes WCAG AA and AAA for normal and large text.

Color Palette Generator
Calc

Generate a harmonious color palette — complementary, analogous, triadic, tetradic, or monochromatic — from a base color.