Your palette

Edit a hex code, click a swatch to pick a color, paste a list, or import from an image. Lock any color you do not want the fixer to touch.

Diagnosis

Every check runs on measured values: lightness, chroma, hue, contrast and color vision. Fixes keep what they can and tell you what they change.

Hue and lightness

The wheel shows where each color sits and which harmony pattern fits best. The ladder shows whether the palette has a real range from light to dark.

Contrast

Every text and background pairing, scored with WCAG 2, APCA or both. Select a pair to see it at real sizes and fix it.

Roles and preview

Give each color a job. The preview uses your roles, in light and in dark, on a landing page, a dashboard and a form.

Shade ramps

Eleven steps per role, each built to hit a set contrast against white, so every step has a known job. Click a step to add it to your palette.

System tokens

Hover, pressed, disabled, focus ring, links and status colors, derived from your roles and checked in light and dark.

Color vision

How the palette looks to people with common types of color blindness.

Report and method

A record of what passed, what changed and how far it moved, plus the math behind every check.

Take it with you

Copy or save the finished palette as code or design tokens, with dark-mode values and shade ramps included.