Palette Generator — WhatsMyTools Embed

Your palette — click a swatch to copy its hex code

W 3.4 · B 6.1

W 4.9 · B 4.3

W 6.3 · B 3.3

W 5.5 · B 3.8

W 4.7 · B 4.5

Base Color

Hue: 243°

Harmony Rule

Export

CSS Variables

:root {
  --color-1: #468ce5;
  --color-2: #4665e5;
  --color-3: #4f46e5;
  --color-4: #7746e5;
  --color-5: #9f46e5;
}

Tailwind Config

colors: {
  palette: {
    100: '#468ce5',
    200: '#4665e5',
    300: '#4f46e5',
    400: '#7746e5',
    500: '#9f46e5',
  },
},

How it works

Pick a base color and a harmony rule, and this tool generates a five-color palette using HSL color math -- complementary hues sit 180° apart on the color wheel, triadic hues 120° apart, and so on. Each swatch shows its WCAG contrast ratio against white (W) and black (B) text, with an AAA / AA / Fail badge so you can choose accessible combinations. Everything runs entirely in your browser; no colors or data are sent to any server.