Skip to content
7 Seventh UI CSS
Foundations

Color Tokens

Canonical source: Figma Primitives/Color, node 4966:7697, captured on 2026-07-16.

The current palette contains 126 canonical primitives. An additional 21 published names remain available only for backward compatibility.

Neutral Colors

Neutral

  1. Neutral-100--sui-color-neutral-100#ebeeee
  2. Neutral-200--sui-color-neutral-200#e2e9ed
  3. Neutral-300--sui-color-neutral-300#d6dfe1
  4. Neutral-400--sui-color-neutral-400#bbcad2
  5. Neutral-500--sui-color-neutral-500#8b979f
  6. Neutral-600--sui-color-neutral-600#536c73
  7. Neutral-700--sui-color-neutral-700#3e5055
  8. Neutral-800--sui-color-neutral-800#2b3436
  9. Neutral-900--sui-color-neutral-900#202627
  10. Neutral-1000--sui-color-neutral-1000#151819

Neutral Alpha Light

  1. Neutral-alpha-light-100A--sui-color-neutral-alpha-light-100a#1518190a
  2. Neutral-alpha-light-200A--sui-color-neutral-alpha-light-200a#15181914
  3. Neutral-alpha-light-300A--sui-color-neutral-alpha-light-300a#15181929
  4. Neutral-alpha-light-400A--sui-color-neutral-alpha-light-400a#1518193d
  5. Neutral-alpha-light-500A--sui-color-neutral-alpha-light-500a#15181952
  6. Neutral-alpha-light-600A--sui-color-neutral-alpha-light-600a#15181966

White

  1. White-1000--sui-color-white-1000#ffffff
  2. White-100A--sui-color-white-100a#ffffff0d
  3. White-200A--sui-color-white-200a#ffffff1a
  4. White-300A--sui-color-white-300a#ffffff33
  5. White-400A--sui-color-white-400a#ffffff66
  6. White-500A--sui-color-white-500a#ffffffb2
  7. White-600A--sui-color-white-600a#ffffffcc
  8. White-700A--sui-color-white-700a#ffffffd9
  9. White-800A--sui-color-white-800a#ffffffe5
  10. White-900A--sui-color-white-900a#fffffff2

Neutral Alpha Dark

  1. Neutral-alpha-dark-100A--sui-color-neutral-alpha-dark-100a#1518193d
  2. Neutral-alpha-dark-200A--sui-color-neutral-alpha-dark-200a#ebeeee0a
  3. Neutral-alpha-dark-300A--sui-color-neutral-alpha-dark-300a#ebeeee14
  4. Neutral-alpha-dark-400A--sui-color-neutral-alpha-dark-400a#ebeeee1f
  5. Neutral-alpha-dark-500A--sui-color-neutral-alpha-dark-500a#ebeeee24
  6. Neutral-alpha-dark-600A--sui-color-neutral-alpha-dark-600a#ebeeee33

Black

  1. Black-1000--sui-color-black-1000#0c0d0e
  2. Black-100A--sui-color-black-100a#0c0d0e0d
  3. Black-200A--sui-color-black-200a#0c0d0e1a
  4. Black-300A--sui-color-black-300a#0c0d0e33
  5. Black-400A--sui-color-black-400a#0c0d0e66
  6. Black-500A--sui-color-black-500a#0c0d0eb2
  7. Black-600A--sui-color-black-600a#0c0d0ecc
  8. Black-700A--sui-color-black-700a#0c0d0ed9
  9. Black-800A--sui-color-black-800a#0c0d0ee5
  10. Black-900A--sui-color-black-900a#0c0d0ef2

Color Palettes

Blue

  1. Blue-50--sui-color-blue-50#e5f2ff
  2. Blue-100--sui-color-blue-100#d1e7ff
  3. Blue-200--sui-color-blue-200#bddcff
  4. Blue-300--sui-color-blue-300#a8d1ff
  5. Blue-400--sui-color-blue-400#6bb0ff
  6. Blue-500--sui-color-blue-500#2e90ff
  7. Blue-600--sui-color-blue-600#0070f0
  8. Blue-700--sui-color-blue-700#005dc7
  9. Blue-800--sui-color-blue-800#004ba0
  10. Blue-900--sui-color-blue-900#003775
  11. Blue-950--sui-color-blue-950#00244d
  12. Blue-1000--sui-color-blue-1000#001a38

Green

  1. Green-50--sui-color-green-50#bedcbc
  2. Green-100--sui-color-green-100#abd5a2
  3. Green-200--sui-color-green-200#95ce91
  4. Green-300--sui-color-green-300#87c984
  5. Green-400--sui-color-green-400#6dc180
  6. Green-500--sui-color-green-500#48b554
  7. Green-600--sui-color-green-600#00a335
  8. Green-700--sui-color-green-700#00863f
  9. Green-800--sui-color-green-800#007938
  10. Green-900--sui-color-green-900#045c2f
  11. Green-950--sui-color-green-950#005023
  12. Green-1000--sui-color-green-1000#003610

Cyan

  1. Cyan-50--sui-color-cyan-50#dee9ef
  2. Cyan-100--sui-color-cyan-100#cbdee8
  3. Cyan-200--sui-color-cyan-200#b8d4e1
  4. Cyan-300--sui-color-cyan-300#a5cada
  5. Cyan-400--sui-color-cyan-400#92c1d4
  6. Cyan-500--sui-color-cyan-500#6893a7
  7. Cyan-600--sui-color-cyan-600#507888
  8. Cyan-700--sui-color-cyan-700#31586c
  9. Cyan-800--sui-color-cyan-800#21495a
  10. Cyan-900--sui-color-cyan-900#103543
  11. Cyan-950--sui-color-cyan-950#05303b
  12. Cyan-1000--sui-color-cyan-1000#002630

Red

  1. Red-50--sui-color-red-50#fde9e1
  2. Red-100--sui-color-red-100#fac3b4
  3. Red-200--sui-color-red-200#f79f8c
  4. Red-300--sui-color-red-300#f58e7b
  5. Red-400--sui-color-red-400#f0564e
  6. Red-500--sui-color-red-500#ee3d43
  7. Red-600--sui-color-red-600#d72735
  8. Red-700--sui-color-red-700#ba1122
  9. Red-800--sui-color-red-800#9d0229
  10. Red-900--sui-color-red-900#790018
  11. Red-950--sui-color-red-950#530000
  12. Red-1000--sui-color-red-1000#310000

Orange

  1. Orange-50--sui-color-orange-50#fff6e5
  2. Orange-100--sui-color-orange-100#ffeac7
  3. Orange-200--sui-color-orange-200#ffdfa8
  4. Orange-300--sui-color-orange-300#ffce7a
  5. Orange-400--sui-color-orange-400#fec359
  6. Orange-500--sui-color-orange-500#fbaf3f
  7. Orange-600--sui-color-orange-600#ee9944
  8. Orange-700--sui-color-orange-700#eb741f
  9. Orange-800--sui-color-orange-800#d66d1f
  10. Orange-900--sui-color-orange-900#bf621b
  11. Orange-950--sui-color-orange-950#a05213
  12. Orange-1000--sui-color-orange-1000#723a0e

Yellow

  1. Yellow-50--sui-color-yellow-50#fff7ea
  2. Yellow-100--sui-color-yellow-100#ffeeca
  3. Yellow-200--sui-color-yellow-200#ffe5ab
  4. Yellow-300--sui-color-yellow-300#ffdc8c
  5. Yellow-400--sui-color-yellow-400#ffd46d
  6. Yellow-500--sui-color-yellow-500#ffcc47
  7. Yellow-600--sui-color-yellow-600#eab42a
  8. Yellow-700--sui-color-yellow-700#d4a327
  9. Yellow-800--sui-color-yellow-800#bc8c1b
  10. Yellow-900--sui-color-yellow-900#a87716
  11. Yellow-950--sui-color-yellow-950#875b15
  12. Yellow-1000--sui-color-yellow-1000#674403

Turquoise

  1. Turquoise-50--sui-color-turquoise-50#bce3e5
  2. Turquoise-100--sui-color-turquoise-100#afdedd
  3. Turquoise-200--sui-color-turquoise-200#94d5d6
  4. Turquoise-300--sui-color-turquoise-300#87d0d1
  5. Turquoise-400--sui-color-turquoise-400#7cc6c4
  6. Turquoise-500--sui-color-turquoise-500#5ec0bc
  7. Turquoise-600--sui-color-turquoise-600#27bdbe
  8. Turquoise-700--sui-color-turquoise-700#00aea9
  9. Turquoise-800--sui-color-turquoise-800#00a196
  10. Turquoise-900--sui-color-turquoise-900#009190
  11. Turquoise-950--sui-color-turquoise-950#00807b
  12. Turquoise-1000--sui-color-turquoise-1000#007068

Legacy Compatibility Colors

These tokens were published in the initial 1.0 palette but are absent from the current Figma source. They remain frozen for compatibility and should not be used in new work.

Blue Legacy

  1. Blue-400A--sui-color-blue-400a#30b4fc

Purple Legacy

  1. Purple-100--sui-color-purple-100#f1e0ff
  2. Purple-200--sui-color-purple-200#e7c8ff
  3. Purple-300--sui-color-purple-300#d28fff
  4. Purple-400--sui-color-purple-400#c762ff
  5. Purple-500--sui-color-purple-500#c847ff
  6. Purple-600--sui-color-purple-600#c02bff
  7. Purple-700--sui-color-purple-700#ab00e7
  8. Purple-800--sui-color-purple-800#8600b6
  9. Purple-900--sui-color-purple-900#630087
  10. Purple-1000--sui-color-purple-1000#42005b

Pink Legacy

  1. Pink-100--sui-color-pink-100#fee7ed
  2. Pink-200--sui-color-pink-200#fbc7d5
  3. Pink-300--sui-color-pink-300#f888ae
  4. Pink-400--sui-color-pink-400#f65495
  5. Pink-500--sui-color-pink-500#e62881
  6. Pink-600--sui-color-pink-600#c8206f
  7. Pink-700--sui-color-pink-700#b21a61
  8. Pink-800--sui-color-pink-800#9d1756
  9. Pink-900--sui-color-pink-900#74103e
  10. Pink-1000--sui-color-pink-1000#4e0627