Color Palette Generator
Harmonies, Tailwind shades and exports from any color. Runs in your browser.
About this color palette generator
This palette generator builds matching color schemes from one base color, or at random, for designers and front-end developers. You also get a 50 to 950 shade scale and code you can paste straight into CSS or Tailwind.
Press Space for a fresh palette. Lock the swatches you like and they stay put while the rest change around them. Each swatch and shade shows its WCAG 2.2 contrast with white or black text, so you can see right away which colors can carry a label.
Already have a photo or logo with the colors you want? Pull them out with the image color extractor first, then paste one here as your base.
Features
Six color harmonies
Analogous, complementary, split complementary, triadic, tetradic and monochrome, all calculated from your base color in OKLCH.
Space to generate, lock to keep
Press Space or click Generate. Locked swatches never change, and new colors are built around the first locked one.
Tailwind-style shades 50 to 950
Click a swatch to see eleven shades. Your color lands exactly on the closest step, and the tool marks which one.
Contrast on every color
Every swatch and shade shows the better text color, its WCAG ratio and a rating: AAA, AA, AA Large or Fail.
Code export in five formats
CSS custom properties, a Tailwind v4 @theme block, a Tailwind v3 config, SCSS variables with a map, or JSON. Values in HEX or OKLCH.
PNG swatch image
Download an image of the palette with HEX and OKLCH labels, with or without the shade row.
How to use the color palette generator
- 1Enter a base color and pick a harmony, or press Space for a random palette.
- 2Lock the colors you like and click a swatch to see its 50–950 shades.
- 3Choose an export format and copy the code or download a PNG.
When to use it
Starting a design system
Enter your brand color, pick a harmony for accents, and export the full scale as Tailwind or CSS variables.
Exploring ideas fast
Press Space until a color catches your eye. Lock it. Keep pressing.
Adding a custom Tailwind color
Generate the scale for one color and paste the @theme block or config into your project.
Choosing button and badge colors
See which shades can hold white text before you commit. For an exact text and background pair, finish in the Contrast Checker.
What do complementary, analogous and triadic colors mean?
A harmony is a rule for picking hues by their angle on the color wheel. Your base color sits at one point and the others are placed at fixed angles from it. If the palette has more colors than the rule has hues, you get lighter and darker versions of the same hues.
- Analogous: neighbors up to 30 degrees on each side. Calm.
- Complementary: the hue 180 degrees away. Strong contrast.
- Split complementary: the two hues beside the opposite, at 150 and 210 degrees. Contrast with less tension.
- Triadic: three hues 120 degrees apart.
- Tetradic: four hues 90 degrees apart. Works best when one color dominates.
- Monochrome: one hue at different lightness and chroma.
Why build palettes in OKLCH instead of HSL?
HSL lightness lies to you. Pure yellow and pure blue both have 50% HSL lightness, but in OKLCH their lightness is about 97% and 45%. Rotate hues in HSL and the palette looks uneven.
OKLCH, defined in CSS Color Module Level 4, describes a color by lightness, chroma and hue in a model fitted to human vision. Keep the lightness, turn the hue, and the new color looks about as bright. When a result falls outside what a normal sRGB screen can show, the tool lowers chroma until it fits and keeps lightness and hue. If you need the same color in RGB, HSL or HEX, the Color Converter shows them all.
How are the 50 to 950 shades calculated?
There are eleven steps. Each has a target lightness close to the default Tailwind CSS v4 palette, from about 97.5% at 50 down to 27% at 950.
Your color goes on the step closest to its own lightness and is kept exactly. For example, #2336ff has an OKLCH lightness of 49.5%, so it lands on 700. Neighboring steps are nudged to blend into it. Chroma peaks in the middle and tapers at both ends, which avoids neon tints near white and mud near black.
How do I use the exported code in Tailwind or CSS?
CSS variables work in any stylesheet. For Tailwind v4, paste the @theme block into your main CSS file and classes such as bg-primary-500 work at once. For Tailwind v3, merge the colors object into theme.extend in tailwind.config.js. SCSS gives one variable per color plus a map you can loop over. JSON suits design tokens, and you can check or pretty-print it in the JSON Formatter & Validator.
Why use Mavros
| Mavros | Typical upload sites | |
|---|---|---|
| Color math | Harmonies and shades in OKLCH | HSL rotation with uneven brightness |
| Shade scale | 50 to 950, your color kept exactly | Separate tool or paid feature |
| Code export | CSS, Tailwind v4 and v3, SCSS, JSON, free | Limited formats or behind sign-in |
| Contrast | WCAG rating on every swatch and shade | Needs a separate checker |
| Randomness | Browser's secure random generator | Basic pseudo-random |
| Privacy and ads | Runs in your browser, no account, no ads | Account prompts and ads |
Tips
- Lock your brand color first, then press Space. Every new palette is built around it.
- Space does nothing while a button or field has focus. Click an empty part of the page first.
- Aim for 4.5:1 or more for body text. Large headings and icons only need 3:1.
- Want a smooth background from two palette colors? Copy their HEX values into the CSS Gradient Generator.
Questions
How do I make a color palette from one color?
Type or pick your color in the Base color field, then choose a harmony. Your color takes the first slot and the others update at once. Click it to see its shade scale.
How do I generate a random color palette?
Press Space or click Generate. Space only works when no button or text field has focus. Lock any color you want to keep and it stays on the next press.
What colors go well together?
Colors picked by a harmony rule usually work. Analogous sets feel calm and complementary pairs give strong contrast. Use one main color and treat the rest as accents.
How do I create Tailwind CSS shades for a custom color?
Click the swatch, name the scale, choose Tailwind v4 or Tailwind v3 under Export, and copy the code. Version 4 uses an @theme block in your CSS. Version 3 uses tailwind.config.js.
How many colors should a palette have?
Five is a good start for most interfaces: one primary, one or two accents and a neutral. This tool supports 2 to 10 swatches, and each one can get its own 50 to 950 scale.
How do I know if text will be readable on a color?
Check the badge on the swatch or shade. It shows whether white or black text is better and the WCAG ratio. WCAG 2.2 level AA needs 4.5:1 for normal text and 3:1 for large text.
Can I export my palette as an image?
Yes. Click Download PNG for an image of the swatches with HEX and OKLCH labels. Tick Shades in image to add the 50 to 950 row underneath.
Are my colors saved or uploaded?
No. The palette lives only in this browser tab and nothing goes to a server. Export it before you close the page.