Skip to content

Chakra UI · default theme

Chakra UI colors

Gray ramp plus red, orange, yellow, green, teal, blue, cyan, purple, and pink scale anchors from Chakra UI’s default theme — searchable HEX for React projects using @chakra-ui/react.

Why this page exists

Chakra documents token names (blue.500) but designers often need a quick HEX grid during spikes. This page is that grid without opening node_modules.

How to use it

  1. Search by scale and step (e.g. gray 600) or paste a HEX fragment.
  2. Copy chips into theme.ts overrides or Storybook docs.
  3. Extend with tint & shade when you need steps between 300 and 500.

Use a different reference when…

You use Chakra v3 with completely custom primitives — generate ramps from your brand anchor instead.

Practical tips

  • gray.50–900 is usually 80% of UI surface area.
  • brand.500 often maps to blue.500 in the default theme.

Related on ChromaXP

More references and tools.

Tailwind CSSAlternative utility scales for greenfield apps. Tailwind snippetWhen the team standardizes on Tailwind instead. Material DesignGoogle’s system for comparison.

FAQ

Does this include semantic tokens?

We list core chromatic and gray scales. Semantic aliases (e.g. chakra-body-text) still resolve through your theme.

Why only some steps per hue?

The table highlights common steps; open Chakra docs for the full 50–900 ladder.

Will v3 colors match?

Major versions may shift defaults — verify against your package version.