Logo

Color Palette Generator

Generate beautiful color palettes with various color harmony algorithms.

Palette Controls

2 5 10

Export Options

Your Palette

How to use the palette generator

  1. Pick a generation mode that matches your goal. Use monochromatic for tints and shades, complementary for contrast, and split complementary for balanced variety.
  2. Choose a base color. Paste a HEX value if you have a brand color, or open the picker to explore quickly.
  3. Adjust the number of colors. Five works well for dashboards, while three is plenty for buttons and alerts.
  4. Lock any swatch you like. Regenerate to fill only the unlocked spots with new colors.
  5. Copy values or export when you are happy. CSS Variables work well for web apps, JSON fits design tokens, and Tailwind config helps front-end teams.

Example palettes by mode

Monochromatic (Base #3B82F6)

#E0F2FE - #60A5FA - #3B82F6 - #2563EB - #1E3A8A

Good for button states, focus outlines, and chart series that need consistent hue.

Analogous (Base #F97316)

#FACC15 - #F97316 - #EA580C - #C026D3 - #F59E0B

Useful for warm hero banners or gradient backgrounds with smooth transitions.

Complementary (Base #10B981)

#10B981 - #047857 - #F97316 - #EA580C - #FDBA74

Pair the green with its orange complement for success vs. warning messaging.

Triadic (Base #6366F1)

#6366F1 - #F472B6 - #22D3EE - #7C3AED - #EC4899

Triadic sets work for data visualizations that need three distinct clusters.

Tetradic (Base #EF4444)

#EF4444 - #F97316 - #10B981 - #3B82F6 - #F59E0B

Four-color schemes cover dashboards with highlights, alerts, and neutral accents.

Split Complementary (Base #0EA5E9)

#0EA5E9 - #0284C7 - #F97316 - #F59E0B - #FDE68A

Pick this for marketing emails where you need a main color plus two supporting accents.

Practical combinations

  • Navigation bars: #111827 background, #3B82F6 active link, #9CA3AF hover link, #E5E7EB divider.
  • CTA buttons: Primary #2563EB, hover #1D4ED8, focus ring #BFDBFE, text #FFFFFF.
  • Alert set: Success #10B981, Warning #F59E0B, Error #EF4444, Info #3B82F6, Neutral #6B7280.
  • Gradient banner: Start #4338CA, mid #6366F1, end #818CF8, overlay text #F9FAFB.

Export ideas

Use exports to keep color tokens in sync:

  • CSS variables example: --brand-primary: #2563EB;
  • SCSS snippet: $chart-accent: #F97316;
  • Tailwind config entry: 'brand-500': '#2563EB'
  • JSON token: { "name": "background-soft", "hex": "#F1F5F9" }

Teams often export one palette for UI and another for data viz. Saving both lets you swap them fast.

Simple checks before you ship

  • Confirm 4.5:1 contrast for text. Darken or lighten background colors if the ratio fails.
  • Run the palette through a color blindness simulator. Locked swatches help fix problem pairs.
  • Keep HEX, RGB, and HSL copies. Developers, designers, and analytics teams prefer different formats.
  • Label your saved palettes with date and purpose so you can tell “marketing Q1” from “product UI”.