Real HTML, using your exact tokens. Preview controls are interactive examples; nothing is submitted.
Extend your system Custom roles & editable color scales
Keep product-specific roles and reusable scales with this project. They travel with your share link, saved direction and exports. Generation preserves them; Undo includes every change.
Custom roles
Text and UI roles are checked against both page and surface in each theme. Decorative roles are exported without a pass/fail claim. Lock a role to protect it during repair.
Named color scales
Build separate brand, neutral or accent scales. Edit every hex or adjust hue, chroma and lightness together. Adding a scale does not recolor your existing roles.
Make the decision with evidence
Make every detail readable.
Each check names the foreground, the background, and the threshold. Repairs hold your page, surface and locked colors. They can leave unresolved pairs when those constraints conflict.
UI checks use 3:1 for meaningful boundaries and an offset focus ring against page or surface. This does not test every WCAG criterion, font, image, gradient, overlay, or interaction state. A palette is never a whole-site accessibility certificate.
Explore the full pair matrix
Rows are foregrounds; columns are backgrounds. Decorative combinations are included for exploration and are not required to pass.
A tonal scale for your brand
Eleven OKLCH lightness steps, gamut-mapped into sRGB. These are exploration tokens; component checks use your actual role colors above.
Keep the good decisions
Made for your next project.
Both themes. The original brand. Named roles. Take the code—and the contrast evidence—with you.
Take it to Figma or Adobe
Matching Light and Dark variable files, Adobe swatches, editable SVG layouts, CSS and your project backup.
Unzip the download.
In Figma’s Local variables, create a collection and drag both *.tokens.json files into it. Modes depend on your plan.
Import the SVG artwork separately, then bind its fills to your variables as needed.
Adobe: load website-colors.ase through the swatch-library import. SVG artwork uses editable shapes and text with static fills.
Download a local development plugin with this project’s colors embedded. It creates or updates variables and builds editable, variable-bound sample components. Choose separate collections or paired modes.
Create a local UI plugin in Figma Desktop’s Development menu, retain its assigned ID, then copy the downloaded code and manifest settings. API-contract tests pass; signed-in application behavior still needs verification. This is development-plugin source.
Project JSON and share links restore both themes, edits and locks. A saved comparison stays in this tab only. If your browser blocks a download, copy the code into a file.
How the color tools work
Contrast uses WCAG 2.2 relative luminance for opaque sRGB colors, evaluated before display rounding. Generation explores OKLCH; repairs search 1,001 lightness steps, reduce chroma to stay in gamut, and rank passing rounded hex colors by Oklab distance. That is a defined search, not a promise of the globally nearest color. Button and accent labels use whichever of black or white has stronger contrast.
Every edit, repair, import and export runs in your browser. No sign-in. Drafts and named directions stay in this browser; export a backup to keep a separate copy. New share links store the project after the URL’s #, which browsers do not send in HTTP requests. Starting colors passed in ?brand or older ?colors links are part of the page request.
color palettes