Spectrum Design Data
  • Components
  • Tokens
  • Registry
  • AI
  • Specification
  • Tools
  • Semantic color palette

    Token Type Value Resolved Deprecated Deprecated comment Replaced by
    accent-color-100 alias {blue-100} dark: rgb(14, 23, 63)
    light: rgb(245, 249, 255)
    wireframe: rgb(246, 248, 252)
    No - -
    accent-color-1000 alias {blue-1000} dark: rgb(105, 149, 254)
    light: rgb(39, 77, 234)
    wireframe: rgb(61, 94, 165)
    No - -
    accent-color-1100 alias {blue-1100} dark: rgb(124, 169, 252)
    light: rgb(29, 62, 207)
    wireframe: rgb(52, 79, 140)
    No - -
    accent-color-1200 alias {blue-1200} dark: rgb(152, 192, 252)
    light: rgb(21, 50, 173)
    wireframe: rgb(42, 65, 114)
    No - -
    accent-color-1300 alias {blue-1300} dark: rgb(181, 213, 253)
    light: rgb(16, 40, 140)
    wireframe: rgb(34, 51, 91)
    No - -
    accent-color-1400 alias {blue-1400} dark: rgb(213, 231, 254)
    light: rgb(12, 31, 105)
    wireframe: rgb(25, 39, 69)
    No - -
    accent-color-1500 alias {blue-1500} dark: rgb(238, 245, 255)
    light: rgb(14, 24, 67)
    wireframe: rgb(18, 27, 48)
    No - -
    accent-color-1600 alias {blue-1600} dark: rgb(255, 255, 255)
    light: rgb(7, 11, 30)
    wireframe: rgb(8, 12, 22)
    No - -
    accent-color-200 alias {blue-200} dark: rgb(15, 28, 82)
    light: rgb(229, 240, 254)
    wireframe: rgb(235, 239, 248)
    No - -
    accent-color-300 alias {blue-300} dark: rgb(12, 33, 117)
    light: rgb(203, 226, 254)
    wireframe: rgb(216, 224, 242)
    No - -
    accent-color-400 alias {blue-400} dark: rgb(18, 45, 154)
    light: rgb(172, 207, 253)
    wireframe: rgb(192, 205, 234)
    No - -
    accent-color-500 alias {blue-500} dark: rgb(26, 58, 195)
    light: rgb(142, 185, 252)
    wireframe: rgb(164, 183, 225)
    No - -
    accent-color-600 alias {blue-600} dark: rgb(37, 73, 229)
    light: rgb(114, 158, 253)
    wireframe: rgb(135, 160, 215)
    No - -
    accent-color-700 alias {blue-700} dark: rgb(52, 91, 248)
    light: rgb(93, 137, 255)
    wireframe: rgb(113, 142, 208)
    No - -
    accent-color-800 alias {blue-800} dark: rgb(64, 105, 253)
    light: rgb(75, 117, 255)
    wireframe: rgb(93, 127, 201)
    No - -
    accent-color-900 alias {blue-900} dark: rgb(86, 129, 255)
    light: rgb(59, 99, 251)
    wireframe: rgb(74, 111, 195)
    No - -
    accent-subtle-background-color-default color-set - dark: rgb(12, 33, 117)
    light: rgb(229, 240, 254)
    wireframe: rgb(235, 239, 248)
    No - -
    icon-color-informative alias {informative-visual-color} dark: rgb(86, 129, 255)
    light: rgb(75, 117, 255)
    wireframe: rgb(93, 127, 201)
    No - -
    icon-color-negative alias {negative-visual-color} dark: rgb(252, 67, 46)
    light: rgb(240, 56, 35)
    wireframe: rgb(93, 127, 201)
    No - -
    icon-color-neutral alias {neutral-visual-color} dark: rgb(138, 138, 138)
    light: rgb(143, 143, 143)
    wireframe: rgb(108, 142, 217)
    No - -
    icon-color-notice alias {notice-visual-color} dark: rgb(224, 100, 0)
    light: rgb(212, 91, 0)
    wireframe: rgb(93, 127, 201)
    No - -
    icon-color-positive alias {positive-visual-color} dark: rgb(9, 157, 89)
    light: rgb(7, 147, 85)
    wireframe: rgb(93, 127, 201)
    No - -
    informative-color-100 alias {blue-100} dark: rgb(14, 23, 63)
    light: rgb(245, 249, 255)
    wireframe: rgb(246, 248, 252)
    No - -
    informative-color-1000 alias {blue-1000} dark: rgb(105, 149, 254)
    light: rgb(39, 77, 234)
    wireframe: rgb(61, 94, 165)
    No - -
    informative-color-1100 alias {blue-1100} dark: rgb(124, 169, 252)
    light: rgb(29, 62, 207)
    wireframe: rgb(52, 79, 140)
    No - -
    informative-color-1200 alias {blue-1200} dark: rgb(152, 192, 252)
    light: rgb(21, 50, 173)
    wireframe: rgb(42, 65, 114)
    No - -
    informative-color-1300 alias {blue-1300} dark: rgb(181, 213, 253)
    light: rgb(16, 40, 140)
    wireframe: rgb(34, 51, 91)
    No - -
    informative-color-1400 alias {blue-1400} dark: rgb(213, 231, 254)
    light: rgb(12, 31, 105)
    wireframe: rgb(25, 39, 69)
    No - -
    informative-color-1500 alias {blue-1500} dark: rgb(238, 245, 255)
    light: rgb(14, 24, 67)
    wireframe: rgb(18, 27, 48)
    No - -
    informative-color-1600 alias {blue-1600} dark: rgb(255, 255, 255)
    light: rgb(7, 11, 30)
    wireframe: rgb(8, 12, 22)
    No - -
    informative-color-200 alias {blue-200} dark: rgb(15, 28, 82)
    light: rgb(229, 240, 254)
    wireframe: rgb(235, 239, 248)
    No - -
    informative-color-300 alias {blue-300} dark: rgb(12, 33, 117)
    light: rgb(203, 226, 254)
    wireframe: rgb(216, 224, 242)
    No - -
    informative-color-400 alias {blue-400} dark: rgb(18, 45, 154)
    light: rgb(172, 207, 253)
    wireframe: rgb(192, 205, 234)
    No - -
    informative-color-500 alias {blue-500} dark: rgb(26, 58, 195)
    light: rgb(142, 185, 252)
    wireframe: rgb(164, 183, 225)
    No - -
    informative-color-600 alias {blue-600} dark: rgb(37, 73, 229)
    light: rgb(114, 158, 253)
    wireframe: rgb(135, 160, 215)
    No - -
    informative-color-700 alias {blue-700} dark: rgb(52, 91, 248)
    light: rgb(93, 137, 255)
    wireframe: rgb(113, 142, 208)
    No - -
    informative-color-800 alias {blue-800} dark: rgb(64, 105, 253)
    light: rgb(75, 117, 255)
    wireframe: rgb(93, 127, 201)
    No - -
    informative-color-900 alias {blue-900} dark: rgb(86, 129, 255)
    light: rgb(59, 99, 251)
    wireframe: rgb(74, 111, 195)
    No - -
    informative-subtle-background-color-default color-set - dark: rgb(12, 33, 117)
    light: rgb(229, 240, 254)
    wireframe: rgb(235, 239, 248)
    No - -
    negative-color-100 alias {red-100} dark: rgb(54, 10, 3)
    light: rgb(255, 246, 245)
    wireframe: rgb(246, 248, 252)
    No - -
    negative-color-1000 alias {red-1000} dark: rgb(255, 103, 86)
    light: rgb(183, 40, 24)
    wireframe: rgb(61, 94, 165)
    No - -
    negative-color-1100 alias {red-1100} dark: rgb(255, 134, 120)
    light: rgb(156, 33, 19)
    wireframe: rgb(52, 79, 140)
    No - -
    negative-color-1200 alias {red-1200} dark: rgb(255, 167, 157)
    light: rgb(129, 27, 14)
    wireframe: rgb(42, 65, 114)
    No - -
    negative-color-1300 alias {red-1300} dark: rgb(255, 196, 189)
    light: rgb(104, 21, 10)
    wireframe: rgb(34, 51, 91)
    No - -
    negative-color-1400 alias {red-1400} dark: rgb(255, 222, 219)
    light: rgb(80, 16, 6)
    wireframe: rgb(25, 39, 69)
    No - -
    negative-color-1500 alias {red-1500} dark: rgb(255, 242, 240)
    light: rgb(59, 11, 4)
    wireframe: rgb(18, 27, 48)
    No - -
    negative-color-1600 alias {red-1600} dark: rgb(255, 255, 255)
    light: rgb(29, 5, 2)
    wireframe: rgb(8, 12, 22)
    No - -
    negative-color-200 alias {red-200} dark: rgb(68, 13, 5)
    light: rgb(255, 235, 232)
    wireframe: rgb(235, 239, 248)
    No - -
    negative-color-300 alias {red-300} dark: rgb(87, 17, 7)
    light: rgb(255, 214, 209)
    wireframe: rgb(216, 224, 242)
    No - -
    negative-color-400 alias {red-400} dark: rgb(115, 24, 11)
    light: rgb(255, 188, 180)
    wireframe: rgb(192, 205, 234)
    No - -
    negative-color-500 alias {red-500} dark: rgb(147, 31, 17)
    light: rgb(255, 157, 145)
    wireframe: rgb(164, 183, 225)
    No - -
    negative-color-600 alias {red-600} dark: rgb(177, 38, 23)
    light: rgb(255, 118, 101)
    wireframe: rgb(135, 160, 215)
    No - -
    negative-color-700 alias {red-700} dark: rgb(205, 46, 29)
    light: rgb(255, 81, 61)
    wireframe: rgb(113, 142, 208)
    No - -
    negative-color-800 alias {red-800} dark: rgb(223, 52, 34)
    light: rgb(240, 56, 35)
    wireframe: rgb(93, 127, 201)
    No - -
    negative-color-900 alias {red-900} dark: rgb(252, 67, 46)
    light: rgb(215, 50, 32)
    wireframe: rgb(74, 111, 195)
    No - -
    negative-subdued-background-color-default alias {negative-subtle-background-color-default} dark: rgb(87, 17, 7)
    light: rgb(255, 235, 232)
    wireframe: rgb(235, 239, 248)
    Yes - -
    negative-subdued-background-color-down alias {negative-color-300} dark: rgb(87, 17, 7)
    light: rgb(255, 214, 209)
    wireframe: rgb(216, 224, 242)
    Yes - -
    negative-subdued-background-color-hover alias {negative-color-300} dark: rgb(87, 17, 7)
    light: rgb(255, 214, 209)
    wireframe: rgb(216, 224, 242)
    Yes - -
    negative-subdued-background-color-key-focus alias {negative-color-300} dark: rgb(87, 17, 7)
    light: rgb(255, 214, 209)
    wireframe: rgb(216, 224, 242)
    Yes - -
    negative-subtle-background-color-default color-set - dark: rgb(87, 17, 7)
    light: rgb(255, 235, 232)
    wireframe: rgb(235, 239, 248)
    No - -
    notice-color-100 alias {orange-100} dark: rgb(49, 16, 0)
    light: rgb(255, 246, 231)
    wireframe: rgb(246, 248, 252)
    No - -
    notice-color-1000 alias {orange-1000} dark: rgb(243, 117, 0)
    light: rgb(167, 62, 0)
    wireframe: rgb(61, 94, 165)
    No - -
    notice-color-1100 alias {orange-1100} dark: rgb(255, 137, 0)
    light: rgb(144, 51, 0)
    wireframe: rgb(52, 79, 140)
    No - -
    notice-color-1200 alias {orange-1200} dark: rgb(255, 173, 45)
    light: rgb(118, 41, 0)
    wireframe: rgb(42, 65, 114)
    No - -
    notice-color-1300 alias {orange-1300} dark: rgb(255, 201, 116)
    light: rgb(95, 32, 0)
    wireframe: rgb(34, 51, 91)
    No - -
    notice-color-1400 alias {orange-1400} dark: rgb(255, 225, 178)
    light: rgb(73, 24, 0)
    wireframe: rgb(25, 39, 69)
    No - -
    notice-color-1500 alias {orange-1500} dark: rgb(255, 243, 225)
    light: rgb(52, 18, 0)
    wireframe: rgb(18, 27, 48)
    No - -
    notice-color-1600 alias {orange-1600} dark: rgb(255, 255, 255)
    light: rgb(25, 8, 0)
    wireframe: rgb(8, 12, 22)
    No - -
    notice-color-200 alias {orange-200} dark: rgb(61, 21, 0)
    light: rgb(255, 236, 207)
    wireframe: rgb(235, 239, 248)
    No - -
    notice-color-300 alias {orange-300} dark: rgb(80, 27, 0)
    light: rgb(255, 218, 158)
    wireframe: rgb(216, 224, 242)
    No - -
    notice-color-400 alias {orange-400} dark: rgb(106, 36, 0)
    light: rgb(255, 193, 94)
    wireframe: rgb(192, 205, 234)
    No - -
    notice-color-500 alias {orange-500} dark: rgb(135, 47, 0)
    light: rgb(255, 162, 19)
    wireframe: rgb(164, 183, 225)
    No - -
    notice-color-600 alias {orange-600} dark: rgb(162, 59, 0)
    light: rgb(252, 125, 0)
    wireframe: rgb(135, 160, 215)
    No - -
    notice-color-700 alias {orange-700} dark: rgb(185, 73, 0)
    light: rgb(232, 106, 0)
    wireframe: rgb(113, 142, 208)
    No - -
    notice-color-800 alias {orange-800} dark: rgb(199, 82, 0)
    light: rgb(212, 91, 0)
    wireframe: rgb(93, 127, 201)
    No - -
    notice-color-900 alias {orange-900} dark: rgb(224, 100, 0)
    light: rgb(194, 78, 0)
    wireframe: rgb(74, 111, 195)
    No - -
    notice-subtle-background-color-default color-set - dark: rgb(80, 27, 0)
    light: rgb(255, 236, 207)
    wireframe: rgb(235, 239, 248)
    No - -
    positive-color-100 alias {green-100} dark: rgb(0, 30, 23)
    light: rgb(237, 252, 241)
    wireframe: rgb(246, 248, 252)
    No - -
    positive-color-1000 alias {green-1000} dark: rgb(14, 175, 98)
    light: rgb(3, 110, 69)
    wireframe: rgb(61, 94, 165)
    No - -
    positive-color-1100 alias {green-1100} dark: rgb(24, 193, 110)
    light: rgb(2, 93, 60)
    wireframe: rgb(52, 79, 140)
    No - -
    positive-color-1200 alias {green-1200} dark: rgb(57, 215, 134)
    light: rgb(1, 76, 52)
    wireframe: rgb(42, 65, 114)
    No - -
    positive-color-1300 alias {green-1300} dark: rgb(126, 231, 172)
    light: rgb(0, 61, 44)
    wireframe: rgb(34, 51, 91)
    No - -
    positive-color-1400 alias {green-1400} dark: rgb(189, 241, 208)
    light: rgb(0, 46, 34)
    wireframe: rgb(25, 39, 69)
    No - -
    positive-color-1500 alias {green-1500} dark: rgb(229, 250, 236)
    light: rgb(0, 33, 25)
    wireframe: rgb(18, 27, 48)
    No - -
    positive-color-1600 alias {green-1600} dark: rgb(255, 255, 255)
    light: rgb(0, 15, 12)
    wireframe: rgb(8, 12, 22)
    No - -
    positive-color-200 alias {green-200} dark: rgb(0, 38, 29)
    light: rgb(215, 247, 225)
    wireframe: rgb(235, 239, 248)
    No - -
    positive-color-300 alias {green-300} dark: rgb(0, 51, 38)
    light: rgb(173, 238, 197)
    wireframe: rgb(216, 224, 242)
    No - -
    positive-color-400 alias {green-400} dark: rgb(0, 68, 48)
    light: rgb(107, 227, 162)
    wireframe: rgb(192, 205, 234)
    No - -
    positive-color-500 alias {green-500} dark: rgb(2, 87, 58)
    light: rgb(43, 209, 125)
    wireframe: rgb(164, 183, 225)
    No - -
    positive-color-600 alias {green-600} dark: rgb(3, 106, 67)
    light: rgb(18, 184, 103)
    wireframe: rgb(135, 160, 215)
    No - -
    positive-color-700 alias {green-700} dark: rgb(4, 124, 75)
    light: rgb(11, 164, 93)
    wireframe: rgb(113, 142, 208)
    No - -
    positive-color-800 alias {green-800} dark: rgb(6, 136, 80)
    light: rgb(7, 147, 85)
    wireframe: rgb(93, 127, 201)
    No - -
    positive-color-900 alias {green-900} dark: rgb(9, 157, 89)
    light: rgb(5, 131, 78)
    wireframe: rgb(74, 111, 195)
    No - -
    positive-subtle-background-color-default color-set - dark: rgb(0, 51, 38)
    light: rgb(215, 247, 225)
    wireframe: rgb(235, 239, 248)
    No - -