Skip to content
Neutral Colors
Neutral
- Neutral-100
--sui-color-neutral-100#fafafa
- Neutral-200
--sui-color-neutral-200#f0f0f0
- Neutral-300
--sui-color-neutral-300#e8e8e8
- Neutral-400
--sui-color-neutral-400#d9d9d9
- Neutral-500
--sui-color-neutral-500#adadad
- Neutral-600
--sui-color-neutral-600#707070
- Neutral-700
--sui-color-neutral-700#595959
- Neutral-800
--sui-color-neutral-800#373737
- Neutral-900
--sui-color-neutral-900#262626
- Neutral-1000
--sui-color-neutral-1000#1a1a1a
Neutral Alpha Light
- Neutral-alpha-light-100A
--sui-color-neutral-alpha-light-100argba(38, 38, 38, 0.04)
- Neutral-alpha-light-200A
--sui-color-neutral-alpha-light-200argba(38, 38, 38, 0.08)
- Neutral-alpha-light-300A
--sui-color-neutral-alpha-light-300argba(38, 38, 38, 0.16)
- Neutral-alpha-light-400A
--sui-color-neutral-alpha-light-400argba(38, 38, 38, 0.24)
- Neutral-alpha-light-500A
--sui-color-neutral-alpha-light-500argba(38, 38, 38, 0.32)
- Neutral-alpha-light-600A
--sui-color-neutral-alpha-light-600argba(38, 38, 38, 0.4)
White
- White-1000
--sui-color-white-1000#ffffff
- White-100A
--sui-color-white-100argba(255, 255, 255, 0.05)
- White-200A
--sui-color-white-200argba(255, 255, 255, 0.1)
- White-300A
--sui-color-white-300argba(255, 255, 255, 0.2)
- White-400A
--sui-color-white-400argba(255, 255, 255, 0.4)
- White-500A
--sui-color-white-500argba(255, 255, 255, 0.7)
- White-600A
--sui-color-white-600argba(255, 255, 255, 0.8)
- White-700A
--sui-color-white-700argba(255, 255, 255, 0.85)
- White-800A
--sui-color-white-800argba(255, 255, 255, 0.9)
- White-900A
--sui-color-white-900argba(255, 255, 255, 0.95)
Neutral Alpha Dark
- Neutral-alpha-dark-100A
--sui-color-neutral-alpha-dark-100argba(13, 13, 13, 0.24)
- Neutral-alpha-dark-200A
--sui-color-neutral-alpha-dark-200argba(217, 217, 217, 0.04)
- Neutral-alpha-dark-300A
--sui-color-neutral-alpha-dark-300argba(217, 217, 217, 0.08)
- Neutral-alpha-dark-400A
--sui-color-neutral-alpha-dark-400argba(217, 217, 217, 0.12)
- Neutral-alpha-dark-500A
--sui-color-neutral-alpha-dark-500argba(217, 217, 217, 0.14)
- Neutral-alpha-dark-600A
--sui-color-neutral-alpha-dark-600argba(217, 217, 217, 0.2)
Black
- Black-1000
--sui-color-black-1000#0d0d0d
- Black-100A
--sui-color-black-100argba(13, 13, 13, 0.05)
- Black-200A
--sui-color-black-200argba(13, 13, 13, 0.1)
- Black-300A
--sui-color-black-300argba(13, 13, 13, 0.2)
- Black-400A
--sui-color-black-400argba(13, 13, 13, 0.4)
- Black-500A
--sui-color-black-500argba(13, 13, 13, 0.7)
- Black-600A
--sui-color-black-600argba(13, 13, 13, 0.8)
- Black-700A
--sui-color-black-700argba(13, 13, 13, 0.85)
- Black-800A
--sui-color-black-800argba(13, 13, 13, 0.9)
- Black-900A
--sui-color-black-900argba(13, 13, 13, 0.95)
Color Palettes
Blue
- Blue-100
--sui-color-blue-100#e0efff
- Blue-200
--sui-color-blue-200#c7e1ff
- Blue-300
--sui-color-blue-300#75b6ff
- Blue-400
--sui-color-blue-400#2e8fff
- Blue-400A
--sui-color-blue-400a#30b4fc
- Blue-500
--sui-color-blue-500#0f7fff
- Blue-600
--sui-color-blue-600#004ba0
- Blue-700
--sui-color-blue-700#003c80
- Blue-800
--sui-color-blue-800#002d61
- Blue-900
--sui-color-blue-900#001f42
- Blue-1000
--sui-color-blue-1000#001733
Green
- Green-100
--sui-color-green-100#dff6e9
- Green-200
--sui-color-green-200#c3eed6
- Green-300
--sui-color-green-300#88ddad
- Green-400
--sui-color-green-400#61d192
- Green-500
--sui-color-green-500#30cf76
- Green-600
--sui-color-green-600#28a961
- Green-700
--sui-color-green-700#168848
- Green-800
--sui-color-green-800#15753f
- Green-900
--sui-color-green-900#105b31
- Green-1000
--sui-color-green-1000#0c4526
Turquoise
- Turquoise-100
--sui-color-turquoise-100#cef3ed
- Turquoise-200
--sui-color-turquoise-200#9be1d8
- Turquoise-300
--sui-color-turquoise-300#62d0c2
- Turquoise-400
--sui-color-turquoise-400#50bbaf
- Turquoise-500
--sui-color-turquoise-500#36a094
- Turquoise-600
--sui-color-turquoise-600#1e8b7f
- Turquoise-700
--sui-color-turquoise-700#02786d
- Turquoise-800
--sui-color-turquoise-800#005e55
- Turquoise-900
--sui-color-turquoise-900#00443d
- Turquoise-1000
--sui-color-turquoise-1000#002b26
Purple
- Purple-100
--sui-color-purple-100#f1e0ff
- Purple-200
--sui-color-purple-200#e7c8ff
- Purple-300
--sui-color-purple-300#d28fff
- Purple-400
--sui-color-purple-400#c762ff
- Purple-500
--sui-color-purple-500#c847ff
- Purple-600
--sui-color-purple-600#c02bff
- Purple-700
--sui-color-purple-700#ab00e7
- Purple-800
--sui-color-purple-800#8600b6
- Purple-900
--sui-color-purple-900#630087
- Purple-1000
--sui-color-purple-1000#42005b
Pink
- Pink-100
--sui-color-pink-100#fee7ed
- Pink-200
--sui-color-pink-200#fbc7d5
- Pink-300
--sui-color-pink-300#f888ae
- Pink-400
--sui-color-pink-400#f65495
- Pink-500
--sui-color-pink-500#e62881
- Pink-600
--sui-color-pink-600#c8206f
- Pink-700
--sui-color-pink-700#b21a61
- Pink-800
--sui-color-pink-800#9d1756
- Pink-900
--sui-color-pink-900#74103e
- Pink-1000
--sui-color-pink-1000#4e0627
Orange
- Orange-100
--sui-color-orange-100#ffefe5
- Orange-200
--sui-color-orange-200#ffc8a8
- Orange-300
--sui-color-orange-300#ffaa7a
- Orange-400
--sui-color-orange-400#ff833d
- Orange-500
--sui-color-orange-500#ff6914
- Orange-600
--sui-color-orange-600#ff6005
- Orange-700
--sui-color-orange-700#cc5500
- Orange-800
--sui-color-orange-800#c24600
- Orange-900
--sui-color-orange-900#993800
- Orange-1000
--sui-color-orange-1000#863404
Red
- Red-100
--sui-color-red-100#ffe5e5
- Red-200
--sui-color-red-200#ffc2c2
- Red-300
--sui-color-red-300#ff8080
- Red-400
--sui-color-red-400#ff4242
- Red-500
--sui-color-red-500#ff2424
- Red-600
--sui-color-red-600#eb151c
- Red-700
--sui-color-red-700#bc1016
- Red-800
--sui-color-red-800#9a1317
- Red-900
--sui-color-red-900#881115
- Red-1000
--sui-color-red-1000#5c0a0d
Yellow
- Yellow-100
--sui-color-yellow-100#fff5d6
- Yellow-200
--sui-color-yellow-200#ffedb8
- Yellow-300
--sui-color-yellow-300#ffe38f
- Yellow-400
--sui-color-yellow-400#ffd966
- Yellow-500
--sui-color-yellow-500#ffce3d
- Yellow-600
--sui-color-yellow-600#fabd05
- Yellow-700
--sui-color-yellow-700#d48f06
- Yellow-800
--sui-color-yellow-800#bc7c05
- Yellow-900
--sui-color-yellow-900#9f6904
- Yellow-1000
--sui-color-yellow-1000#8b5304