Colour Picker

Pick a colour and read it in hex, rgb, and hsl. Get a 9-step tint and shade ramp and check WCAG contrast between any two colours. Everything happens in your browser — nothing is uploaded.

Your colour

Hex / rgb / hsl

Accepts #rgb, #rrggbb, rgb(r, g, b), and hsl(h, s%, l%). Updates the swatch live.

HEX

#1F5FBF

Copy

RGB

rgb(31, 95, 191)

Copy

HSL

hsl(218, 72%, 44%)

Copy

Tint & shade ramp

Four lighter, then the base colour, then four darker. Click a step to make it your main colour.

WCAG contrast

Foreground

Text colour.

Background

Surface colour.

Swap fg / bg Use main as fg Use main as bg

— : 1

AA — body text

— needs 4.5

AA — large text

— needs 3.0

AAA — body text

— needs 7.0

AAA — large text

— needs 4.5

Large sample, 24px.

Body sample at 16px. The quick brown fox jumps over the lazy dog. 0123456789.

Copy

Copy hex

The contrast ratio is the WCAG 2.x relative-luminance formula. The ramp is generated by interpolating HSL lightness, which is not perceptually uniform — treat it as a starting point, not a perceptual scale. Everything runs locally in your browser.