Color Palette

DESIGN

Generate a complete 11-shade color palette from any base color. Copy HEX values or full CSS variables.

Base Color

#E5E3FB

100

#CAC8F7

200

#B0ACF3

300

#9590EF

400

#7B74EC

500

#4F46E5

600

#443CC2

700

#39339F

800

#2E297C

900

#232059

950

#181636

📖 How to Use Color Palette

Enter a base colour

Input a HEX colour code or use the colour picker to choose your brand colour.

Generate the palette

Click Generate to create an 11-shade palette from near-white to near-black.

Copy colour codes

Click any swatch to copy its HEX, RGB, or HSL code for use in CSS, Figma, or your design system.

Tailwind-style blue palette

INPUT

#3B82F6 (blue-500)

→

OUTPUT

11 shades from #EFF6FF (50) to #172554 (950)

Brand colour expansion

INPUT

#10B981 (emerald)

→

OUTPUT

11 shades for design system use

✓For accessible colour palettes, ensure text on your primary colour has a contrast ratio ≥ 4.5:1 (WCAG AA).

✓Use the 100–300 shades for backgrounds, 400–600 for primary elements, 700–900 for text and borders.

✓Consistent 50-scale palettes (50, 100, 200 … 900, 950) match Tailwind CSS colour system conventions.

✓HSL representation makes it easier to adjust lightness while keeping hue and saturation constant.

How many shades should a design system colour palette have?+

Most design systems use 9–11 shades per colour (e.g. 50 through 950). This gives enough range for backgrounds, text, borders, and interactive states.

What is the 60-30-10 colour rule?+

60% of your design should use the dominant/neutral colour, 30% a secondary colour, and 10% the accent/brand colour. This creates visual balance.