Color

Start with the palette, map it through the scheme layer, then give it meaning with semantic roles. Hex values shown for the Cobalt brand.

Click a primitive to copy its hex. Click a semantic or scheme swatch to copy its token.

gray

--ref-gray-*

--ref-gray-alpha-*

--ref-brand-*

--ref-olive-*

--ref-green-*

--ref-emerald-*

--ref-mint-*

--ref-cyan-*

--ref-blue-*

--ref-purple-*

--ref-amethyst-*

--ref-pink-*

--ref-ruby-*

--ref-red-*

--ref-orange-*

--ref-amber-*

--ref-yellow-*

--ref-singles-*