Avoid referencing scale variables directly when building UI that needs to adapt to different color themes. Instead, use the functional variables. In rare cases, you may need to use scale variables to define custom functional variables in your application.
gray.0hsl(210, 25%, 98%)
gray.1hsl(210, 24%, 93%)
gray.2hsl(210, 16%, 85%)
gray.3hsl(210, 13%, 75%)
gray.4hsl(212, 10%, 62%)
gray.5hsl(210, 8%, 48%)
gray.6hsl(212, 10%, 38%)
gray.7hsl(212, 11%, 29%)
gray.8hsl(212, 12%, 22%)
gray.9hsl(213, 13%, 16%)
red.0hsl(4, 100%, 97%)
red.1hsl(3, 100%, 91%)
red.2hsl(2, 100%, 85%)
red.3hsl(1, 100%, 76%)
red.4hsl(359, 95%, 65%)
red.5hsl(357, 67%, 50%)
red.6hsl(356, 71%, 38%)
red.7hsl(355, 71%, 30%)
red.8hsl(354, 74%, 24%)
red.9hsl(352, 91%, 17%)
coral.0hsl(15, 100%, 96%)
coral.1hsl(12, 100%, 90%)
coral.2hsl(12, 100%, 82%)
coral.3hsl(11, 97%, 72%)
coral.4hsl(11, 81%, 60%)
coral.5hsl(9, 64%, 47%)
coral.6hsl(9, 70%, 36%)
coral.7hsl(8, 79%, 28%)
coral.8hsl(7, 91%, 22%)
coral.9hsl(6, 98%, 16%)
orange.0hsl(28, 100%, 95%)
orange.1hsl(28, 100%, 85%)
orange.2hsl(27, 100%, 74%)
orange.3hsl(25, 96%, 63%)
orange.4hsl(24, 76%, 51%)
orange.5hsl(24, 100%, 37%)
orange.6hsl(23, 100%, 29%)
orange.7hsl(22, 100%, 23%)
orange.8hsl(22, 100%, 18%)
orange.9hsl(19, 100%, 14%)
yellow.0hsl(50, 89%, 89%)
yellow.1hsl(48, 87%, 73%)
yellow.2hsl(46, 76%, 60%)
yellow.3hsl(44, 65%, 50%)
yellow.4hsl(42, 100%, 37%)
yellow.5hsl(40, 100%, 30%)
yellow.6hsl(37, 100%, 24%)
yellow.7hsl(36, 98%, 19%)
yellow.8hsl(35, 100%, 15%)
yellow.9hsl(34, 90%, 12%)
lemon.0hsl(54, 95%, 85%)
lemon.1hsl(52, 87%, 67%)
lemon.2hsl(51, 70%, 56%)
lemon.3hsl(50, 72%, 45%)
lemon.4hsl(50, 98%, 33%)
lemon.5hsl(49, 100%, 26%)
lemon.6hsl(48, 100%, 20%)
lemon.7hsl(47, 100%, 16%)
lemon.8hsl(46, 100%, 13%)
lemon.9hsl(43, 100%, 10%)
lime.0hsl(75, 86%, 85%)
lime.1hsl(76, 75%, 70%)
lime.2hsl(76, 59%, 58%)
lime.3hsl(77, 51%, 48%)
lime.4hsl(78, 57%, 38%)
lime.5hsl(80, 64%, 29%)
lime.6hsl(82, 66%, 22%)
lime.7hsl(84, 85%, 16%)
lime.8hsl(86, 90%, 12%)
lime.9hsl(88, 96%, 9%)
green.0hsl(133, 80%, 92%)
green.1hsl(134, 66%, 80%)
green.2hsl(135, 62%, 65%)
green.3hsl(136, 50%, 53%)
green.4hsl(137, 57%, 41%)
green.5hsl(137, 66%, 30%)
green.6hsl(138, 71%, 23%)
green.7hsl(141, 90%, 16%)
green.8hsl(142, 100%, 12%)
green.9hsl(143, 100%, 9%)
teal.0hsl(172, 72%, 92%)
teal.1hsl(173, 58%, 80%)
teal.2hsl(177, 57%, 63%)
teal.3hsl(177, 46%, 51%)
teal.4hsl(179, 51%, 41%)
teal.5hsl(180, 66%, 29%)
teal.6hsl(181, 67%, 23%)
teal.7hsl(182, 95%, 15%)
teal.8hsl(182, 82%, 13%)
teal.9hsl(182, 80%, 10%)
blue.0hsl(200, 100%, 95%)
blue.1hsl(203, 100%, 87%)
blue.2hsl(205, 100%, 77%)
blue.3hsl(208, 100%, 67%)
blue.4hsl(211, 100%, 58%)
blue.5hsl(212, 92%, 45%)
blue.6hsl(213, 95%, 36%)
blue.7hsl(214, 96%, 29%)
blue.8hsl(216, 82%, 24%)
blue.9hsl(217, 89%, 18%)
indigo.0hsl(229, 100%, 97%)
indigo.1hsl(231, 100%, 92%)
indigo.2hsl(232, 100%, 86%)
indigo.3hsl(234, 100%, 80%)
indigo.4hsl(234, 100%, 73%)
indigo.5hsl(237, 84%, 64%)
indigo.6hsl(238, 61%, 53%)
indigo.7hsl(237, 58%, 41%)
indigo.8hsl(235, 58%, 32%)
indigo.9hsl(235, 57%, 23%)
purple.0hsl(285, 100%, 97%)
purple.1hsl(271, 100%, 92%)
purple.2hsl(267, 100%, 86%)
purple.3hsl(265, 100%, 80%)
purple.4hsl(261, 92%, 72%)
purple.5hsl(261, 69%, 59%)
purple.6hsl(261, 53%, 48%)
purple.7hsl(261, 56%, 38%)
purple.8hsl(261, 59%, 30%)
purple.9hsl(260, 66%, 23%)
pink.0hsl(330, 100%, 97%)
pink.1hsl(327, 100%, 91%)
pink.2hsl(327, 100%, 84%)
pink.3hsl(326, 100%, 75%)
pink.4hsl(325, 76%, 63%)
pink.5hsl(324, 54%, 49%)
pink.6hsl(323, 59%, 38%)
pink.7hsl(322, 58%, 30%)
pink.8hsl(320, 67%, 23%)
pink.9hsl(319, 93%, 16%)