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