Color Palette Generator
Harmonious color palettes at the press of the space bar. Lock colors, pick a harmony, check contrast and export as CSS.
Open in editorContrast Checker
Check whether text and background are readable under WCAG, see the colors with color vision deficiency and apply better colors in one click.
Open the generatorRuns right in your browser. Your graphics are made on your device.
Start from a preset
Pick a preset and it opens right in the editor, ready to adjust.
What is it?
A contrast checker measures how much text and background colors differ in lightness. The Web Content Accessibility Guidelines (WCAG 2) set minimum ratios so text stays readable with low vision, glare or poor screens.
How it works
Pick the text and background colors with the color picker, a HEX value or the eyedropper and read which WCAG levels pass. If the contrast falls short, apply the nearest color that reaches AA or AAA in one click. The simulation shows how the pair looks with color vision deficiency.
Try the Contrast Checker nowFAQ
- What do AA and AAA mean?
- AA is the usual minimum: 4.5:1 for normal text and 3:1 for large text. AAA is stricter and asks for 7:1 and 4.5:1. UI components and graphics need 3:1.
- When is text large?
- From 18 point (24 px) in regular weight or from 14 point (about 18.7 px) in bold.
- Why does Musterli round the contrast down?
- So a value that just misses never looks like a pass. Musterli shows 4.49:1 as 4.4:1, because under WCAG it is not enough for AA.
- How does the color vision simulation work?
- Musterli converts the colors with the published matrices by Machado, Oliveira and Fernandes (2009); achromatopsia keeps only the lightness. The simulation is an approximation and does not replace testing with affected people.
- How does Musterli find a better color?
- It only moves the lightness in the OKLCH color space and keeps hue and chroma as far as possible. Your brand color stays recognizable and still reaches AA or AAA.
Ready-made color palettes
More than 30 palettes by mood, with HEX, RGB and OKLCH values to copy.
Browse the palette collectionRelated generators
All generators in Colors
Tints & Shades
Lighter and darker steps of a color. Export as HEX, RGB, HSL or CSS variables.
Open in editor
Tailwind Color Palette
The eleven Tailwind steps 50 to 950 from one color. Export for tailwind.config.js, @theme, OKLCH and HEX.
Open in editor
Palette from Image
Drop in a photo and get its main colors with their share in percent. The image stays in your browser.
Open in editor