Spectrum

Version 6.0.0

Color palette

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 theme

Color name	Token	Contrast :1	Value
Gray 50	--spectrum-global-color-gray-50	1.06	rgb(255, 255, 255)
Gray 75	--spectrum-global-color-gray-75	1.04	rgb(253, 253, 253)
Gray 100	--spectrum-global-color-gray-100	1.00	rgb(248, 248, 248)
Gray 200	--spectrum-global-color-gray-200	1.18	rgb(230, 230, 230)
Gray 300	--spectrum-global-color-gray-300	1.38	rgb(213, 213, 213)
Gray 400	--spectrum-global-color-gray-400	2.02	rgb(177, 177, 177)
Gray 500	--spectrum-global-color-gray-500	3.01	rgb(144, 144, 144)
Gray 600	--spectrum-global-color-gray-600	4.87	rgb(109, 109, 109)
Gray 700	--spectrum-global-color-gray-700	8.89	rgb(70, 70, 70)
Gray 800	--spectrum-global-color-gray-800	14.98	rgb(34, 34, 34)
Gray 900	--spectrum-global-color-gray-900	19.77	rgb(0, 0, 0)
Blue 100	--spectrum-global-color-blue-100	1.08	rgb(224, 242, 255)
Blue 200	--spectrum-global-color-blue-200	1.20	rgb(202, 232, 255)
Blue 300	--spectrum-global-color-blue-300	1.33	rgb(181, 222, 255)
Blue 400	--spectrum-global-color-blue-400	1.58	rgb(150, 206, 253)
Blue 500	--spectrum-global-color-blue-500	1.92	rgb(120, 187, 250)
Blue 600	--spectrum-global-color-blue-600	2.39	rgb(89, 167, 246)
Blue 700	--spectrum-global-color-blue-700	3.01	rgb(56, 146, 243)
Blue 800	--spectrum-global-color-blue-800	3.87	rgb(20, 122, 243)
Blue 900	--spectrum-global-color-blue-900	5.07	rgb(2, 101, 220)
Blue 1000	--spectrum-global-color-blue-1000	6.72	rgb(0, 84, 182)
Blue 1100	--spectrum-global-color-blue-1100	8.84	rgb(0, 68, 145)
Blue 1200	--spectrum-global-color-blue-1200	11.31	rgb(0, 53, 113)
Blue 1300	--spectrum-global-color-blue-1300	13.94	rgb(0, 39, 84)
Green 100	--spectrum-global-color-green-100	1.09	rgb(206, 248, 224)
Green 200	--spectrum-global-color-green-200	1.19	rgb(173, 244, 206)
Green 300	--spectrum-global-color-green-300	1.34	rgb(137, 236, 188)
Green 400	--spectrum-global-color-green-400	1.57	rgb(103, 222, 168)
Green 500	--spectrum-global-color-green-500	1.91	rgb(73, 204, 147)
Green 600	--spectrum-global-color-green-600	2.39	rgb(47, 184, 128)
Green 700	--spectrum-global-color-green-700	3.01	rgb(21, 164, 110)
Green 800	--spectrum-global-color-green-800	3.89	rgb(0, 143, 93)
Green 900	--spectrum-global-color-green-900	5.08	rgb(0, 122, 77)
Green 1000	--spectrum-global-color-green-1000	6.75	rgb(0, 101, 62)
Green 1100	--spectrum-global-color-green-1100	8.89	rgb(0, 81, 50)
Green 1200	--spectrum-global-color-green-1200	11.32	rgb(5, 63, 39)
Green 1300	--spectrum-global-color-green-1300	13.91	rgb(10, 46, 29)
Orange 100	--spectrum-global-color-orange-100	1.09	rgb(255, 236, 204)
Orange 200	--spectrum-global-color-orange-200	1.20	rgb(255, 223, 173)
Orange 300	--spectrum-global-color-orange-300	1.34	rgb(253, 210, 145)
Orange 400	--spectrum-global-color-orange-400	1.58	rgb(255, 187, 99)
Orange 500	--spectrum-global-color-orange-500	1.91	rgb(255, 160, 55)
Orange 600	--spectrum-global-color-orange-600	2.39	rgb(246, 133, 17)
Orange 700	--spectrum-global-color-orange-700	3.01	rgb(228, 111, 0)
Orange 800	--spectrum-global-color-orange-800	3.87	rgb(203, 93, 0)
Orange 900	--spectrum-global-color-orange-900	5.07	rgb(177, 76, 0)
Orange 1000	--spectrum-global-color-orange-1000	6.71	rgb(149, 61, 0)
Orange 1100	--spectrum-global-color-orange-1100	8.85	rgb(122, 47, 0)
Orange 1200	--spectrum-global-color-orange-1200	11.31	rgb(97, 35, 0)
Orange 1300	--spectrum-global-color-orange-1300	13.90	rgb(73, 25, 1)
Red 100	--spectrum-global-color-red-100	1.08	rgb(255, 235, 231)
Red 200	--spectrum-global-color-red-200	1.19	rgb(255, 221, 214)
Red 300	--spectrum-global-color-red-300	1.34	rgb(255, 205, 195)
Red 400	--spectrum-global-color-red-400	1.57	rgb(255, 183, 169)
Red 500	--spectrum-global-color-red-500	1.92	rgb(255, 155, 136)
Red 600	--spectrum-global-color-red-600	2.38	rgb(255, 124, 101)
Red 700	--spectrum-global-color-red-700	3.01	rgb(247, 92, 70)
Red 800	--spectrum-global-color-red-800	3.88	rgb(234, 56, 41)
Red 900	--spectrum-global-color-red-900	5.09	rgb(211, 21, 16)
Red 1000	--spectrum-global-color-red-1000	6.72	rgb(180, 0, 0)
Red 1100	--spectrum-global-color-red-1100	8.83	rgb(147, 0, 0)
Red 1200	--spectrum-global-color-red-1200	11.35	rgb(116, 0, 0)
Red 1300	--spectrum-global-color-red-1300	13.88	rgb(89, 0, 0)
Celery 100	--spectrum-global-color-celery-100	1.08	rgb(205, 252, 191)
Celery 200	--spectrum-global-color-celery-200	1.20	rgb(174, 246, 157)
Celery 300	--spectrum-global-color-celery-300	1.33	rgb(150, 238, 133)
Celery 400	--spectrum-global-color-celery-400	1.57	rgb(114, 224, 106)
Celery 500	--spectrum-global-color-celery-500	1.91	rgb(78, 207, 80)
Celery 600	--spectrum-global-color-celery-600	2.40	rgb(39, 187, 54)
Celery 700	--spectrum-global-color-celery-700	3.01	rgb(7, 167, 33)
Celery 800	--spectrum-global-color-celery-800	3.91	rgb(0, 145, 18)
Celery 900	--spectrum-global-color-celery-900	5.08	rgb(0, 124, 15)
Celery 1000	--spectrum-global-color-celery-1000	6.71	rgb(0, 103, 15)
Celery 1100	--spectrum-global-color-celery-1100	8.82	rgb(0, 83, 13)
Celery 1200	--spectrum-global-color-celery-1200	11.38	rgb(0, 64, 10)
Celery 1300	--spectrum-global-color-celery-1300	13.87	rgb(0, 48, 7)
Chartreuse 100	--spectrum-global-color-chartreuse-100	1.09	rgb(219, 252, 110)
Chartreuse 200	--spectrum-global-color-chartreuse-200	1.19	rgb(203, 244, 67)
Chartreuse 300	--spectrum-global-color-chartreuse-300	1.33	rgb(188, 233, 42)
Chartreuse 400	--spectrum-global-color-chartreuse-400	1.58	rgb(170, 216, 22)
Chartreuse 500	--spectrum-global-color-chartreuse-500	1.91	rgb(152, 197, 10)
Chartreuse 600	--spectrum-global-color-chartreuse-600	2.38	rgb(135, 177, 3)
Chartreuse 700	--spectrum-global-color-chartreuse-700	3.03	rgb(118, 156, 0)
Chartreuse 800	--spectrum-global-color-chartreuse-800	3.88	rgb(103, 136, 0)
Chartreuse 900	--spectrum-global-color-chartreuse-900	5.07	rgb(87, 116, 0)
Chartreuse 1000	--spectrum-global-color-chartreuse-1000	6.71	rgb(72, 96, 0)
Chartreuse 1100	--spectrum-global-color-chartreuse-1100	8.82	rgb(58, 77, 0)
Chartreuse 1200	--spectrum-global-color-chartreuse-1200	11.41	rgb(44, 59, 0)
Chartreuse 1300	--spectrum-global-color-chartreuse-1300	13.88	rgb(33, 44, 0)
Cyan 100	--spectrum-global-color-cyan-100	1.08	rgb(197, 248, 255)
Cyan 200	--spectrum-global-color-cyan-200	1.20	rgb(164, 240, 255)
Cyan 300	--spectrum-global-color-cyan-300	1.33	rgb(136, 231, 250)
Cyan 400	--spectrum-global-color-cyan-400	1.57	rgb(96, 216, 243)
Cyan 500	--spectrum-global-color-cyan-500	1.92	rgb(51, 197, 232)
Cyan 600	--spectrum-global-color-cyan-600	2.40	rgb(18, 176, 218)
Cyan 700	--spectrum-global-color-cyan-700	3.00	rgb(1, 156, 200)
Cyan 800	--spectrum-global-color-cyan-800	3.90	rgb(0, 134, 180)
Cyan 900	--spectrum-global-color-cyan-900	5.12	rgb(0, 113, 159)
Cyan 1000	--spectrum-global-color-cyan-1000	6.76	rgb(0, 93, 137)
Cyan 1100	--spectrum-global-color-cyan-1100	8.88	rgb(0, 74, 115)
Cyan 1200	--spectrum-global-color-cyan-1200	11.34	rgb(0, 57, 93)
Cyan 1300	--spectrum-global-color-cyan-1300	13.93	rgb(0, 42, 70)
Fuchsia 100	--spectrum-global-color-fuchsia-100	1.08	rgb(255, 233, 252)
Fuchsia 200	--spectrum-global-color-fuchsia-200	1.19	rgb(255, 218, 250)
Fuchsia 300	--spectrum-global-color-fuchsia-300	1.34	rgb(254, 199, 248)
Fuchsia 400	--spectrum-global-color-fuchsia-400	1.58	rgb(251, 174, 246)
Fuchsia 500	--spectrum-global-color-fuchsia-500	1.92	rgb(245, 146, 243)
Fuchsia 600	--spectrum-global-color-fuchsia-600	2.38	rgb(237, 116, 237)
Fuchsia 700	--spectrum-global-color-fuchsia-700	3.01	rgb(224, 85, 226)
Fuchsia 800	--spectrum-global-color-fuchsia-800	3.88	rgb(205, 58, 206)
Fuchsia 900	--spectrum-global-color-fuchsia-900	5.07	rgb(182, 34, 183)
Fuchsia 1000	--spectrum-global-color-fuchsia-1000	6.72	rgb(157, 3, 158)
Fuchsia 1100	--spectrum-global-color-fuchsia-1100	8.85	rgb(128, 0, 129)
Fuchsia 1200	--spectrum-global-color-fuchsia-1200	11.29	rgb(100, 6, 100)
Fuchsia 1300	--spectrum-global-color-fuchsia-1300	13.93	rgb(71, 14, 70)
Indigo 100	--spectrum-global-color-indigo-100	1.08	rgb(237, 238, 255)
Indigo 200	--spectrum-global-color-indigo-200	1.20	rgb(224, 226, 255)
Indigo 300	--spectrum-global-color-indigo-300	1.34	rgb(211, 213, 255)
Indigo 400	--spectrum-global-color-indigo-400	1.57	rgb(193, 196, 255)
Indigo 500	--spectrum-global-color-indigo-500	1.91	rgb(172, 175, 255)
Indigo 600	--spectrum-global-color-indigo-600	2.39	rgb(149, 153, 255)
Indigo 700	--spectrum-global-color-indigo-700	3.00	rgb(126, 132, 252)
Indigo 800	--spectrum-global-color-indigo-800	3.89	rgb(104, 109, 244)
Indigo 900	--spectrum-global-color-indigo-900	5.10	rgb(82, 88, 228)
Indigo 1000	--spectrum-global-color-indigo-1000	6.71	rgb(64, 70, 202)
Indigo 1100	--spectrum-global-color-indigo-1100	8.87	rgb(50, 54, 168)
Indigo 1200	--spectrum-global-color-indigo-1200	11.34	rgb(38, 41, 134)
Indigo 1300	--spectrum-global-color-indigo-1300	13.96	rgb(27, 30, 100)
Magenta 100	--spectrum-global-color-magenta-100	1.08	rgb(255, 234, 241)
Magenta 200	--spectrum-global-color-magenta-200	1.19	rgb(255, 220, 232)
Magenta 300	--spectrum-global-color-magenta-300	1.34	rgb(255, 202, 221)
Magenta 400	--spectrum-global-color-magenta-400	1.58	rgb(255, 178, 206)
Magenta 500	--spectrum-global-color-magenta-500	1.92	rgb(255, 149, 189)
Magenta 600	--spectrum-global-color-magenta-600	2.39	rgb(250, 119, 170)
Magenta 700	--spectrum-global-color-magenta-700	3.00	rgb(239, 90, 152)
Magenta 800	--spectrum-global-color-magenta-800	3.88	rgb(222, 61, 130)
Magenta 900	--spectrum-global-color-magenta-900	5.08	rgb(200, 34, 105)
Magenta 1000	--spectrum-global-color-magenta-1000	6.71	rgb(173, 9, 85)
Magenta 1100	--spectrum-global-color-magenta-1100	8.84	rgb(142, 0, 69)
Magenta 1200	--spectrum-global-color-magenta-1200	11.34	rgb(112, 0, 55)
Magenta 1300	--spectrum-global-color-magenta-1300	13.89	rgb(84, 3, 42)
Purple 100	--spectrum-global-color-purple-100	1.08	rgb(246, 235, 255)
Purple 200	--spectrum-global-color-purple-200	1.20	rgb(238, 221, 255)
Purple 300	--spectrum-global-color-purple-300	1.33	rgb(230, 208, 255)
Purple 400	--spectrum-global-color-purple-400	1.58	rgb(219, 187, 254)
Purple 500	--spectrum-global-color-purple-500	1.92	rgb(204, 164, 253)
Purple 600	--spectrum-global-color-purple-600	2.39	rgb(189, 139, 252)
Purple 700	--spectrum-global-color-purple-700	3.01	rgb(174, 114, 249)
Purple 800	--spectrum-global-color-purple-800	3.87	rgb(157, 87, 244)
Purple 900	--spectrum-global-color-purple-900	5.09	rgb(137, 61, 231)
Purple 1000	--spectrum-global-color-purple-1000	6.71	rgb(115, 38, 211)
Purple 1100	--spectrum-global-color-purple-1100	8.82	rgb(93, 19, 183)
Purple 1200	--spectrum-global-color-purple-1200	11.31	rgb(71, 12, 148)
Purple 1300	--spectrum-global-color-purple-1300	13.90	rgb(51, 16, 106)
Seafoam 100	--spectrum-global-color-seafoam-100	1.09	rgb(206, 247, 243)
Seafoam 200	--spectrum-global-color-seafoam-200	1.20	rgb(170, 241, 234)
Seafoam 300	--spectrum-global-color-seafoam-300	1.33	rgb(140, 233, 226)
Seafoam 400	--spectrum-global-color-seafoam-400	1.58	rgb(101, 218, 210)
Seafoam 500	--spectrum-global-color-seafoam-500	1.91	rgb(63, 201, 193)
Seafoam 600	--spectrum-global-color-seafoam-600	2.40	rgb(15, 181, 174)
Seafoam 700	--spectrum-global-color-seafoam-700	3.01	rgb(0, 161, 154)
Seafoam 800	--spectrum-global-color-seafoam-800	3.88	rgb(0, 140, 135)
Seafoam 900	--spectrum-global-color-seafoam-900	5.09	rgb(0, 119, 114)
Seafoam 1000	--spectrum-global-color-seafoam-1000	6.70	rgb(0, 99, 95)
Seafoam 1100	--spectrum-global-color-seafoam-1100	8.83	rgb(12, 79, 76)
Seafoam 1200	--spectrum-global-color-seafoam-1200	11.41	rgb(18, 60, 58)
Seafoam 1300	--spectrum-global-color-seafoam-1300	13.92	rgb(18, 44, 43)
Yellow 100	--spectrum-global-color-yellow-100	1.09	rgb(251, 241, 152)
Yellow 200	--spectrum-global-color-yellow-200	1.20	rgb(248, 231, 80)
Yellow 300	--spectrum-global-color-yellow-300	1.33	rgb(248, 217, 4)
Yellow 400	--spectrum-global-color-yellow-400	1.58	rgb(232, 198, 0)
Yellow 500	--spectrum-global-color-yellow-500	1.91	rgb(215, 179, 0)
Yellow 600	--spectrum-global-color-yellow-600	2.38	rgb(196, 159, 0)
Yellow 700	--spectrum-global-color-yellow-700	3.00	rgb(176, 140, 0)
Yellow 800	--spectrum-global-color-yellow-800	3.89	rgb(155, 120, 0)
Yellow 900	--spectrum-global-color-yellow-900	5.07	rgb(133, 102, 0)
Yellow 1000	--spectrum-global-color-yellow-1000	6.76	rgb(112, 83, 0)
Yellow 1100	--spectrum-global-color-yellow-1100	8.80	rgb(91, 67, 0)
Yellow 1200	--spectrum-global-color-yellow-1200	11.31	rgb(72, 51, 0)
Yellow 1300	--spectrum-global-color-yellow-1300	13.91	rgb(54, 37, 0)

Changelog#

Date	Number	Notes
Apr 27, 2022	6.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, 2019	5.0.1	Removed guideline about label color order and color vision deficiency.
Apr 20, 2019	5.0.0	This part of Spectrum is now individually versioned (individual versions of existing items start at 5.0.0)

Using color

Typography