Color Palette Generator

Generate beautiful color palettes from any base color. Monochromatic, complementary, triadic, analogous and more. Export as CSS, Tailwind, or JSON.

runs locally on your browser. Your data never leaves your device.

Base Color

Press Space anywhere to randomize

#CEE0FD
#77A8F9
#0B64F4
#07409C
#031E49

Click any swatch to copy its HEX value. Hover to see RGB and HSL.

Export

CSS Variables
--color-primary: #CEE0FD;
--color-secondary: #77A8F9;
--color-tertiary: #0B64F4;
--color-quaternary: #07409C;
--color-quinary: #031E49;
Tailwind Config
colors: {
  'primary': '#CEE0FD',
  'secondary': '#77A8F9',
  'tertiary': '#0B64F4',
  'quaternary': '#07409C',
  'quinary': '#031E49'
}
JSON
[
  "#CEE0FD",
  "#77A8F9",
  "#0B64F4",
  "#07409C",
  "#031E49"
]

Common Use Cases

Generate a full 10-shade scale from a brand's primary HEX color to populate a design system or Tailwind config with consistent, accessible tones
Explore complementary and triadic palette options for a new UI project and export them as CSS variables to drop directly into a stylesheet
Pick an analogous palette for a marketing landing page that needs a natural, harmonious feel without strong color contrast
Use the split-complementary output to find accent and highlight colors that pair well with a hero section's background without clashing

About Color Palette Generator

Color theory is the foundation of every design system. The way colors relate to each other on the color wheel determines whether a palette feels harmonious, energetic, calm, or striking. Understanding these relationships, and knowing how to derive them mathematically from a single base color, is one of the most practical skills in UI and graphic design.

Monochromatic palettes use one hue across a range of lightness and saturation values. They feel cohesive and refined, and are the basis of nearly every "minimal" or "clean" design. Complementary palettes pair a color with its opposite on the wheel (180° away), creating high contrast and vibrant tension, ideal for call-to-action buttons against a neutral background. Triadic palettes use three colors equally spaced (120° apart), offering variety while maintaining balance. Analogous palettes use colors adjacent on the wheel (±30°), producing naturally pleasing, low-contrast combinations often found in nature. Split-complementary is a softer alternative to complementary: it takes the two colors adjacent to the complement, giving contrast without the harshness of a direct complement.

The "Shades" mode generates a 10-step tint-and-shade scale modeled after Tailwind CSS's color system (50 through 900). This is directly usable in a Tailwind config or design token setup: pick your brand color and instantly get the full scale from near-white to near-black.

All palette math runs entirely in your browser using HSL (Hue, Saturation, Lightness), the most intuitive color model for manipulation. Rotating the hue produces harmonic color relationships. Adjusting lightness produces tints and shades. Adjusting saturation produces muted or vivid variants. The tool exports palettes as CSS custom properties, Tailwind config objects, or JSON arrays, ready to paste directly into your codebase.

Frequently Asked Questions

What is the difference between complementary and split-complementary?
A complementary palette uses your base color and the single color directly opposite it on the color wheel (180° away). The contrast is high but can feel harsh. A split-complementary palette takes the two colors adjacent to that opposite (at 150° and 210°), giving you a similar level of visual interest with a softer, more flexible result. Split-complementary is often easier to work with in UI design because you have three colors rather than two.
When should I use a monochromatic palette?
Monochromatic palettes, meaning one hue across multiple lightness levels, are ideal for clean, professional, or minimal interfaces. They guarantee harmony because there's no risk of colors clashing. Use the darkest shade for headings and text, mid-tones for interactive elements, and the lightest tones for backgrounds and surfaces. Most SaaS dashboards and documentation sites rely on monochromatic palettes for their neutral UI with a single accent.
How do I use the Shades output in Tailwind CSS?
In your tailwind.config.js, extend the colors section with the generated object. For example: theme: { extend: { colors: { brand: { '50': '#eff6ff', '100': '#dbeafe', ... } } } }. You can then use classes like bg-brand-100, text-brand-700, or border-brand-300 throughout your project. The scale is intentionally aligned with Tailwind's own naming convention so it integrates seamlessly.
What does the CSS variables export look like and where do I paste it?
The CSS variables export produces a set of --color-primary, --color-secondary (or --color-50 to --color-900 for shades) declarations. Paste these inside a :root { } block in your global CSS file. You can then reference them anywhere in your CSS or in inline styles as var(--color-primary). In Tailwind, you can map these CSS variables to your theme config using the hsl() or var() syntax.
Why does the tool use HSL instead of RGB for palette math?
HSL makes color relationships explicit and predictable. To find the complementary color, you simply add 180 to the hue. To find analogous colors, add or subtract 30. To create lighter tints, increase lightness. To create darker shades, decrease it. Doing the same math in RGB requires converting to a different space first. HSL is how designers think about color, which is why it's the right model for a palette generator.
Can I use these palettes commercially?
Yes, completely. Color palettes are mathematical outputs derived from HSL relationships, so they are not subject to copyright. You own whatever you create with this tool and can use any generated palette in commercial projects, products, client work, or open-source software without restriction.

Related Tools

View all Generators

Random Color Generator

Generate random colors from the full color wheel or from curated palettes like pastels, neons, primary colors and more. Pick 1 to 20 colors at once.

Invoice Generator

Create professional invoices with your company details, custom line items, tax, and totals, then download a ready-to-send PDF, entirely in your browser.

ULID Generator

Generate random, lexicographically sortable ULIDs, a modern alternative to UUIDs that sort by creation time. Batch generate and decode existing ULIDs, entirely in your browser.