Which step becomes my primary?

Conventionally the step nearest your input — usually 500 — with 600 as hover and 700 as pressed. The exporter emits the scale; the semantic binding follows Chakra's convention.

Does it emit the semanticTokens section too?

No — the output is the color scale, the objective half. Semantic tokens are opinions about which steps fill which roles, and Chakra's docs define the convention.

Can I export several hues for one theme?

One pass per hue, combining the snippets in the theme's colors — the same flow as any multi-color theme.

Will the derived steps match Chakra's built-in scales?

They follow the canonical spacing and match your base exactly at its step; official built-ins are hand-tuned, so treat the derived ramp as a consistent starting point.

Which step suits a hover state?

Read the ramp's spacing rather than a rule: a step or two below the base keeps the shift visible without making the state read as a different colour, and the deep end is where pressed states and text on light live.

Chakra UI Color Exporter

Color

bg-brand-50

bg-brand-100

bg-brand-200

bg-brand-300

bg-brand-400

bg-brand-500

bg-brand-600

bg-brand-700

bg-brand-800

bg-brand-900

bg-brand-950

Config

// tailwind.config.js
module.exports = {
  theme: { extend: { colors: { brand: {
      "50": "#a8f5ff",
      "100": "#9be7ff",
      "200": "#81ccff",
      "300": "#62abff",
      "400": "#438bff",
      "500": "#236bdd",
      "600": "#0251c1",
      "700": "#003baa",
      "800": "#001f8f",
      "900": "#00006f",
      "950": "#0a0056",
  }}}}}

You Might Also Need

Material UI Color Exporter

Export a palette in Material UI format

Shadcn/ui Color Exporter

Export shadcn/ui CSS variables

Tailwind CSS Color Exporter

Export a palette as Tailwind config

Color CSV Exporter

Export a palette as CSV

The Chakra UI color exporter derives a Chakra-style color scale from one hex — 50 through 900 — and emits the theme snippet Chakra's semantic tokens expect.

What is Chakra UI Color Exporter?

Chakra's theming speaks in scales: every named color is a 50-to-900 ramp, and the semantic layer — brand, danger, success — points into those ramps. The Chakra UI color exporter builds the scale half of that system from any single hex: set the base, and the tool derives the full shade ladder in the base's hue and emits the theme snippet Chakra expects, previewed as swatches labelled with their scale steps.

The derivation follows Chakra's canonical lightness spacing, so the ramp behaves the way Chakra's built-in scales do: 50 as a whisper-background, 500 as the colour's self, 600 and 700 for hover and pressed states, the deep steps for text on light surfaces.
Every step keeps the base's hue, which is the property that makes the scale feel like one colour wearing eleven weights.
That is the Chakra color scale from hex that slots into a theme file without hand-tuning each step.

The tool sits deliberately inside Chakra's architecture rather than reinventing it: the output is the scale snippet, ready to bind into a theme's colors, after which the semantic tokens — primary, secondary, states — point at the scale steps per Chakra's own convention.
That division keeps the export honest where it belongs (the objective ramp) and leaves the opinionated binding (which step is primary) to the system that owns it.
The Material and Tailwind exporters produce the equivalent ramps for their frameworks' naming, and the contrast checker referees which steps can carry text against which surfaces.

Chakra splits colour into two layers and the split is the whole point: a numeric scale holds the values, and semantic tokens hold the meaning. Components are written against the semantic names, so a theme that populates only the scale produces components that look right in one mode and unthemed in the other. That is why the semantic layer deserves as much attention as the ramp itself, and why a chakra semantic tokens export is worth treating as the deliverable rather than an afterthought: it is the layer that lets a dark mode, a brand variant or a high-contrast register be switched without touching a component. The scales underneath stay mechanical — one hue per pass, every step derived from the same base — and the meaning is assigned on top of them, which keeps the theme legible a year after it was assembled.

Assigning meaning after the ramp rather than during it is also what keeps two hues from claiming the same role.

As a chakra theme colors generator it is one hue per pass: a chakra color scale from hex in one paste, theme-ready. A full Chakra theme is as many passes as the theme has named colors — each brand hue deriving its own scale, each scale landing in the same file, the semantic layer assembling on top.

Reviewing that semantic layer against a real screen, rather than against the scale, is what catches a role that has been assigned twice or a name that no longer matches what it colours.

How to use Chakra UI Color Exporter

Set the base color for the scale.
Review the 50–900 ramp in the swatch preview.
Copy the snippet into your Chakra theme's colors, then bind semantic tokens to the steps.

When to use Chakra UI Color Exporter vs related tools

Use this to turn a brand hex into a Chakra scale. Use the Material or Tailwind exporters for those frameworks, the contrast checker for step-role verification, and the token exporters when the scales feed a token pipeline. The framework's built-in scales are laid out in the Chakra UI color reference for comparing a derived ramp against them, and the other component-library dialect of the same idea is what the shadcn/ui color exporter writes.

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.