Palette and gradient examples

Copyable starting points with hex codes and CSS. Every palette here follows the same five-role structure — surface, surface-alt, action, text, accent — so it drops straight into a design system.

These are starting points, not finished answers. Load any of them into the generator, lock the colour you want to keep and regenerate around it, then check your text pairs in the contrast checker before you build. Colours are not owned and everything here is free to use commercially — see our Terms of Use.

Palettes for interfaces

Five-colour sets built to carry a UI: each has a light surface, a secondary surface, a strong action colour, a text-safe dark and one accent.

Signal Teal

The house palette. Cool, calm and high-contrast — the dark holds body text on either light surface at well over 4.5:1.

#EEF3F4#FFFFFF#3DB3CB#0F2228#7C5CFF

Slate & Amber

A conventional cool-grey interface rescued by one warm accent. Dependable for dashboards and admin tools.

#F5F7F9#E3E8ED#334155#0B1220#F2A81D

Clinic

Low-saturation blues with a mint accent. Reads as careful and calm; good for health, education and public services.

#FFFFFF#EEF4F7#3E6B85#152A36#5FC9A6

Terracotta Studio

Warm neutrals with a clay lead. Suits agencies, publishing and anything wanting to look printed rather than shipped.

#FBF7F1#EDE3D6#C2703D#241C16#4F6B5E

Night Console

Dark-first, built on tinted greys rather than pure black. The two lightest values are text tones, not surfaces.

#12181B#1A2226#5DC8DE#E8EFF1#9BB0B6

Sorbet

Soft and playful, with enough depth in the last two colours to hold text. Children's brands, education, lifestyle.

#FFF6F2#FFD1C1#FF8C6B#2E2A32#6D6875

Palettes by mood

Less structural, more atmospheric — good for illustration, packaging and marketing pages where the palette carries feeling rather than function.

Deep Forest

Grounded greens with a brass highlight. Sustainability and craft, without the clichéd bright leaf-green.

#0E1A13#22331F#4A6B4F#CBD8C6#C9A227

Dusk

A cool-to-warm run from indigo to blush. Built for blending — a strong source for a hero gradient.

#221A3D#453163#7A5C8E#C98BA0#F3C3B4

Vintage Print

Muted, slightly dirty tones with the saturation pulled back. Looks like risograph and screen-print work.

#F0E9DD#D9C2A6#A8574B#3E4A47#6E8B7A

Electric

Full-saturation neon on near-black. Use sparingly — none of the bright tones should carry small text on a light surface.

#08080F#151527#00E5C7#FF3D9A#F5F5FF

Gradient examples

Each of these is two or three stops taken from a single harmonised palette, which is why they blend cleanly. Copy the CSS, or rebuild them in the gradient generator to adjust the angle, stops and blending.

Brand diagonal

The workhorse: 135° through two tones of one hue. Reads as light falling across the section rather than as a gradient.

background-image:
  linear-gradient(135deg, #3DB3CB 0%, #0F2228 100%);

Sunset wash

Three warm stops with the middle one placed slightly off-centre so the transition never looks mechanical.

background-image:
  linear-gradient(120deg, #F6D186 0%, #F08A4B 45%, #C94F5C 100%);

Atmospheric glow

An off-centre radial in two tones of the same hue. The standard modern hero background — subtle enough to put text on.

background-image:
  radial-gradient(circle at 30% 20%, #5DC8DE 0%, #12181B 70%);

Iridescent conic

A conic sweep through four hues for the holographic look. Decorative only — never put small text on this.

background-image:
  conic-gradient(from 210deg, #7C5CFF, #3DB3CB, #5FC9A6, #F2A81D, #7C5CFF);

Section transition

A near-invisible vertical gradient used instead of a border to separate two sections of a page.

background-image:
  linear-gradient(180deg, #FFFFFF 0%, #EEF3F4 100%);

Accent edge

Confined to a thin element — a 4px top border or an underline. High impact, no legibility risk.

background-image:
  linear-gradient(90deg, #3DB3CB 0%, #7C5CFF 50%, #FF8C6B 100%);

Using these in code

Whichever palette you start from, get it out of the browser and into your project as variables rather than as pasted hex codes. The generator exports CSS custom properties, SCSS variables, a Tailwind colors block and JSON design tokens; the design system guide covers how to name them so they survive a rebrand.

:root {
  --color-surface:     #EEF3F4;
  --color-surface-alt: #FFFFFF;
  --color-action:      #3DB3CB;
  --color-text:        #0F2228;
  --color-accent:      #7C5CFF;
}

Browse 52 curated palettes in the tool →