← Palettes · [email protected]

Adobe Spectrum

Adobe Spectrum's color system — the design system that powers Adobe's product surfaces (Creative Cloud, Document Cloud, Experience Cloud). Spectrum is built on tonally-paired neutral and chromatic scales (gray, blue, red, orange, yellow, chartreuse, celery, green, seafoam, cyan, indigo, purple, fuchsia, magenta, pink, brown, silver, cinnamon, turquoise), each running 100 → 1600 with a light-mode hex and a dark-mode counterpart. The brand accent on product surfaces is Spectrum Blue 900 (#3B63FB light / #5681FF dark) — the same swatch that backs the `accent-background-color-default` token. Semantic role tokens (positive, negative, notice, informative) map onto the same scales: positive=green-900, negative=red-900, notice=orange-900, informative=blue-900.

602 swatches 15 light roles 15 dark roles adobespectrumdesign-systemrole-baseddual-mode

Swatches

gray

gray-25

#FFFFFF

gray-50

#F8F8F8

gray-75

#F3F3F3

gray-100

#E9E9E9

gray-200

#E1E1E1

gray-300

#DADADA

gray-400

#C6C6C6

gray-500

#8F8F8F

gray-600

#717171

gray-700

#505050

gray-800

#292929

gray-900

#131313

gray-1000

#000000

misc

gray-25-dark

#111111

gray-50-dark

#1B1B1B

gray-75-dark

#222222

gray-100-dark

#2C2C2C

gray-200-dark

#323232

gray-300-dark

#393939

gray-400-dark

#444444

gray-500-dark

#6D6D6D

gray-600-dark

#8A8A8A

gray-700-dark

#AFAFAF

gray-800-dark

#DBDBDB

gray-900-dark

#F2F2F2

gray-1000-dark

#FFFFFF

blue-100-dark

#0E173F

blue-200-dark

#0F1C52

blue-300-dark

#0C2175

blue-400-dark

#122D9A

blue-500-dark

#1A3AC3

blue-600-dark

#2549E5

blue-700-dark

#345BF8

blue-800-dark

#4069FD

blue-900-dark

#5681FF

blue-1000-dark

#6995FE

blue-1100-dark

#7CA9FC

blue-1200-dark

#98C0FC

blue-1300-dark

#B5D5FD

blue-1400-dark

#D5E7FE

blue-1500-dark

#EEF5FF

blue-1600-dark

#FFFFFF

red-100-dark

#360A03

red-200-dark

#440D05

red-300-dark

#571107

red-400-dark

#73180B

red-500-dark

#931F11

red-600-dark

#B12617

red-700-dark

#CD2E1D

red-800-dark

#DF3422

red-900-dark

#FC432E

red-1000-dark

#FF6756

red-1100-dark

#FF8678

red-1200-dark

#FFA79D

red-1300-dark

#FFC4BD

red-1400-dark

#FFDEDB

red-1500-dark

#FFF2F0

red-1600-dark

#FFFFFF

orange-100-dark

#311000

orange-200-dark

#3D1500

orange-300-dark

#501B00

orange-400-dark

#6A2400

orange-500-dark

#872F00

orange-600-dark

#A23B00

orange-700-dark

#B94900

orange-800-dark

#C75200

orange-900-dark

#E06400

orange-1000-dark

#F37500

orange-1100-dark

#FF8900

orange-1200-dark

#FFAD2D

orange-1300-dark

#FFC974

orange-1400-dark

#FFE1B2

orange-1500-dark

#FFF3E1

orange-1600-dark

#FFFFFF

yellow-100-dark

#251700

yellow-200-dark

#2F1D00

yellow-300-dark

#3D2700

yellow-400-dark

#533400

yellow-500-dark

#6B4300

yellow-600-dark

#825200

yellow-700-dark

#976100

yellow-800-dark

#A46A00

yellow-900-dark

#BA7C00

yellow-1000-dark

#CB8D00

yellow-1100-dark

#DA9F00

yellow-1200-dark

#EBB700

yellow-1300-dark

#F9CE00

yellow-1400-dark

#FFE656

yellow-1500-dark

#FFF6C3

yellow-1600-dark

#FFFFFF

chartreuse-100-dark

#171C00

chartreuse-200-dark

#1E2400

chartreuse-300-dark

#272F00

chartreuse-400-dark

#353F00

chartreuse-500-dark

#445200

chartreuse-600-dark

#536400

chartreuse-700-dark

#617400

chartreuse-800-dark

#6A7F00

chartreuse-900-dark

#7A9300

chartreuse-1000-dark

#88A400

chartreuse-1100-dark

#97B500

chartreuse-1200-dark

#A9CB00

chartreuse-1300-dark

#BBE100

chartreuse-1400-dark

#DBF075

chartreuse-1500-dark

#F2F9CE

chartreuse-1600-dark

#FFFFFF

celery-100-dark

#0B1F00

celery-200-dark

#0F2600

celery-300-dark

#153301

celery-400-dark

#1F4304

celery-500-dark

#295608

celery-600-dark

#32690B

celery-700-dark

#3C7A0F

celery-800-dark

#428612

celery-900-dark

#4E9A17

celery-1000-dark

#58AC1C

celery-1100-dark

#64BE23

celery-1200-dark

#74D52E

celery-1300-dark

#88EA41

celery-1400-dark

#AAFB70

celery-1500-dark

#DEFFC6

celery-1600-dark

#FFFFFF

green-100-dark

#001E17

green-200-dark

#00261D

green-300-dark

#003326

green-400-dark

#004430

green-500-dark

#02573A

green-600-dark

#036A43

green-700-dark

#047C4B

green-800-dark

#068850

green-900-dark

#099D59

green-1000-dark

#0EAF62

green-1100-dark

#18C16E

green-1200-dark

#39D786

green-1300-dark

#7EE7AC

green-1400-dark

#BDF1D0

green-1500-dark

#E5FAEC

green-1600-dark

#FFFFFF

seafoam-100-dark

#001E1B

seafoam-200-dark

#002723

seafoam-300-dark

#00322C

seafoam-400-dark

#00433B

seafoam-500-dark

#02564B

seafoam-600-dark

#046959

seafoam-700-dark

#067A67

seafoam-800-dark

#088670

seafoam-900-dark

#0A9A80

seafoam-1000-dark

#0CAD8E

seafoam-1100-dark

#0EBE9C

seafoam-1200-dark

#1DD6B0

seafoam-1300-dark

#7AE5CB

seafoam-1400-dark

#BAF1DE

seafoam-1500-dark

#E5F9F3

seafoam-1600-dark

#FFFFFF

cyan-100-dark

#001D27

cyan-200-dark

#002431

cyan-300-dark

#003041

cyan-400-dark

#004058

cyan-500-dark

#005271

cyan-600-dark

#03638C

cyan-700-dark

#0873A8

cyan-800-dark

#0D7DBA

cyan-900-dark

#188EDC

cyan-1000-dark

#269FF4

cyan-1100-dark

#3FB1FF

cyan-1200-dark

#6BC7FF

cyan-1300-dark

#98DBFF

cyan-1400-dark

#C3ECFC

cyan-1500-dark

#E6F8FD

cyan-1600-dark

#FFFFFF

indigo-100-dark

#1E005D

indigo-200-dark

#23006E

indigo-300-dark

#2F008C

indigo-400-dark

#3E0CAE

indigo-500-dark

#4F1ED1

indigo-600-dark

#5F34EB

indigo-700-dark

#6D4BF8

indigo-800-dark

#745BFC

indigo-900-dark

#8077FE

indigo-1000-dark

#8B8DFE

indigo-1100-dark

#99A1FF

indigo-1200-dark

#B0BAFF

indigo-1300-dark

#C7D0FF

indigo-1400-dark

#DFE4FF

indigo-1500-dark

#F3F4FF

indigo-1600-dark

#FFFFFF

purple-100-dark

#29004F

purple-200-dark

#320060

purple-300-dark

#40007A

purple-400-dark

#53009F

purple-500-dark

#6B06C3

purple-600-dark

#8222D7

purple-700-dark

#943EE0

purple-800-dark

#9D4EE4

purple-900-dark

#AD69E9

purple-1000-dark

#BA7FED

purple-1100-dark

#C595F0

purple-1200-dark

#D4B0F4

purple-1300-dark

#E1C9F7

purple-1400-dark

#EEE0FA

purple-1500-dark

#F8F3FD

purple-1600-dark

#FFFFFF

fuchsia-100-dark

#32003D

fuchsia-200-dark

#3D004A

fuchsia-300-dark

#4F005F

fuchsia-400-dark

#660978

fuchsia-500-dark

#7F1792

fuchsia-600-dark

#9726AA

fuchsia-700-dark

#AD33C0

fuchsia-800-dark

#BA3CCE

fuchsia-900-dark

#D549EB

fuchsia-1000-dark

#E85BFD

fuchsia-1100-dark

#F07AFF

fuchsia-1200-dark

#F59FFF

fuchsia-1300-dark

#F8BFFF

fuchsia-1400-dark

#FBDBFF

fuchsia-1500-dark

#FDF1FF

fuchsia-1600-dark

#FFFFFF

magenta-100-dark

#3B0016

magenta-200-dark

#4A001B

magenta-300-dark

#5D0022

magenta-400-dark

#7B002D

magenta-500-dark

#98073C

magenta-600-dark

#B5134C

magenta-700-dark

#CF1F5C

magenta-800-dark

#E02665

magenta-900-dark

#FF3377

magenta-1000-dark

#FF6095

magenta-1100-dark

#FF80AB

magenta-1200-dark

#FFA3C2

magenta-1300-dark

#FFC1D6

magenta-1400-dark

#FFDCE8

magenta-1500-dark

#FFF1F6

magenta-1600-dark

#FFFFFF

pink-100-dark

#3A0025

pink-200-dark

#47002C

pink-300-dark

#5A0039

pink-400-dark

#73074B

pink-500-dark

#8F1261

pink-600-dark

#AB1D77

pink-700-dark

#C4278A

pink-800-dark

#D52D97

pink-900-dark

#EC43AF

pink-1000-dark

#FB5AC4

pink-1100-dark

#FF7AD2

pink-1200-dark

#FF9FDF

pink-1300-dark

#FFBFEA

pink-1400-dark

#FFDBF3

pink-1500-dark

#FFF1FA

pink-1600-dark

#FFFFFF

brown-100-dark

#231808

brown-200-dark

#2C1F0B

brown-300-dark

#3A280E

brown-400-dark

#4E3713

brown-500-dark

#62471E

brown-600-dark

#73582F

brown-700-dark

#84683D

brown-800-dark

#8F7245

brown-900-dark

#A38454

brown-1000-dark

#B59362

brown-1100-dark

#C7A370

brown-1200-dark

#DEB982

brown-1300-dark

#E8CFA9

brown-1400-dark

#F2E3CE

brown-1500-dark

#FAF4EC

brown-1600-dark

#FFFFFF

silver-100-dark

#1A1A1A

silver-200-dark

#212121

silver-300-dark

#2C2C2C

silver-400-dark

#3B3B3B

silver-500-dark

#4C4C4C

silver-600-dark

#5C5C5C

silver-700-dark

#6C6C6C

silver-800-dark

#767676

silver-900-dark

#898989

silver-1000-dark

#989898

silver-1100-dark

#A9A9A9

silver-1200-dark

#BEBEBE

silver-1300-dark

#D3D3D3

silver-1400-dark

#E5E5E5

silver-1500-dark

#F4F4F4

silver-1600-dark

#FFFFFF

cinnamon-100-dark

#301104

cinnamon-200-dark

#3B1505

cinnamon-300-dark

#4F1C07

cinnamon-400-dark

#64290F

cinnamon-500-dark

#7A391C

cinnamon-600-dark

#8F4A28

cinnamon-700-dark

#A35834

cinnamon-800-dark

#B0623B

cinnamon-900-dark

#C07750

cinnamon-1000-dark

#CE8863

cinnamon-1100-dark

#DC9A76

cinnamon-1200-dark

#E8B395

cinnamon-1300-dark

#EFCBB7

cinnamon-1400-dark

#F6E1D6

cinnamon-1500-dark

#FCF4EF

cinnamon-1600-dark

#FFFFFF

turquoise-100-dark

#001E21

turquoise-200-dark

#002529

turquoise-300-dark

#003136

turquoise-400-dark

#004248

turquoise-500-dark

#03545C

turquoise-600-dark

#056770

turquoise-700-dark

#077883

turquoise-800-dark

#09838E

turquoise-900-dark

#0B97A4

turquoise-1000-dark

#0DA8B6

turquoise-1100-dark

#10BACA

turquoise-1200-dark

#40D0DC

turquoise-1300-dark

#80E1E7

turquoise-1400-dark

#B7F0F0

turquoise-1500-dark

#E4F9F9

turquoise-1600-dark

#FFFFFF

blue

blue-100

#F5F9FF

blue-200

#E5F0FE

blue-300

#CBE2FE

blue-400

#ACCFFD

blue-500

#8EB9FC

blue-600

#729EFD

blue-700

#5D89FF

blue-800

#4B75FF

blue-900

#3B63FB

blue-1000

#274DEA

blue-1100

#1D3ECF

blue-1200

#1532AD

blue-1300

#10288C

blue-1400

#0C1F69

blue-1500

#0E1843

blue-1600

#070B1E

red

red-100

#FFF6F5

red-200

#FFEBE8

red-300

#FFD6D1

red-400

#FFBCB4

red-500

#FF9D91

red-600

#FF7665

red-700

#FF513D

red-800

#F03823

red-900

#D73220

red-1000

#B72818

red-1100

#9C2113

red-1200

#811B0E

red-1300

#68150A

red-1400

#501006

red-1500

#3B0B04

red-1600

#1D0502

orange

orange-100

#FFF6E7

orange-200

#FFECCF

orange-300

#FFDA9E

orange-400

#FFC15E

orange-500

#FFA213

orange-600

#FC7D00

orange-700

#E86A00

orange-800

#D45B00

orange-900

#C24E00

orange-1000

#A73E00

orange-1100

#903300

orange-1200

#762900

orange-1300

#5F2000

orange-1400

#491800

orange-1500

#341200

orange-1600

#190800

yellow

yellow-100

#FFF8CC

yellow-200

#FFF197

yellow-300

#FFDE2C

yellow-400

#F5C700

yellow-500

#E6AF00

yellow-600

#D29500

yellow-700

#C18300

yellow-800

#AF7400

yellow-900

#9E6600

yellow-1000

#865500

yellow-1100

#724800

yellow-1200

#5D3B00

yellow-1300

#4B2F00

yellow-1400

#382300

yellow-1500

#281900

yellow-1600

#120B00

chartreuse

chartreuse-100

#F6FBDE

chartreuse-200

#EAF6AD

chartreuse-300

#D0EC46

chartreuse-400

#B6DB00

chartreuse-500

#A3C400

chartreuse-600

#8FAC00

chartreuse-700

#809900

chartreuse-800

#728900

chartreuse-900

#667A00

chartreuse-1000

#566700

chartreuse-1100

#495700

chartreuse-1200

#3C4700

chartreuse-1300

#2F3900

chartreuse-1400

#232B00

chartreuse-1500

#191E00

chartreuse-1600

#0B0E00

celery

celery-100

#EBFFDC

celery-200

#C5FF9C

celery-300

#9DF75C

celery-400

#81E43A

celery-500

#6ECE2A

celery-600

#5DB41F

celery-700

#52A119

celery-800

#489014

celery-900

#408111

celery-1000

#346D0C

celery-1100

#2C5C09

celery-1200

#234B06

celery-1300

#1B3C03

celery-1400

#132E00

celery-1500

#0C2100

celery-1600

#040F00

green

green-100

#EDFCF1

green-200

#D7F7E1

green-300

#ADEEC5

green-400

#6BE3A2

green-500

#2BD17D

green-600

#12B867

green-700

#0BA45D

green-800

#079355

green-900

#05834E

green-1000

#036E45

green-1100

#025D3C

green-1200

#014C34

green-1300

#003D2C

green-1400

#002E22

green-1500

#002119

green-1600

#000F0C

seafoam

seafoam-100

#EBFBF6

seafoam-200

#D3F6EA

seafoam-300

#A9EDD8

seafoam-400

#5CE1C2

seafoam-500

#10CFA9

seafoam-600

#0DB595

seafoam-700

#0BA286

seafoam-800

#099078

seafoam-900

#07816D

seafoam-1000

#056C5C

seafoam-1100

#035C50

seafoam-1200

#014B43

seafoam-1300

#003C36

seafoam-1400

#002E28

seafoam-1500

#00211D

seafoam-1600

#000F0E

cyan

cyan-100

#EEFAFE

cyan-200

#D9F4FD

cyan-300

#B7E7FC

cyan-400

#8AD5FF

cyan-500

#5CC0FF

cyan-600

#30A7FE

cyan-700

#1D95E7

cyan-800

#1286CD

cyan-900

#0B78B3

cyan-1000

#046691

cyan-1100

#005779

cyan-1200

#004762

cyan-1300

#00394E

cyan-1400

#002B3B

cyan-1500

#001F2B

cyan-1600

#000E14

indigo

indigo-100

#F7F8FF

indigo-200

#EBEEFF

indigo-300

#D8DEFF

indigo-400

#C0C9FF

indigo-500

#A7B2FF

indigo-600

#9197FE

indigo-700

#8480FE

indigo-800

#7A6AFD

indigo-900

#7155FA

indigo-1000

#6338EE

indigo-1100

#5424DB

indigo-1200

#4513BF

indigo-1300

#3706A0

indigo-1400

#2A0081

indigo-1500

#1F0062

indigo-1600

#110036

purple

purple-100

#FBF7FE

purple-200

#F4EBFC

purple-300

#EBDAF9

purple-400

#DDC1F6

purple-500

#D0A7F3

purple-600

#BF8AEE

purple-700

#B272EB

purple-800

#A65CE7

purple-900

#9A47E2

purple-1000

#8628D9

purple-1100

#730DCC

purple-1200

#5D00B1

purple-1300

#4B0090

purple-1400

#3B006F

purple-1500

#2C0054

purple-1600

#17002D

fuchsia

fuchsia-100

#FEF6FF

fuchsia-200

#FDE9FF

fuchsia-300

#FAD3FF

fuchsia-400

#F7B5FF

fuchsia-500

#F393FF

fuchsia-600

#EC69FF

fuchsia-700

#DF4DF5

fuchsia-800

#C844DC

fuchsia-900

#B539C8

fuchsia-1000

#9C28AF

fuchsia-1100

#871B9A

fuchsia-1200

#710F83

fuchsia-1300

#5C046D

fuchsia-1400

#480058

fuchsia-1500

#360042

fuchsia-1600

#1D0023

magenta

magenta-100

#FFF5F8

magenta-200

#FFE8F0

magenta-300

#FFD5E3

magenta-400

#FFB9D0

magenta-500

#FF98BB

magenta-600

#FF709F

magenta-700

#FF4885

magenta-800

#F02D6E

magenta-900

#D92361

magenta-1000

#BA1650

magenta-1100

#A3053E

magenta-1200

#880033

magenta-1300

#6F0028

magenta-1400

#56001E

magenta-1500

#400016

magenta-1600

#23000C

pink

pink-100

#FFF6FC

pink-200

#FFE8F7

pink-300

#FFD3F0

pink-400

#FFB5E6

pink-500

#FF94DB

pink-600

#FF67CC

pink-700

#F24CB8

pink-800

#E434A3

pink-900

#CE2A92

pink-1000

#B01F7B

pink-1100

#981668

pink-1200

#800C55

pink-1300

#690344

pink-1400

#530035

pink-1500

#3E0027

pink-1600

#210015

brown

brown-100

#FCF7F2

brown-200

#F7EEE1

brown-300

#EFDDC3

brown-400

#E5C89D

brown-500

#D6B17B

brown-600

#BE9B68

brown-700

#AB8A5A

brown-800

#9A7B4D

brown-900

#8B6D42

brown-1000

#775B32

brown-1100

#674C23

brown-1200

#583D15

brown-1300

#463111

brown-1400

#34250D

brown-1500

#261A09

brown-1600

#100C04

silver

silver-100

#F7F7F7

silver-200

#EFEFEF

silver-300

#DFDFDF

silver-400

#CCCCCC

silver-500

#B7B7B7

silver-600

#A0A0A0

silver-700

#8F8F8F

silver-800

#808080

silver-900

#727272

silver-1000

#606060

silver-1100

#515151

silver-1200

#424242

silver-1300

#343434

silver-1400

#272727

silver-1500

#1C1C1C

silver-1600

#0C0C0C

cinnamon

cinnamon-100

#FDF7F3

cinnamon-200

#F9ECE5

cinnamon-300

#F4DACB

cinnamon-400

#EDC4AC

cinnamon-500

#E5AA88

cinnamon-600

#D4916C

cinnamon-700

#C67E58

cinnamon-800

#B86D46

cinnamon-900

#AA5E38

cinnamon-1000

#934D2B

cinnamon-1100

#803E20

cinnamon-1200

#6E3015

cinnamon-1300

#5C230B

cinnamon-1400

#481906

cinnamon-1500

#341204

cinnamon-1600

#180802

turquoise

turquoise-100

#EEFBFB

turquoise-200

#D1F5F5

turquoise-300

#A9ECED

turquoise-400

#6FDDE4

turquoise-500

#27CAD8

turquoise-600

#0FB1C0

turquoise-700

#0C9EAB

turquoise-800

#0A8D99

turquoise-900

#087E89

turquoise-1000

#056B74

turquoise-1100

#035A62

turquoise-1200

#014A51

turquoise-1300

#003B41

turquoise-1400

#002C31

turquoise-1500

#002023

turquoise-1600

#000F11

Mode role mappings

Light mode (15 roles)

accent → blue-900

accent-hover → blue-1000

background → gray-25

border → gray-300

error → red-900

primary → blue-900

primary-hover → blue-1000

success → green-900

surface → gray-100

surface-elevated → gray-25

text-primary → gray-900

text-secondary → gray-700

text-tertiary → gray-600

warning → orange-900

warning-hover → orange-700

Dark mode (15 roles)

accent → blue-900-dark

accent-hover → blue-1000-dark

background → gray-25-dark

border → gray-300-dark

error → red-900-dark

primary → blue-900-dark

primary-hover → blue-1000-dark

success → green-900-dark

surface → gray-100-dark

surface-elevated → gray-50-dark

text-primary → gray-900-dark

text-secondary → gray-700-dark

text-tertiary → gray-800-dark

warning → orange-900-dark

warning-hover → orange-900

Provenance

Source: https://github.com/adobe/spectrum-css/blob/main/tokens/dist/json/tokens.json
License: Apache-2.0
Attribution: Adobe Spectrum design tokens, Copyright Adobe Inc., licensed under Apache-2.0. Hex values mirrored from the Spectrum CSS token export (`tokens/dist/json/tokens.json`) on the `main` branch. Adobe, Adobe Spectrum, and associated marks are property of Adobe Inc.
Imported: 2026-05-19 (upstream version @spectrum-css/tokens main@2026-05)
Notes: Full Spectrum grid captured 2026-05-19: 18 chromatic families (blue, red, orange, yellow, chartreuse, celery, green, seafoam, cyan, indigo, purple, fuchsia, magenta, pink, brown, silver, cinnamon, turquoise) at 16 stops each (100..1600), plus the gray neutral scale (25, 50, 75, 100..1000). Spectrum is dual-mode by construction — every stop has both a light and dark hex. The catalogue captures both as separate swatches (e.g., `blue-900` for light, `blue-900-dark` for dark) so that mode mappings can name a single swatch ID per role.