Color palette

Version 6.0.0
DateVersionSpectrumApr 27, 20226.0.0DownloadSep 24, 20195.0.1DownloadApr 20, 20195.0.0Download

Latest Spectrum colors#

This color palette picker only shows the latest version (6.0.0) of Spectrum’s colors. View the archive of the previous color palette (5.0.1) for the older version.

In addition to an extended palette, the latest colors have indices that do not match the previous system (5.0.1). Use the migration guide to find the latest color tokens to replace older colors.

Light theme
Color themeLightDarkDarkest
PreviewColor name
Token
Contrast :1ValueRGBHex
Gray 50
--spectrum-global-color-gray-50
1.06#ffffff
Gray 75
--spectrum-global-color-gray-75
1.04#fdfdfd
Gray 100
--spectrum-global-color-gray-100
1.00#f8f8f8
Gray 200
--spectrum-global-color-gray-200
1.18#e6e6e6
Gray 300
--spectrum-global-color-gray-300
1.38#d5d5d5
Gray 400
--spectrum-global-color-gray-400
2.02#b1b1b1
Gray 500
--spectrum-global-color-gray-500
3.01#909090
Gray 600
--spectrum-global-color-gray-600
4.87#6d6d6d
Gray 700
--spectrum-global-color-gray-700
8.89#464646
Gray 800
--spectrum-global-color-gray-800
14.98#222222
Gray 900
--spectrum-global-color-gray-900
19.77#000000
Blue 100
--spectrum-global-color-blue-100
1.08#e0f2ff
Blue 200
--spectrum-global-color-blue-200
1.20#cae8ff
Blue 300
--spectrum-global-color-blue-300
1.33#b5deff
Blue 400
--spectrum-global-color-blue-400
1.58#96cefd
Blue 500
--spectrum-global-color-blue-500
1.92#78bbfa
Blue 600
--spectrum-global-color-blue-600
2.39#59a7f6
Blue 700
--spectrum-global-color-blue-700
3.01#3892f3
Blue 800
--spectrum-global-color-blue-800
3.87#147af3
Blue 900
--spectrum-global-color-blue-900
5.07#0265dc
Blue 1000
--spectrum-global-color-blue-1000
6.72#0054b6
Blue 1100
--spectrum-global-color-blue-1100
8.84#004491
Blue 1200
--spectrum-global-color-blue-1200
11.31#003571
Blue 1300
--spectrum-global-color-blue-1300
13.94#002754
Green 100
--spectrum-global-color-green-100
1.09#cef8e0
Green 200
--spectrum-global-color-green-200
1.19#adf4ce
Green 300
--spectrum-global-color-green-300
1.34#89ecbc
Green 400
--spectrum-global-color-green-400
1.57#67dea8
Green 500
--spectrum-global-color-green-500
1.91#49cc93
Green 600
--spectrum-global-color-green-600
2.39#2fb880
Green 700
--spectrum-global-color-green-700
3.01#15a46e
Green 800
--spectrum-global-color-green-800
3.89#008f5d
Green 900
--spectrum-global-color-green-900
5.08#007a4d
Green 1000
--spectrum-global-color-green-1000
6.75#00653e
Green 1100
--spectrum-global-color-green-1100
8.89#005132
Green 1200
--spectrum-global-color-green-1200
11.32#053f27
Green 1300
--spectrum-global-color-green-1300
13.91#0a2e1d
Orange 100
--spectrum-global-color-orange-100
1.09#ffeccc
Orange 200
--spectrum-global-color-orange-200
1.20#ffdfad
Orange 300
--spectrum-global-color-orange-300
1.34#fdd291
Orange 400
--spectrum-global-color-orange-400
1.58#ffbb63
Orange 500
--spectrum-global-color-orange-500
1.91#ffa037
Orange 600
--spectrum-global-color-orange-600
2.39#f68511
Orange 700
--spectrum-global-color-orange-700
3.01#e46f00
Orange 800
--spectrum-global-color-orange-800
3.87#cb5d00
Orange 900
--spectrum-global-color-orange-900
5.07#b14c00
Orange 1000
--spectrum-global-color-orange-1000
6.71#953d00
Orange 1100
--spectrum-global-color-orange-1100
8.85#7a2f00
Orange 1200
--spectrum-global-color-orange-1200
11.31#612300
Orange 1300
--spectrum-global-color-orange-1300
13.90#491901
Red 100
--spectrum-global-color-red-100
1.08#ffebe7
Red 200
--spectrum-global-color-red-200
1.19#ffddd6
Red 300
--spectrum-global-color-red-300
1.34#ffcdc3
Red 400
--spectrum-global-color-red-400
1.57#ffb7a9
Red 500
--spectrum-global-color-red-500
1.92#ff9b88
Red 600
--spectrum-global-color-red-600
2.38#ff7c65
Red 700
--spectrum-global-color-red-700
3.01#f75c46
Red 800
--spectrum-global-color-red-800
3.88#ea3829
Red 900
--spectrum-global-color-red-900
5.09#d31510
Red 1000
--spectrum-global-color-red-1000
6.72#b40000
Red 1100
--spectrum-global-color-red-1100
8.83#930000
Red 1200
--spectrum-global-color-red-1200
11.35#740000
Red 1300
--spectrum-global-color-red-1300
13.88#590000
Celery 100
--spectrum-global-color-celery-100
1.08#cdfcbf
Celery 200
--spectrum-global-color-celery-200
1.20#aef69d
Celery 300
--spectrum-global-color-celery-300
1.33#96ee85
Celery 400
--spectrum-global-color-celery-400
1.57#72e06a
Celery 500
--spectrum-global-color-celery-500
1.91#4ecf50
Celery 600
--spectrum-global-color-celery-600
2.40#27bb36
Celery 700
--spectrum-global-color-celery-700
3.01#07a721
Celery 800
--spectrum-global-color-celery-800
3.91#009112
Celery 900
--spectrum-global-color-celery-900
5.08#007c0f
Celery 1000
--spectrum-global-color-celery-1000
6.71#00670f
Celery 1100
--spectrum-global-color-celery-1100
8.82#00530d
Celery 1200
--spectrum-global-color-celery-1200
11.38#00400a
Celery 1300
--spectrum-global-color-celery-1300
13.87#003007
Chartreuse 100
--spectrum-global-color-chartreuse-100
1.09#dbfc6e
Chartreuse 200
--spectrum-global-color-chartreuse-200
1.19#cbf443
Chartreuse 300
--spectrum-global-color-chartreuse-300
1.33#bce92a
Chartreuse 400
--spectrum-global-color-chartreuse-400
1.58#aad816
Chartreuse 500
--spectrum-global-color-chartreuse-500
1.91#98c50a
Chartreuse 600
--spectrum-global-color-chartreuse-600
2.38#87b103
Chartreuse 700
--spectrum-global-color-chartreuse-700
3.03#769c00
Chartreuse 800
--spectrum-global-color-chartreuse-800
3.88#678800
Chartreuse 900
--spectrum-global-color-chartreuse-900
5.07#577400
Chartreuse 1000
--spectrum-global-color-chartreuse-1000
6.71#486000
Chartreuse 1100
--spectrum-global-color-chartreuse-1100
8.82#3a4d00
Chartreuse 1200
--spectrum-global-color-chartreuse-1200
11.41#2c3b00
Chartreuse 1300
--spectrum-global-color-chartreuse-1300
13.88#212c00
Cyan 100
--spectrum-global-color-cyan-100
1.08#c5f8ff
Cyan 200
--spectrum-global-color-cyan-200
1.20#a4f0ff
Cyan 300
--spectrum-global-color-cyan-300
1.33#88e7fa
Cyan 400
--spectrum-global-color-cyan-400
1.57#60d8f3
Cyan 500
--spectrum-global-color-cyan-500
1.92#33c5e8
Cyan 600
--spectrum-global-color-cyan-600
2.40#12b0da
Cyan 700
--spectrum-global-color-cyan-700
3.00#019cc8
Cyan 800
--spectrum-global-color-cyan-800
3.90#0086b4
Cyan 900
--spectrum-global-color-cyan-900
5.12#00719f
Cyan 1000
--spectrum-global-color-cyan-1000
6.76#005d89
Cyan 1100
--spectrum-global-color-cyan-1100
8.88#004a73
Cyan 1200
--spectrum-global-color-cyan-1200
11.34#00395d
Cyan 1300
--spectrum-global-color-cyan-1300
13.93#002a46
Fuchsia 100
--spectrum-global-color-fuchsia-100
1.08#ffe9fc
Fuchsia 200
--spectrum-global-color-fuchsia-200
1.19#ffdafa
Fuchsia 300
--spectrum-global-color-fuchsia-300
1.34#fec7f8
Fuchsia 400
--spectrum-global-color-fuchsia-400
1.58#fbaef6
Fuchsia 500
--spectrum-global-color-fuchsia-500
1.92#f592f3
Fuchsia 600
--spectrum-global-color-fuchsia-600
2.38#ed74ed
Fuchsia 700
--spectrum-global-color-fuchsia-700
3.01#e055e2
Fuchsia 800
--spectrum-global-color-fuchsia-800
3.88#cd3ace
Fuchsia 900
--spectrum-global-color-fuchsia-900
5.07#b622b7
Fuchsia 1000
--spectrum-global-color-fuchsia-1000
6.72#9d039e
Fuchsia 1100
--spectrum-global-color-fuchsia-1100
8.85#800081
Fuchsia 1200
--spectrum-global-color-fuchsia-1200
11.29#640664
Fuchsia 1300
--spectrum-global-color-fuchsia-1300
13.93#470e46
Indigo 100
--spectrum-global-color-indigo-100
1.08#edeeff
Indigo 200
--spectrum-global-color-indigo-200
1.20#e0e2ff
Indigo 300
--spectrum-global-color-indigo-300
1.34#d3d5ff
Indigo 400
--spectrum-global-color-indigo-400
1.57#c1c4ff
Indigo 500
--spectrum-global-color-indigo-500
1.91#acafff
Indigo 600
--spectrum-global-color-indigo-600
2.39#9599ff
Indigo 700
--spectrum-global-color-indigo-700
3.00#7e84fc
Indigo 800
--spectrum-global-color-indigo-800
3.89#686df4
Indigo 900
--spectrum-global-color-indigo-900
5.10#5258e4
Indigo 1000
--spectrum-global-color-indigo-1000
6.71#4046ca
Indigo 1100
--spectrum-global-color-indigo-1100
8.87#3236a8
Indigo 1200
--spectrum-global-color-indigo-1200
11.34#262986
Indigo 1300
--spectrum-global-color-indigo-1300
13.96#1b1e64
Magenta 100
--spectrum-global-color-magenta-100
1.08#ffeaf1
Magenta 200
--spectrum-global-color-magenta-200
1.19#ffdce8
Magenta 300
--spectrum-global-color-magenta-300
1.34#ffcadd
Magenta 400
--spectrum-global-color-magenta-400
1.58#ffb2ce
Magenta 500
--spectrum-global-color-magenta-500
1.92#ff95bd
Magenta 600
--spectrum-global-color-magenta-600
2.39#fa77aa
Magenta 700
--spectrum-global-color-magenta-700
3.00#ef5a98
Magenta 800
--spectrum-global-color-magenta-800
3.88#de3d82
Magenta 900
--spectrum-global-color-magenta-900
5.08#c82269
Magenta 1000
--spectrum-global-color-magenta-1000
6.71#ad0955
Magenta 1100
--spectrum-global-color-magenta-1100
8.84#8e0045
Magenta 1200
--spectrum-global-color-magenta-1200
11.34#700037
Magenta 1300
--spectrum-global-color-magenta-1300
13.89#54032a
Purple 100
--spectrum-global-color-purple-100
1.08#f6ebff
Purple 200
--spectrum-global-color-purple-200
1.20#eeddff
Purple 300
--spectrum-global-color-purple-300
1.33#e6d0ff
Purple 400
--spectrum-global-color-purple-400
1.58#dbbbfe
Purple 500
--spectrum-global-color-purple-500
1.92#cca4fd
Purple 600
--spectrum-global-color-purple-600
2.39#bd8bfc
Purple 700
--spectrum-global-color-purple-700
3.01#ae72f9
Purple 800
--spectrum-global-color-purple-800
3.87#9d57f4
Purple 900
--spectrum-global-color-purple-900
5.09#893de7
Purple 1000
--spectrum-global-color-purple-1000
6.71#7326d3
Purple 1100
--spectrum-global-color-purple-1100
8.82#5d13b7
Purple 1200
--spectrum-global-color-purple-1200
11.31#470c94
Purple 1300
--spectrum-global-color-purple-1300
13.90#33106a
Seafoam 100
--spectrum-global-color-seafoam-100
1.09#cef7f3
Seafoam 200
--spectrum-global-color-seafoam-200
1.20#aaf1ea
Seafoam 300
--spectrum-global-color-seafoam-300
1.33#8ce9e2
Seafoam 400
--spectrum-global-color-seafoam-400
1.58#65dad2
Seafoam 500
--spectrum-global-color-seafoam-500
1.91#3fc9c1
Seafoam 600
--spectrum-global-color-seafoam-600
2.40#0fb5ae
Seafoam 700
--spectrum-global-color-seafoam-700
3.01#00a19a
Seafoam 800
--spectrum-global-color-seafoam-800
3.88#008c87
Seafoam 900
--spectrum-global-color-seafoam-900
5.09#007772
Seafoam 1000
--spectrum-global-color-seafoam-1000
6.70#00635f
Seafoam 1100
--spectrum-global-color-seafoam-1100
8.83#0c4f4c
Seafoam 1200
--spectrum-global-color-seafoam-1200
11.41#123c3a
Seafoam 1300
--spectrum-global-color-seafoam-1300
13.92#122c2b
Yellow 100
--spectrum-global-color-yellow-100
1.09#fbf198
Yellow 200
--spectrum-global-color-yellow-200
1.20#f8e750
Yellow 300
--spectrum-global-color-yellow-300
1.33#f8d904
Yellow 400
--spectrum-global-color-yellow-400
1.58#e8c600
Yellow 500
--spectrum-global-color-yellow-500
1.91#d7b300
Yellow 600
--spectrum-global-color-yellow-600
2.38#c49f00
Yellow 700
--spectrum-global-color-yellow-700
3.00#b08c00
Yellow 800
--spectrum-global-color-yellow-800
3.89#9b7800
Yellow 900
--spectrum-global-color-yellow-900
5.07#856600
Yellow 1000
--spectrum-global-color-yellow-1000
6.76#705300
Yellow 1100
--spectrum-global-color-yellow-1100
8.80#5b4300
Yellow 1200
--spectrum-global-color-yellow-1200
11.31#483300
Yellow 1300
--spectrum-global-color-yellow-1300
13.91#362500

Changelog#

DateNumberNotesApr 27, 20226.0.0
  • Updated color indices with 14 tints and shades per color
  • Enhanced contrast for gray system
  • Removed Lightest theme
  • Updated colors with increased saturation and minor hue adjustments
  • Added cyan color
  • Restructured documentation
  • Documented high-level content related to color system (Fundamentals)
  • Documented the gray and color systems (Color system)
  • Documented background layering, app framing, two-tone pairing, and various usage guidelines (Using color)
Sep 24, 20195.0.1
  • Removed guideline about label color order and color vision deficiency.
Apr 20, 20195.0.0
  • This part of Spectrum is now individually versioned (individual versions of existing items start at 5.0.0)