What is the difference between cool-gray and warm-gray?

A small shift in hue direction — one leans blue, the other yellow. Both are near-neutral, so the difference is easiest to see with the two ramps side by side.

Do the step numbers match Carbon's tokens?

No. The labels are normalised to 50 at the lightest and 900 at the deepest, while the framework numbers its own steps in the opposite direction, so the numbers are not interchangeable.

Do the anchor colours come from the framework?

Each family's base value is Carbon's published colour. The ten numbered steps are generated from it at fixed lightnesses rather than copied from the framework's scale.

Can I look up a role or token name?

Not here — the page shows families and steps only, with no search and no mapping back to the framework's token identifiers.

Are the anchors usable on their own?

Yes — each family's anchor is the framework's published value, so it can be taken verbatim; the ten steps around it are previews at fixed lightnesses and are the part to treat as an approximation.

IBM Carbon Color Reference

blue

#97efff

100

#87deff

200

#70c5ff

300

#51a3ff

400

#3282ff

500

#0d60fc

600

#0043df

700

#0027c7

800

#0000a4

900

#130082

cool-gray

#eef6fe

100

#dee6ee

200

#c7cfd7

300

#a7afb7

400

#899097

500

#6b7279

600

#555c62

700

#42484f

800

#282f35

900

#11171c

warm-gray

#f8f4f0

100

#e7e4df

200

#d0cdc9

300

#b1ada9

400

#928f8a

500

#74716d

600

#5d5a56

700

#4a4744

800

#302d2a

900

#181613

green

#b0ffbf

100

#a0ffaf

200

#89e799

300

#69c67a

400

#48a65c

500

#23873f

600

#006f27

700

#005a11

800

#003e00

900

#002300

red

#ffb3a6

100

#ffa296

200

#ff8a80

300

#ff6761

400

#f84342

500

#d31022

600

#b60000

700

#9d0000

800

#790000

900

#550000

magenta

#ffb3ed

100

#ffa2dd

200

#ff8ac6

300

#ff69a6

400

#ed4688

500

#c91c6b

600

#ac0054

700

#940041

800

#710028

900

#4e0011

purple

#ffcaff

100

#f4b9ff

200

#dda1ff

300

#be7eff

400

#a05cff

500

#8335f4

600

#6e01d7

700

#5c00bf

800

#44009d

900

#2f007b

cyan

#92ffff

100

#81eeff

200

#69d6ff

300

#46b5ff

400

#1895eb

500

#0076c9

600

#005daf

700

#004898

800

#002978

900

#000459

teal

#97ffff

100

#85fcf7

200

#6de4e0

300

#48c3c0

400

#17a4a0

500

#008582

600

#006d6b

700

#005857

800

#003c3c

900

#002223

yellow

#fff05e

100

#ffdf4a

200

#f7c828

300

#d6a700

400

#b68800

500

#966900

600

#7e5200

700

#693e00

800

#4d2100

900

#310400

orange

#ffcf7f

100

#ffbf6f

200

#ffa756

300

#ff8730

400

#e06700

500

#bd4700

600

#a22c00

700

#8a0d00

800

#690000

900

#480000

You Might Also Need

Atlassian Design Color Reference

Browse Atlassian Design colors

The IBM Carbon color palette reference shows eleven Carbon families — blue, cool-gray, warm-gray, magenta and the rest — each as a ten-step ramp with the anchor hex printed under every swatch.

What is IBM Carbon Color Reference?

Eleven families are laid out one block each: blue, cool-gray, warm-gray, green, red, magenta, purple, cyan, teal, yellow and orange. Every block carries ten tiles labelled 50 through 900 with the hex printed beneath each swatch, so a family reads as a strip from its palest step to its deepest.

The neutrals are what make this reference distinctive. Carbon ships two of them, cool-gray at #697077 and warm-gray at #7c7975, and the difference between the two is small enough that it only becomes visible when both ramps sit side by side — one drifting blue, the other drifting yellow. Reading them here is more useful than reading their hex values, which look almost identical in isolation.

Each family is anchored on Carbon's published colour:blue at #0f62fe, green at #198038, red at #da1e28, magenta at #d12771, purple at #8a3ffc, teal at #009d9a, yellow at #f1c21b.
Those anchors are the framework's own values.
The ten steps around each are generated here at fixed lightnesses with the base's hue and chroma constant, so the ramps preview the family in the right hue rather than reproducing the framework's numbered scale exactly.

One naming difference is worth knowing. Carbon's tokens are labelled by role and step in the framework itself — a colour is identified by its family and a number that runs the other way from the usual convention, with lower numbers darker. This page normalises everything to 50 at the lightest and 900 at the deepest, so the number on a tile is not the number in a Carbon token.

In use the page suits anyone working in a Carbon-based interface who needs to see a family before choosing it, or who is mapping a design onto the token set and wants the anchors. Eleven ramps in one scroll also shows how strongly the system leans on blue and its two neutrals, with the warm hues kept to a smaller share of the palette.

Comparing the families shows the system's restraint. A large share of the hues is committed to blue and its two greys, the warm end is kept to a red, an orange and a yellow, and the magenta and the purple sit close enough together that a product would rarely need both. That distribution is deliberate in a design system built for dense enterprise interfaces, where a few dependable hues do more work than a wide wheel, and eleven ramps in one scroll make it legible in a way a token list never does.

Limits: no search, no copy buttons, no alpha or dark-theme values, no role names and no mapping from the framework's token identifiers.

As an ibm carbon color palette reference it gives the carbon design colors, and every carbon palette hex value printed, in the order the families are published — enough to read the ibm color palette as one system and to resolve carbon color tokens back to actual colours.
Nothing here changes between visits: the eleven families are fixed data with their anchors built in, which is exactly what makes a reference worth consulting twice.

How to use IBM Carbon Color Reference

Find the family you need — the two grays are first, then the saturated hues.
Compare the cool-gray and warm-gray ramps if the choice between them matters.
Read the hex printed under the step you want, remembering the labels are normalised here.

When to use IBM Carbon Color Reference vs related tools

Use this when a project follows Carbon and a family's values are needed, or when the two neutral ramps have to be compared directly. Use the Material or Bootstrap references when the system is a different one. Turning a family into tokens is what the color token generator does, and the lightness and chroma figures behind the two greys are what the palette balance analyzer reports.

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.