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 editorTints & Shades
Lighter and darker steps of a color. Export as HEX, RGB, HSL or CSS variables.
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?
Tints are lighter versions of a color, shades are darker ones. Together they form a scale for hover states, backgrounds and borders.
How it works
Pick a base color, set the number of tints and shades and copy the values as HEX, RGB, HSL or CSS variables.
Try the Tints & Shades nowFAQ
- What is the difference between a tint and a shade?
- A tint is a color mixed with white, a shade is a color mixed with black.
- Which method should I choose?
- The OKLCH method only changes lightness and keeps the colorfulness, so steps stay vivid. Mixing in OKLab looks even, mixing in sRGB matches classic tools like Sass.
- How do I use the CSS variables?
- Paste the block into your stylesheet and use the colors with var(), for example var(--primary-tint-2).
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