IBM Carbon Design System
Carbon's core color palette — IBM's open-source design system color primitives. Includes the Gray 10–100 neutral ramp and the named hue ramps (Blue, Red, Green, Yellow, Magenta, Purple, Teal, Cyan) that underpin Carbon themes (White, Gray 10, Gray 90, Gray 100).
25 swatches 18 light roles 18 dark roles
Swatches
white
#FFFFFF
gray-10
#F4F4F4
gray-20
#E0E0E0
gray-30
#C6C6C6
gray-40
#A8A8A8
gray-50
#8D8D8D
gray-60
#6F6F6F
gray-70
#525252
gray-80
#393939
gray-90
#262626
gray-100
#161616
black
#000000
blue-60
#0F62FE
blue-70
#0043CE
blue-50
#4589FF
red-60
#DA1E28
red-50
#FA4D56
green-50
#24A148
green-40
#42BE65
yellow-30
#F1C21B
yellow-20
#FDDC69
magenta-60
#D02670
purple-60
#8A3FFC
teal-60
#007D79
cyan-60
#0072C3
Mode role mappings
Light mode (18 roles)
accent
→ purple-60 annotation
→ teal-60 background
→ white cta
→ blue-60 error
→ red-60 info
→ cyan-60 outline
→ gray-30 primary
→ blue-60 primary-hover
→ blue-70 secondary-accent
→ magenta-60 special
→ purple-60 success
→ green-50 surface
→ gray-10 surface-elevated
→ white text-primary
→ gray-100 text-secondary
→ gray-70 text-tertiary
→ gray-60 warning
→ yellow-30 Dark mode (18 roles)
accent
→ purple-60 annotation
→ teal-60 background
→ gray-100 cta
→ blue-60 error
→ red-50 info
→ cyan-60 outline
→ gray-70 primary
→ blue-60 primary-hover
→ blue-50 secondary-accent
→ magenta-60 special
→ purple-60 success
→ green-40 surface
→ gray-90 surface-elevated
→ gray-80 text-primary
→ gray-10 text-secondary
→ gray-30 text-tertiary
→ gray-50 warning
→ yellow-30 Provenance
- Source
- https://github.com/carbon-design-system/carbon/blob/main/packages/colors/src/colors.js
- License
Apache-2.0- Attribution
- IBM Carbon Design System, Copyright IBM Corp. (carbon-design-system/carbon)
- Imported
-
2026-05-17