# Bright colour palettes that stay readable

[Canonical HTML page](https://gradiently.design/guide/bright-color-palettes)

Vivid colours are easy to love and easy to make unreadable. The trick is knowing which brights want black text, which want white, and giving the whole palette somewhere quiet to rest.

## The short version

- A bright colour palette uses highly saturated colours such as hot pink, tangerine, lemon, electric blue and bright green.
- Bright yellows, greens, cyans, teals and oranges are light colours, so they need dark text rather than white.
- Bright reds and pinks measure around 3.5:1 against white, which fails WCAG AA for body text, so set small text on them in black and keep white for large headlines.
- Two brights of similar lightness placed edge to edge appear to vibrate, so separate them with a neutral or a clear difference in lightness.
- Every bright palette needs a calm anchor, usually a near black or a warm off white, to carry text and give the colour room.

A **bright color palette** stays readable when you treat each vivid colour by its lightness, not its loudness. Lemon `#FFD60A`, bright green `#34C759`, aqua `#00C2FF` and tangerine `#FF7A00` are all light enough that they need near black text. Hot pink `#FF2D87` and poppy red `#FF3B30` sit in an awkward middle: black text passes, but white only works for large headlines. Add one calm anchor colour, give each bright its own space, and a palette that looks like a sweet shop becomes one you can actually set words on.

## Which bright colours need black text

Saturation makes a colour feel strong, but readability depends on lightness. Many brights are much lighter than they look, which is why white text on bright green or yellow feels loud and is still hard to read. The table below measures eleven brights against white and against near black `#111111`.

| Colour | Hex | With white text | With black text |
| --- | --- | --- | --- |
| Lemon | `#FFD60A` | 1.41:1 | 13.38:1, use black |
| Aqua | `#00C2FF` | 2.07:1 | 9.14:1, use black |
| Mint teal | `#00D1B2` | 1.95:1 | 9.68:1, use black |
| Bright green | `#34C759` | 2.22:1 | 8.51:1, use black |
| Tangerine | `#FF7A00` | 2.61:1 | 7.23:1, use black |
| Poppy red | `#FF3B30` | 3.55:1 | 5.32:1, use black |
| Hot pink | `#FF2D87` | 3.51:1 | 5.37:1, use black |
| Raspberry | `#E0115F` | 4.76:1, use white | 3.97:1 |
| Electric violet | `#8B3DFF` | 4.99:1, use white | 3.78:1 |
| Cobalt | `#1D4ED8` | 6.70:1, use white | 2.82:1 |
| Signal red | `#C81D11` | 5.77:1, use white | 3.27:1 |

WCAG AA asks for 4.5:1 for body text and 3:1 for large text. Raspberry and electric violet are close calls: white passes, but only just.

A useful rule of thumb: the light side of the wheel from orange through yellow and green to cyan takes black, and so do the hottest pinks and reds; the deep side from blue through violet to crimson takes white. If you design for a wide audience, also read [color blind friendly palettes](https://gradiently.design/guide/color-blindness-design), because brights that differ only in hue can look the same to some readers.

## Six bright colour palettes with hex codes

- Warm white: #fff8ec
- Hot pink: #ff2d87
- Tangerine: #ff7a00
- Lemon: #ffd60a
- Ink: #111111

Fruit stand. Three warm brights between a warm white and an ink. The ink carries all text; the brights carry shapes and big words.

- Night violet: #1a1033
- Mint teal: #00d1b2
- Lemon: #ffd60a
- Hot pink: #ff2d87
- Lilac white: #f4f1ff

Arcade. A dark ground makes brights glow, and all three pass AA against it: lemon at 12.76:1, mint teal at 9.23:1, hot pink at 5.13:1.

- **Pool party:** aqua `#00C2FF`, bright green `#34C759`, lemon `#FFD60A`, white `#FFFFFF`, deep navy `#0B1F3A` for text.
- **Primary school:** cobalt `#1D4ED8`, signal red `#C81D11`, lemon `#FFD60A`, paper `#FAF7F0`, ink `#111111`.
- **Riso print:** fluorescent pink `#FF48B0`, blue `#0078BF`, yellow `#FFE800`, newsprint `#F2EFE6`, black `#1A1A1A`.
- **Tropical:** raspberry `#E0115F`, mango `#FFA51F`, palm `#00A86B`, sand `#F6EBD9`, cocoa `#2B1B14`.

## How to keep a bright palette readable

1. **Choose an anchor first** Pick a near black or a warm off white and let it cover most of the surface. Warm white `#FFF8EC` with ink `#111111` measures 17.89:1, so every word set in ink reads.
2. **Set text in the anchor, not in a bright** Body text belongs in the anchor colour. Brights can carry a headline or a single big number, where the 3:1 large text threshold applies.
3. **Separate brights of equal lightness** Hot pink next to an electric blue such as `#2F6BFF` measures 1.28:1, and the edge seems to shimmer. Put white, black or space between them, or pair a light bright with a deep one.
4. **Limit how many brights touch the words** Three brights in a palette is plenty, and only one should sit behind any block of text. The [60 30 10 rule](https://gradiently.design/guide/60-30-10-rule) helps here: anchor 60, lead bright 30, accents 10.
5. **Check it on a phone outdoors** Brights wash out in sunlight and on low brightness screens. If the words still read on a dimmed phone, the palette works.

A bright summer sale post where the small supporting text is lost against the vivid background

A loud background with words straight on top: the headline survives, the detail line disappears.

The same bright summer sale post with every line of text clear against a calmer area behind it

The same colours, with the background settling behind the text. Still bright, and every line reads.

That right hand version is what Gradiently does by default. A Mark knows where your words sit, eases its busiest colour away from them and picks light or dark type line by line, so you can keep a palette loud without a box or shadow behind the text.

## Bright gradients without a grey middle

Blend two brights from opposite sides of the wheel in plain sRGB and the midpoint goes grey or brown. Either choose neighbours, or ask the browser to interpolate in oklch, which keeps the middle saturated. [Gradient interpolation](https://gradiently.design/guide/gradient-interpolation) explains the difference.

- Pink to lemon: `linear-gradient(135deg, #ff2d87 0%, #ff7a00 55%, #ffd60a 100%)`
- Aqua to green: `linear-gradient(135deg, #00c2ff 0%, #00d1b2 50%, #34c759 100%)`
- Pink to aqua in oklch: `linear-gradient(in oklch 135deg, #ff2d87 0%, #00c2ff 100%)`
- Pink glow on night: `radial-gradient(circle at 30% 30%, #ff2d87 0%, #8b3dff 45%, #1a1033 90%)`

Neighbouring brights blend cleanly. Opposites stay vivid when interpolated in oklch.

For more combinations, see [vibrant gradients](https://gradiently.design/guide/vibrant-gradients) and [neon gradients](https://gradiently.design/guide/neon-gradients). For full contrast guidance, read [color contrast](https://gradiently.design/guide/color-contrast-accessibility).

One warning if the palette will be printed: the most electric screen colours, especially aqua, hot pink and bright green, sit outside what standard CMYK inks can reproduce, and they come back from the printer noticeably duller. Ask for a proof, or plan on spot or fluorescent inks. [RGB vs CMYK](https://gradiently.design/guide/rgb-vs-cmyk) explains what to expect.

## FAQ

### What is a bright color palette?

A set of highly saturated colours such as hot pink, tangerine, lemon, aqua and bright green, usually balanced with a neutral anchor for text.

### Should I use white or black text on bright colours?

Use black on light brights such as yellow, orange, green, aqua and teal, and on hot pink and poppy red too. Use white on deep brights such as cobalt, violet, raspberry and signal red.

### Why do some bright colours look like they vibrate?

Two saturated colours of similar lightness side by side, such as hot pink and electric blue, make the edge between them shimmer. Separate them with a neutral or change the lightness of one.

### How many bright colours should a palette have?

Two or three brights plus one or two neutrals is plenty. Only one bright should sit behind any block of text.

### Are bright colours bad for accessibility?

Not in themselves. Problems come from text on brights with too little contrast, so check every text pair against WCAG and keep body text in a dark or light anchor.