Design system
Documentation experienceDS-07

Home / Foundations / Color

Approved

Color

Seven governed DS-12 spectra, exact anchors, semantic readiness, and measured contrast.

DS-12 governed proposal

Seven complete spectra. Every failure stays visible.

All 20 founder anchors are preserved exactly. Generated tones are proposed adaptations; semantic use remains bounded by the measured contrast register.

Families
7
Tones
91
Anchors
20 exact
Contrast
5 pass / 11 fail

primary

13 tones
0#000000RGB 0, 0, 0HSL 0°, 0%, 0%white foreground · 21.00:1
10#020E27RGB 2, 14, 39HSL 221°, 90%, 8%white foreground · 19.18:1Founder anchor
20#14213DRGB 20, 33, 61HSL 221°, 51%, 16%white foreground · 15.97:1Founder anchor
30#082872RGB 8, 40, 114HSL 222°, 87%, 24%white foreground · 13.49:1Founder anchor
40#1F3566RGB 31, 53, 102HSL 221°, 53%, 26%white foreground · 11.94:1Founder anchor
50#40727FRGB 64, 114, 127HSL 192°, 33%, 37%white foreground · 5.34:1
60#629D98RGB 98, 157, 152HSL 175°, 23%, 50%black foreground · 6.80:1
70#87C9B2RGB 135, 201, 178HSL 159°, 38%, 66%black foreground · 11.03:1
80#AEF8CBRGB 174, 248, 203HSL 144°, 84%, 83%black foreground · 17.09:1
90#D6FFE5RGB 214, 255, 229HSL 142°, 100%, 92%black foreground · 19.29:1
95#EAFFF2RGB 234, 255, 242HSL 143°, 100%, 96%black foreground · 20.08:1
99#FBFFFCRGB 251, 255, 252HSL 135°, 100%, 99%black foreground · 20.81:1
100#FFFFFFRGB 255, 255, 255HSL 0°, 0%, 100%black foreground · 21.00:1

secondary

13 tones
0#000000RGB 0, 0, 0HSL 0°, 0%, 0%white foreground · 21.00:1
10#050600RGB 5, 6, 0HSL 70°, 100%, 1%white foreground · 20.34:1
20#1F1F01RGB 31, 31, 1HSL 60°, 94%, 6%white foreground · 16.74:1
30#3C3C02RGB 60, 60, 2HSL 60°, 94%, 12%white foreground · 11.42:1
40#5C5D04RGB 92, 93, 4HSL 61°, 92%, 19%white foreground · 6.95:1
50#7E5108RGB 126, 81, 8HSL 37°, 88%, 26%white foreground · 6.85:1Founder anchor
60#A6A70BRGB 166, 167, 11HSL 60°, 88%, 35%black foreground · 8.15:1
70#D0D00ERGB 208, 208, 14HSL 60°, 87%, 44%black foreground · 12.71:1
80#FCA311RGB 252, 163, 17HSL 37°, 98%, 53%black foreground · 10.39:1Founder anchor
90#FFC25DRGB 255, 194, 93HSL 37°, 100%, 68%black foreground · 13.13:1Founder anchor
95#FBDAA5RGB 251, 218, 165HSL 37°, 91%, 82%black foreground · 15.67:1Founder anchor
99#FEFFEDRGB 254, 255, 237HSL 63°, 100%, 96%black foreground · 20.74:1
100#FFFFFFRGB 255, 255, 255HSL 0°, 0%, 100%black foreground · 21.00:1

tertiary

13 tones
0#000000RGB 0, 0, 0HSL 0°, 0%, 0%white foreground · 21.00:1
10#090401RGB 9, 4, 1HSL 23°, 80%, 2%white foreground · 20.40:1
20#29180ARGB 41, 24, 10HSL 27°, 61%, 10%white foreground · 17.08:1
30#4D3219RGB 77, 50, 25HSL 29°, 51%, 20%white foreground · 11.76:1
40#75002ARGB 117, 0, 42HSL 338°, 100%, 23%white foreground · 11.73:1Founder anchor
50#B87B3FRGB 184, 123, 63HSL 30°, 49%, 48%black foreground · 5.94:1
60#FF0054RGB 255, 0, 84HSL 340°, 100%, 50%black foreground · 5.38:1Founder anchor
70#F6437DRGB 246, 67, 125HSL 341°, 91%, 61%black foreground · 6.02:1Founder anchor
80#F59AAERGB 245, 154, 174HSL 347°, 82%, 78%black foreground · 10.12:1Founder anchor
90#FDFFD6RGB 253, 255, 214HSL 63°, 100%, 92%black foreground · 20.45:1
95#FFFFEARGB 255, 255, 234HSL 60°, 100%, 96%black foreground · 20.74:1
99#FFFFFBRGB 255, 255, 251HSL 60°, 100%, 99%black foreground · 20.95:1
100#FFFFFFRGB 255, 255, 255HSL 0°, 0%, 100%black foreground · 21.00:1

error

13 tones
0#000000RGB 0, 0, 0HSL 0°, 0%, 0%white foreground · 21.00:1
10#0F0600RGB 15, 6, 0HSL 24°, 100%, 3%white foreground · 20.07:1
20#362100RGB 54, 33, 0HSL 37°, 100%, 11%white foreground · 15.28:1
30#634000RGB 99, 64, 0HSL 39°, 100%, 19%white foreground · 9.28:1
40#946200RGB 148, 98, 0HSL 40°, 100%, 29%white foreground · 5.24:1
50#C88600RGB 200, 134, 0HSL 40°, 100%, 39%black foreground · 6.87:1
60#FF0000RGB 255, 0, 0HSL 0°, 100%, 50%black foreground · 5.25:1Founder anchor
70#FFD659RGB 255, 214, 89HSL 45°, 100%, 67%black foreground · 15.01:1
80#FFFF91RGB 255, 255, 145HSL 60°, 100%, 78%black foreground · 19.96:1
90#FFFFC8RGB 255, 255, 200HSL 60°, 100%, 89%black foreground · 20.39:1
95#FFFFE3RGB 255, 255, 227HSL 60°, 100%, 95%black foreground · 20.67:1
99#FFFFF9RGB 255, 255, 249HSL 60°, 100%, 99%black foreground · 20.92:1
100#FFFFFFRGB 255, 255, 255HSL 0°, 0%, 100%black foreground · 21.00:1

success

13 tones
0#000000RGB 0, 0, 0HSL 0°, 0%, 0%white foreground · 21.00:1
10#000600RGB 0, 6, 0HSL 120°, 100%, 1%white foreground · 20.47:1
20#022100RGB 2, 33, 0HSL 116°, 100%, 6%white foreground · 17.21:1
30#054100RGB 5, 65, 0HSL 115°, 100%, 13%white foreground · 11.91:1
40#0C6301RGB 12, 99, 1HSL 113°, 98%, 20%white foreground · 7.50:1
50#158701RGB 21, 135, 1HSL 111°, 99%, 27%white foreground · 4.67:1
60#1E8E02RGB 30, 142, 2HSL 108°, 97%, 28%black foreground · 4.93:1Founder anchor
70#62D757RGB 98, 215, 87HSL 115°, 62%, 59%black foreground · 11.38:1
80#97FF8FRGB 151, 255, 143HSL 116°, 100%, 78%black foreground · 17.02:1
90#CBFFC7RGB 203, 255, 199HSL 116°, 100%, 89%black foreground · 18.67:1
95#E5FFE3RGB 229, 255, 227HSL 116°, 100%, 95%black foreground · 19.74:1
99#FAFFF9RGB 250, 255, 249HSL 110°, 100%, 99%black foreground · 20.74:1
100#FFFFFFRGB 255, 255, 255HSL 0°, 0%, 100%black foreground · 21.00:1

warning

13 tones
0#000000RGB 0, 0, 0HSL 0°, 0%, 0%white foreground · 21.00:1
10#0A0600RGB 10, 6, 0HSL 36°, 100%, 2%white foreground · 20.21:1
20#2A2100RGB 42, 33, 0HSL 47°, 100%, 8%white foreground · 15.96:1
30#4F4000RGB 79, 64, 0HSL 49°, 100%, 15%white foreground · 10.17:1
40#786201RGB 120, 98, 1HSL 49°, 98%, 24%white foreground · 5.92:1
50#A38601RGB 163, 134, 1HSL 49°, 99%, 32%black foreground · 5.97:1
60#D0AC03RGB 208, 172, 3HSL 49°, 97%, 41%black foreground · 9.58:1
70#FF6E04RGB 255, 110, 4HSL 25°, 100%, 51%black foreground · 7.48:1Founder anchor
80#FFFF74RGB 255, 255, 116HSL 60°, 100%, 73%black foreground · 19.81:1
90#FFFFBBRGB 255, 255, 187HSL 60°, 100%, 87%black foreground · 20.27:1
95#FFFFDDRGB 255, 255, 221HSL 60°, 100%, 93%black foreground · 20.60:1
99#FFFFF8RGB 255, 255, 248HSL 60°, 100%, 99%black foreground · 20.91:1
100#FFFFFFRGB 255, 255, 255HSL 0°, 0%, 100%black foreground · 21.00:1

neutral

13 tones
0#000000RGB 0, 0, 0HSL 0°, 0%, 0%white foreground · 21.00:1
10#040904RGB 4, 9, 4HSL 120°, 38%, 3%white foreground · 20.08:1
20#1A1A1ARGB 26, 26, 26HSL 0°, 0%, 10%white foreground · 17.40:1Founder anchor
30#334833RGB 51, 72, 51HSL 120°, 17%, 24%white foreground · 9.93:1
40#4D6C4DRGB 77, 108, 77HSL 120°, 17%, 36%white foreground · 5.89:1
50#699169RGB 105, 145, 105HSL 120°, 16%, 49%black foreground · 5.85:1
60#87B987RGB 135, 185, 135HSL 120°, 26%, 63%black foreground · 9.32:1
70#A6A6A6RGB 166, 166, 166HSL 0°, 0%, 65%black foreground · 8.63:1Founder anchor
80#C6FFC6RGB 198, 255, 198HSL 120°, 100%, 89%black foreground · 18.52:1
90#E8E8E8RGB 232, 232, 232HSL 0°, 0%, 91%black foreground · 17.14:1Founder anchor
95#F3F3F3RGB 243, 243, 243HSL 0°, 0%, 95%black foreground · 18.93:1Founder anchor
99#F9F9F9RGB 249, 249, 249HSL 0°, 0%, 98%black foreground · 19.95:1Founder anchor
100#FFFFFFRGB 255, 255, 255HSL 0°, 0%, 100%black foreground · 21.00:1

Exact provenance

Anchor-to-tone mapping

FamilyRoleToneValueStatus
primaryprimary.on-primary10#020E27Adopted exact
primaryprimary.primary20#14213DAdopted exact
primaryprimary.on-container30#082872Adopted exact
primaryprimary.container40#1F3566Adopted exact
secondarysecondary.on-secondary50#7E5108Adopted exact
secondarysecondary.secondary80#FCA311Adopted exact
secondarysecondary.container90#FFC25DAdopted exact
secondarysecondary.on-container95#FBDAA5Adopted exact
tertiarytertiary.on-tertiary40#75002AAdopted exact
tertiarytertiary.tertiary60#FF0054Adopted exact
tertiarytertiary.container70#F6437DAdopted exact
tertiarytertiary.on-container80#F59AAEAdopted exact
errorstatus.error60#FF0000Adopted exact
successstatus.success60#1E8E02Adopted exact
warningstatus.warning70#FF6E04Adopted exact
neutraltext.default20#1A1A1AAdopted exact
neutralneutral.nude-270#A6A6A6Adopted exact
neutralneutral.nude-190#E8E8E8Adopted exact
neutralneutral.nude-395#F3F3F3Adopted exact
neutralbackground.default99#F9F9F9Adopted exact

Measured use

Allowed and prohibited pairs

pass

text-primary-on-background

16.53:1 · threshold 4.5:1

text.primary / surface.background
fail

text-secondary-on-background

2.31:1 · threshold 4.5:1

text.secondary / surface.background
fail

primary-on-primary

1.2:1 · threshold 4.5:1

action.primary.foreground / action.primary.background
fail

primary-on-container

1.13:1 · threshold 4.5:1

action.primary.onContainer / action.primary.container
fail

secondary-on-secondary

3.39:1 · threshold 4.5:1

action.secondary.foreground / action.secondary.background
fail

secondary-on-container

1.19:1 · threshold 4.5:1

action.secondary.onContainer / action.secondary.container
fail

tertiary-on-tertiary

3.01:1 · threshold 4.5:1

action.tertiary.foreground / action.tertiary.background
fail

tertiary-on-container

1.68:1 · threshold 4.5:1

action.tertiary.onContainer / action.tertiary.container
fail

error

4:1 · threshold 4.5:1

status.error.foreground / status.error.background
fail

success

4.26:1 · threshold 4.5:1

status.success.foreground / status.success.background
pass

warning

6.2:1 · threshold 4.5:1

status.warning.foreground / status.warning.background
pass

inverse

16.53:1 · threshold 4.5:1

inverse.foreground / inverse.background
fail

disabled

1.99:1 · threshold 3:1

disabled.foreground / disabled.background
pass

focus-on-background

3.71:1 · threshold 3:1

focus.ring / surface.background
pass

focus-on-subtle

3.52:1 · threshold 3:1

focus.ring / surface.subtle
fail

border-on-background

1.16:1 · threshold 3:1

border.default / surface.background