Website color palettes
Twelve sets that survive a real layout: enough range for a background, a surface, a body text and one accent, without any two colours fighting for the same job.
- Astro
Readable text on #1e1e76: #FFFFFF
- Moon
Readable text on #e7e2f3: #111827
- Luna Of Gale
Readable text on #d6e4f5: #111827
- Ithriel
Readable text on #d1c7e1: #111827
- Moon Stone
Readable text on #a6c5d9: #111827
- Astro Novalite ♡
Readable text on #1e1f2a: #FFFFFF
- What Have You Done?
Readable text on #e63746: #111827
- 男性向け Manly
Readable text on #1e3b71: #FFFFFF
- Astro
Readable text on #1a1f3d: #FFFFFF
- Deep Winter
Readable text on #3a498d: #FFFFFF
- Powder Ash
Readable text on #bbc9c1: #111827
- Diamond
Readable text on #badae9: #111827
Using these on a site
- Assign roles before you assign colours: background, surface, border, body text, accent. A palette that cannot fill all five needs a neutral added, not a rethink.
- Use the lightest colour for large areas and the darkest for text. The middle tones belong on borders, hover states and secondary text.
- Keep the accent for things people click. If everything is accented, nothing is.
The text colour under each palette is whichever of near-black or white reaches the higher contrast ratio against its first colour — check any other pairing before using it for body text.