One of Ant's family names, for a blue-violet at #2f54eb. It sits between the framework's blue and purple and is a good example of why the names exist.

Why do the step labels not match the framework?

Ant numbers its steps one to ten with one at the lightest. The same ladder is relabelled here as 50 through 900 so the references on this site read consistently.

Are the anchor colours the framework's?

Yes — each family's base value is Ant's published colour. The ten numbered steps are generated from it at fixed lightnesses rather than copied from the compiled theme.

Can I look up a component token here?

No. The page decodes family names, not the framework's component variables, and there is no search or copy interaction.

Do the generated steps line up with Ant's numbered palettes?

Not exactly — each of the ten steps is generated at a fixed lightness in the family's hue, so the anchor is Ant's own value while the steps around it are this page's rendering rather than the framework's numbered tints.

Ant Design Color Reference

red

#ffaa9d

100

#ff988d

200

#ff8076

300

#ff5b57

400

#ff3237

500

#db0010

600

#bd0000

700

#a30000

800

#7f0000

900

#5a0000

volcano

#ffbb89

100

#ffaa78

200

#ff9261

300

#ff713e

400

#f44e12

500

#cf2500

600

#b30000

700

#9a0000

800

#760000

900

#530000

orange

#ffd674

100

#ffc563

200

#ffae49

300

#fc8e1a

400

#d96e00

500

#b74f00

600

#9c3500

700

#851d00

800

#650000

900

#440000

gold

#ffe565

100

#ffd452

200

#ffbd33

300

#e89c00

400

#c77d00

500

#a65e00

600

#8d4600

700

#773200

800

#581200

900

#3a0000

yellow

#fff647

100

#ffe52c

200

#edce00

300

#ccad00

400

#ac8d00

500

#8e6f00

600

#765700

700

#624300

800

#462600

900

#2c0b00

lime

#d1ff61

100

#c1fc4d

200

#abe42b

300

#8cc300

400

#6ea300

500

#528400

600

#3c6b00

700

#2a5600

800

#103a00

900

#001e00

green

#a4ff7d

100

#93ff6c

200

#7cee52

300

#5acc28

400

#37ab00

500

#008c00

600

#007300

700

#005e00

800

#004000

900

#002400

cyan

#81ffff

100

#6efefe

200

#52e7e6

300

#1ec6c6

400

#00a6a6

500

#008788

600

#006f70

700

#005a5c

800

#003e41

900

#002327

blue

#95f4ff

100

#85e2ff

200

#6ecbff

300

#4ea9ff

400

#2b88ff

500

#0067ee

600

#004cd2

700

#0034ba

800

#000098

900

#060077

geekblue

#afebff

100

#9fdaff

200

#89c2ff

300

#6ca0ff

400

#507fff

500

#365ef5

600

#2342d9

700

#1626c0

800

#10009e

900

#15007d

purple

#ffd0ff

100

#f3bfff

200

#dca8ff

300

#bd87ff

400

#9f65ff

500

#8243e4

600

#6b23c9

700

#5900b1

800

#41008f

900

#2b006e

magenta

#ffa9ff

100

#ff98f1

200

#ff80da

300

#ff5dba

400

#f1369b

500

#cd007d

600

#b00065

700

#970052

800

#730037

900

#50001e

You Might Also Need

Material Design Color Reference

Browse the Material Design palette

Fluent UI Color Reference

Browse the Microsoft Fluent palette

Chakra UI Color Reference

Browse the Chakra UI palette

Tailwind Color Reference

Browse the full Tailwind palette

The Ant Design color palette reference covers twelve Ant families — volcano, gold, geekblue, magenta and the rest — each as a ten-step ramp with the anchor hex and every step value.

What is Ant Design Color Reference?

Twelve families are shown, one block each: red, volcano, orange, gold, yellow, lime, green, cyan, blue, geekblue, purple and magenta. Each block holds ten tiles at the labels 50 through 900, with the hex printed beneath every swatch, and the families are ordered roughly around the wheel so the warm hues sit together and the cool ones follow.

The names are the reason this reference is worth its own page.
Ant Design uses poetic identifiers rather than plain hue words — volcano for a deep orange, geekblue for a blue-violet, and a gold that sits noticeably warmer than its yellow neighbour.
Reading an Ant interface or theme file means decoding those names, and this page decodes them into values: volcano at #fa541c, gold at #faad14, geekblue at #2f54eb, magenta at #eb2f96, blue at #1677ff.

Each anchor above is Ant's own published colour for the family. The ten steps under it are generated here at fixed lightnesses with the base's hue and chroma held constant, which previews the ramp in the right hue while leaving individual steps short of a pixel-exact match with the compiled theme.

One convention differs from the framework and is worth noting. Ant's own scale numbers its steps from one to ten, with one at the lightest, and the framework's components reference those numbers directly. This page relabels the same ten-value ladder as 50 through 900 for consistency with the other references, so the shade Ant calls one appears here as 50.

The families also illustrate a habit of the system: it dedicates two blue families and two orange-adjacent ones, and it names a magenta that is closer to a pink than the name suggests. Seeing all twelve ramps stacked makes those distinctions clearer than reading the tokens one at a time, and it is the fastest way to decide whether a project needs geekblue and blue both.

Comparing families is where the stacked layout pays off. The orange and the volcano are close enough to be alternatives rather than companions, the gold and the yellow overlap through most of their ramps, and the two blues are separated by a clear step towards violet — which is exactly the distinction the naming exists to preserve. Anyone building a legend from four or five of these families can check the spacing before committing, and a set that looked reasonable as names can be seen to be too crowded as colours.

Limits: no search, no copy buttons, no alpha values, no dark-theme tokens and no mapping back to the framework's component variables, so a token name cannot be resolved here — only a family.
As an ant design color palette reference it provides the ant design colors list with every ant design palette hex value printed, the antd color palette decoded by name, and the ant design color names anyone working in the system actually sees.
The page is static data rather than a generated palette, so a value noted here is the same value on the next visit — which is what makes a reference dependable in the first place.

How to use Ant Design Color Reference

Find the family by its Ant name — volcano, gold, geekblue, magenta and so on.
Read the ten steps, relabelled here from 50 to 900 in place of the framework's own numbering.
Note the hex under the step you need, or take the anchor colour the family is built on.

When to use Ant Design Color Reference vs related tools

Use this when a project uses Ant Design and a family name has to be turned into a value, or when comparing the framework's similar hues — blue against geekblue, gold against yellow. Use the Material or Bootstrap references when the system is a different one. A family that has to become tokens is the color token generator's job, and the step that will carry text is worth checking in the contrast checker.

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.