tailwindcssv4Visit official website

Base

2 tokens

white

#ffffff

rgb(255, 255, 255) oklch(100.000% 0.0000 nan)

black

#000000

rgb(0, 0, 0) oklch(0.000% 0.0000 nan)

Red

12 tokens

red-50

#fef2f2 rgb(254, 242, 242) oklch(97.1% 0.013 17.38)

red-100

#ffe2e2 rgb(255, 226, 226) oklch(93.6% 0.032 17.717)

red-200

#ffc9c9 rgb(255, 201, 201) oklch(88.5% 0.062 18.334)

red-300

#ffa2a2 rgb(255, 162, 162) oklch(80.8% 0.114 19.571)

red-400

#ff6467 rgb(255, 100, 103) oklch(70.4% 0.191 22.216)

red-500

#fb2c36 rgb(251, 44, 54) oklch(63.7% 0.237 25.331)

red-600

#e7000b rgb(231, 0, 11) oklch(57.7% 0.245 27.325)

red-700

#c10007 rgb(193, 0, 7) oklch(50.5% 0.213 27.518)

red-800

#9f0712 rgb(159, 7, 18) oklch(44.4% 0.177 26.899)

red-900

#82181a rgb(130, 24, 26) oklch(39.6% 0.141 25.723)

red-925

MIX

#631011 rgb(99, 16, 17) oklch(32.7% 0.116 25.9)

ΔRGB [31, 8, 9]ΔRGB [-29, -8, -8]

red-950

#460809 rgb(70, 8, 9) oklch(25.8% 0.092 26.042)

Rose

12 tokens

rose-50

#fff1f2 rgb(255, 241, 242) oklch(96.9% 0.015 12.422)

rose-100

#ffe4e6 rgb(255, 228, 230) oklch(94.1% 0.03 12.58)

rose-200

#ffccd3 rgb(255, 204, 211) oklch(89.2% 0.058 10.001)

rose-300

#ffa1ad rgb(255, 161, 173) oklch(81% 0.117 11.638)

rose-400

#ff637e rgb(255, 99, 126) oklch(71.2% 0.194 13.428)

rose-500

#ff2056 rgb(255, 32, 86) oklch(64.5% 0.246 16.439)

rose-600

#ec003f rgb(236, 0, 63) oklch(58.6% 0.253 17.585)

rose-700

#c70036 rgb(199, 0, 54) oklch(51.4% 0.222 16.935)

rose-800

#a50036 rgb(165, 0, 54) oklch(45.5% 0.188 13.697)

rose-900

#8b0836 rgb(139, 8, 54) oklch(41% 0.159 10.272)

rose-925

MIX

#6b0426 rgb(107, 4, 38) oklch(34.0% 0.132 11.2)

ΔRGB [32, 4, 16]ΔRGB [-30, -2, -14]

rose-950

#4d0218 rgb(77, 2, 24) oklch(27.1% 0.105 12.094)

Mcbile

12 tokens

mcbile-50

#fff1f1 rgb(255, 241, 241) oklch(96.913% 0.0151 17.418)

mcbile-100

#ffe4e5 rgb(255, 228, 229) oklch(94.109% 0.0297 15.135)

mcbile-200

#fecdd2 rgb(254, 205, 210) oklch(89.217% 0.0558 11.37)

mcbile-300

#fda4ae rgb(253, 164, 174) oklch(80.94% 0.106 12.369)

mcbile-400

#fb7184 rgb(251, 113, 132) oklch(71.895% 0.1689 13.885)

mcbile-500

#f43f5d rgb(244, 63, 93) oklch(64.484% 0.2154 16.779)

mcbile-600

#e11d47 rgb(225, 29, 71) oklch(58.567% 0.222 17.899)

mcbile-700

#be123b rgb(190, 18, 59) oklch(51.408% 0.1978 17.303)

mcbile-800

#9f1238 rgb(159, 18, 56) oklch(45.435% 0.1712 14.168)

mcbile-900

#881336 rgb(136, 19, 54) oklch(41.007% 0.15 10.851)

mcbile-925

#690b26 rgb(105, 11, 38) oklch(34.033% 0.1254 11.939)

ΔRGB [31, 8, 16]ΔRGB [-29, -6, -14]

mcbile-950

#4c0518 rgb(76, 5, 24) oklch(27.059% 0.1008 13.027)

Orange

12 tokens

orange-50

#fff7ed rgb(255, 247, 237) oklch(98% 0.016 73.684)

orange-100

#ffedd4 rgb(255, 237, 212) oklch(95.4% 0.038 75.164)

orange-200

#ffd6a7 rgb(255, 214, 167) oklch(90.1% 0.076 70.697)

orange-300

#ffb86a rgb(255, 184, 106) oklch(83.7% 0.128 66.29)

orange-400

#ff8904 rgb(255, 137, 4) oklch(75% 0.183 55.934)

orange-500

#ff6900 rgb(255, 105, 0) oklch(70.5% 0.213 47.604)

orange-600

#f54900 rgb(245, 73, 0) oklch(64.6% 0.222 41.116)

orange-700

#ca3500 rgb(202, 53, 0) oklch(55.3% 0.195 38.402)

orange-800

#9f2d00 rgb(159, 45, 0) oklch(47% 0.157 37.304)

orange-900

#7e2a0c rgb(126, 42, 12) oklch(40.8% 0.123 38.172)

orange-925

MIX

#601e09 rgb(96, 30, 9) oklch(33.7% 0.101 37.2)

ΔRGB [30, 12, 3]ΔRGB [-28, -11, -3]

orange-950

#441306 rgb(68, 19, 6) oklch(26.6% 0.079 36.259)

Amber

12 tokens

amber-50

#fffbeb rgb(255, 251, 235) oklch(98.7% 0.022 95.277)

amber-100

#fef3c6 rgb(254, 243, 198) oklch(96.2% 0.059 95.617)

amber-200

#fee685 rgb(254, 230, 133) oklch(92.4% 0.12 95.746)

amber-300

#ffd230 rgb(255, 210, 48) oklch(87.9% 0.169 91.605)

amber-400

#ffb900 rgb(255, 185, 0) oklch(82.8% 0.189 84.429)

amber-500

#fe9a00 rgb(254, 154, 0) oklch(76.9% 0.188 70.08)

amber-600

#e17100 rgb(225, 113, 0) oklch(66.6% 0.179 58.318)

amber-700

#bb4d00 rgb(187, 77, 0) oklch(55.5% 0.163 48.998)

amber-800

#973c00 rgb(151, 60, 0) oklch(47.3% 0.137 46.201)

amber-900

#7b3306 rgb(123, 51, 6) oklch(41.4% 0.112 45.904)

amber-925

MIX

#602603 rgb(96, 38, 3) oklch(34.6% 0.095 45.8)

ΔRGB [27, 13, 3]ΔRGB [-26, -13, -2]

amber-950

#461901 rgb(70, 25, 1) oklch(27.9% 0.077 45.635)

Yellow

12 tokens

yellow-50

#fefce8 rgb(254, 252, 232) oklch(98.7% 0.026 102.212)

yellow-100

#fef9c2 rgb(254, 249, 194) oklch(97.3% 0.071 103.193)

yellow-200

#fff085 rgb(255, 240, 133) oklch(94.5% 0.129 101.54)

yellow-300

#ffdf20 rgb(255, 223, 32) oklch(90.5% 0.182 98.111)

yellow-400

#fdc700 rgb(253, 199, 0) oklch(85.2% 0.199 91.936)

yellow-500

#f0b100 rgb(240, 177, 0) oklch(79.5% 0.184 86.047)

yellow-600

#d08700 rgb(208, 135, 0) oklch(68.1% 0.162 75.834)

yellow-700

#a65f00 rgb(166, 95, 0) oklch(55.4% 0.135 66.442)

yellow-800

#894b00 rgb(137, 75, 0) oklch(47.6% 0.114 61.907)

yellow-900

#733e0a rgb(115, 62, 10) oklch(42.1% 0.095 57.708)

yellow-925

MIX

#5a2e07 rgb(90, 46, 7) oklch(35.4% 0.081 55.8)

ΔRGB [25, 16, 3]ΔRGB [-23, -14, -3]

yellow-950

#432004 rgb(67, 32, 4) oklch(28.6% 0.066 53.813)

Lime

12 tokens

lime-50

#f7fee7 rgb(247, 254, 231) oklch(98.6% 0.031 120.757)

lime-100

#ecfcca rgb(236, 252, 202) oklch(96.7% 0.067 122.328)

lime-200

#d8f999 rgb(216, 249, 153) oklch(93.8% 0.127 124.321)

lime-300

#bbf451 rgb(187, 244, 81) oklch(89.7% 0.196 126.665)

lime-400

#9ae600 rgb(154, 230, 0) oklch(84.1% 0.238 128.85)

lime-500

#7ccf00 rgb(124, 207, 0) oklch(76.8% 0.233 130.85)

lime-600

#5ea500 rgb(94, 165, 0) oklch(64.8% 0.2 131.684)

lime-700

#497d00 rgb(73, 125, 0) oklch(53.2% 0.157 131.589)

lime-800

#3c6300 rgb(60, 99, 0) oklch(45.3% 0.124 130.933)

lime-900

#35530e rgb(53, 83, 14) oklch(40.5% 0.101 131.063)

lime-925

MIX

#274007 rgb(39, 64, 7) oklch(34.0% 0.086 131.6)

ΔRGB [14, 19, 7]ΔRGB [-14, -18, -4]

lime-950

#192e03 rgb(25, 46, 3) oklch(27.4% 0.072 132.109)

Green

12 tokens

green-50

#f0fdf4 rgb(240, 253, 244) oklch(98.2% 0.018 155.826)

green-100

#dcfce7 rgb(220, 252, 231) oklch(96.2% 0.044 156.743)

green-200

#b9f8cf rgb(185, 248, 207) oklch(92.5% 0.084 155.995)

green-300

#7bf1a8 rgb(123, 241, 168) oklch(87.1% 0.15 154.449)

green-400

#05df72 rgb(5, 223, 114) oklch(79.2% 0.209 151.711)

green-500

#00c950 rgb(0, 201, 80) oklch(72.3% 0.219 149.579)

green-600

#00a63e rgb(0, 166, 62) oklch(62.7% 0.194 149.214)

green-700

#008236 rgb(0, 130, 54) oklch(52.7% 0.154 150.069)

green-800

#016630 rgb(1, 102, 48) oklch(44.8% 0.119 151.328)

green-900

#0d542b rgb(13, 84, 43) oklch(39.3% 0.095 152.535)

green-925

MIX

#074120 rgb(7, 65, 32) oklch(33.0% 0.080 152.7)

ΔRGB [6, 19, 11]ΔRGB [-4, -19, -11]

green-950

#032e15 rgb(3, 46, 21) oklch(26.6% 0.065 152.934)

Emerald

12 tokens

emerald-50

#ecfdf5 rgb(236, 253, 245) oklch(97.9% 0.021 166.113)

emerald-100

#d0fae5 rgb(208, 250, 229) oklch(95% 0.052 163.051)

emerald-200

#a4f4cf rgb(164, 244, 207) oklch(90.5% 0.093 164.15)

emerald-300

#5ee9b5 rgb(94, 233, 181) oklch(84.5% 0.143 164.978)

emerald-400

#00d492 rgb(0, 212, 146) oklch(76.5% 0.177 163.223)

emerald-500

#00bc7d rgb(0, 188, 125) oklch(69.6% 0.17 162.48)

emerald-600

#009966 rgb(0, 153, 102) oklch(59.6% 0.145 163.225)

emerald-700

#007a55 rgb(0, 122, 85) oklch(50.8% 0.118 165.612)

emerald-800

#006045 rgb(0, 96, 69) oklch(43.2% 0.095 166.913)

emerald-900

#004f3b rgb(0, 79, 59) oklch(37.8% 0.077 168.94)

emerald-925

MIX

#003d2e rgb(0, 61, 46) oklch(32.0% 0.064 170.7)

ΔRGB [0, 18, 13]ΔRGB [0, -17, -12]

emerald-950

#002c22 rgb(0, 44, 34) oklch(26.2% 0.051 172.552)

Filesy

12 tokens

filesy-50

#e2edea rgb(226, 237, 234) oklch(93.7% 0.012 178.009)

filesy-100

#c2eae1 rgb(194, 234, 225) oklch(90.6% 0.043 180.108)

filesy-200

#95e4d3 rgb(149, 228, 211) oklch(86.3% 0.082 179.169)

filesy-300

#5bd8c3 rgb(91, 216, 195) oklch(80.6% 0.115 180.404)

filesy-400

#19c1ac rgb(25, 193, 172) oklch(72.9% 0.128 181.107)

filesy-500

#00a896 rgb(0, 168, 150) oklch(65.6% 0.118 181.677)

filesy-600

#008579 rgb(0, 133, 121) oklch(55.4% 0.098 183.862)

filesy-700

#02675f rgb(2, 103, 95) oklch(46.2% 0.081 185.537)

filesy-800

#06504b rgb(6, 80, 75) oklch(39.0% 0.066 187.428)

filesy-900

#0c403c rgb(12, 64, 60) oklch(33.8% 0.053 187.358)

filesy-925

#05312e rgb(5, 49, 46) oklch(28.285% 0.0455 189.633)

ΔRGB [7, 15, 14]ΔRGB [-4, -15, -13]

filesy-950

#012221 rgb(1, 34, 33) oklch(22.8% 0.038 191.908)

Teal

12 tokens

teal-50

#f0fdfa rgb(240, 253, 250) oklch(98.4% 0.014 180.72)

teal-100

#cbfbf1 rgb(203, 251, 241) oklch(95.3% 0.051 180.801)

teal-200

#96f7e4 rgb(150, 247, 228) oklch(91% 0.096 180.426)

teal-300

#46ecd5 rgb(70, 236, 213) oklch(85.5% 0.138 181.071)

teal-400

#00d5be rgb(0, 213, 190) oklch(77.7% 0.152 181.912)

teal-500

#00bba7 rgb(0, 187, 167) oklch(70.4% 0.14 182.503)

teal-600

#009689 rgb(0, 150, 137) oklch(60% 0.118 184.704)

teal-700

#00786f rgb(0, 120, 111) oklch(51.1% 0.096 186.391)

teal-800

#005f5a rgb(0, 95, 90) oklch(43.7% 0.078 188.216)

teal-900

#0b4f4a rgb(11, 79, 74) oklch(38.6% 0.063 188.416)

teal-925

MIX

#053f3c rgb(5, 63, 60) oklch(33.1% 0.054 190.5)

ΔRGB [6, 16, 14]ΔRGB [-3, -16, -14]

teal-950

#022f2e rgb(2, 47, 46) oklch(27.7% 0.046 192.524)

Cyan

12 tokens

cyan-50

#ecfeff rgb(236, 254, 255) oklch(98.4% 0.019 200.873)

cyan-100

#cefafe rgb(206, 250, 254) oklch(95.6% 0.045 203.388)

cyan-200

#a2f4fd rgb(162, 244, 253) oklch(91.7% 0.08 205.041)

cyan-300

#53eafd rgb(83, 234, 253) oklch(86.5% 0.127 207.078)

cyan-400

#00d3f2 rgb(0, 211, 242) oklch(78.9% 0.154 211.53)

cyan-500

#00b8db rgb(0, 184, 219) oklch(71.5% 0.143 215.221)

cyan-600

#0092b8 rgb(0, 146, 184) oklch(60.9% 0.126 221.723)

cyan-700

#007595 rgb(0, 117, 149) oklch(52% 0.105 223.128)

cyan-800

#005f78 rgb(0, 95, 120) oklch(45% 0.085 224.283)

cyan-900

#104e64 rgb(16, 78, 100) oklch(39.8% 0.07 227.392)

cyan-925

MIX

#0a4054 rgb(10, 64, 84) oklch(35.0% 0.063 228.5)

ΔRGB [6, 14, 16]ΔRGB [-5, -13, -15]

cyan-950

#053345 rgb(5, 51, 69) oklch(30.2% 0.056 229.695)

Sky

12 tokens

sky-50

#f0f9ff rgb(240, 249, 255) oklch(97.7% 0.013 236.62)

sky-100

#dff2fe rgb(223, 242, 254) oklch(95.1% 0.026 236.824)

sky-200

#b8e6fe rgb(184, 230, 254) oklch(90.1% 0.058 230.902)

sky-300

#74d4ff rgb(116, 212, 255) oklch(82.8% 0.111 230.318)

sky-400

#00bcff rgb(0, 188, 255) oklch(74.6% 0.16 232.661)

sky-500

#00a6f4 rgb(0, 166, 244) oklch(68.5% 0.169 237.323)

sky-600

#0084d1 rgb(0, 132, 209) oklch(58.8% 0.158 241.966)

sky-700

#0069a8 rgb(0, 105, 168) oklch(50% 0.134 242.749)

sky-800

#00598a rgb(0, 89, 138) oklch(44.3% 0.11 240.79)

sky-900

#024a70 rgb(2, 74, 112) oklch(39.1% 0.09 240.876)

sky-925

MIX

#043c5d rgb(4, 60, 93) oklch(34.2% 0.078 242.0)

ΔRGB [-2, 14, 19]ΔRGB [1, -13, -19]

sky-950

#052f4a rgb(5, 47, 74) oklch(29.3% 0.066 243.157)

Blue

12 tokens

blue-50

#eff6ff rgb(239, 246, 255) oklch(97% 0.014 254.604)

blue-100

#dbeafe rgb(219, 234, 254) oklch(93.2% 0.032 255.585)

blue-200

#bedbff rgb(190, 219, 255) oklch(88.2% 0.059 254.128)

blue-300

#8ec5ff rgb(142, 197, 255) oklch(80.9% 0.105 251.813)

blue-400

#51a2ff rgb(81, 162, 255) oklch(70.7% 0.165 254.624)

blue-500

#2b7fff rgb(43, 127, 255) oklch(62.3% 0.214 259.815)

blue-600

#155dfc rgb(21, 93, 252) oklch(54.6% 0.245 262.881)

blue-700

#1447e6 rgb(20, 71, 230) oklch(48.8% 0.243 264.376)

blue-800

#193cb8 rgb(25, 60, 184) oklch(42.4% 0.199 265.638)

blue-900

#1c398e rgb(28, 57, 142) oklch(37.9% 0.146 265.522)

blue-925

MIX

#1a2e71 rgb(26, 46, 113) oklch(33.0% 0.118 266.7)

ΔRGB [2, 11, 29]ΔRGB [-4, -10, -27]

blue-950

#162456 rgb(22, 36, 86) oklch(28.2% 0.091 267.935)

Darknavy

12 tokens

darknavy-50

#e3edff rgb(227, 237, 255) oklch(94.400% 0.0267 262.400)

darknavy-100

#c2d5f3 rgb(194, 213, 243) oklch(86.800% 0.0466 259.500)

darknavy-200

#a2bde8 rgb(162, 189, 232) oklch(79.300% 0.0683 259.600)

darknavy-300

#7eaaed rgb(126, 170, 237) oklch(73.300% 0.1090 258.600)

darknavy-400

#668fd0 rgb(102, 143, 208) oklch(64.800% 0.1081 259.300)

darknavy-500

#5074b3 rgb(80, 116, 179) oklch(56.100% 0.1067 261.000)

darknavy-600

#3a5997 rgb(58, 89, 151) oklch(47.100% 0.1073 262.900)

darknavy-700

#23407a rgb(35, 64, 122) oklch(38.200% 0.1048 262.500)

darknavy-800

#153068 rgb(21, 48, 104) oklch(32.400% 0.1039 262.700)

darknavy-850

#092156 rgb(9, 33, 86) oklch(26.800% 0.1009 263.000)

ΔRGB [12, 15, 18]ΔRGB [-7, -14, -16]

darknavy-900

#021346 rgb(2, 19, 70) oklch(21.600% 0.0986 263.500)

darknavy-950

#000333 rgb(0, 3, 51) oklch(15.400% 0.0946 264.200)

Navy

12 tokens

navy-50

#f4f7ff rgb(244, 247, 255) oklch(97.616% 0.0111 269.551)

navy-100

#e8eeff rgb(232, 238, 255) oklch(94.961% 0.0238 270.343)

navy-200

#cfdcff rgb(207, 220, 255) oklch(89.581% 0.0502 269.260)

navy-300

#aabfff rgb(170, 191, 255) oklch(81.199% 0.0937 270.200)

navy-400

#7d99ff rgb(125, 153, 255) oklch(70.682% 0.1525 270.532)

navy-500

#4b67e8 rgb(75, 103, 232) oklch(56.612% 0.1971 269.749)

navy-600

#3651cb rgb(54, 81, 203) oklch(49.125% 0.1911 268.662)

navy-700

#283f9f rgb(40, 63, 159) oklch(41.219% 0.1579 268.243)

navy-800

#1d2f74 rgb(29, 47, 116) oklch(33.588% 0.1207 268.108)

navy-900

#14214f rgb(20, 33, 79) oklch(26.668% 0.0863 268.153)

navy-925

#10193f rgb(16, 25, 63) oklch(23.074% 0.0734 269.763)

ΔRGB [4, 8, 16]ΔRGB [-5, -7, -16]

navy-950

#0b122f rgb(11, 18, 47) oklch(19.524% 0.0587 269.992)

Indigo

12 tokens

indigo-50

#eef2ff rgb(238, 242, 255) oklch(96.2% 0.018 272.314)

indigo-100

#e0e7ff rgb(224, 231, 255) oklch(93% 0.034 272.788)

indigo-200

#c6d2ff rgb(198, 210, 255) oklch(87% 0.065 274.039)

indigo-300

#a3b3ff rgb(163, 179, 255) oklch(78.5% 0.115 274.713)

indigo-400

#7c86ff rgb(124, 134, 255) oklch(67.3% 0.182 276.935)

indigo-500

#615fff rgb(97, 95, 255) oklch(58.5% 0.233 277.117)

indigo-600

#4f39f6 rgb(79, 57, 246) oklch(51.1% 0.262 276.966)

indigo-700

#432dd7 rgb(67, 45, 215) oklch(45.7% 0.24 277.023)

indigo-800

#372aac rgb(55, 42, 172) oklch(39.8% 0.195 277.366)

indigo-900

#312c85 rgb(49, 44, 133) oklch(35.9% 0.144 278.697)

indigo-925

MIX

#282368 rgb(40, 35, 104) oklch(30.8% 0.117 280.0)

ΔRGB [9, 9, 29]ΔRGB [-10, -9, -27]

indigo-950

#1e1a4d rgb(30, 26, 77) oklch(25.7% 0.09 281.288)

Violet

12 tokens

violet-50

#f5f3ff rgb(245, 243, 255) oklch(96.9% 0.016 293.756)

violet-100

#ede9fe rgb(237, 233, 254) oklch(94.3% 0.029 294.588)

violet-200

#ddd6ff rgb(221, 214, 255) oklch(89.4% 0.057 293.283)

violet-300

#c4b4ff rgb(196, 180, 255) oklch(81.1% 0.111 293.571)

violet-400

#a684ff rgb(166, 132, 255) oklch(70.2% 0.183 293.541)

violet-500

#8e51ff rgb(142, 81, 255) oklch(60.6% 0.25 292.717)

violet-600

#7f22fe rgb(127, 34, 254) oklch(54.1% 0.281 293.009)

violet-700

#7008e7 rgb(112, 8, 231) oklch(49.1% 0.27 292.581)

violet-800

#5d0ec0 rgb(93, 14, 192) oklch(43.2% 0.232 292.759)

violet-900

#4d179a rgb(77, 23, 154) oklch(38% 0.189 293.745)

violet-925

MIX

#3d1280 rgb(61, 18, 128) oklch(33.1% 0.165 292.4)

ΔRGB [16, 5, 26]ΔRGB [-14, -5, -24]

violet-950

#2f0d68 rgb(47, 13, 104) oklch(28.3% 0.141 291.089)

Purple

12 tokens

purple-50

#faf5ff rgb(250, 245, 255) oklch(97.7% 0.014 308.299)

purple-100

#f3e8ff rgb(243, 232, 255) oklch(94.6% 0.033 307.174)

purple-200

#e9d4ff rgb(233, 212, 255) oklch(90.2% 0.063 306.703)

purple-300

#dab2ff rgb(218, 178, 255) oklch(82.7% 0.119 306.383)

purple-400

#c27aff rgb(194, 122, 255) oklch(71.4% 0.203 305.504)

purple-500

#ad46ff rgb(173, 70, 255) oklch(62.7% 0.265 303.9)

purple-600

#9810fa rgb(152, 16, 250) oklch(55.8% 0.288 302.321)

purple-700

#8200db rgb(130, 0, 219) oklch(49.6% 0.265 301.924)

purple-800

#6e11b0 rgb(110, 17, 176) oklch(43.8% 0.218 303.724)

purple-900

#59168b rgb(89, 22, 139) oklch(38.1% 0.176 304.987)

purple-925

MIX

#4a0d79 rgb(74, 13, 121) oklch(33.6% 0.162 303.9)

ΔRGB [15, 9, 18]ΔRGB [-14, -10, -19]

purple-950

#3c0366 rgb(60, 3, 102) oklch(29.1% 0.149 302.717)

Fuchsia

12 tokens

fuchsia-50

#fdf4ff rgb(253, 244, 255) oklch(97.7% 0.017 320.058)

fuchsia-100

#fae8ff rgb(250, 232, 255) oklch(95.2% 0.037 318.852)

fuchsia-200

#f6cfff rgb(246, 207, 255) oklch(90.3% 0.076 319.62)

fuchsia-300

#f4a8ff rgb(244, 168, 255) oklch(83.3% 0.145 321.434)

fuchsia-400

#ed6aff rgb(237, 106, 255) oklch(74% 0.238 322.16)

fuchsia-500

#e12afb rgb(225, 42, 251) oklch(66.7% 0.295 322.15)

fuchsia-600

#c800de rgb(200, 0, 222) oklch(59.1% 0.293 322.896)

fuchsia-700

#a800b7 rgb(168, 0, 183) oklch(51.8% 0.253 323.949)

fuchsia-800

#8a0194 rgb(138, 1, 148) oklch(45.2% 0.211 324.591)

fuchsia-900

#721378 rgb(114, 19, 120) oklch(40.1% 0.17 325.612)

fuchsia-925

MIX

#5e0863 rgb(94, 8, 99) oklch(34.7% 0.153 325.6)

ΔRGB [20, 11, 21]ΔRGB [-19, -8, -20]

fuchsia-950

#4b004f rgb(75, 0, 79) oklch(29.3% 0.136 325.661)

Pink

12 tokens

pink-50

#fdf2f8 rgb(253, 242, 248) oklch(97.1% 0.014 343.198)

pink-100

#fce7f3 rgb(252, 231, 243) oklch(94.8% 0.028 342.258)

pink-200

#fccee8 rgb(252, 206, 232) oklch(89.9% 0.061 343.231)

pink-300

#fda5d5 rgb(253, 165, 213) oklch(82.3% 0.12 346.018)

pink-400

#fb64b6 rgb(251, 100, 182) oklch(71.8% 0.202 349.761)

pink-500

#f6339a rgb(246, 51, 154) oklch(65.6% 0.241 354.308)

pink-600

#e60076 rgb(230, 0, 118) oklch(59.2% 0.249 0.584)

pink-700

#c6005c rgb(198, 0, 92) oklch(52.5% 0.223 3.958)

pink-800

#a3004c rgb(163, 0, 76) oklch(45.9% 0.187 3.815)

pink-900

#861043 rgb(134, 16, 67) oklch(40.8% 0.153 2.432)

pink-925

MIX

#6b0933 rgb(107, 9, 51) oklch(34.6% 0.131 3.2)

ΔRGB [27, 7, 16]ΔRGB [-26, -5, -15]

pink-950

#510424 rgb(81, 4, 36) oklch(28.4% 0.109 3.907)

Pulse

12 tokens

pulse-50

#ffe9ec rgb(255, 233, 236) oklch(95.200% 0.0243 8.000)

pulse-100

#ffd9dd rgb(255, 217, 221) oklch(91.800% 0.0426 10.700)

pulse-200

#ffb7c1 rgb(255, 183, 193) oklch(84.900% 0.0844 9.800)

pulse-300

#ff93a5 rgb(255, 147, 165) oklch(78.200% 0.1308 9.800)

pulse-400

#ff6788 rgb(255, 103, 136) oklch(71.300% 0.1861 9.800)

pulse-500

#f4396e rgb(244, 57, 110) oklch(64.400% 0.2217 10.000)

pulse-600

#cc0051 rgb(204, 0, 81) oklch(54.000% 0.2160 10.100)

pulse-700

#99003b rgb(153, 0, 59) oklch(43.700% 0.1745 10.000)

pulse-800

#680026 rgb(104, 0, 38) oklch(33.100% 0.1323 9.700)

pulse-850

#53001d rgb(83, 0, 29) oklch(28.300% 0.1130 9.516)

ΔRGB [21, 0, 9]ΔRGB [-21, 0, -10]

pulse-900

#3e0013 rgb(62, 0, 19) oklch(23.200% 0.0929 10.200)

pulse-950

#29000a rgb(41, 0, 10) oklch(18.000% 0.0718 10.100)

Mauve

12 tokens

mauve-50

#fafafa rgb(250, 250, 250) oklch(98.5% 0 0)

mauve-100

#f3f1f3 rgb(243, 241, 243) oklch(96% 0.003 325.6)

mauve-200

#e7e4e7 rgb(231, 228, 231) oklch(92.2% 0.005 325.62)

mauve-300

#d7d0d7 rgb(215, 208, 215) oklch(86.5% 0.012 325.68)

mauve-400

#a89ea9 rgb(168, 158, 169) oklch(71.1% 0.019 323.02)

mauve-500

#79697b rgb(121, 105, 123) oklch(54.2% 0.034 322.5)

mauve-600

#594c5b rgb(89, 76, 91) oklch(43.5% 0.029 321.78)

mauve-700

#463947 rgb(70, 57, 71) oklch(36.4% 0.029 323.89)

mauve-800

#2a212c rgb(42, 33, 44) oklch(26.3% 0.024 320.12)

mauve-850

MIX

#231b25 rgb(35, 27, 37) oklch(23.8% 0.021 321.1)

ΔRGB [7, 6, 7]ΔRGB [-6, -5, -7]

mauve-900

#1d161e rgb(29, 22, 30) oklch(21.2% 0.019 322.12)

mauve-950

#0c090c rgb(12, 9, 12) oklch(14.5% 0.008 326)

Neutral

12 tokens

neutral-50

#fafafa rgb(250, 250, 250) oklch(98.5% 0 0)

neutral-100

#f5f5f5 rgb(245, 245, 245) oklch(97% 0 0)

neutral-200

#e5e5e5 rgb(229, 229, 229) oklch(92.2% 0 0)

neutral-300

#d4d4d4 rgb(212, 212, 212) oklch(87% 0 0)

neutral-400

#a1a1a1 rgb(161, 161, 161) oklch(70.8% 0 0)

neutral-500

#737373 rgb(115, 115, 115) oklch(55.6% 0 0)

neutral-600

#525252 rgb(82, 82, 82) oklch(43.9% 0 0)

neutral-700

#404040 rgb(64, 64, 64) oklch(37.1% 0 0)

neutral-800

#262626 rgb(38, 38, 38) oklch(26.9% 0 0)

neutral-850

MIX

#1e1e1e rgb(30, 30, 30) oklch(23.7% 0.000 0.0)

ΔRGB [8, 8, 8]ΔRGB [-7, -7, -7]

neutral-900

#171717 rgb(23, 23, 23) oklch(20.5% 0 0)

neutral-950

#0a0a0a rgb(10, 10, 10) oklch(14.5% 0 0)

Taupe

12 tokens

taupe-50

#fbfaf9 rgb(251, 250, 249) oklch(98.6% 0.002 67.8)

taupe-100

#f3f1f1 rgb(243, 241, 241) oklch(96% 0.002 17.2)

taupe-200

#e8e4e3 rgb(232, 228, 227) oklch(92.2% 0.005 34.3)

taupe-300

#d8d2d0 rgb(216, 210, 208) oklch(86.8% 0.007 39.5)

taupe-400

#aba09c rgb(171, 160, 156) oklch(71.4% 0.014 41.2)

taupe-500

#7c6d67 rgb(124, 109, 103) oklch(54.7% 0.021 43.1)

taupe-600

#5b4f4b rgb(91, 79, 75) oklch(43.8% 0.017 39.3)

taupe-700

#473c39 rgb(71, 60, 57) oklch(36.7% 0.016 35.7)

taupe-800

#2b2422 rgb(43, 36, 34) oklch(26.8% 0.011 36.5)

taupe-850

MIX

#241e1c rgb(36, 30, 28) oklch(24.1% 0.010 39.8)

ΔRGB [7, 6, 6]ΔRGB [-7, -6, -6]

taupe-900

#1d1816 rgb(29, 24, 22) oklch(21.4% 0.009 43.1)

taupe-950

#0c0a09 rgb(12, 10, 9) oklch(14.7% 0.004 49.3)

Stone

12 tokens

stone-50

#fafaf9 rgb(250, 250, 249) oklch(98.5% 0.001 106.423)

stone-100

#f5f5f4 rgb(245, 245, 244) oklch(97% 0.001 106.424)

stone-200

#e7e5e4 rgb(231, 229, 228) oklch(92.3% 0.003 48.717)

stone-300

#d6d3d1 rgb(214, 211, 209) oklch(86.9% 0.005 56.366)

stone-400

#a6a09b rgb(166, 160, 155) oklch(70.9% 0.01 56.259)

stone-500

#79716b rgb(121, 113, 107) oklch(55.3% 0.013 58.071)

stone-600

#57534d rgb(87, 83, 77) oklch(44.4% 0.011 73.639)

stone-700

#44403b rgb(68, 64, 59) oklch(37.4% 0.01 67.558)

stone-800

#292524 rgb(41, 37, 36) oklch(26.8% 0.007 34.298)

stone-850

MIX

#231f1d rgb(35, 31, 29) oklch(24.2% 0.007 45.2)

ΔRGB [6, 6, 7]ΔRGB [-7, -6, -6]

stone-900

#1c1917 rgb(28, 25, 23) oklch(21.6% 0.006 56.043)

stone-950

#0c0a09 rgb(12, 10, 9) oklch(14.7% 0.004 49.25)

Olive

12 tokens

olive-50

#fbfbf9 rgb(251, 251, 249) oklch(98.8% 0.003 106.5)

olive-100

#f4f4f0 rgb(244, 244, 240) oklch(96.6% 0.005 106.5)

olive-200

#e8e8e3 rgb(232, 232, 227) oklch(93% 0.007 106.5)

olive-300

#d8d8d0 rgb(216, 216, 208) oklch(88% 0.011 106.6)

olive-400

#abab9c rgb(171, 171, 156) oklch(73.7% 0.021 106.9)

olive-500

#7c7c67 rgb(124, 124, 103) oklch(58% 0.031 107.3)

olive-600

#5b5b4b rgb(91, 91, 75) oklch(46.6% 0.025 107.3)

olive-700

#474739 rgb(71, 71, 57) oklch(39.4% 0.023 107.4)

olive-800

#2b2b22 rgb(43, 43, 34) oklch(28.6% 0.016 107.4)

olive-850

MIX

#24241c rgb(36, 36, 28) oklch(25.7% 0.014 107.4)

ΔRGB [7, 7, 6]ΔRGB [-7, -7, -6]

olive-900

#1d1d16 rgb(29, 29, 22) oklch(22.8% 0.013 107.4)

olive-950

#0c0c09 rgb(12, 12, 9) oklch(15.3% 0.006 107.1)

Swotsy

12 tokens

swotsy-50

#fcfefb rgb(252, 254, 251) oklch(99.5% 0.004 130.0)

swotsy-100

#f9fcf7 rgb(249, 252, 247) oklch(98.7% 0.007 130.0)

swotsy-200

#edf0e9 rgb(237, 240, 233) oklch(95.1% 0.010 130.0)

swotsy-300

#dbe0d6 rgb(219, 224, 214) oklch(90.1% 0.015 130.0)

swotsy-400

#aab4a1 rgb(170, 180, 161) oklch(75.8% 0.029 130.0)

swotsy-500

#78866b rgb(120, 134, 107) oklch(60.1% 0.043 130.0)

swotsy-600

#59644f rgb(89, 100, 79) oklch(48.7% 0.035 130.0)

swotsy-700

#464f3d rgb(70, 79, 61) oklch(41.5% 0.032 130.0)

swotsy-800

#2c3226 rgb(44, 50, 38) oklch(30.7% 0.022 130.0)

swotsy-900

#1e231a rgb(30, 35, 26) oklch(24.9% 0.018 130.0)

swotsy-925

#161a13 rgb(22, 26, 19) oklch(21.082% 0.0134 130.193)

ΔRGB [8, 9, 7]ΔRGB [-7, -9, -6]

swotsy-950

#0f110d rgb(15, 17, 13) oklch(17.4% 0.008 130.0)

Mist

12 tokens

mist-50

#f9fbfb rgb(249, 251, 251) oklch(98.7% 0.002 197.1)

mist-100

#f1f3f3 rgb(241, 243, 243) oklch(96.3% 0.002 197.1)

mist-200

#e3e7e8 rgb(227, 231, 232) oklch(92.5% 0.005 214.3)

mist-300

#d0d6d8 rgb(208, 214, 216) oklch(87.2% 0.007 219.6)

mist-400

#9ca8ab rgb(156, 168, 171) oklch(72.3% 0.014 214.4)

mist-500

#67787c rgb(103, 120, 124) oklch(56% 0.021 213.5)

mist-600

#4b585b rgb(75, 88, 91) oklch(45% 0.017 213.2)

mist-700

#394447 rgb(57, 68, 71) oklch(37.8% 0.015 216)

mist-800

#22292b rgb(34, 41, 43) oklch(27.5% 0.011 216.9)

mist-850

MIX

#1c2224 rgb(28, 34, 36) oklch(24.6% 0.009 220.4)

ΔRGB [6, 7, 7]ΔRGB [-6, -7, -7]

mist-900

#161b1d rgb(22, 27, 29) oklch(21.8% 0.008 223.9)

mist-950

#090b0c rgb(9, 11, 12) oklch(14.8% 0.004 228.8)

Slate

12 tokens

slate-50

#f8fafc rgb(248, 250, 252) oklch(98.4% 0.003 247.858)

slate-100

#f1f5f9 rgb(241, 245, 249) oklch(96.8% 0.007 247.896)

slate-200

#e2e8f0 rgb(226, 232, 240) oklch(92.9% 0.013 255.508)

slate-300

#cad5e2 rgb(202, 213, 226) oklch(86.9% 0.022 252.894)

slate-400

#90a1b9 rgb(144, 161, 185) oklch(70.4% 0.04 256.788)

slate-500

#62748e rgb(98, 116, 142) oklch(55.4% 0.046 257.417)

slate-600

#45556c rgb(69, 85, 108) oklch(44.6% 0.043 257.281)

slate-700

#314158 rgb(49, 65, 88) oklch(37.2% 0.044 257.287)

slate-800

#1d293d rgb(29, 41, 61) oklch(27.9% 0.041 260.031)

slate-850

MIX

#162034 rgb(22, 32, 52) oklch(24.4% 0.042 262.9)

ΔRGB [7, 9, 9]ΔRGB [-7, -9, -9]

slate-900

#0f172b rgb(15, 23, 43) oklch(20.8% 0.042 265.755)

slate-950

#020618 rgb(2, 6, 24) oklch(12.9% 0.042 264.695)

Gray

12 tokens

gray-50

#f9fafb rgb(249, 250, 251) oklch(98.5% 0.002 247.839)

gray-100

#f3f4f6 rgb(243, 244, 246) oklch(96.7% 0.003 264.542)

gray-200

#e5e7eb rgb(229, 231, 235) oklch(92.8% 0.006 264.531)

gray-300

#d1d5dc rgb(209, 213, 220) oklch(87.2% 0.01 258.338)

gray-400

#99a1af rgb(153, 161, 175) oklch(70.7% 0.022 261.325)

gray-500

#6a7282 rgb(106, 114, 130) oklch(55.1% 0.027 264.364)

gray-600

#4a5565 rgb(74, 85, 101) oklch(44.6% 0.03 256.802)

gray-700

#364153 rgb(54, 65, 83) oklch(37.3% 0.034 259.733)

gray-800

#1e2939 rgb(30, 41, 57) oklch(27.8% 0.033 256.848)

gray-850

MIX

#172030 rgb(23, 32, 48) oklch(24.4% 0.034 260.8)

ΔRGB [7, 9, 9]ΔRGB [-7, -8, -8]

gray-900

#101828 rgb(16, 24, 40) oklch(21% 0.034 264.665)

gray-950

#030712 rgb(3, 7, 18) oklch(13% 0.028 261.692)

Zinc

12 tokens

zinc-50

#fafafa rgb(250, 250, 250) oklch(98.5% 0 0)

zinc-100

#f4f4f5 rgb(244, 244, 245) oklch(96.7% 0.001 286.375)

zinc-200

#e4e4e7 rgb(228, 228, 231) oklch(92% 0.004 286.32)

zinc-300

#d4d4d8 rgb(212, 212, 216) oklch(87.1% 0.006 286.286)

zinc-400

#9f9fa9 rgb(159, 159, 169) oklch(70.5% 0.015 286.067)

zinc-500

#71717b rgb(113, 113, 123) oklch(55.2% 0.016 285.938)

zinc-600

#52525c rgb(82, 82, 92) oklch(44.2% 0.017 285.786)

zinc-700

#3f3f46 rgb(63, 63, 70) oklch(37% 0.013 285.805)

zinc-800

#27272a rgb(39, 39, 42) oklch(27.4% 0.006 286.033)

zinc-850

MIX

#1f1f23 rgb(31, 31, 35) oklch(24.2% 0.006 286.0)

ΔRGB [8, 8, 7]ΔRGB [-7, -7, -8]

zinc-900

#18181b rgb(24, 24, 27) oklch(21% 0.006 285.885)

zinc-950

#09090b rgb(9, 9, 11) oklch(14.1% 0.005 285.823)

race-steel

base zinc-300grain gray-400 @ 40%grain-hi gray-200hi zinc-100

.surface-race-steel-brushed

race-gray

base gray-600grain gray-400grain-hi gray-200hi gray-100wear-top gray-300

.surface-race-gray-brushed

race-dark-steel

base zinc-850grain zinc-700grain-hi zinc-500hi zinc-400wear-top zinc-600

.surface-race-dark-steel-brushed

race-carbon

base mist-850grain neutral-950 @ 34%grain-hi neutral-400 @ 11%hi neutral-400 @ 16%wear-top mist-600

.surface-race-carbon-brushed

race-dark-carbon

base mist-900grain neutral-950 @ 34%grain-hi neutral-400 @ 11%hi neutral-400 @ 16%wear-top mist-700

.surface-race-dark-carbon-brushed

race-black

base mist-950grain neutral-400 @ 7%grain-hi neutral-400hi neutral-400wear-top neutral-800

.surface-race-black-brushed

race-mist

base mist-700grain zinc-950grain-hi mist-800hi neutral-400wear-top mist-500

.surface-race-mist-brushed

race-filesy

base filesy-925grain filesy-800grain-hi filesy-400hi neutral-400wear-top filesy-500

.surface-race-filesy-brushed

race-dark-filesy

base filesy-950grain filesy-900grain-hi filesy-400hi neutral-400wear-top filesy-500

.surface-race-dark-filesy-brushed

race-malachite

base mist-950grain filesy-700grain-hi filesy-400hi mist-400wear-top filesy-500

.surface-race-malachite-brushed

race-emerald

base emerald-950grain green-900grain-hi emerald-300hi emerald-400wear-top emerald-500

.surface-race-emerald-brushed

race-green

base green-900grain green-700grain-hi green-300hi neutral-400wear-top green-400

.surface-race-green-brushed

race-sky

base sky-700grain sky-800grain-hi sky-400hi sky-200wear-top sky-500

.surface-race-sky-brushed

race-blue

base blue-900grain blue-700grain-hi blue-300hi neutral-400wear-top blue-400

.surface-race-blue-brushed

race-mauve

base mauve-700 48% + mcbile-925 52%grain mauve-800 @ 34%grain-hi mauve-300 @ 11%hi neutral-400 @ 16%wear-top mauve-400 @ 11%

.surface-race-mauve-brushed

race-mcbile

base mcbile-800grain mcbile-600grain-hi mcbile-300hi neutral-400wear-top mcbile-400

.surface-race-mcbile-brushed

race-rose

base rose-300grain pulse-600grain-hi mcbile-300hi orange-200wear-top orange-200

.surface-race-rose-brushed

race-silver

base zinc-200grain zinc-500grain-hi zinc-400hi zinc-100

.surface-race-silver-brushed

race-gold

base yellow-400grain yellow-700grain-hi yellow-100hi yellow-200

.surface-race-gold-brushed

race-amber

base orange-400grain amber-700grain-hi amber-200hi amber-100wear-top amber-100

.surface-race-amber-brushed

race-light-sky

base sky-200grain sky-300grain-hi sky-100hi sky-50wear-top sky-400

.surface-race-light-sky-brushed

race-light-mcbile

base mcbile-200grain mcbile-300grain-hi mcbile-100hi mcbile-50wear-top mcbile-400

.surface-race-light-mcbile-brushed

race-light-carbon

base mist-200grain neutral-300grain-hi neutral-100hi neutral-50wear-top mist-400

.surface-race-light-carbon-brushed

chrome-allu

base gray-200hi zinc-100 @ 20%micro gray-300 @ 14%

.surface-chrome-allu

chrome-steel

base zinc-400hi slate-200 @ 20%micro zinc-300 @ 14%

.surface-chrome-steel

chrome-blue-steel

base slate-600hi gray-300 @ 20%micro slate-700 @ 14%

.surface-chrome-blue-steel

chrome-dark-steel

base zinc-850hi gray-600 @ 20%micro gray-700 @ 14%

.surface-chrome-dark-steel

chrome-amber

base amber-600hi amber-100 @ 20%micro amber-700 @ 14%

.surface-chrome-amber

chrome-gold

base yellow-500hi yellow-200 @ 20%micro yellow-700 @ 14%

.surface-chrome-gold

chrome-rose

base rose-400hi rose-100 @ 20%micro pink-500 @ 18%

.surface-chrome-rose

chrome-mcbile

base mcbile-700hi mcbile-400 @ 20%micro mcbile-700 @ 14%

.surface-chrome-mcbile

chrome-mauve

base mauve-800hi mauve-500 @ 20%micro mcbile-800 @ 14%

.surface-chrome-mauve

chrome-blue

base blue-900hi blue-500 @ 20%micro darknavy-700 @ 14%

.surface-chrome-blue

chrome-darknavy

base darknavy-900hi darknavy-400 @ 20%micro darknavy-700 @ 14%

.surface-chrome-darknavy

chrome-indigo

base indigo-925hi indigo-500 @ 20%micro indigo-800 @ 14%

.surface-chrome-indigo

chrome-cyan

base cyan-800hi cyan-400 @ 20%micro cyan-700 @ 14%

.surface-chrome-cyan

chrome-sky

base sky-600hi sky-300 @ 20%micro sky-600 @ 14%

.surface-chrome-sky

chrome-green

base green-800hi green-400 @ 20%micro green-700 @ 14%

.surface-chrome-green

chrome-emerald

base emerald-900hi emerald-500 @ 20%micro emerald-900 @ 14%

.surface-chrome-emerald

chrome-teal

base teal-700hi teal-400 @ 20%micro teal-800 @ 14%

.surface-chrome-teal

chrome-filesy

base filesy-900hi filesy-400 @ 20%micro filesy-700 @ 14%

.surface-chrome-filesy

chrome-dark-filesy

base filesy-925hi neutral-400 @ 16%micro filesy-900 @ 12%

.surface-chrome-dark-filesy

chrome-swotsy

base swotsy-900hi swotsy-400 @ 20%micro swotsy-700 @ 14%

.surface-chrome-swotsy

chrome-olive

base olive-850hi olive-600 @ 20%micro olive-700 @ 14%

.surface-chrome-olive

chrome-mist

base mist-800hi mist-500 @ 20%micro mist-700 @ 14%

.surface-chrome-mist

chrome-dark

base neutral-900hi neutral-600 @ 18%micro gray-700 @ 15%

.surface-chrome-dark

chrome-black

base neutral-950hi neutral-400 @ 15%micro gray-800 @ 20%

.surface-chrome-black

neutral-950mist-900

#f5f5f5

bg neutral-950 (#0a0a0a) stripe mist-900 (#161b1d)

.surface-carbon--neutral-950-mist-900

neutral950-850

#f5f5f5

bg neutral-950 (#0a0a0a) stripe neutral-850 (#1e1e1e)

.surface-carbon--neutral-950-850

neutral950-800

#f5f5f5

bg neutral-950 (#0a0a0a) stripe neutral-800 (#262626)

.surface-carbon--neutral-950-800

filesy-950mist-950

#e2edea

bg filesy-950 (#012221) stripe mist-950 (#090b0c)

.surface-carbon--filesy-950-mist-950

neutral-950mist-850

#f5f5f5

bg neutral-950 (#0a0a0a) stripe mist-850 (#1c2224)

.surface-carbon--neutral-950-mist-850

mist-850filesy-950

#f9fbfb

bg mist-850 (#1c2224) stripe filesy-950 (#012221)

.surface-carbon--mist-850-filesy-950

mcbile900-700

#ffedd4

bg mcbile-900 (#881336) stripe mcbile-700 (#be123b)

.surface-carbon--mcbile-900-mcbile-700

green900-700

#f0fdf4

bg green-900 (#0d542b) stripe green-700 (#008236)

.surface-carbon--green-900-green-700

filesy900-700

#e2edea

bg filesy-900 (#0c403c) stripe filesy-700 (#02675f)

.surface-carbon--filesy-900-filesy-700

cyan900-700

#ecfeff

bg cyan-900 (#104e64) stripe cyan-700 (#007595)

.surface-carbon--cyan-900-cyan-700

blue900-700

#eff6ff

bg blue-900 (#1c398e) stripe blue-700 (#1447e6)

.surface-carbon--blue-900-blue-700

darknavy900-700

#ffedd4

bg darknavy-900 (#021346) stripe darknavy-700 (#23407a)

.surface-carbon--darknavy-900-darknavy-700

mist900-700

#f9fbfb

bg mist-900 (#161b1d) stripe mist-700 (#394447)

.surface-carbon--mist-900-mist-700

slate900-700

#f8fafc

bg slate-900 (#0f172b) stripe slate-700 (#314158)

.surface-carbon--slate-900-slate-700

mcbile900-500

#ffedd4

bg mcbile-900 (#881336) stripe mcbile-500 (#f43f5d)

.surface-carbon--mcbile-900-mcbile-500

green900-500

#f0fdf4

bg green-900 (#0d542b) stripe green-500 (#00c950)

.surface-carbon--green-900-green-500

filesy900-500

#e2edea

bg filesy-900 (#0c403c) stripe filesy-500 (#00a896)

.surface-carbon--filesy-900-filesy-500

cyan900-500

#ecfeff

bg cyan-900 (#104e64) stripe cyan-500 (#00b8db)

.surface-carbon--cyan-900-cyan-500

blue900-500

#eff6ff

bg blue-900 (#1c398e) stripe blue-500 (#2b7fff)

.surface-carbon--blue-900-blue-500

darknavy900-500

#f9fbfb

bg darknavy-900 (#021346) stripe darknavy-500 (#5074b3)

.surface-carbon--darknavy-900-darknavy-500

mist900-500

#ffffff

bg mist-900 (#161b1d) stripe mist-500 (#67787c)

.surface-carbon--mist-900-mist-500

slate900-500

#f8fafc

bg slate-900 (#0f172b) stripe slate-500 (#62748e)

.surface-carbon--slate-900-slate-500

mcbile900-300

#ffedd4

bg mcbile-900 (#881336) stripe mcbile-300 (#fda4ae)

.surface-carbon--mcbile-900-mcbile-300

yellow900-300

#432004

bg yellow-900 (#733e0a) stripe yellow-300 (#ffdf20)

.surface-carbon--yellow-900-yellow-300

green900-300

#f0fdf4

bg green-900 (#0d542b) stripe green-300 (#7bf1a8)

.surface-carbon--green-900-green-300

cyan900-300

#ecfeff

bg cyan-900 (#104e64) stripe cyan-300 (#53eafd)

.surface-carbon--cyan-900-cyan-300

blue900-300

#eff6ff

bg blue-900 (#1c398e) stripe blue-300 (#8ec5ff)

.surface-carbon--blue-900-blue-300

darknavy900-300

#ffedd4

bg darknavy-900 (#021346) stripe darknavy-300 (#7eaaed)

.surface-carbon--darknavy-900-darknavy-300

mist900-300

#f9fbfb

bg mist-900 (#161b1d) stripe mist-300 (#d0d6d8)

.surface-carbon--mist-900-mist-300

slate900-300

#f8fafc

bg slate-900 (#0f172b) stripe slate-300 (#cad5e2)

.surface-carbon--slate-900-slate-300

mcbile400-100

#000000

bg mcbile-400 (#fb7184) stripe mcbile-100 (#ffe4e5)

.surface-carbon--mcbile-400-mcbile-100

yellow400-100

#432004

bg yellow-400 (#fdc700) stripe yellow-100 (#fef9c2)

.surface-carbon--yellow-400-yellow-100

green400-100

#000000

bg green-400 (#05df72) stripe green-100 (#dcfce7)

.surface-carbon--green-400-green-100

cyan400-100

#000000

bg cyan-400 (#00d3f2) stripe cyan-100 (#cefafe)

.surface-carbon--cyan-400-cyan-100

blue400-100

#000000

bg blue-400 (#51a2ff) stripe blue-100 (#dbeafe)

.surface-carbon--blue-400-blue-100

darknavy400-100

#000000

bg darknavy-400 (#668fd0) stripe darknavy-100 (#c2d5f3)

.surface-carbon--darknavy-400-darknavy-100

mist400-100

#000000

bg mist-400 (#9ca8ab) stripe mist-100 (#f1f3f3)

.surface-carbon--mist-400-mist-100

slate400-100

#000000

bg slate-400 (#90a1b9) stripe slate-100 (#f1f5f9)

.surface-carbon--slate-400-slate-100

neutral300-200

#000000

bg neutral-300 (#d4d4d4) stripe neutral-200 (#e5e5e5)

.surface-carbon--neutral-300-neutral-200

sky300-200

#000000

bg sky-300 (#74d4ff) stripe sky-200 (#b8e6fe)

.surface-carbon--sky-300-sky-200

emerald300-200

#000000

bg emerald-300 (#5ee9b5) stripe emerald-200 (#a4f4cf)

.surface-carbon--emerald-300-emerald-200

whiteslate-200

#000000

bg white (#ffffff) stripe slate-200 (#e2e8f0)

.surface-carbon--white-slate-200

neutral-50gray-300

#000000

bg neutral-50 (#fafafa) stripe gray-300 (#d1d5dc)

.surface-carbon--neutral-50-gray-300

page-canvas-light

bg sky-50 (#f0f9ff) text sky-900 (#024a70)

body bg + indigo grid · default theme · horizon-scan/page.css

page-canvas-dark

bg sky-950 (#052f4a) text sky-100 (#dff2fe)

html[data-theme=dark] body · dark theme · horizon-scan/page.css

text-hero

Aa

text sky-800 (#00598a)

--text-hero · h1, table headers · horizon-scan/page.css

text-body

Aa

text sky-900 (#024a70)

--text-primary · horizon-scan/page.css

link-accent

Aa

text sky-700 (#0069a8)

--horizon-accent · hover sky-800 · horizon-scan/page.css

surface-header-card

Tag

bg white (#ffffff) text sky-800 (#00598a) border indigo-300 (#a3b3ff)

header card · left stripe sky-500 · horizon-scan/page.css

surface-table-header

Tag

bg sky-50 (#f0f9ff) text sky-800 (#00598a) border indigo-200 (#c6d2ff)

--table-header · horizon-scan/page.css

surface-code-name

Tag

bg blue-100 (#dbeafe) text sky-700 (#0069a8) border indigo-200 (#c6d2ff)

code.name / --bg-muted · horizon-scan/page.css

carbon-blue-weave-light

#000000

bg blue-400 (#51a2ff) stripe blue-100 (#dbeafe)

stack-head + #phase-2 thead · .surface-carbon--blue-400-blue-100 · horizon-scan/page.css

tag-badge-api

Tag

bg sky-100 (#dff2fe) text sky-800 (#00598a) border sky-600 (#0084d1)

.badge-api · horizon-scan/page.css

tag-badge-rss

Tag

bg yellow-300 (#ffdf20) text sky-900 (#024a70) border sky-800 (#00598a)

.badge-rss · 35% yellow mix bg · horizon-scan/page.css

tag-badge-pw

Tag

bg sky-100 (#dff2fe) text sky-900 (#024a70) border sky-800 (#00598a)

.badge-pw · horizon-scan/page.css

tag-badge-ht

Tag

bg sky-600 (#0084d1) text sky-700 (#0069a8) border sky-600 (#0084d1)

.badge-ht · 10% sky-600 tint · horizon-scan/page.css

cube-sky-500

Tag

bg sky-500 (#00a6f4) text sky-50 (#f0f9ff) border sky-600 (#0084d1)

--horizon-cube-* tone 1-2 · gradient 145deg · horizon-scan/page.css

cube-sky-600

Tag

bg sky-600 (#0084d1) text sky-50 (#f0f9ff) border sky-700 (#0069a8)

tone 3 · horizon-scan/page.css

cube-blue-500

Tag

bg blue-500 (#2b7fff) text sky-50 (#f0f9ff) border blue-600 (#155dfc)

tone 4-5 · horizon-scan/page.css

cube-blue-deep

Tag

bg blue-600 (#155dfc) text sky-50 (#f0f9ff) border blue-700 (#1447e6)

tone 6-7 · horizon-scan/page.css

cube-indigo-500

Tag

bg indigo-500 (#615fff) text sky-50 (#f0f9ff) border indigo-600 (#4f39f6)

tone 8-9 · horizon-scan/page.css

cube-acceptance

Tag

bg sky-600 (#0084d1) text sky-50 (#f0f9ff) border sky-700 (#0069a8)

tone 10 + dark burger dice · horizon-scan/page.css

cube-deliverable-teal

Tag

bg teal-500 (#00bba7) text sky-50 (#f0f9ff) border teal-600 (#009689)

.deliver-list .check · fixed; not section tone · horizon-scan/page.css

cube-about-process-flat

Tag

bg sky-700 (#0069a8) text white (#ffffff) border sky-700 (#0069a8)

#about .process-num light · horizon-scan/page.css

chrome-burger-light-rest

Tag

bg sky-700 (#0069a8) text white (#ffffff)

.burger-btn rest light · horizon-scan/page.css

chrome-burger-light-hover

Tag

bg white (#ffffff) text sky-800 (#00598a) border indigo-200 (#c6d2ff)

.burger-btn hover light · horizon-scan/page.css

chrome-burger-dark-rest

Tag

bg sky-600 (#0084d1) text sky-50 (#f0f9ff) border sky-700 (#0069a8)

.burger-btn rest dark · horizon-scan/page.css

chrome-action-btn-light

Tag

bg sky-700 (#0069a8) text white (#ffffff)

.burger-panel__action-btn light · horizon-scan/page.css

scroll-light-rest

bg white (#ffffff) text sky-800 (#00598a)

.scroll-top-btn rest light · horizon-scan/page.css

scroll-light-hover

bg sky-600 (#0084d1) text white (#ffffff)

.scroll-top-btn hover light · horizon-scan/page.css

scroll-dark-rest

bg sky-900 (#024a70) text sky-400 (#00bcff)

--chrome-scroll-* dark · horizon-scan/page.css

body-canvas-carbon

#f5f5f5

bg neutral-950 (#0a0a0a) stripe neutral-850 (#1e1e1e)

body.surface-carbon-fill · dark · neutral-950-850 · playbook-gm-ggr/page.css

body-canvas-carbon-light

#000000

bg white (#ffffff) stripe neutral-100 (#f5f5f5)

html[data-theme=light] body · light · white-neutral-100 · playbook-gm-ggr/page.css

table-header

Tag

bg mcbile-500 (#f43f5d) text white (#ffffff)

--table-header-bg · mcbile-500 @ 75% mix · playbook-gm-ggr/page.css

diagram-infra

Tag

bg zinc-850 (#1f1f23) text zinc-100 (#f4f4f5) border zinc-600 (#52525c)

--diagram-fill-infra · AAA verified · playbook-gm-ggr/page.css

diagram-core

Tag

bg mcbile-950 (#4c0518) text orange-100 (#ffedd4) border mcbile-700 (#be123b)

--diagram-fill-core · AAA verified · playbook-gm-ggr/page.css

diagram-buffer

Tag

bg yellow-950 (#432004) text yellow-100 (#fef9c2) border yellow-700 (#a65f00)

--diagram-fill-buffer · AAA verified · playbook-gm-ggr/page.css

diagram-action

Tag

bg slate-800 (#1d293d) text zinc-100 (#f4f4f5) border mcbile-600 (#e11d47)

--diagram-fill-action · AAA verified · playbook-gm-ggr/page.css

diagram-entity

Tag

bg slate-800 (#1d293d) text zinc-100 (#f4f4f5) border filesy-700 (#02675f)

--diagram-fill-entity · AAA verified · playbook-gm-ggr/page.css

diagram-success

Tag

bg emerald-900 (#004f3b) text emerald-50 (#ecfdf5) border emerald-600 (#009966)

--diagram-fill-success · AAA verified · playbook-gm-ggr/page.css

for-beginners-shell

for-beginners card shell (dark) .surface-race-dark-carbon-brushed

.for-beginners · playbook-gm-ggr/page.css

for-beginners-shell-light

for-beginners card shell (light) .surface-race-silver-brushed

html[data-theme=light] .for-beginners · playbook-gm-ggr/page.css

for-beginners-accent

border emerald-800 (#006045)

--for-beginners-accent · left stripe · playbook-gm-ggr/page.css

section-h2-shell

section h2 + benefit cards (dark) .surface-race-black-brushed

h2.surface-race-black-brushed · playbook-gm-ggr/page.css

section-h2-shell-light

section h2 + benefit cards (light) .surface-race-silver-brushed

html[data-theme=light] h2.surface-race-black-brushed · playbook-gm-ggr/page.css

attention-shell

attention / alert shell (dark) .surface-race-mauve-brushed

.attention-card · playbook-gm-ggr/page.css

attention-shell-light

attention / alert shell (light) .surface-race-rose-brushed

html[data-theme=light] .attention-block · playbook-gm-ggr/page.css

code-pre

Aa

playbook-code-pre (dark) text zinc-300 (#d4d4d8) .surface-race-dark-steel-brushed

.playbook-code-pre · playbook-gm-ggr/page.css

code-pre-light

Aa

playbook-code-pre (light) text neutral-900 (#171717) .surface-race-steel-brushed

html[data-theme=light] .playbook-code-pre · playbook-gm-ggr/page.css

slack-alert-shell

Aa

bq-alert Slack mock (dark) text zinc-300 (#d4d4d8) .surface-race-dark-steel-brushed

blockquote.bq-alert · playbook-gm-ggr/page.css

slack-alert-shell-light

Aa

bq-alert Slack mock (light) text neutral-900 (#171717) .surface-race-steel-brushed

html[data-theme=light] blockquote.bq-alert · playbook-gm-ggr/page.css

footer-shell

site footer (dark) .surface-race-black-brushed

+page.svelte footer · playbook-gm-ggr/page.css

footer-shell-light

site footer (light) .surface-race-silver-brushed

html[data-theme=light] .site-footer · playbook-gm-ggr/page.css

link-rest

Tag

bg neutral-950 (#0a0a0a) text mcbile-500 (#f43f5d) border mcbile-500 (#f43f5d)

.container a rest · playbook-gm-ggr/page.css

link-hover

Tag

bg neutral-950 (#0a0a0a) text mcbile-700 (#be123b) border mcbile-700 (#be123b)

.container a:hover · playbook-gm-ggr/page.css

cross-ref-hover

Aa

cross-ref chip hover text mcbile-400 (#fb7184) .surface-chrome-black

a.link-ref:hover · playbook-gm-ggr/page.css

timeline-detection

border emerald-600 (#009966)

.svg-phase-detection · timeline stroke · playbook-gm-ggr/page.css

timeline-burn

border mcbile-600 (#e11d47)

.svg-phase-burn · timeline stroke · playbook-gm-ggr/page.css

brand-filesy-500

bg filesy-500 (#00a896)

--color-filesy-500 · brand ramp · mcbile live wiring

brand-filesy-600

bg filesy-600 (#008579)

--color-filesy-600 · brand ramp · mcbile live wiring

brand-filesy-700

bg filesy-700 (#02675f)

--color-filesy-700 · playbook diagram entity stroke · mcbile live wiring

brand-filesy-900

bg filesy-900 (#0c403c)

--color-filesy-900 · chrome-filesy base · mcbile live wiring

canvas-dark-mist-900

bg mist-900 (#161b1d)

valuta-formats dark body · legacy:valuta-formats · mcbile live wiring

chrome-filesy

Aa

toolbar btn hover (valuta dark) text blue-50 (#eff6ff) .surface-chrome-filesy

valuta-formats toolbar hover · legacy:valuta-formats · mcbile live wiring

chrome-dark-filesy

Aa

toolbar btn rest (valuta dark) text blue-50 (#eff6ff) .surface-chrome-dark-filesy

valuta-formats toolbar rest · legacy:valuta-formats · mcbile live wiring

race-malachite-toolbar

toolbar shell (valuta dark) .surface-race-malachite-brushed

valuta-formats toolbar shell · legacy:valuta-formats · mcbile live wiring

carbon-thead-dark

#e2edea

bg filesy-900 (#0c403c) stripe filesy-700 (#02675f)

#glossaryTable thead rest (dark) · legacy:valuta-formats · mcbile live wiring

carbon-thead-dark-active

#e2edea

bg filesy-900 (#0c403c) stripe filesy-700 (#02675f)

#glossaryTable thead active (dark) · same pair · valuta-formats · mcbile live wiring

playbook-entity-stroke

border filesy-700 (#02675f)

--diagram-accent-entity · legacy:playbook-gm-ggr · mcbile live wiring

scroll-dark-rest

scroll-top rest (valuta dark) .surface-chrome-dark-filesy

valuta-formats scroll-top · legacy:valuta-formats · mcbile live wiring

page-canvas-dark

bg mist-900 (#161b1d)

html[data-theme=dark] body · dark body · valuta-formats/page.css

shell-toolbar-dark

toolbar (dark) .surface-race-malachite-brushed

toolbar shell · valuta-formats/page.css

shell-footer-dark

bg mist-950 (#090b0c)

footer bg · footer (solid mist-950) · valuta-formats/page.css

toolbar-dark-rest

Aa

toolbar btn rest (dark) text blue-50 (#eff6ff) .surface-chrome-dark-filesy

toolbar btn rest · valuta-formats/page.css

toolbar-dark-hover

Aa

toolbar btn hover+active (dark) text blue-50 (#eff6ff) .surface-chrome-filesy

toolbar btn hover+active · valuta-formats/page.css

toolbar-dark-active-text

Aa

toolbar btn active text (dark) text amber-200 (#fee685) .surface-chrome-dark-filesy

toolbar btn active text · valuta-formats/page.css

thead-dark-rest

#f9fbfb

bg mist-900 (#161b1d) stripe mist-700 (#394447)

#glossaryTable thead rest (dark) · valuta-formats/page.css

thead-dark-active

#e2edea

bg filesy-900 (#0c403c) stripe filesy-700 (#02675f)

#glossaryTable thead active (dark) · valuta-formats/page.css

tag-position-before

Tag

bg mauve-100 (#f3f1f3) text amber-700 (#bb4d00) border mauve-700 (#463947)

--tag-position-before-* · unique-style · valuta-formats/page.css

tag-position-after

Tag

bg olive-100 (#f4f4f0) text green-700 (#008236) border olive-700 (#474739)

--tag-position-after-* · unique-style · valuta-formats/page.css

tag-thds-space

Tag

bg pulse-50 (#ffe9ec) text pulse-600 (#cc0051) border green-600 (#00a63e)

--tag-thds-space-* · Thds space · valuta-formats/page.css

tag-unique

Tag

bg orange-50 (#fff7ed) text orange-600 (#f54900) border orange-600 (#f54900)

--tag-unique-* · Thds unique · After + no gap · valuta-formats/page.css

tag-separator-decimal-dot

Tag

bg rose-50 (#fff1f2) text rose-600 (#ec003f) border rose-400 (#ff637e)

--tag-separator-before-* · Decimal dot · Thds. comma · valuta-formats/page.css

tag-separator-decimal-comma

Tag

bg emerald-50 (#ecfdf5) text emerald-600 (#009966) border emerald-400 (#00d492)

--tag-separator-after-* · Decimal comma · Thds. dot · valuta-formats/page.css

tag-separator-thds-space

Tag

bg pulse-50 (#ffe9ec) text pulse-600 (#cc0051) border green-600 (#00a63e)

--tag-thds-space-* · Thds. space · valuta-formats/page.css

tag-separator-thds-unique

Tag

bg orange-50 (#fff7ed) text orange-600 (#f54900) border orange-600 (#f54900)

--tag-unique-* · Thds. space unique · 12px lowercase · valuta-formats/page.css

tag-info-national

Tag

bg sky-100 (#dff2fe) text blue-600 (#155dfc) border blue-600 (#155dfc)

--tag-code-national-* · Info Tags · national · valuta-formats/page.css

tag-info-efta

Tag

bg indigo-100 (#e0e7ff) text violet-500 (#8e51ff) border olive-800 (#2b2b22)

--tag-efta-* · Info Tags · efta · valuta-formats/page.css

format-border-continental

border blue-700 (#1447e6)

--valuta-format-border-continental · Code + Example tooltips · valuta-formats/page.css

format-border-colonial

border lime-500 (#7ccf00)

--valuta-format-border-colonial · Code + Example tooltips · valuta-formats/page.css

format-border-unique

border pulse-500 (#f4396e)

--valuta-format-border-unique · Code + Example tooltips · valuta-formats/page.css

page-canvas-dark

bg mist-900 (#161b1d) text zinc-100 (#f4f4f5)

html[data-theme=dark] body · dark body · countries/page.css

shell-toolbar-dark

toolbar (dark) .surface-race-malachite-brushed

toolbar shell · countries/page.css

shell-footer-dark

bg mist-950 (#090b0c)

footer bg · footer (solid mist-950) · countries/page.css

toolbar-btn-dark-rest

Aa

toolbar btn rest (dark) text blue-50 (#eff6ff) .surface-chrome-dark-filesy

toolbar rest dark · countries/page.css

toolbar-btn-dark-hover

Aa

toolbar btn hover (dark) text blue-50 (#eff6ff) .surface-chrome-filesy

toolbar hover dark · countries/page.css

carbon-thead-rest-dark

#f9fbfb

bg mist-900 (#161b1d) stripe mist-700 (#394447)

#countriesTable thead rest (dark) · countries/page.css

status-allowed

Tag

bg green-100 (#dcfce7) text green-800 (#016630) border emerald-600 (#009966)

.status-badge--allowed · countries/page.css

status-denied

Tag

bg red-100 (#ffe2e2) text rose-500 (#ff2056) border rose-500 (#ff2056)

.status-badge--denied · countries/page.css

status-crypto

Tag

bg amber-100 (#fef3c6) text amber-700 (#bb4d00) border orange-100 (#ffedd4)

.status-badge--crypto · countries/page.css

tag-tier-1

Tag

bg green-100 (#dcfce7) text green-800 (#016630) border emerald-600 (#009966)

.note-tag--tier-1 · countries/page.css

tag-tier-2

Tag

bg amber-100 (#fef3c6) text amber-700 (#bb4d00) border mcbile-500 (#f43f5d)

.note-tag--tier-2 · countries/page.css

tag-tier-3

Tag

bg red-100 (#ffe2e2) text rose-500 (#ff2056) border rose-500 (#ff2056)

.note-tag--tier-3 · countries/page.css

tag-region-eu

Tag

bg blue-400 (#51a2ff) text white (#ffffff) border blue-400 (#51a2ff)

.note-tag--eu · countries/page.css

tag-region-cis

Tag

bg white (#ffffff) text blue-600 (#155dfc) border blue-600 (#155dfc)

.note-tag--cis · countries/page.css

tag-region-gulf

Tag

bg white (#ffffff) text green-700 (#008236) border green-700 (#008236)

.note-tag--gulf · outline · transparent bg at runtime · countries/page.css

tag-region-africa

Tag

bg taupe-700 (#473c39) text white (#ffffff) border taupe-700 (#473c39)

.note-tag--africa · countries/page.css

tag-region-overseas

Tag

bg navy-500 (#4b67e8) text white (#ffffff) border navy-500 (#4b67e8)

.note-tag--overseas · countries/page.css