Colors

A color palette to help guide our Data Visualizations.

We have Sequential, Diverging, and Categorical color palettes for displaying our data visualizations throughout our application. For more details on how to use this color palette, see the Connect Figma Library.

Blue

--data-viz-blue-00-D
--data-viz-blue-10-D
--data-viz-blue-20-D
--data-viz-blue-30-D
--data-viz-blue-40-D
--data-viz-blue-50-F
--data-viz-blue-60-F
--data-viz-blue-70-F
--data-viz-blue-80-L
--data-viz-blue-90-L
--data-viz-blue-100-L
--data-viz-blue-110-L
--data-viz-blue-120-L
--data-viz-blue-130-L
--data-viz-blue-140-L
--data-viz-blue-150-L

Cyan

--data-viz-cyan-00-D
--data-viz-cyan-10-D
--data-viz-cyan-20-D
--data-viz-cyan-30-D
--data-viz-cyan-40-D
--data-viz-cyan-50-D
--data-viz-cyan-60-F
--data-viz-cyan-70-F
--data-viz-cyan-80-L
--data-viz-cyan-90-L
--data-viz-cyan-100-L
--data-viz-cyan-110-L
--data-viz-cyan-120-L
--data-viz-cyan-130-L
--data-viz-cyan-140-L
--data-viz-cyan-150-L

Green

--data-viz-green-00-D
--data-viz-green-10-D
--data-viz-green-20-D
--data-viz-green-30-D
--data-viz-green-40-D
--data-viz-green-50-D
--data-viz-green-60-F
--data-viz-green-70-F
--data-viz-green-80-L
--data-viz-green-90-L
--data-viz-green-100-L
--data-viz-green-110-L
--data-viz-green-120-L
--data-viz-green-130-L
--data-viz-green-140-L
--data-viz-green-150-L

Grey

--data-viz-grey-00-D
--data-viz-grey-10-D
--data-viz-grey-20-D
--data-viz-grey-30-D
--data-viz-grey-40-D
--data-viz-grey-50-D
--data-viz-grey-60-D
--data-viz-grey-70-D
--data-viz-grey-80-D
--data-viz-grey-90-D
--data-viz-grey-100-D
--data-viz-grey-110-D
--data-viz-grey-120-D
--data-viz-grey-130-D
--data-viz-grey-140-D
--data-viz-grey-150-D
--data-viz-grey-160-D
--data-viz-grey-170-D
--data-viz-grey-180-D
--data-viz-grey-190-L
--data-viz-grey-200-L
--data-viz-grey-210-L
--data-viz-grey-220-L
--data-viz-grey-230-L
--data-viz-grey-240-L
--data-viz-grey-250-L
--data-viz-grey-260-L
--data-viz-grey-270-L
--data-viz-grey-280-L
--data-viz-grey-290-L

Orange

--data-viz-orange-00-D
--data-viz-orange-10-D
--data-viz-orange-20-D
--data-viz-orange-40-D
--data-viz-orange-50-F
--data-viz-orange-60-F
--data-viz-orange-70-F
--data-viz-orange-80-L
--data-viz-orange-90-L
--data-viz-orange-100-L
--data-viz-orange-110-L
--data-viz-orange-120-L
--data-viz-orange-130-L
--data-viz-orange-140-L
--data-viz-orange-150-L

Pink

--data-viz-pink-00-D
--data-viz-pink-10-D
--data-viz-pink-20-D
--data-viz-pink-40-D
--data-viz-pink-50-D
--data-viz-pink-60-F
--data-viz-pink-70-F
--data-viz-pink-80-L
--data-viz-pink-90-L
--data-viz-pink-100-L
--data-viz-pink-110-L
--data-viz-pink-120-L
--data-viz-pink-130-L
--data-viz-pink-140-L
--data-viz-pink-150-L

Purple

--data-viz-purple-00-D
--data-viz-purple-10-D
--data-viz-purple-20-D
--data-viz-purple-40-D
--data-viz-purple-50-D
--data-viz-purple-60-F
--data-viz-purple-70-F
--data-viz-purple-80-L
--data-viz-purple-90-L
--data-viz-purple-100-L
--data-viz-purple-110-L
--data-viz-purple-120-L
--data-viz-purple-130-L
--data-viz-purple-140-L
--data-viz-purple-150-L

Teal

--data-viz-teal-00-D
--data-viz-teal-10-D
--data-viz-teal-20-D
--data-viz-teal-40-D
--data-viz-teal-50-D
--data-viz-teal-60-F
--data-viz-teal-70-F
--data-viz-teal-80-L
--data-viz-teal-90-L
--data-viz-teal-100-L
--data-viz-teal-110-L
--data-viz-teal-120-L
--data-viz-teal-130-L
--data-viz-teal-140-L
--data-viz-teal-150-L

Red

--data-viz-red-00-D
--data-viz-red-10-D
--data-viz-red-20-D
--data-viz-red-40-D
--data-viz-red-50-D
--data-viz-red-60-F
--data-viz-red-70-F
--data-viz-red-80-L
--data-viz-red-90-L
--data-viz-red-100-L
--data-viz-red-110-L
--data-viz-red-120-L
--data-viz-red-130-L
--data-viz-red-140-L
--data-viz-red-150-L

Yellow

--data-viz-yellow-00-D
--data-viz-yellow-10-F
--data-viz-yellow-20-F
--data-viz-yellow-40-F
--data-viz-yellow-50-F
--data-viz-yellow-60-F
--data-viz-yellow-70-F
--data-viz-yellow-80-L
--data-viz-yellow-90-L
--data-viz-yellow-100-L
--data-viz-yellow-110-L
--data-viz-yellow-120-L
--data-viz-yellow-130-L
--data-viz-yellow-140-L
--data-viz-yellow-150-L