Skip to content
AppBox

Color Picker & Contrast Checker

Pick colors, convert between HEX, RGB, HSL and OKLCH, build palettes and check WCAG contrast ratios.

Works offlineDesign & Media

Pick a colour

#5B5BD6

Presets

Text contrast

How this colour performs as text.

On white5.37:1
On black3.91:1

Every format

Click any value to copy it.

HEX#5B5BD6
RGBrgb(91, 91, 214)
HSLhsl(240, 60%, 60%)
HSVhsv(240, 57%, 84%)
OKLCHoklch(0.54 0.184 278.3)

Tints and shades

Stepped in OKLCH, so the hue stays put as lightness changes.

Harmonies

Complementary

Opposite on the wheel — maximum contrast for a single accent.

Analogous

Neighbouring hues — calm, cohesive, low tension.

Triadic

Three evenly spaced hues — vivid but balanced.

Split complementary

Softer than complementary, still high contrast.

Tetradic

Two complementary pairs — needs one dominant colour.

About the color picker & contrast checker

Choose a color and see it expressed in HEX, RGB, HSL, HSV and OKLCH at once, each ready to copy. Generate tints, shades, and complementary, analogous and triadic harmonies from any base color. The contrast checker scores any foreground and background pair against WCAG AA and AAA for both normal and large text, and tells you how far you are from passing.

This tool runs entirely in your browser. Nothing you type is uploaded, and it keeps working with no connection at all — including as an installed app.