Tints & Shades
Lighter and darker steps of a color. Export as HEX, RGB, HSL or CSS variables.
Open in editorColor Palette Generator
Harmonious color palettes at the press of the space bar. Lock colors, pick a harmony, check contrast and export as CSS.
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 color palette generator puts together colors that work well with each other. Musterli works in the OKLCH color space, so lightness and hue steps look even to the eye.
How it works
Press the space bar for a new palette. Lock the colors you like, choose a harmony and export the palette as CSS variables, a HEX list or an image.
Try the Color Palette Generator nowFAQ
- What do the harmonies mean?
- Analogous uses neighboring hues, complementary uses opposite ones. Triadic spreads three hues evenly, split complementary pairs a hue with the neighbors of its opposite, and tetradic uses four hues in a square.
- What happens to locked colors?
- Locked colors stay when you shuffle. The first locked color acts as the anchor, and the new palette is built around it in the chosen harmony.
- What does the contrast display show?
- The WCAG 2 contrast ratio between each color and its label. AA means at least 4.5:1, AAA at least 7:1 for normal text.
- Can I use the palette in Figma or in code?
- Yes. Copy the HEX list or the CSS variables, or export the palette as SVG or PNG.
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
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