Prism

Settings

For data visualisation — accessible, evenly-stepped Tailwind palettes. Series 1 is the anchor (highest contrast); move it on the grid.

Palette source

Tailwind, or palettes you import from a Figma / token JSON.

Mode

Different hues per series (categorical).

Hue order

Walk the hue wheel (blue, indigo, violet…).

Direction

Hue spacing: 1

Hues to skip between consecutive series.

Series: 4Step (shade spacing): 2

Distance in shade steps between consecutive series.

Contrast method

Background

Colorblind preview

Tip: click a grid cell, drag, or focus the grid and use arrow keys (±hue / ±shade) and + / − (step).

Tailwind CSS grid

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

950

900

800

700

600

500

400

300

200

100

50

Preview

Palette

WCAG ratio vs white bg

Series 18.72:1
Series 26.29:1
Series 32.72:1
Series 41.36:1

Distinguishability warnings

Series 1 & 2 are hard to tell apart under Tritanopia (ΔE 11).