Colorful color palettes

Where colorful palettes work

• Product launches, campaigns and event microsites
• Kids' learning apps and creative tools
• Illustrated marketing pages and sticker-style icon sets

400 palettes, very few dark colors

This is the largest collection on the site, and it leans light. Only 41 of its 1,600 swatches are very dark (about 2.6%), while roughly a quarter are pale tints. Most palettes mix warm and cool, with orange and red the most common hues and blue, green and cyan alongside them.

In practice that means most colorful palettes give you surfaces and accents but no text color. The ones worth shortlisting for a UI are those that include their own anchor, like #FFFAE6, #FF9F66, #FF5F00, #002379, or #FC4100, #FFC55A, #00215E, #2C4E80.

Giving each color a job: #FFFAE6, #FF9F66, #FF5F00, #002379

Off-white #FFFAE6 is the page and navy #002379 is the text (13.23:1). Peach #FF9F66 works as a tinted panel or highlighted card, with navy text at 6.86:1.

Bright orange #FF5F00 is the trap. A white label on it is only 3.05:1, which fails for normal text. A navy label passes at 4.54:1, barely. So either use navy text on orange buttons, or keep the orange for large display type, illustrations and the one element per screen that should stand out. The red-orange #FC4100 in the second palette behaves similarly: 3.56:1 with white, so large text only.

Narrowing down a big collection

With 400 options, filtering beats scrolling. Use the color filter above the grid to pin your brand hue, then check each candidate against three questions:

• Does it include a swatch dark enough for text? If not, plan to add one, and judge the palette with that color in place.
• How many saturated colors does it have? Two strong colors plus two quiet ones is far easier to build with than four strong ones.
• Do any two swatches have nearly the same lightness? Those two will merge in grayscale and for many color-blind readers, so do not use them side by side as the only difference between states.

Pairing the colors

Let one hue lead and use the others for sections, categories or illustration. If the palette has a navy or deep blue, use it for text; if it does not, add one before judging the rest.

Contrast and readability

Bright oranges and reds often fail with white labels: white on #FF5F00 is 3.05:1 and on #FC4100 is 3.56:1. A dark navy label, such as #00215E on #FFC55A at 9.71:1, is usually the safer pairing.

Questions

How many colors should a colorful website use?

Usually one or two saturated accents per screen, plus neutrals for text and surfaces. A palette can contain four bright colors, but showing all of them in one component makes it hard to tell which element is interactive. Spread the rest across sections, illustrations or categories.

What is the difference between a colorful palette and a rainbow palette?

Rainbow palettes follow spectral order and keep hues at similar strength, which suits categories and charts. Colorful palettes are freer combinations, often a warm accent against a cool anchor such as orange with navy, which suits brand and campaign work.