# How to build a gradient palette for a brand

[Canonical HTML page](https://gradiently.design/guide/gradient-palette)

One good gradient is easy. Six that clearly belong together, cover every job a brand has and still look right next to each other is a system. This is how to build it.

## The short version

- A gradient palette is a small, named family of gradients made from one base colour palette and a few shared rules.
- Most brands need four to six gradients: a hero, a deep version, a quiet light version, a radial glow, an accent and a calm one for text.
- Gradients read as one family when they share a ground colour, a direction, consistent stop positions and the same steps in lightness.
- Storing gradients as named CSS custom properties keeps them identical across a website, an app and design files.
- A gradient palette should be tested on real formats with real words before it is written into brand guidelines.

A **gradient palette** is a small, named family of gradients built from one colour palette and a handful of shared rules, so every gradient a brand uses looks related. Start with five or six base colours, give each gradient a job (hero, deep, quiet, glow, accent, text), then fix the things that make them siblings: the same ground colour, the same angle, matching stop positions and even steps in lightness. Write them down as tokens and test them on real designs before anyone else uses them.

## Why a brand needs more than one gradient

A single gradient gets stretched over jobs it can't do. The bright hero blend that looks great on a launch post is too loud behind a paragraph, too dark for a light website section and too busy for a slide full of numbers. Teams then improvise, someone picks a nearby blue, and within a year the brand has fifteen gradients that almost match. A palette prevents that by deciding the variations in advance.

### A pile of gradients

- Each made separately, for one design
- Different angles on every page
- Colours that nearly match the brand
- No name, so nobody can ask for one
- Copied by eye from old files

### A gradient palette

- Built from one base palette
- One direction, used everywhere
- Exact hex codes and stop positions
- Named by job: hero, deep, quiet
- Stored as tokens in code and files

## Start from a base colour palette

Every gradient in the family should be made only from these colours, or from tints and shades of them. If your brand colours aren't settled yet, sort that first with [how to choose brand colors](https://gradiently.design/guide/how-to-choose-brand-colors). A useful base has a dark ground, two or three steps of the main hue, a near white and one accent from elsewhere on the wheel.

- Ink: #14112b
- Night plum: #2e1065
- Plum: #4c1d95
- Violet: #7c3aed
- Orchid: #c084fc
- Shell: #faf5ff
- Ember: #f97316

A worked example base: one dark ground, four steps of violet, a near white and a single warm accent. Every gradient below is built from these seven codes.

## Give each gradient a job

Name gradients by what they do, not what they look like. "Hero" survives a colour refresh; "purple sunset" does not. Six roles cover almost every brand.

| Role | What it is for | How it differs |
| --- | --- | --- |
| Hero | Launches, covers, the moment people remember | Full range, dark to light |
| Deep | Dark sections, slides, evening campaigns | Only the darkest two or three colours |
| Quiet | Light pages, documents, long reading | Shell and the palest tint, barely moving |
| Glow | Product shots and single words | Radial, light in one corner |
| Accent | Buttons, badges, one highlight per design | Main hue into the accent colour |
| Text | Behind paragraphs and captions | Low contrast within itself, high against type |

Six roles for a brand gradient palette. Small brands can start with hero, deep and quiet.

- Hero: `linear-gradient(135deg, #14112b 0%, #4c1d95 45%, #7c3aed 75%, #c084fc 100%)`
- Deep: `linear-gradient(135deg, #14112b 0%, #2e1065 60%, #4c1d95 100%)`
- Quiet: `linear-gradient(135deg, #faf5ff 0%, #f3e8ff 60%, #e9d5ff 100%)`
- Glow: `radial-gradient(circle at 80% 20%, #c084fc 0%, #7c3aed 30%, #14112b 75%)`
- Accent: `linear-gradient(135deg, #7c3aed 0%, #c084fc 55%, #f97316 100%)`
- Text: `linear-gradient(135deg, #2e1065 0%, #14112b 100%)`

The family built from the base above. Same ground, same 135 degree angle, same colours: they could sit side by side on one page without arguing.

## The rules that make gradients a family

- **One ground.** Every dark gradient ends in the same ink, every light one in the same shell. The ground is what the eye uses to group them.
- **One direction.** Pick an angle, 135 degrees or 160 degrees, and keep it. Mixed angles make a page feel accidental. [Gradient angle](https://gradiently.design/guide/gradient-angle) explains the choice.
- **Matching stops.** Reuse the same positions (0, 45, 75, 100 percent, for instance) so the transitions have the same rhythm. [Gradient stops](https://gradiently.design/guide/gradient-stops) covers spacing.
- **Even lightness steps.** Each colour in a blend should be a clear step lighter or darker than its neighbour. Uneven steps produce a bright stripe in the middle.
- **One accent, rationed.** The accent colour appears in one gradient only. Spread across all of them, it stops being an accent.
- **A fixed interpolation for code.** If your site blends in oklch, all gradients should, or the same codes will look different between sections.

## Turn the gradient palette into tokens

A palette that lives only in a PDF gets retyped and drifts. Store each gradient once as a named custom property and reference it everywhere. Designers can paste the same values into their files, and a future refresh changes one line per gradient. [Design tokens](https://gradiently.design/guide/design-tokens) covers the wider practice.

```css
:root {
  --ink: #14112b;
  --plum: #4c1d95;
  --violet: #7c3aed;
  --orchid: #c084fc;
  --shell: #faf5ff;
  --ember: #f97316;

  --gradient-hero: linear-gradient(135deg, var(--ink) 0%, var(--plum) 45%, var(--violet) 75%, var(--orchid) 100%);
  --gradient-deep: linear-gradient(135deg, var(--ink) 0%, #2e1065 60%, var(--plum) 100%);
  --gradient-quiet: linear-gradient(135deg, var(--shell) 0%, #f3e8ff 60%, #e9d5ff 100%);
  --gradient-glow: radial-gradient(circle at 80% 20%, var(--orchid) 0%, var(--violet) 30%, var(--ink) 75%);
  --gradient-accent: linear-gradient(135deg, var(--violet) 0%, var(--orchid) 55%, var(--ember) 100%);
  --gradient-text: linear-gradient(135deg, #2e1065 0%, var(--ink) 100%);
}

.hero { background: var(--gradient-hero); }
.section-light { background: var(--gradient-quiet); }
```

The whole family as CSS custom properties. Colours are defined once, and each gradient is built from them.

## Test it on real formats

Swatches lie. A gradient that looks balanced as a small square can put its brightest band right behind a headline once it fills a 1080×1920 story. Before you publish the palette, make three real designs with real words: a portrait post, a story and a website hero. Check that the text gradient keeps paragraphs readable, using the contrast checks in [colour contrast and accessibility](https://gradiently.design/guide/color-contrast-accessibility), and that hero and deep look related when they sit side by side.

A portrait launch post on a rich, full range gradient background

The hero role on a portrait post at 1080×1350.

A vertical story with the same headline on a related gradient background from the same family

The same family on a 1080×1920 story. Check that the brightest band still clears the headline in the taller frame.

With Gradiently Pro, the brand kit holds your colour palettes alongside your logo and fonts, and the Designer applies them when it lays out new designs. If your hero gradient is meant to be the thing people recognise, [brand gradients](https://gradiently.design/guide/brand-gradient-system) covers turning one gradient into a signature.

## FAQ

### What is a gradient palette?

A small, named set of gradients made from one colour palette with shared rules, so they look like one family wherever they appear.

### How many gradients should a brand have?

Four to six covers most needs: a hero, a deep and a quiet version, a radial glow, an accent and one calm enough for text. Small brands can start with three.

### How do I make gradients look like they belong together?

Use the same ground colour, the same angle, the same stop positions and even steps in lightness across every gradient.

### How should I store brand gradients for a website?

Define the colours and each gradient once as CSS custom properties, then reference those names in every component.