Color

Edit this page   Submit an issue

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

In this section

 

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.

Dimension Measure Confirmation Attention Action
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 Red
Attention 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