All colors are exposed through the @coveord/plasma-tokens package in 3 formats: TypeScript, Sass and CSS. Hover over any color to see its name in any of those formats.
primary gradient
TS color.primary.gradient SCSS $plasma-color-primary-gradient CSS --plasma-color-primary-gradient
pureWhite
TS color.primary.pureWhite SCSS $plasma-color-primary-pure-white CSS --plasma-color-primary-pure-white
action 1
TS color.primary.action.1 SCSS $plasma-color-primary-action-1 CSS --plasma-color-primary-action-1
2
TS color.primary.action.2 SCSS $plasma-color-primary-action-2 CSS --plasma-color-primary-action-2
3
TS color.primary.action.3 SCSS $plasma-color-primary-action-3 CSS --plasma-color-primary-action-3
4
TS color.primary.action.4 SCSS $plasma-color-primary-action-4 CSS --plasma-color-primary-action-4
6
TS color.primary.action.6 SCSS $plasma-color-primary-action-6 CSS --plasma-color-primary-action-6
8
TS color.primary.action.8 SCSS $plasma-color-primary-action-8 CSS --plasma-color-primary-action-8
9
TS color.primary.action.9 SCSS $plasma-color-primary-action-9 CSS --plasma-color-primary-action-9
gray 0
TS color.primary.gray.0 SCSS $plasma-color-primary-gray-0 CSS --plasma-color-primary-gray-0
1
TS color.primary.gray.1 SCSS $plasma-color-primary-gray-1 CSS --plasma-color-primary-gray-1
2
TS color.primary.gray.2 SCSS $plasma-color-primary-gray-2 CSS --plasma-color-primary-gray-2
3
TS color.primary.gray.3 SCSS $plasma-color-primary-gray-3 CSS --plasma-color-primary-gray-3
4
TS color.primary.gray.4 SCSS $plasma-color-primary-gray-4 CSS --plasma-color-primary-gray-4
5
TS color.primary.gray.5 SCSS $plasma-color-primary-gray-5 CSS --plasma-color-primary-gray-5
6
TS color.primary.gray.6 SCSS $plasma-color-primary-gray-6 CSS --plasma-color-primary-gray-6
7
TS color.primary.gray.7 SCSS $plasma-color-primary-gray-7 CSS --plasma-color-primary-gray-7
8
TS color.primary.gray.8 SCSS $plasma-color-primary-gray-8 CSS --plasma-color-primary-gray-8
9
TS color.primary.gray.9 SCSS $plasma-color-primary-gray-9 CSS --plasma-color-primary-gray-9
navy 0
TS color.primary.navy.0 SCSS $plasma-color-primary-navy-0 CSS --plasma-color-primary-navy-0
1
TS color.primary.navy.1 SCSS $plasma-color-primary-navy-1 CSS --plasma-color-primary-navy-1
2
TS color.primary.navy.2 SCSS $plasma-color-primary-navy-2 CSS --plasma-color-primary-navy-2
3
TS color.primary.navy.3 SCSS $plasma-color-primary-navy-3 CSS --plasma-color-primary-navy-3
4
TS color.primary.navy.4 SCSS $plasma-color-primary-navy-4 CSS --plasma-color-primary-navy-4
5
TS color.primary.navy.5 SCSS $plasma-color-primary-navy-5 CSS --plasma-color-primary-navy-5
6
TS color.primary.navy.6 SCSS $plasma-color-primary-navy-6 CSS --plasma-color-primary-navy-6
7
TS color.primary.navy.7 SCSS $plasma-color-primary-navy-7 CSS --plasma-color-primary-navy-7
8
TS color.primary.navy.8 SCSS $plasma-color-primary-navy-8 CSS --plasma-color-primary-navy-8
9
TS color.primary.navy.9 SCSS $plasma-color-primary-navy-9 CSS --plasma-color-primary-navy-9
accent blue 0
TS color.accent.blue.0 SCSS $plasma-color-accent-blue-0 CSS --plasma-color-accent-blue-0
1
TS color.accent.blue.1 SCSS $plasma-color-accent-blue-1 CSS --plasma-color-accent-blue-1
2
TS color.accent.blue.2 SCSS $plasma-color-accent-blue-2 CSS --plasma-color-accent-blue-2
3
TS color.accent.blue.3 SCSS $plasma-color-accent-blue-3 CSS --plasma-color-accent-blue-3
4
TS color.accent.blue.4 SCSS $plasma-color-accent-blue-4 CSS --plasma-color-accent-blue-4
5
TS color.accent.blue.5 SCSS $plasma-color-accent-blue-5 CSS --plasma-color-accent-blue-5
6
TS color.accent.blue.6 SCSS $plasma-color-accent-blue-6 CSS --plasma-color-accent-blue-6
7
TS color.accent.blue.7 SCSS $plasma-color-accent-blue-7 CSS --plasma-color-accent-blue-7
8
TS color.accent.blue.8 SCSS $plasma-color-accent-blue-8 CSS --plasma-color-accent-blue-8
9
TS color.accent.blue.9 SCSS $plasma-color-accent-blue-9 CSS --plasma-color-accent-blue-9
red 0
TS color.accent.red.0 SCSS $plasma-color-accent-red-0 CSS --plasma-color-accent-red-0
1
TS color.accent.red.1 SCSS $plasma-color-accent-red-1 CSS --plasma-color-accent-red-1
2
TS color.accent.red.2 SCSS $plasma-color-accent-red-2 CSS --plasma-color-accent-red-2
3
TS color.accent.red.3 SCSS $plasma-color-accent-red-3 CSS --plasma-color-accent-red-3
4
TS color.accent.red.4 SCSS $plasma-color-accent-red-4 CSS --plasma-color-accent-red-4
5
TS color.accent.red.5 SCSS $plasma-color-accent-red-5 CSS --plasma-color-accent-red-5
6
TS color.accent.red.6 SCSS $plasma-color-accent-red-6 CSS --plasma-color-accent-red-6
7
TS color.accent.red.7 SCSS $plasma-color-accent-red-7 CSS --plasma-color-accent-red-7
8
TS color.accent.red.8 SCSS $plasma-color-accent-red-8 CSS --plasma-color-accent-red-8
9
TS color.accent.red.9 SCSS $plasma-color-accent-red-9 CSS --plasma-color-accent-red-9
teal 0
TS color.accent.teal.0 SCSS $plasma-color-accent-teal-0 CSS --plasma-color-accent-teal-0
1
TS color.accent.teal.1 SCSS $plasma-color-accent-teal-1 CSS --plasma-color-accent-teal-1
2
TS color.accent.teal.2 SCSS $plasma-color-accent-teal-2 CSS --plasma-color-accent-teal-2
3
TS color.accent.teal.3 SCSS $plasma-color-accent-teal-3 CSS --plasma-color-accent-teal-3
4
TS color.accent.teal.4 SCSS $plasma-color-accent-teal-4 CSS --plasma-color-accent-teal-4
5
TS color.accent.teal.5 SCSS $plasma-color-accent-teal-5 CSS --plasma-color-accent-teal-5
6
TS color.accent.teal.6 SCSS $plasma-color-accent-teal-6 CSS --plasma-color-accent-teal-6
7
TS color.accent.teal.7 SCSS $plasma-color-accent-teal-7 CSS --plasma-color-accent-teal-7
8
TS color.accent.teal.8 SCSS $plasma-color-accent-teal-8 CSS --plasma-color-accent-teal-8
9
TS color.accent.teal.9 SCSS $plasma-color-accent-teal-9 CSS --plasma-color-accent-teal-9
yellow 0
TS color.accent.yellow.0 SCSS $plasma-color-accent-yellow-0 CSS --plasma-color-accent-yellow-0
1
TS color.accent.yellow.1 SCSS $plasma-color-accent-yellow-1 CSS --plasma-color-accent-yellow-1
2
TS color.accent.yellow.2 SCSS $plasma-color-accent-yellow-2 CSS --plasma-color-accent-yellow-2
3
TS color.accent.yellow.3 SCSS $plasma-color-accent-yellow-3 CSS --plasma-color-accent-yellow-3
4
TS color.accent.yellow.4 SCSS $plasma-color-accent-yellow-4 CSS --plasma-color-accent-yellow-4
5
TS color.accent.yellow.5 SCSS $plasma-color-accent-yellow-5 CSS --plasma-color-accent-yellow-5
6
TS color.accent.yellow.6 SCSS $plasma-color-accent-yellow-6 CSS --plasma-color-accent-yellow-6
7
TS color.accent.yellow.7 SCSS $plasma-color-accent-yellow-7 CSS --plasma-color-accent-yellow-7
8
TS color.accent.yellow.8 SCSS $plasma-color-accent-yellow-8 CSS --plasma-color-accent-yellow-8
9
TS color.accent.yellow.9 SCSS $plasma-color-accent-yellow-9 CSS --plasma-color-accent-yellow-9
secondary green 0
TS color.secondary.green.0 SCSS $plasma-color-secondary-green-0 CSS --plasma-color-secondary-green-0
1
TS color.secondary.green.1 SCSS $plasma-color-secondary-green-1 CSS --plasma-color-secondary-green-1
2
TS color.secondary.green.2 SCSS $plasma-color-secondary-green-2 CSS --plasma-color-secondary-green-2
3
TS color.secondary.green.3 SCSS $plasma-color-secondary-green-3 CSS --plasma-color-secondary-green-3
4
TS color.secondary.green.4 SCSS $plasma-color-secondary-green-4 CSS --plasma-color-secondary-green-4
5
TS color.secondary.green.5 SCSS $plasma-color-secondary-green-5 CSS --plasma-color-secondary-green-5
6
TS color.secondary.green.6 SCSS $plasma-color-secondary-green-6 CSS --plasma-color-secondary-green-6
7
TS color.secondary.green.7 SCSS $plasma-color-secondary-green-7 CSS --plasma-color-secondary-green-7
8
TS color.secondary.green.8 SCSS $plasma-color-secondary-green-8 CSS --plasma-color-secondary-green-8
9
TS color.secondary.green.9 SCSS $plasma-color-secondary-green-9 CSS --plasma-color-secondary-green-9
indigo 0
TS color.secondary.indigo.0 SCSS $plasma-color-secondary-indigo-0 CSS --plasma-color-secondary-indigo-0
1
TS color.secondary.indigo.1 SCSS $plasma-color-secondary-indigo-1 CSS --plasma-color-secondary-indigo-1
2
TS color.secondary.indigo.2 SCSS $plasma-color-secondary-indigo-2 CSS --plasma-color-secondary-indigo-2
3
TS color.secondary.indigo.3 SCSS $plasma-color-secondary-indigo-3 CSS --plasma-color-secondary-indigo-3
4
TS color.secondary.indigo.4 SCSS $plasma-color-secondary-indigo-4 CSS --plasma-color-secondary-indigo-4
5
TS color.secondary.indigo.5 SCSS $plasma-color-secondary-indigo-5 CSS --plasma-color-secondary-indigo-5
6
TS color.secondary.indigo.6 SCSS $plasma-color-secondary-indigo-6 CSS --plasma-color-secondary-indigo-6
7
TS color.secondary.indigo.7 SCSS $plasma-color-secondary-indigo-7 CSS --plasma-color-secondary-indigo-7
8
TS color.secondary.indigo.8 SCSS $plasma-color-secondary-indigo-8 CSS --plasma-color-secondary-indigo-8
9
TS color.secondary.indigo.9 SCSS $plasma-color-secondary-indigo-9 CSS --plasma-color-secondary-indigo-9
lime 0
TS color.secondary.lime.0 SCSS $plasma-color-secondary-lime-0 CSS --plasma-color-secondary-lime-0
6
TS color.secondary.lime.6 SCSS $plasma-color-secondary-lime-6 CSS --plasma-color-secondary-lime-6
9
TS color.secondary.lime.9 SCSS $plasma-color-secondary-lime-9 CSS --plasma-color-secondary-lime-9
purple 0
TS color.secondary.purple.0 SCSS $plasma-color-secondary-purple-0 CSS --plasma-color-secondary-purple-0
1
TS color.secondary.purple.1 SCSS $plasma-color-secondary-purple-1 CSS --plasma-color-secondary-purple-1
2
TS color.secondary.purple.2 SCSS $plasma-color-secondary-purple-2 CSS --plasma-color-secondary-purple-2
3
TS color.secondary.purple.3 SCSS $plasma-color-secondary-purple-3 CSS --plasma-color-secondary-purple-3
4
TS color.secondary.purple.4 SCSS $plasma-color-secondary-purple-4 CSS --plasma-color-secondary-purple-4
5
TS color.secondary.purple.5 SCSS $plasma-color-secondary-purple-5 CSS --plasma-color-secondary-purple-5
6
TS color.secondary.purple.6 SCSS $plasma-color-secondary-purple-6 CSS --plasma-color-secondary-purple-6
7
TS color.secondary.purple.7 SCSS $plasma-color-secondary-purple-7 CSS --plasma-color-secondary-purple-7
8
TS color.secondary.purple.8 SCSS $plasma-color-secondary-purple-8 CSS --plasma-color-secondary-purple-8
9
TS color.secondary.purple.9 SCSS $plasma-color-secondary-purple-9 CSS --plasma-color-secondary-purple-9
