Chakra UI Color Reference

The Chakra UI color palette reference shows the ten Chakra colour families — gray, red, orange, teal, cyan, purple and the rest — each as an eleven-step ramp with the step values printed.

What is Chakra UI Color Reference?

• Ten families are laid out one block each: gray, red, orange, yellow, green, teal, blue, cyan, purple and pink.
• Every block carries eleven tiles labelled 50 through 950 with the hex printed beneath each swatch, and each block begins with Chakra's published anchor for that family — the gray at #718096, the red at #e53e3e, the teal at #319795, the purple at #805ad5, the pink at #d53f8c.

The set is deliberately narrow compared with the frameworks that ship eighteen or nineteen families. Ten hues and a single gray is enough for a component library, and reading them stacked makes the reason clear: each family is far enough from its neighbours on the wheel that two of them used together will not be mistaken for each other, which matters more in a system consumed as props than in a palette meant for illustration.

Each anchor value above is Chakra's own published colour. The eleven steps around it are generated here at fixed lightnesses with the family's hue and chroma held constant, which gives a preview of the ramp in the right hue while individual steps may differ from the framework's compiled palette.

One convention differs and is worth stating. The framework's own scale runs from 50 to 900 — ten values with no 950 — and its semantic props resolve through tokens on top of those steps. This page normalises the ladder to 50 through 950, eleven steps, so the darkest tile here has no counterpart in the framework and the step numbers are not interchangeable with prop names.

Where the page pays off is in choosing rather than in lookup: comparing the orange against the yellow before committing an accent, checking whether the gray is warm or cool enough to sit under a brand colour, or seeing how pale the fifty of a family actually is before using it as a surface. Ten ramps is a size that fits the eye at once, which the larger systems cannot manage.

Comparing the families is useful in the same way. The blue and the cyan are close enough that a legend should not carry both; the teal sits between the green and the cyan and can serve as either; the orange and the yellow are separated mostly by lightness rather than by hue. Because the set is small, those relationships are visible at a glance, and a palette that looks varied as a list of names can be seen to be crowded once the ramps are stacked together.

Limits: no search, no copy buttons, no alpha variants, no semantic tokens and no 900-terminated scale.

• As a chakra ui color palette reference it provides the chakra colors list complete with every chakra palette hex value printed, the chakra ui colors resolved by family name, and each chakra color scale readable in one row.
• The ramps are fixed data rather than a generated palette, so two visits show the same ten families and the same anchor colours — which is the property a reference page needs, and the reason these values can be quoted rather than reproduced.

How to use Chakra UI Color Reference

1. Scroll to the family by name — ten blocks from gray through pink.
2. Read the steps from 50 at the lightest to 950 at the darkest.
3. Note the printed hex, or use the anchor colour that the family is anchored on.

When to use Chakra UI Color Reference vs related tools

Use this when a project follows Chakra UI and a family's values are needed, or when comparing its ten families while choosing an accent. Use the Chakra exporter when the output should be component configuration rather than a reference to read. Step spacing is easiest to compare against the Radix color reference, and the alpha scales a ten-step ramp does not list are a single value away in the alpha color generator.

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 Chakra UI Color Reference