Color Converter, Palettes & WCAG Contrast

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.

Export My paletteASE, GPL and Tailwind CSS

Exports use every valid colour in My palette, including its names. ASE is an Adobe Swatch Exchange binary file; GPL opens in GIMP, Inkscape and compatible editors; Tailwind CSS is an @theme static file for Tailwind 4 — import it after @import "tailwindcss".

Palette name

Add colours above before exporting.

Add at least two colours to My palette to compare every text/background pairing.

Semantic theme tokensturn palette colours into UI roles

My palette stores raw colours. Tokens give them a job: background, text, primary action and so on. They are exported as CSS variables or JSON for use in an interface.

Auto-map uses the lightest/darkest saved colours for light and dark backgrounds/text. The current converter colour ({{hex.toUpperCase()}}) becomes Primary. It does not silently change tokens when you edit My palette, so a deliberate override is never lost — click Auto-map again to refresh all roles.

Add colours above to enable Auto-map.

Fine-tune individual roles (optional)

Use this only when a role needs an exception. Pick a saved palette colour, use the current converter colour, or enter an exact HEX value.

Exports use :root for light and [data-theme="dark"] for dark mode.

Gradient builderup to 6 colour stops

Set the direction, then add current colours or tune a stop’s colour and position. The preview and exported CSS use the same ordered stops.

Direction {{gradientAngle}}°

{{stop.position}}%

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.