Skip to main content

Color Palette Generator

Generate harmonious color palettes, Tailwind-style 50-900 scales and design-system tokens from any base hex color. Also a hex color palette generator (Farbpalette Generator auf Deutsch).

Reviewed by · Last reviewed

CSS Variables
:root {
  --palette-1: #24c6eb;
  --palette-2: #2494eb;
  --palette-3: #2563eb;
  --palette-4: #2431eb;
  --palette-5: #4824eb;
}

How to Use the Color Palette Generator

  1. Pick a base color — use the color picker, paste a HEX code, or hit "Random" to explore.
  2. Choose a harmony mode — complementary, analogous, triadic, tetradic, split-complementary, or monochromatic.
  3. Review the generated palette — swatches update live. Click any swatch to copy its HEX value to your clipboard.
  4. Export to CSS — click "Export CSS Variables" to copy the palette as :root custom properties ready to paste into your stylesheet.

About Color Harmony

Color harmony is the set of combinations that the human eye perceives as balanced and pleasing. The foundation is the color wheel — a 360-degree arrangement of hues first proposed by Isaac Newton in 1666. Modern digital design usually references the HSL model (Hue/Saturation/Lightness), where hue is the angle on the wheel, saturation is the intensity, and lightness ranges from black to white. HSL is more intuitive than HEX or RGB when you want to shift a color\'s relationship to others without losing its identity.

Each harmony mode is a mathematical relationship on the wheel. Complementary colors sit 180° apart (red/green, blue/orange) and produce the highest contrast — great for calls-to-action but exhausting when used in equal measure. Analogous palettes take three-to-five hues within ±30° of each other (e.g. teal, blue, purple) for a cohesive, low-tension feel. Triadic palettes (120° apart) offer vibrancy while staying balanced. Tetradic (90° rectangle) gives four-hue richness but needs a clear "dominant" color to avoid chaos. Split-complementary swaps one arm of a complementary pair for the two hues flanking it, keeping contrast while softening the clash. Monochromatic shifts only lightness and saturation on a single hue — the quietest, most sophisticated option.

Harmony is a starting point, not a rule. A working UI palette typically uses a dominant color (60%), a secondary color (30%), and an accent (10%) — the classic "60-30-10" ratio — regardless of which harmony math produced them.

Examples

  • Complementary example: base #2563eb (blue) → complement #eb8d25 (warm orange). Use blue for 70% of surfaces, orange for action buttons only.
  • Analogous example: base #14b8a6 (teal) → #14b892, #14b6b8, #14a0b8, #1493b8. Perfect for calm dashboard UIs.
  • Triadic example: base #ef4444 (red) → #44ef44 (green), #4444ef (blue). Playful palette common in illustration and children\'s products.
  • Monochromatic example: base #6366f1 (indigo) → 5 lightness steps from #e0e1fd to #2a2c74 — the backbone of most utility-first design systems.

Tips and Use Cases

  • Check contrast for accessibility - text and UI icons should meet WCAG 2.1 AA contrast (4.5:1 for body text, 3:1 for large text or icons). Complementary palettes often fail readability when used for text.
  • Warm vs cool balance - mixing one warm and one cool color anchors a palette emotionally. All-warm palettes feel energetic but claustrophobic; all-cool feels clean but sterile.
  • Brand palettes usually start with a single hero color, extend it into a monochromatic ramp (50-900 shades), and add 1-2 accents from a triadic or complementary relationship.
  • Data visualization favors analogous or tetradic palettes - clearly distinguishable hues without any color implying "better" or "worse".
  • Cultural associations vary: red signals luck in China and danger in Western UI; white is bridal in the West, funerary in parts of East Asia. Account for your audience.

Color scale generator: 9-step ramps from a single hex

A color palette generator and a color scale generator solve slightly different problems. A palette sets up a small group of harmonious hues (usually 3-6 colors) for composition. A color scale - also called a color ramp, tonal ramp, or Tailwind-style "50-900" ladder - takes one hex color and produces 9-11 lightness-sorted shades of the same hue. Modern design systems ship both: the palette defines the relationships between colors, and the scale turns each palette color into a usable set of tokens for text, backgrounds, borders and hover states. When you pick monochromatic mode above, this tool outputs the scale for your base hex color; the other harmony modes output a palette. If you need both (typical for design-system work), generate the palette first, then re-run monochromatic mode on each palette color to materialise its scale.

Tailwind Color Palette Generator and Design-System Workflow

If you are building or extending a Tailwind-based design system, the typical workflow looks like this: pick a brand hue with the color picker, drop the hex into this generator on monochromatic mode to produce a 50-900 lightness ramp, then export CSS variables and paste them under theme.extend.colors in tailwind.config.ts. Repeat the same pass for each palette color (primary, secondary, accent, neutral) and you have a coherent token set ready for components. Pair the palette with a matching CSS gradient for hero surfaces and decorative cards, and use the lightest two and darkest two stops as light-mode and dark-mode pairs - any 50/100 token works as a light surface, any 800/900 token as its dark counterpart. This page therefore covers the "Tailwind color palette generator", "Tailwind palette generator" and "design system color palette" workflows in a single tool, without sending anything to a server.

Farbpalette Generator - online erstellen

Dieser Farbpalette Generator erzeugt harmonische Farbpaletten aus einer einzigen Grundfarbe. Gib einen Hex-Wert ein oder waehle eine Farbe mit dem Color Picker, und das Tool berechnet passende Farbtoene nach klassischen Harmonielehren: komplementaer, analog, triadisch, tetradisch, Split-Complementary und monochrom. Du kannst die erzeugte Farbpalette direkt als CSS-Variablen exportieren und in dein Projekt einfuegen - besonders praktisch fuer Design-Systeme, Branding und Datenvisualisierung. Die ganze Berechnung laeuft im Browser, es werden keine Daten an einen Server geschickt, und der Farbpaletten Generator ist kostenlos sowie ohne Anmeldung nutzbar.

Frequently Asked Questions

What is color harmony?

Color harmony is a set of combinations that the human visual system perceives as balanced. It uses mathematical relationships on the color wheel — complementary (180°), triadic (120°), analogous (±30°), tetradic (90°) and monochromatic (same hue, varying lightness). Harmonious palettes reduce visual friction, help hierarchy emerge naturally, and keep the viewer's eye comfortable even after long exposure. The rules originated in 18th-century painting theory and translate well to digital interfaces.

How many colors does each mode generate?

Complementary produces 2 colors, split-complementary produces 3 (base plus two colors adjacent to the complement), triadic produces 3 (120° apart), tetradic produces 4 (90° rectangle), analogous produces 5 (closely spaced), and monochromatic produces 5 lightness variations of the same hue. Pick based on how much variety you need — fewer colors read as more "designed", more colors feel playful but are harder to balance.

Which harmony should I choose for a brand?

For most brands, start with an analogous or monochromatic palette built around a single hero color — this keeps the brand recognizable and the design feeling cohesive. Add one complementary accent for calls-to-action. Triadic and tetradic palettes work for playful consumer brands (kids products, entertainment, food delivery) but rarely for B2B or enterprise work where trust and clarity outrank vibrancy.

How do I check if a palette is accessible?

Run each foreground-background pair through a WCAG contrast checker. Body text needs a 4.5:1 ratio; large text (18pt+) and UI components need 3:1. Complementary pairs at full saturation usually pass, but analogous and monochromatic palettes often need you to push one color toward very light or very dark. Never rely on hue alone to convey meaning — color-blind users (roughly 8% of men) will miss it.

Can I export the palette?

Yes. Click "Export CSS Variables" to copy the palette as CSS custom properties inside a <code>:root</code> selector — paste directly into your stylesheet and reference them with <code>var(--color-1)</code>. You can also copy individual HEX values by clicking any swatch. For Figma, Sketch, or Adobe tools, paste the HEX values into the fill picker manually.

What color format is used?

All swatches are displayed and copied in 6-digit HEX format (e.g. <code>#2563eb</code>). HEX is universal across HTML, CSS, design tools, and image editors. To convert to RGB (<code>rgb(37, 99, 235)</code>) or HSL (<code>hsl(217, 82%, 53%)</code>), use a dedicated Color Converter — HSL in particular is useful when you want to programmatically rotate hues or build lightness ramps.

What is the 60-30-10 rule?

The 60-30-10 rule is a proportion guideline from interior design adopted by UI designers: 60% of the visible area uses the dominant color (often a neutral or the brand base), 30% uses a secondary color that complements it, and 10% uses a bold accent for calls-to-action or emphasis. It applies regardless of which harmony math generated the palette and prevents the "everything shouts" problem.

Is my data sent to a server?

No. All palette generation, harmony math, and HEX-to-HSL-to-RGB conversion runs entirely in your browser using JavaScript. Nothing about your base color, exported CSS, or clipboard activity is uploaded or logged. You can use the tool offline once the page has loaded, and the same palette can be reproduced deterministically from any base color by re-running the same harmony mode.

Is this a color scale generator, a hex color palette generator, or a color pattern generator?

All of the above, depending on which mode you pick. Monochromatic mode acts as a color scale generator (9-11 tonal shades of one hue, like Tailwind's 50-900 ramps). The palette modes (complementary, analogous, triadic, tetradic, split-complementary) act as a hex color palette generator - enter any hex value and get a matching palette back. And because every output is driven from a single base hex, the tool fits the "color pattern generator" and "generate color palette from one color" use cases people search for. Export CSS variables to drop the result straight into a design system.

Ist das ein Farbpalette Generator auf Deutsch?

Ja. Dieser Farbpalette Generator (auch: Farbpaletten Generator) erstellt Paletten aus einer Ausgangsfarbe mithilfe der klassischen Harmonieregeln. Du kannst einen Hex-Wert eingeben oder eine Farbe per Picker waehlen und bekommst eine Farbpalette zurueck, die du als CSS Custom Properties exportierst. Das Werkzeug ist kostenlos, laeuft vollstaendig im Browser und benoetigt weder Anmeldung noch Installation - ideal fuer Web-Design, Branding und UI-Prototyping.

Can I use this as a Tailwind color palette generator?

Yes. Pick monochromatic mode and your base brand hex; the tool generates a 9-11 step ramp that maps cleanly to Tailwind's 50-100-200-300-400-500-600-700-800-900 keys (and optional 950). Click "Export CSS Variables", then move the values into <code>theme.extend.colors</code> in <code>tailwind.config.ts</code> under your color name. Repeat per palette color - usually one primary, one secondary, one accent, plus a neutral grey. The result is a fully typed, IntelliSense-ready Tailwind color set without depending on an external service or running a build script.

How do I build a dark-mode palette pair from one hex?

Generate a monochromatic ramp from the brand hex, then use the lightest 50/100/200 tokens as your light-mode background, surface and muted-surface, and the darkest 900/800/700 tokens as the dark-mode equivalents. Body text uses 800/900 on light mode and 50/100 on dark mode. Borders and dividers come from 200/300 (light) or 700/800 (dark). The same brand color sits at 500 for accents in both modes, which keeps the brand recognisable. Validate the resulting pairs against WCAG 2.1 AA - any 700+ on 50-100 background is normally compliant for body text.

More CSS & Design

Aspect Ratio Calculator

Calculate and visualize aspect ratios for any dimensions.

Open tool

Blob Shape Generator

Generate organic blob shapes as SVG.

Open tool

Border Radius Generator

Create CSS border-radius with a visual corner editor.

Open tool

CSS Box Shadow Generator

Create CSS box shadows with a visual editor. CSS box-shadow generator, shadow maker and box-shadow builder with live preview, multi-layer support and Material elevation presets.

Open tool

Color Picker

Pick colors visually and get HEX, RGB, and HSL values.

Open tool

CSS Animation Generator

Create CSS keyframe animations with presets and visual preview. Doubles as an animate-CSS generator and keyframe maker.

Open tool