Blog · Inspiration

Ten website colour schemes, and what each one is good at

Ready-made five-colour schemes with hex codes, chosen for different jobs — plus the reasoning behind each so you can adapt rather than copy.

Every scheme below follows the same structure: a light surface, a mid tone, a strong colour, a dark for text, and one accent. That structure maps cleanly onto the 60-30-10 ratio and onto the semantic tokens most projects end up needing — surface, surface-alt, action, text, accent.

Take any of them as a starting point, then load your own brand colour into the generator, lock it, and let the harmony modes rebuild the rest around it. And check every text-on-background pair in the contrast checker before you ship — several of these palettes contain pairs that are deliberately decorative rather than legible.

Deep Sea

A cool, competent scheme for SaaS and fintech. The near-black carries text; the teal is the only loud thing on the page.

#0F2228#1B3A44#3DB3CB#A8DCE7#EEF3F4

Warm Editorial

Cream, ink and a rust accent. Reads as considered and print-like — good for publishing, agencies and long-form content.

#FBF7F1#E8DCCB#C2703D#5B4636#241C16

Forest Studio

Grounded greens with a brass accent. Suits sustainability claims, food and craft brands without tipping into cliché.

#F2F5F0#CBD8C6#4A6B4F#22331F#C9A227

Soft Clinic

Low saturation blues and a mint accent. Calm and legible — a dependable starting point for health and wellbeing.

#FFFFFF#EEF4F7#B9D3E0#3E6B85#5FC9A6

Night Console

A dark-first scheme built on tinted greys rather than pure black, with an electric accent for actions.

#12181B#1A2226#28343A#5DC8DE#E8EFF1

Sorbet

Playful pastels with enough depth in the last two colours to hold text. Works for children's brands and education.

#FFF6F2#FFD1C1#FFB4A2#6D6875#2E2A32

Monochrome Ink

One hue, five tones. The safest scheme in existence, and the easiest to make look expensive.

#F5F7F8#D3DDE1#8AA3AC#3E5560#16242B

Sunset Gradient Base

Five stops built for blending rather than blocking — the source palette for a warm hero gradient.

#2B1B4B#7A2E5E#C94F5C#F08A4B#F6D186

Corporate Contrast

A conventional navy-and-white scheme rescued by a single confident amber. Distinctive without being risky.

#FFFFFF#F0F3F7#1F3864#0C1A33#F2A81D

Botanical Neutral

Warm greys with a sage lead. Quiet, tactile and forgiving — a good base for photography-heavy sites.

#FAF9F6#E4E1D8#A8B5A2#6B7168#2F332D

How to adapt one

Keep the structure, change the hue. The relationship between the five colours is doing more work than the specific hues. Rotate every hue by the same amount and the scheme still holds together.
Fix the text pair first. If the dark colour does not reach 4.5:1 against the light one, darken the dark rather than lightening the light — you will usually lose less of the character that way.
Demote the accent. If a scheme feels loud, use the accent on 5% of the surface instead of 10%. Most palettes that "do not work" are simply over-applied.
Tint the neutrals. Pure grey next to a strong hue looks dead. Push a few degrees of the brand hue into the greys at very low saturation.

Browse 52 more palettes →