Skip to main content

Color

Use of color is essential for communication. Color is one of the first visual elements people notice, and it’s the most easily remembered.

 

Color Principles​

Use colors with purpose and clarity. Your color choices should highlight your extension's content, while also communicating its function. You should be able to justify the colors used on your extension: why did you choose that specific color, and what does it communicate to your user? Color is also an opportunity to showcase your brand. Learn more at Branding your Extension.

Less is more. Refrain from using too many colors, which could blur the focus. Try to avoid using color applied to text, which can make words difficult to distinguish and decrease legibility.

Consider vision accessibility. Some part of the population have varying levels of color-vision deficiencies. Choose color palettes that can work well universally. This typically means avoiding reds and greens, or at least choosing reds and greens that can be seen by people with CVD.

 

 

Tableau System Colors​

If you don’t have a brand or personal color palette to work off of, you may choose to use Tableau’s standard system colors. The Tableau color palette provides the flexibility to communicate both simple and complex concepts and actions.

 

Functional Colors​

Colors are a key piece of the visual design language. Colors allow for quick and easy recognition of different element types.

DimensionMeasureConfirmationAttentionAction
Discrete Blue
Discrete Blue
73, 150, 178
#4996B2		Continuous Green
Continuous Green
0, 177, 128
#00B180		Go Green
Go Green
45, 204, 151
#2DCC97		Attention RedAttention Red
235, 68, 84
#EB4454		Action Orange
Action Orange
235, 143, 80
#EB8F50
Discrete Dark
Discrete Dark
54, 126,156
#367E9C		Continuous Dark
Continuous Dark
0, 151, 104
#009768		Go Green Dark
Go Green Dark
47, 163, 125
#2FA37D		Attention Red Dark
Attention Red Dark
201, 58, 71
#C93A47		Action Orange Dark
Action Orange Dark
222, 107, 54
#DE6B36

 

Fills and Lines​

Colors used for lines, fills, and other non-functional elements consist of this array of gray tones, which accentuate the functional colors.

F1
F1
250, 250, 250
#FAFAFA		F2
F2
245, 245, 245
#F5F5F5		F2.5
F2.5
235, 235, 235
#EBEBEB		F3
F3
230, 230, 230
#E6E6E6		F4
F4
225, 225, 225
#E1E1E1
F5
F5
212, 212, 212
#D4D4D4		F6
F6
203, 203, 203
#CBCBCB		F7
F7
180, 180, 180
#B4B4B4		F8
F8
102, 102, 102
#666666		F9
F9
51, 51, 51
#333333

 

Fonts​

Fonts in Tableau range from black to white and a variety of opacities. Primary, secondary, and other fonts all have specified opacity.

100% Black
100% Black
Focused		80% Black
80% Black
Primary		70% Black
70% Black
Secondary		60% Black
60% Black
Tertiary		56% Black
56% Black
Tertiary		35% Black
35% Black
Disabled
100% White
100% White
Primary		56% White
56% White
Secondary		35% White
35% White
Disabled