Color Toolkit FREE
Pick, convert and generate colours, palettes, scales and gradients, with WCAG contrast, accessible suggestions and colour vision simulation built in. Everything is computed in your browser.
Picker and conversions
Every notation
Technical details
Contrast
APCA (draft, additional information)
APCA is the perceptual contrast model drafted for WCAG 3. It is not a conformance requirement today and it disagrees with WCAG 2 in both directions, so it is shown as extra information and never as a pass or a fail.
What it looks like
Palettes
Which pairs are readable
Every colour as text on every other. The number is the WCAG contrast ratio; AA is 4.5:1 for normal text and 3:1 for large text and interface parts.
Copy the palette
Scales
Eleven steps built in OKLCH, so the jumps look even rather than merely being even numbers. The result is shaped to paste where a utility framework expects a scale; it is this tool's own ramp and not any framework's palette.
Adjust the ramp
Gradients
From an image
Drop an image here, or choose one
It is read in this tab and never uploaded. Nothing is kept once you leave the page.
Colour vision
A model of what a colour pair loses under the common forms of colour blindness, computed with the Vienot, Brettel and Mollon projection. It is a simulation and not a photograph of what any particular person sees.
Pairs that stop being distinguishable
Taken from the palette. Only pairs that are clearly different in normal vision are listed - two colours that already look alike are a design choice, not a finding.
Every conversion, palette and contrast figure on this page is computed in your browser. An image you drop in is read on a canvas in this tab and is never uploaded.
What these figures mean and what they do not
Computed here, from published formulas
Conversions follow CSS Color Level 4, including the real sRGB transfer curve rather than an approximation of it, and contrast follows the WCAG 2.2 definition. A pair of colours passing the contrast requirement does not make a page accessible: contrast is one success criterion out of many, and this tool measures that one. Everything runs in your browser and nothing is sent anywhere.
FAQ
Are my colours or images sent anywhere?
No. Every conversion, palette, scale and contrast figure is computed in this tab. An image is read on a canvas here and never uploaded; recent colours and your palette are kept in this browser's own storage and you can clear both.
Why OKLCH rather than HSL?
Because HSL's lightness is an average of channels, not something the eye measures. Rotate a hue by 120 degrees in HSL and one of the three results comes out visibly darker than the others; do it in OKLCH and the three read as one family. The same applies to a tint ramp: equal steps of HSL lightness bunch up at the ends. HSL is still shown, because it is what a lot of code is written in.
Does passing the contrast check make my page accessible?
No, and the wording here is careful about it. A pair of colours passes a contrast requirement. Contrast is one success criterion among many - focus order, labels, keyboard paths, motion and structure are all separate - and a page with perfect contrast can still be unusable. Use this to settle the colour question, not the whole question.
What is APCA and why is it in a separate panel?
It is the perceptual contrast model drafted for WCAG 3. It models how contrast actually reads at a given size and weight, which WCAG 2 does not, but it is a draft and it is not what anything is measured against today. Showing it beside the WCAG verdicts as an equal would misrepresent both, so it sits behind a disclosure and says what it is.
How accurate is the colour blindness simulation?
It is the Vienot, Brettel and Mollon projection, applied in linear light, which is the standard way of modelling dichromacy. It shows what a colour PAIR loses, which is the question that matters: whether two things can still be told apart. It is a model of one form of the condition, not a photograph of what any particular person sees, and it says so on the panel.
Can the generated scale be pasted into my framework config?
Yes - the export includes a shape that fits where a utility framework expects a colour scale, alongside CSS custom properties, SCSS variables and JSON. The ramp is this tool's own, built in OKLCH from the colour you gave it; it is not any framework's palette and is not claimed to be.
Website Audit in 2026: The Complete SEO, Core Web Vitals, Accessibility and Security Checklist
A good website audit is not a single Lighthouse score or a list of several dozen automated warnings. It should answer four questions: can a search engine correctly discover and understand the website, can a user complete their task efficiently, is the website fast enough, and does it expose the owner or visitors to unnecessary risk?
Chrome vs Firefox vs Edge vs Safari: what we learned from shipping 9 browser extensions
Nine extensions, four browsers and far more than one `manifest.json` file. We show where shared code really ends, why Safari needs a separate process and which bugs are exposed only by Firefox and extension stores.
Claude Code vs OpenAI Codex vs Gemini CLI: the best AI coding agent in 2026
Claude Code, OpenAI Codex, and Gemini CLI can read repositories, edit files, and run tests, but they were designed for different styles of work. We compare quality, benchmarks, security, parallel execution, extensions, pricing, and privacy.
Build a better web, faster.
We build custom software and solutions tailored to your needs.