Open Color Reference

The Open Color palette reference lays out thirteen Open Color families — gray, red, grape, indigo, cyan and the rest — each as a ten-step ramp with hex values printed under every swatch.

What is Open Color Reference?

• Thirteen families are shown, one block each: gray, red, pink, grape, violet, indigo, blue, cyan, teal, green, lime, yellow and orange.
• Each block holds ten tiles at the step labels 50, 100, 200, 300, 400, 500, 600, 700, 800 and 900, with the hex printed beneath each swatch.

Open Color's own convention numbers its shades from zero to nine rather than with Tailwind-style names, and this page relabels that same ten-value ladder as 50 through 900. That is worth knowing when comparing against the package: the order and the count match, the labels do not, so the shade a project calls nine appears here as 900.

Each family is anchored on Open Color's published base: the gray at #868e96, the red at #fa5252, the grape at #be4bdb, the blue at #228be6, the teal at #12b886, the yellow at #fab005. Those are the framework's own values and the part of the page that can be used exactly as written. The ten steps above and below each anchor are generated here at fixed lightnesses, holding the base's hue and chroma constant, so they preview the ramp rather than reproduce the package's numbered values.

The set itself has a recognisable character that the stacked blocks make obvious. Open Color keeps its saturated hues fairly bright and its neutrals at a single family, which is why the grays here sit alone at one end of the list while most other frameworks ship two or three neutral ramps. It is also one of the few systems in this cluster that names a grape and a violet separately, which makes the purple region of the list worth reading closely when two similar purples are needed.

In practice this is a lookup for anyone using the package directly: find the family, pick the shade, read the value. It is also a practical way to see whether a project needs all thirteen families or whether four or five would carry the interface, since thirteen ramps in one scroll makes the redundancies plain.

Reading the families in order also shows where the set's gaps are. There is a single gray and no second neutral, so a project that needs both a warm and a cool grey will have to derive one; the pink and the grape are close enough that using both would be a mistake; and the lime and yellow ramps sit nearest to white at their pale ends, which makes them the weakest candidates for a light surface. Thirteen blocks make those judgements quick, and quick is what a reference page is for.

Limits: no search, no copy buttons, no alpha values, no dark variants and no way to filter the list.

• The open color list shows the framework's base values exactly, and every open color hex codes entry is printed under its swatch.
• Read as an open color palette reference or as a shorthand opencolor palette chart, it is the whole system in one page with its ten open color shades per family.

How to use Open Color Reference

1. Scroll to the family you need — thirteen blocks from gray through orange.
2. Read the ten steps, relabelled here from 50 to 900 in place of the package's own numbering.
3. Take the hex printed under the step, or use the family's base colour if that is what you know.

When to use Open Color Reference vs related tools

Use this when a project uses Open Color and a family's value is needed, or when comparing its thirteen families while narrowing a palette down. Use the Radix or Tailwind references when a system with alpha variants or a wider neutral range is wanted. Step spacing is the thing to compare against the Radix color reference, and a set of these shades that has to reach a stylesheet is the color palette CSS exporter's output.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Open Color Reference