favotools
Tools
Premium
FAQ
Privacy
Terms
Loading…
🎨
Brand Color Palette Generator
← Back to tools
Generate a clean palette from a base color. Copy HEX or CSS variables, and check contrast.
⚙️
Setup
Base color
Mode
Tints & shades
Complementary
Triadic
Analogous
Random colors
Steps
Copy CSS vars
Generate
🧾
Palette
50
#EBE7FE
WCAG on white: 1.21× • on black: 17.39×
🔓
100
#C8BCFB
WCAG on white: 1.74× • on black: 12.04×
🔓
200
#A591F9
WCAG on white: 2.62× • on black: 8.02×
🔓
300
#8266F7
WCAG on white: 4.04× • on black: 5.19×
🔓
400
#5F3BF5
WCAG on white: 6.12× • on black: 3.43×
🔓
500
#3C0FF2
WCAG on white: 8.26× • on black: 2.54×
🔓
600
#300BCA
WCAG on white: 10.36× • on black: 2.03×
🔓
700
#26089F
WCAG on white: 12.98× • on black: 1.62×
🔓
800
#1C0674
WCAG on white: 15.82× • on black: 1.33×
🔓
900
#110449
WCAG on white: 18.46× • on black: 1.14×
🔓
How this tool works
1
Pick a base color
Choose a hex value or use the color picker.
2
Choose a mode
Tints/shades, complementary, triadic, analogous, or random.
3
Adjust steps
Control how many swatches to generate.
4
Copy values
Click any swatch to copy HEX or copy all as CSS vars.