Bright colour palettes that stay readable

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.

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, because brights that differ only in hue can look the same to some readers.

Six bright colour palettes with hex codes

• 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. 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. 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. 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. 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 helps here: anchor 60, lead bright 30, accents 10.

5. 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.

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 explains the difference.

For more combinations, see vibrant gradients and neon gradients. For full contrast guidance, read color contrast.

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 explains what to expect.