Color Toolbox

Pick a color to convert it across HEX, RGB, HSL and OKLCH, build harmonious palettes, pull colors out of an image, and verify WCAG contrast. Everything runs locally.

{{hex.toUpperCase()}}≈ {{colorName}}

HEX

RGB

HSL

OKLCH {{oklchStr}}

Harmony palettesfrom the current color

Brand palettes{{BRANDS.length}} presets

Preset

Click a swatch to copy its HEX.

My palette{{myColors.length}} color{{myColors.length===1?'':'s'}} · saved in this browser

Empty. Add the current color, or import from a harmony or brand palette above.

Extract from image

Drop an image here, or click to upload. Processed in the browser only. Loaded — drop another image to replace.

Colors {{extractN}}

WCAG contrast checker

Large heading text
Normal body text — the quick brown fox jumps over the lazy dog.

{{ratio.toFixed(2)}}:1 contrast ratio

AA · normal{{ratio>=4.5?'✓ Pass':'✕ Fail'}}

AA · large{{ratio>=3?'✓ Pass':'✕ Fail'}}

AAA · normal{{ratio>=7?'✓ Pass':'✕ Fail'}}

AAA · large{{ratio>=4.5?'✓ Pass':'✕ Fail'}}

About this tool

Color math runs on HSL for the harmony palettes (rotating and adjusting hue/saturation/lightness) and on the OKLCH color space for a perceptually-uniform readout — unlike HSL, equal steps in OKLCH look like equal steps to the eye.

Image color extraction uses a median-cut-style bucket quantization on a downscaled copy of the image, entirely on an in-page <canvas>. WCAG contrast follows the standard relative-luminance formula from the WCAG 2.1 spec.

Everything runs locally in your browser. "My palette" is saved to this browser's localStorage only — nothing is uploaded.