IBM Carbon
The IBM Carbon Design System color palette. Twelve scale families (gray, cool gray, warm gray, red, magenta, purple, blue, cyan, teal, green, yellow, orange) plus black and white. Each color family ships ten stops at 10..100 in factors of ten — 10 is the lightest, 100 the deepest. Light mode (Carbon "White" / "g10" themes) uses gray-10 for the page canvas; dark mode (Carbon "g90" / "g100" themes) uses gray-100 / gray-90. Blue 60 is the canonical primary interactive color across all themes.
122 swatches 15 light roles 15 dark roles
Swatches
misc
black
#000000
white
#FFFFFF
gray
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
cool-gray
cool-gray-10
#F2F4F8
cool-gray-20
#DDE1E6
cool-gray-30
#C1C7CD
cool-gray-40
#A2A9B0
cool-gray-50
#878D96
cool-gray-60
#697077
cool-gray-70
#4D5358
cool-gray-80
#343A3F
cool-gray-90
#21272A
cool-gray-100
#121619
warm-gray
warm-gray-10
#F7F3F2
warm-gray-20
#E5E0DF
warm-gray-30
#CAC5C4
warm-gray-40
#ADA8A8
warm-gray-50
#8F8B8B
warm-gray-60
#726E6E
warm-gray-70
#565151
warm-gray-80
#3C3838
warm-gray-90
#272525
warm-gray-100
#171414
blue
blue-10
#EDF5FF
blue-20
#D0E2FF
blue-30
#A6C8FF
blue-40
#78A9FF
blue-50
#4589FF
blue-60
#0F62FE
blue-70
#0043CE
blue-80
#002D9C
blue-90
#001D6C
blue-100
#001141
red
red-10
#FFF1F1
red-20
#FFD7D9
red-30
#FFB3B8
red-40
#FF8389
red-50
#FA4D56
red-60
#DA1E28
red-70
#A2191F
red-80
#750E13
red-90
#520408
red-100
#2D0709
magenta
magenta-10
#FFF0F7
magenta-20
#FFD6E8
magenta-30
#FFAFD2
magenta-40
#FF7EB6
magenta-50
#EE5396
magenta-60
#D02670
magenta-70
#9F1853
magenta-80
#740937
magenta-90
#510224
magenta-100
#2A0A18
purple
purple-10
#F6F2FF
purple-20
#E8DAFF
purple-30
#D4BBFF
purple-40
#BE95FF
purple-50
#A56EFF
purple-60
#8A3FFC
purple-70
#6929C4
purple-80
#491D8B
purple-90
#31135E
purple-100
#1C0F30
cyan
cyan-10
#E5F6FF
cyan-20
#BAE6FF
cyan-30
#82CFFF
cyan-40
#33B1FF
cyan-50
#1192E8
cyan-60
#0072C3
cyan-70
#00539A
cyan-80
#003A6D
cyan-90
#012749
cyan-100
#061727
teal
teal-10
#D9FBFB
teal-20
#9EF0F0
teal-30
#3DDBD9
teal-40
#08BDBA
teal-50
#009D9A
teal-60
#007D79
teal-70
#005D5D
teal-80
#004144
teal-90
#022B30
teal-100
#081A1C
green
green-10
#DEFBE6
green-20
#A7F0BA
green-30
#6FDC8C
green-40
#42BE65
green-50
#24A148
green-60
#198038
green-70
#0E6027
green-80
#044317
green-90
#022D0D
green-100
#071908
yellow
yellow-10
#FCF4D6
yellow-20
#FDDC69
yellow-30
#F1C21B
yellow-40
#D2A106
yellow-50
#B28600
yellow-60
#8E6A00
yellow-70
#684E00
yellow-80
#483700
yellow-90
#302400
yellow-100
#1C1500
orange
orange-10
#FFF2E8
orange-20
#FFD9BE
orange-30
#FFB784
orange-40
#FF832B
orange-50
#EB6200
orange-60
#BA4E00
orange-70
#8A3800
orange-80
#5E2900
orange-90
#3E1A00
orange-100
#231000
Mode role mappings
Light mode (15 roles)
accent
→ purple-60 accent-hover
→ purple-70 background
→ white border
→ gray-30 error
→ red-60 primary
→ blue-60 primary-hover
→ blue-70 success
→ green-50 surface
→ gray-10 surface-elevated
→ white text-primary
→ gray-100 text-secondary
→ gray-70 text-tertiary
→ gray-60 warning
→ yellow-30 warning-hover
→ yellow-40 Dark mode (15 roles)
accent
→ purple-50 accent-hover
→ purple-40 background
→ gray-100 border
→ gray-80 error
→ red-50 primary
→ blue-60 primary-hover
→ blue-50 success
→ green-40 surface
→ gray-90 surface-elevated
→ gray-80 text-primary
→ gray-10 text-secondary
→ gray-30 text-tertiary
→ gray-40 warning
→ yellow-30 warning-hover
→ yellow-20 Provenance
- Source
- https://github.com/carbon-design-system/carbon/blob/main/packages/colors/src/colors.ts
- License
Apache-2.0- Attribution
- IBM Carbon Design System colors, Copyright IBM Corp. 2018, 2026, licensed under Apache-2.0. Hex values mirrored from @carbon/colors source.
- Imported
-
2026-05-17(upstream version @carbon/[email protected])