Build a palette from your HEX color
Keep your brand color, explore related shades, and copy the palette into your stylesheet.
Current palette seed: #2563eb · Example
The seed is always kept. Locked swatches stay fixed when you generate or load an example.
brand · seed
#2563eb
surface
#f5f5fe
accent
#cccbfa
soft
#949af4
strong
#2e479e
deep
#252a51
Preview on a card
Your next project
A palette that starts with your brand
Try your colors together before copying them into your CSS.
Primary button previewSecondary preview
Text contrast in this preview: card 16.47:1; primary button 5.17:1. These ratios apply only to these two text/background pairs. Check other combinations in your design.
Use the palette in CSS
:root {
--color-brand: #2563eb;
--color-surface: #f5f5fe;
--color-accent: #cccbfa;
--color-soft: #949af4;
--color-strong: #2e479e;
--color-deep: #252a51;
}
For example: background: var(--color-brand);