What contrast ratio do I need?

4.5:1 for normal body text under WCAG AA, 3:1 for large text (roughly 18pt, or 14pt bold). AAA requires 7:1.

Why does HSL give me uneven palettes?

Because its lightness is not perceptual — the same value looks much brighter in yellow than in blue. OKLCH fixes this and is a better basis for generated palettes.

What does the vision-deficiency simulation show?

How your colours appear under the common forms of colour blindness, which affects around one in twelve men. It is the quickest way to catch a red/green status indicator that carries meaning by colour alone.

Are named CSS colours supported?

Yes, all 148 of them, in both directions.

Color Converter · OneUtil

Color — hex · rgb() · hsl() · oklch()PickerAlpha — 100%

Paste any CSS color — every format updates live. The last valid color stays shown while you type.

Swatch

#f5a524 · alpha 100%

CSS formats

HEX#f5a524

RGBrgb(245 165 36)

HSLhsl(37 91.3% 55.1%)

OKLCHoklch(78.2% 0.1585 72.3)

WCAG 2.1 contrast — color composited over each background first

On white

2.04:1

✕ AA✕ AA large✕ AAA

On black

10.29:1

✓ AA✓ AA large✓ AAA

On custom background

1.9:1

✕ AA✕ AA large✕ AAA

Harmonyclosest CSS name: goldenrod

Colour-vision simulation — how this colour reads to others

Normal

Protanopia

Deuteranopia

Tritanopia

Shade scale — OKLCH, constant chroma & hue · click a shade to copy

About Color Converter

Convert colours between HEX, RGB, HSL and OKLCH, build harmonies, check WCAG contrast, and simulate colour vision deficiencies.

What it does

Enter a colour in any notation and get every other, including named CSS colours. Generate harmonies — complementary, analogous, triadic — check contrast ratios against WCAG thresholds, and preview how a pairing looks to someone with a colour vision deficiency.

Why OKLCH is worth knowing

HSL's lightness is not perceptual: yellow at 50% lightness looks far brighter than blue at 50%, so a palette built by rotating hue at fixed lightness comes out uneven. OKLCH is built on a perceptual model, so equal lightness values actually look equally light. That makes it much better for generating a ramp or a set of accent colours that hold together, and it is supported in all current browsers.

Contrast is a requirement, not a preference

WCAG AA asks for a contrast ratio of at least 4.5:1 for body text and 3:1 for large text; AAA raises that to 7:1. The checker gives the ratio and the pass or fail against each threshold, for both text sizes.

Common questions

What contrast ratio do I need?: 4.5:1 for normal body text under WCAG AA, 3:1 for large text (roughly 18pt, or 14pt bold). AAA requires 7:1.
Why does HSL give me uneven palettes?: Because its lightness is not perceptual — the same value looks much brighter in yellow than in blue. OKLCH fixes this and is a better basis for generated palettes.
What does the vision-deficiency simulation show?: How your colours appear under the common forms of colour blindness, which affects around one in twelve men. It is the quickest way to catch a red/green status indicator that carries meaning by colour alone.
Are named CSS colours supported?: Yes, all 148 of them, in both directions.

Related tools

Regex Tester — Live matches, a token-by-token explanation, and portability notes.
Cron Parser — Build schedules visually, explain them, preview next runs.
Password Generator — Strong passwords and passphrases, with an honest strength estimate.
Text Toolkit — Case conversion, line operations, escaping, live counts and placeholder text.