Color
Colors can be used to communicate meaning, establish visual hierarchy, and differentiate products, all while ensuring a cohesive and accessible experience. Colors are divided into several categories to communicate several concepts across the Salt design system.
The raw color values on this page reference the current Salt theme. If you’re using the Salt Next theme please refer to the separate color palette and listed guidance on the Themes page.
Status colors are visual indicators that reflect changes in the state or condition of a system or process. These colors help users understand what’s happening, what actions are needed, and whether any issues need to be addressed.
The Salt design system includes 4 statuses with corresponding colors:
| Status | Color |
|---|---|
| Info | Blue |
| Error | Red |
| Warning | Orange |
| Success | Green |
Sentiment colors guide users through an interface by providing visual cues about potential outcomes. These colors evoke specific feelings such as negativity, carefulness, comfort, trust or positivity.
The Salt design system includes 5 sentiments with associated colors:
| Sentiment | Color | Feeling |
|---|---|---|
| Negative | Red | Negativity |
| Caution | Orange | Carefulness |
| Neutral | Gray | Comfort |
| Accented | Blue (Teal in Next theme) | Trust |
| Positive | Green | Positivity |
Sentiment can be used independently of status. For example, a negative button for 'Delete' could be displayed within an informative dialog.
These are the foundational colors used most frequently across our applications and in the majority of Salt’s components.
| Preview | Name | Value |
|---|---|---|
--salt-color-white | rgb(var(--salt-color-white-rgb)) | |
--salt-color-black | rgb(var(--salt-color-black-rgb)) | |
--salt-color-red-10 | rgb(var(--salt-color-red-10-rgb)) | |
--salt-color-red-20 | rgb(var(--salt-color-red-20-rgb)) | |
--salt-color-red-30 | rgb(var(--salt-color-red-30-rgb)) | |
--salt-color-red-40 | rgb(var(--salt-color-red-40-rgb)) | |
--salt-color-red-50 | rgb(var(--salt-color-red-50-rgb)) | |
--salt-color-red-100 | rgb(var(--salt-color-red-100-rgb)) | |
--salt-color-red-200 | rgb(var(--salt-color-red-200-rgb)) | |
--salt-color-red-300 | rgb(var(--salt-color-red-300-rgb)) | |
--salt-color-red-400 | rgb(var(--salt-color-red-400-rgb)) | |
--salt-color-red-500 | rgb(var(--salt-color-red-500-rgb)) | |
--salt-color-red-600 | rgb(var(--salt-color-red-600-rgb)) | |
--salt-color-red-700 | rgb(var(--salt-color-red-700-rgb)) | |
--salt-color-red-800 | rgb(var(--salt-color-red-800-rgb)) | |
--salt-color-red-900 | rgb(var(--salt-color-red-900-rgb)) | |
--salt-color-orange-10 | rgb(var(--salt-color-orange-10-rgb)) | |
--salt-color-orange-20 | rgb(var(--salt-color-orange-20-rgb)) | |
--salt-color-orange-30 | rgb(var(--salt-color-orange-30-rgb)) | |
--salt-color-orange-40 | rgb(var(--salt-color-orange-40-rgb)) | |
--salt-color-orange-50 | rgb(var(--salt-color-orange-50-rgb)) | |
--salt-color-orange-100 | rgb(var(--salt-color-orange-100-rgb)) | |
--salt-color-orange-200 | rgb(var(--salt-color-orange-200-rgb)) | |
--salt-color-orange-300 | rgb(var(--salt-color-orange-300-rgb)) | |
--salt-color-orange-400 | rgb(var(--salt-color-orange-400-rgb)) | |
--salt-color-orange-500 | rgb(var(--salt-color-orange-500-rgb)) | |
--salt-color-orange-600 | rgb(var(--salt-color-orange-600-rgb)) | |
--salt-color-orange-700 | rgb(var(--salt-color-orange-700-rgb)) | |
--salt-color-orange-800 | rgb(var(--salt-color-orange-800-rgb)) | |
--salt-color-orange-850 | rgb(var(--salt-color-orange-850-rgb)) | |
--salt-color-orange-900 | rgb(var(--salt-color-orange-900-rgb)) | |
--salt-color-green-10 | rgb(var(--salt-color-green-10-rgb)) | |
--salt-color-green-20 | rgb(var(--salt-color-green-20-rgb)) | |
--salt-color-green-30 | rgb(var(--salt-color-green-30-rgb)) | |
--salt-color-green-40 | rgb(var(--salt-color-green-40-rgb)) | |
--salt-color-green-50 | rgb(var(--salt-color-green-50-rgb)) | |
--salt-color-green-100 | rgb(var(--salt-color-green-100-rgb)) | |
--salt-color-green-200 | rgb(var(--salt-color-green-200-rgb)) | |
--salt-color-green-300 | rgb(var(--salt-color-green-300-rgb)) | |
--salt-color-green-400 | rgb(var(--salt-color-green-400-rgb)) | |
--salt-color-green-500 | rgb(var(--salt-color-green-500-rgb)) | |
--salt-color-green-600 | rgb(var(--salt-color-green-600-rgb)) | |
--salt-color-green-700 | rgb(var(--salt-color-green-700-rgb)) | |
--salt-color-green-800 | rgb(var(--salt-color-green-800-rgb)) | |
--salt-color-green-900 | rgb(var(--salt-color-green-900-rgb)) | |
--salt-color-teal-10 | rgb(var(--salt-color-teal-10-rgb)) | |
--salt-color-teal-20 | rgb(var(--salt-color-teal-20-rgb)) | |
--salt-color-teal-30 | rgb(var(--salt-color-teal-30-rgb)) | |
--salt-color-teal-40 | rgb(var(--salt-color-teal-40-rgb)) | |
--salt-color-teal-50 | rgb(var(--salt-color-teal-50-rgb)) | |
--salt-color-teal-100 | rgb(var(--salt-color-teal-100-rgb)) | |
--salt-color-teal-200 | rgb(var(--salt-color-teal-200-rgb)) | |
--salt-color-teal-300 | rgb(var(--salt-color-teal-300-rgb)) | |
--salt-color-teal-400 | rgb(var(--salt-color-teal-400-rgb)) | |
--salt-color-teal-500 | rgb(var(--salt-color-teal-500-rgb)) | |
--salt-color-teal-600 | rgb(var(--salt-color-teal-600-rgb)) | |
--salt-color-teal-700 | rgb(var(--salt-color-teal-700-rgb)) | |
--salt-color-teal-800 | rgb(var(--salt-color-teal-800-rgb)) | |
--salt-color-teal-900 | rgb(var(--salt-color-teal-900-rgb)) | |
--salt-color-blue-10 | rgb(var(--salt-color-blue-10-rgb)) | |
--salt-color-blue-20 | rgb(var(--salt-color-blue-20-rgb)) | |
--salt-color-blue-30 | rgb(var(--salt-color-blue-30-rgb)) | |
--salt-color-blue-40 | rgb(var(--salt-color-blue-40-rgb)) | |
--salt-color-blue-50 | rgb(var(--salt-color-blue-50-rgb)) | |
--salt-color-blue-100 | rgb(var(--salt-color-blue-100-rgb)) | |
--salt-color-blue-200 | rgb(var(--salt-color-blue-200-rgb)) | |
--salt-color-blue-300 | rgb(var(--salt-color-blue-300-rgb)) | |
--salt-color-blue-400 | rgb(var(--salt-color-blue-400-rgb)) | |
--salt-color-blue-500 | rgb(var(--salt-color-blue-500-rgb)) | |
--salt-color-blue-600 | rgb(var(--salt-color-blue-600-rgb)) | |
--salt-color-blue-700 | rgb(var(--salt-color-blue-700-rgb)) | |
--salt-color-blue-800 | rgb(var(--salt-color-blue-800-rgb)) | |
--salt-color-blue-900 | rgb(var(--salt-color-blue-900-rgb)) | |
--salt-color-purple-10 | rgb(var(--salt-color-purple-10-rgb)) | |
--salt-color-purple-20 | rgb(var(--salt-color-purple-20-rgb)) | |
--salt-color-purple-30 | rgb(var(--salt-color-purple-30-rgb)) | |
--salt-color-purple-40 | rgb(var(--salt-color-purple-40-rgb)) | |
--salt-color-purple-50 | rgb(var(--salt-color-purple-50-rgb)) | |
--salt-color-purple-100 | rgb(var(--salt-color-purple-100-rgb)) | |
--salt-color-purple-200 | rgb(var(--salt-color-purple-200-rgb)) | |
--salt-color-purple-300 | rgb(var(--salt-color-purple-300-rgb)) | |
--salt-color-purple-400 | rgb(var(--salt-color-purple-400-rgb)) | |
--salt-color-purple-500 | rgb(var(--salt-color-purple-500-rgb)) | |
--salt-color-purple-600 | rgb(var(--salt-color-purple-600-rgb)) | |
--salt-color-purple-700 | rgb(var(--salt-color-purple-700-rgb)) | |
--salt-color-purple-800 | rgb(var(--salt-color-purple-800-rgb)) | |
--salt-color-purple-900 | rgb(var(--salt-color-purple-900-rgb)) | |
--salt-color-gray-10 | rgb(var(--salt-color-gray-10-rgb)) | |
--salt-color-gray-20 | rgb(var(--salt-color-gray-20-rgb)) | |
--salt-color-gray-30 | rgb(var(--salt-color-gray-30-rgb)) | |
--salt-color-gray-40 | rgb(var(--salt-color-gray-40-rgb)) | |
--salt-color-gray-50 | rgb(var(--salt-color-gray-50-rgb)) | |
--salt-color-gray-60 | rgb(var(--salt-color-gray-60-rgb)) | |
--salt-color-gray-70 | rgb(var(--salt-color-gray-70-rgb)) | |
--salt-color-gray-80 | rgb(var(--salt-color-gray-80-rgb)) | |
--salt-color-gray-90 | rgb(var(--salt-color-gray-90-rgb)) | |
--salt-color-gray-100 | rgb(var(--salt-color-gray-100-rgb)) | |
--salt-color-gray-200 | rgb(var(--salt-color-gray-200-rgb)) | |
--salt-color-gray-300 | rgb(var(--salt-color-gray-300-rgb)) | |
--salt-color-gray-400 | rgb(var(--salt-color-gray-400-rgb)) | |
--salt-color-gray-500 | rgb(var(--salt-color-gray-500-rgb)) | |
--salt-color-gray-600 | rgb(var(--salt-color-gray-600-rgb)) | |
--salt-color-gray-700 | rgb(var(--salt-color-gray-700-rgb)) | |
--salt-color-gray-800 | rgb(var(--salt-color-gray-800-rgb)) | |
--salt-color-gray-900 | rgb(var(--salt-color-gray-900-rgb)) |
These are the categorical colors used for data visualization and other components that support categories. The palette includes 20 unique colors and their corresponding ramps.
| Preview | Name | Value |
|---|---|---|
--salt-color-cobalt-100 | rgb(237, 244, 255) | |
--salt-color-cobalt-200 | rgb(198, 211, 239) | |
--salt-color-cobalt-300 | rgb(159, 179, 223) | |
--salt-color-cobalt-400 | rgb(118, 148, 207) | |
--salt-color-cobalt-500 | rgb(70, 118, 191) | |
--salt-color-cobalt-600 | rgb(53, 95, 161) | |
--salt-color-cobalt-700 | rgb(36, 72, 133) | |
--salt-color-cobalt-800 | rgb(19, 51, 105) | |
--salt-color-cobalt-900 | rgb(0, 31, 79) | |
--salt-color-cider-100 | rgb(255, 235, 217) | |
--salt-color-cider-200 | rgb(255, 201, 158) | |
--salt-color-cider-300 | rgb(242, 172, 116) | |
--salt-color-cider-400 | rgb(219, 138, 72) | |
--salt-color-cider-500 | rgb(171, 101, 40) | |
--salt-color-cider-600 | rgb(143, 82, 31) | |
--salt-color-cider-700 | rgb(116, 64, 21) | |
--salt-color-cider-800 | rgb(90, 47, 13) | |
--salt-color-cider-900 | rgb(66, 31, 0) | |
--salt-color-plum-100 | rgb(245, 224, 255) | |
--salt-color-plum-200 | rgb(230, 185, 250) | |
--salt-color-plum-300 | rgb(209, 148, 235) | |
--salt-color-plum-400 | rgb(188, 115, 222) | |
--salt-color-plum-500 | rgb(159, 85, 194) | |
--salt-color-plum-600 | rgb(131, 67, 161) | |
--salt-color-plum-700 | rgb(105, 50, 130) | |
--salt-color-plum-800 | rgb(79, 34, 100) | |
--salt-color-plum-900 | rgb(55, 18, 71) | |
--salt-color-aqua-100 | rgb(220, 247, 247) | |
--salt-color-aqua-200 | rgb(177, 229, 229) | |
--salt-color-aqua-300 | rgb(135, 200, 201) | |
--salt-color-aqua-400 | rgb(90, 171, 173) | |
--salt-color-aqua-500 | rgb(42, 130, 133) | |
--salt-color-aqua-600 | rgb(31, 109, 111) | |
--salt-color-aqua-700 | rgb(19, 88, 90) | |
--salt-color-aqua-800 | rgb(8, 68, 70) | |
--salt-color-aqua-900 | rgb(0, 49, 51) | |
--salt-color-slate-100 | rgb(225, 232, 247) | |
--salt-color-slate-200 | rgb(194, 202, 221) | |
--salt-color-slate-300 | rgb(164, 173, 196) | |
--salt-color-slate-400 | rgb(134, 145, 172) | |
--salt-color-slate-500 | rgb(105, 118, 148) | |
--salt-color-slate-600 | rgb(84, 95, 122) | |
--salt-color-slate-700 | rgb(64, 73, 97) | |
--salt-color-slate-800 | rgb(44, 53, 74) | |
--salt-color-slate-900 | rgb(26, 33, 51) | |
--salt-color-rose-100 | rgb(255, 227, 249) | |
--salt-color-rose-200 | rgb(250, 190, 237) | |
--salt-color-rose-300 | rgb(229, 154, 212) | |
--salt-color-rose-400 | rgb(209, 117, 189) | |
--salt-color-rose-500 | rgb(176, 84, 157) | |
--salt-color-rose-600 | rgb(146, 67, 130) | |
--salt-color-rose-700 | rgb(118, 50, 104) | |
--salt-color-rose-800 | rgb(90, 32, 78) | |
--salt-color-rose-900 | rgb(64, 16, 54) | |
--salt-color-olive-100 | rgb(234, 240, 223) | |
--salt-color-olive-200 | rgb(210, 222, 184) | |
--salt-color-olive-300 | rgb(180, 194, 149) | |
--salt-color-olive-400 | rgb(149, 166, 113) | |
--salt-color-olive-500 | rgb(109, 124, 77) | |
--salt-color-olive-600 | rgb(88, 103, 58) | |
--salt-color-olive-700 | rgb(68, 83, 39) | |
--salt-color-olive-800 | rgb(49, 64, 21) | |
--salt-color-olive-900 | rgb(31, 46, 0) | |
--salt-color-salmon-100 | rgb(255, 232, 233) | |
--salt-color-salmon-200 | rgb(255, 194, 194) | |
--salt-color-salmon-300 | rgb(240, 155, 153) | |
--salt-color-salmon-400 | rgb(222, 120, 120) | |
--salt-color-salmon-500 | rgb(189, 85, 88) | |
--salt-color-salmon-600 | rgb(154, 64, 67) | |
--salt-color-salmon-700 | rgb(121, 44, 48) | |
--salt-color-salmon-800 | rgb(89, 25, 29) | |
--salt-color-salmon-900 | rgb(59, 6, 8) | |
--salt-color-indigo-100 | rgb(231, 227, 255) | |
--salt-color-indigo-200 | rgb(208, 194, 252) | |
--salt-color-indigo-300 | rgb(180, 162, 242) | |
--salt-color-indigo-400 | rgb(149, 129, 229) | |
--salt-color-indigo-500 | rgb(118, 101, 207) | |
--salt-color-indigo-600 | rgb(98, 85, 170) | |
--salt-color-indigo-700 | rgb(77, 66, 135) | |
--salt-color-indigo-800 | rgb(57, 49, 102) | |
--salt-color-indigo-900 | rgb(38, 32, 71) | |
--salt-color-jade-100 | rgb(225, 245, 230) | |
--salt-color-jade-200 | rgb(179, 229, 187) | |
--salt-color-jade-300 | rgb(137, 201, 146) | |
--salt-color-jade-400 | rgb(92, 173, 106) | |
--salt-color-jade-500 | rgb(45, 133, 67) | |
--salt-color-jade-600 | rgb(33, 111, 53) | |
--salt-color-jade-700 | rgb(21, 90, 39) | |
--salt-color-jade-800 | rgb(8, 70, 26) | |
--salt-color-jade-900 | rgb(0, 51, 13) | |
--salt-color-citrine-100 | rgb(255, 249, 217) | |
--salt-color-citrine-200 | rgb(240, 225, 165) | |
--salt-color-citrine-300 | rgb(209, 189, 115) | |
--salt-color-citrine-400 | rgb(178, 156, 66) | |
--salt-color-citrine-500 | rgb(135, 116, 16) | |
--salt-color-citrine-600 | rgb(114, 98, 12) | |
--salt-color-citrine-700 | rgb(94, 80, 9) | |
--salt-color-citrine-800 | rgb(74, 63, 6) | |
--salt-color-citrine-900 | rgb(51, 43, 0) | |
--salt-color-autumn-100 | rgb(255, 233, 217) | |
--salt-color-autumn-200 | rgb(255, 197, 161) | |
--salt-color-autumn-300 | rgb(242, 163, 114) | |
--salt-color-autumn-400 | rgb(222, 126, 64) | |
--salt-color-autumn-500 | rgb(189, 90, 19) | |
--salt-color-autumn-600 | rgb(153, 73, 18) | |
--salt-color-autumn-700 | rgb(119, 55, 14) | |
--salt-color-autumn-800 | rgb(86, 39, 10) | |
--salt-color-autumn-900 | rgb(56, 23, 0) | |
--salt-color-lavender-100 | rgb(250, 235, 250) | |
--salt-color-lavender-200 | rgb(237, 199, 237) | |
--salt-color-lavender-300 | rgb(212, 167, 212) | |
--salt-color-lavender-400 | rgb(186, 134, 186) | |
--salt-color-lavender-500 | rgb(148, 102, 148) | |
--salt-color-lavender-600 | rgb(126, 80, 126) | |
--salt-color-lavender-700 | rgb(105, 58, 105) | |
--salt-color-lavender-800 | rgb(84, 37, 84) | |
--salt-color-lavender-900 | rgb(64, 15, 64) | |
--salt-color-ocean-100 | rgb(227, 251, 255) | |
--salt-color-ocean-200 | rgb(180, 229, 240) | |
--salt-color-ocean-300 | rgb(131, 197, 212) | |
--salt-color-ocean-400 | rgb(80, 167, 186) | |
--salt-color-ocean-500 | rgb(0, 128, 148) | |
--salt-color-ocean-600 | rgb(0, 106, 122) | |
--salt-color-ocean-700 | rgb(0, 84, 97) | |
--salt-color-ocean-800 | rgb(0, 64, 74) | |
--salt-color-ocean-900 | rgb(0, 44, 51) | |
--salt-color-smoke-100 | rgb(242, 245, 250) | |
--salt-color-smoke-200 | rgb(208, 211, 216) | |
--salt-color-smoke-300 | rgb(176, 179, 184) | |
--salt-color-smoke-400 | rgb(144, 147, 152) | |
--salt-color-smoke-500 | rgb(114, 117, 122) | |
--salt-color-smoke-600 | rgb(93, 96, 101) | |
--salt-color-smoke-700 | rgb(73, 76, 81) | |
--salt-color-smoke-800 | rgb(53, 56, 61) | |
--salt-color-smoke-900 | rgb(35, 38, 43) | |
--salt-color-fuchsia-100 | rgb(255, 232, 247) | |
--salt-color-fuchsia-200 | rgb(255, 191, 229) | |
--salt-color-fuchsia-300 | rgb(240, 151, 203) | |
--salt-color-fuchsia-400 | rgb(222, 109, 178) | |
--salt-color-fuchsia-500 | rgb(194, 71, 149) | |
--salt-color-fuchsia-600 | rgb(167, 54, 125) | |
--salt-color-fuchsia-700 | rgb(140, 37, 101) | |
--salt-color-fuchsia-800 | rgb(114, 19, 79) | |
--salt-color-fuchsia-900 | rgb(89, 0, 57) | |
--salt-color-lime-100 | rgb(239, 245, 220) | |
--salt-color-lime-200 | rgb(215, 227, 168) | |
--salt-color-lime-300 | rgb(182, 196, 120) | |
--salt-color-lime-400 | rgb(146, 166, 71) | |
--salt-color-lime-500 | rgb(102, 125, 21) | |
--salt-color-lime-600 | rgb(85, 106, 16) | |
--salt-color-lime-700 | rgb(69, 87, 11) | |
--salt-color-lime-800 | rgb(53, 68, 6) | |
--salt-color-lime-900 | rgb(36, 46, 0) | |
--salt-color-fur-100 | rgb(255, 244, 235) | |
--salt-color-fur-200 | rgb(245, 214, 191) | |
--salt-color-fur-300 | rgb(219, 178, 147) | |
--salt-color-fur-400 | rgb(194, 144, 107) | |
--salt-color-fur-500 | rgb(153, 106, 69) | |
--salt-color-fur-600 | rgb(130, 85, 52) | |
--salt-color-fur-700 | rgb(107, 65, 36) | |
--salt-color-fur-800 | rgb(85, 46, 20) | |
--salt-color-fur-900 | rgb(64, 28, 0) | |
--salt-color-violet-100 | rgb(237, 239, 255) | |
--salt-color-violet-200 | rgb(202, 203, 252) | |
--salt-color-violet-300 | rgb(167, 169, 235) | |
--salt-color-violet-400 | rgb(134, 139, 219) | |
--salt-color-violet-500 | rgb(99, 110, 191) | |
--salt-color-violet-600 | rgb(81, 90, 159) | |
--salt-color-violet-700 | rgb(63, 71, 128) | |
--salt-color-violet-800 | rgb(47, 53, 99) | |
--salt-color-violet-900 | rgb(31, 36, 71) | |
--salt-color-forest-100 | rgb(237, 250, 245) | |
--salt-color-forest-200 | rgb(188, 232, 211) | |
--salt-color-forest-300 | rgb(141, 204, 174) | |
--salt-color-forest-400 | rgb(91, 176, 136) | |
--salt-color-forest-500 | rgb(35, 133, 94) | |
--salt-color-forest-600 | rgb(25, 111, 77) | |
--salt-color-forest-700 | rgb(15, 90, 61) | |
--salt-color-forest-800 | rgb(6, 70, 46) | |
--salt-color-forest-900 | rgb(0, 51, 31) |
Opacity refers to the degree of transparency or visibility of a design element. It allows for layering, creating depth and hierarchy, and can help provide visual interest to an interface.
| Token | Opacity |
|---|---|
--salt-opacity-0 | 0.00 |
--salt-opacity-8 | 0.08 |
--salt-opacity-15 | 0.15 |
--salt-opacity-25 | 0.25 |
--salt-opacity-40 | 0.40 |
--salt-opacity-70 | 0.70 |
We appreciate your thoughts and feedback on any content in the Salt foundations. Please contact us if you have any comments or questions.