Color Scheme Generator — Harmonious Palettes from a Base HEX (Free)
Fine-tune selected color
Export palette
:root {
--color-1: #7C3BED;
--color-2: #3BACED;
--color-3: #3B53ED;
--color-4: #D53BED;
--color-5: #ED3BAC;
}Related external tools
Some links are affiliate links.
Related tools
This free color palette generator creates harmonious color combinations from a base color using established color theory. Enter a HEX code, pick a color, or click Random — then choose a scheme such as complementary, analogous, triadic, tetradic or monochromatic to instantly generate a balanced palette. Lock any color you like and reshuffle the rest, fine-tune lightness and saturation with sliders, copy any HEX with one click, or export the entire palette as CSS variables, Tailwind config colors or JSON. Each color shows which text color (white or black) is more readable on it, along with the WCAG AA contrast ratio. Everything runs in your browser — your colors are never sent to a server.
How to use
- Enter a HEX code (e.g. #7C3AED), type a CSS color name (e.g. rebeccapurple), use the color picker, or click Random to start from a random base color.
- Choose a color scheme — Complementary, Analogous, Triadic, Tetradic, Split-Complementary or Monochromatic — and the palette updates instantly.
- Set the number of colors (3–8) to control palette size.
- Click the lock icon on any color to keep it. Click Regenerate (or press Space when not in an input field) to reshuffle only the unlocked colors.
- Select a swatch and use the Lightness / Saturation sliders to fine-tune it. Switch scope to 'All colors' to adjust the whole palette relatively.
- Copy any HEX with the copy button, copy all HEX at once, or use the Export tab to get CSS variables, a Tailwind colors block, or JSON — then click Download.
- Use 'Copy palette URL' to share the exact palette with others.
Color schemes (color harmony)
A color scheme is a rule for choosing colors that look harmonious together, based on their positions on the color wheel. The hue relationships are the backbone; lightness and saturation variation adds life.
Complementary
Two colors directly opposite on the wheel (+180°). High contrast, eye-catching. Ideal for accents that pop.
Split-Complementary
The base color plus the two neighbors of its complement (+150° / +210°). Softer tension than complementary, easier to balance.
Analogous
Adjacent hues (±30°). Cohesive and calm — great for backgrounds and natural color stories.
Triadic
Three hues evenly spaced around the wheel (+120° / +240°). Balanced yet vibrant — strong and versatile.
Tetradic
Four hues at 90° intervals forming a rectangle. Rich and varied; needs careful balance of warm and cool.
Monochromatic
Multiple lightness/saturation variations of a single hue. The safest scheme — always cohesive and minimal in risk.
Tip: if you're unsure, start with Analogous or Monochromatic — they're the hardest to go wrong with.
Features
Generate from a base color or go random
Enter any HEX code, CSS color name or use the color picker to set a base color, then let the scheme generate the rest. Or click Random for a completely fresh starting point.
Lock colors and regenerate the rest
Found a color you love? Click the lock icon to pin it. Clicking Regenerate (or pressing Space) shuffles only the unlocked slots — a quick way to explore variations while keeping the keepers.
Fine-tune lightness and saturation
Select a swatch and drag the Lightness or Saturation slider to tweak it precisely — without touching the hue harmony. Switch scope to 'All colors (relative)' to shift the whole palette lighter or darker at once.
One-click HEX copy
Click the copy icon on any swatch to instantly copy its HEX to your clipboard. Use 'Copy all HEX' to grab every color in the palette at once.
Export to CSS variables, Tailwind config or JSON
Switch to the Export tab and pick your format. CSS Variables gives you a :root block (--color-1, --color-2, …). Tailwind gives a ready-to-paste theme.extend.colors block. JSON gives a simple array — paste it anywhere. Color values are always uppercase HEX, never locale-formatted.
Contrast and readability hints
Each swatch shows whether white or black text is more readable on it, the WCAG contrast ratio, and an AA pass/fail badge — so you can spot accessibility issues at a glance. Results are shown with both color and text, not color alone.
Use cases
Define brand colors from a logo HEX
Paste your brand's primary HEX, pick Analogous or Complementary, and instantly see accent, background and text color candidates that harmonize with your logo.
Paste straight into CSS / Tailwind
Export as CSS variables (:root { --color-1: ... }) or as a Tailwind theme.extend.colors block and paste directly into your codebase — no manual conversion needed.
Check color accessibility
Use the per-swatch readability hints to verify that text placed on each color meets WCAG AA (4.5:1 contrast). Catch problem colors before you build.
Notes and tips
- Schemes give you a harmonious starting point, not a guaranteed result. The right palette always depends on the context, proportions and the specific shades you end up using.
- Contrast is a guide: the WCAG calculation is accurate, but real-world readability also depends on font size, font weight and surrounding colors. Use it as a first check, not the final word.
- Monochromatic palettes may look desaturated at extreme lightness values — this is expected. Keeping the base color's saturation moderately high helps.
- Your color data is never sent to a server. Sharing works by encoding the palette in the URL — only what you deliberately copy and share ever leaves your device.
Frequently asked questions
- Can I generate a color palette from a HEX code?
- Yes. Enter any HEX code (with or without #) in the Base Color field, and the tool immediately generates a harmonious palette using the selected color scheme. CSS color names like 'rebeccapurple' also work.
- Which color schemes can I choose from?
- Six: Complementary (+180°), Split-Complementary (+150°/+210°), Analogous (±30°), Triadic (+120°/+240°), Tetradic (+90° each), and Monochromatic (single hue, varying lightness). Each is based on standard color theory.
- Can I lock a color and regenerate only the rest?
- Yes. Click the lock icon on any swatch to pin it. Clicking Regenerate or pressing Space then shuffles only the unlocked slots, letting you iterate quickly while keeping the colors you like.
- Can I export to CSS variables, Tailwind or JSON?
- Yes. Open the Export tab and choose CSS Variables (:root { --color-1: #...; ... }), Tailwind config (theme.extend.colors → palette: { 1: '#...', ... }), or JSON ({ "palette": ["#...", ...] }). Each can be copied or downloaded.
- How many colors can the palette have?
- 3 to 8. Use the slider to choose. The tool distributes the colors naturally across the chosen scheme, filling extra slots with lightness variations (tints and shades) when the scheme has fewer key hues than the requested count.
- Can I check whether text is readable on each color?
- Yes. Each swatch shows the recommended text color (white or black), the WCAG contrast ratio, and an AA pass/fail label — in text, not just color, so it's readable for everyone.
- Are my colors sent to a server?
- No. All palette generation, adjustment, contrast calculation and export happen entirely in your browser. Your colors are never uploaded or stored. URL sharing only happens when you deliberately copy the share URL.