Tableau中使用的颜色: HEX CODE

HEX颜色代码是一种在网页设计和数字媒体中广泛使用的颜色表示方法。它使用十六进制数字来定义颜色,格式为#RRGGBB,其中:

• RR代表红色(Red)的强度,范围从00到FF
• GG代表绿色(Green)的强度,范围从00到FF
• BB代表蓝色(Blue)的强度,范围从00到FF

例如:

• #FF0000 表示纯红色
• #00FF00 表示纯绿色
• #0000FF 表示纯蓝色
• #FFFFFF 表示白色
• #000000 表示黑色

在Tableau中,您可以使用HEX颜色代码来精确控制图表和可视化中的颜色,确保颜色与您的品牌或设计规范保持一致。

调色盘 Colour Palette

画家在画画之前, 会把他们经常用的颜色放在一块板上. 这块板就叫做调色盘. 在Tableau中, 我们的dashboard不可能做的花枝乱颤的, 你肯定是用几种主要的颜色, 那么你常用的颜色打包到一起就是调色盘.

调色盘就是提前在Tableau中保存好的颜色. 这些颜色一般代表着你最常用的颜色. 在一些公司当中, 往往对于在Tableau dashboard或者是内部报告的图表用色有着严格的要求.

我们在开始项目之前, 需要熟悉这些颜色然后把它们保存到一起. 这么一套颜色就叫做调色盘

Tableau提供了多种调色盘选项,这些是Tableau提前帮你选好的调色版. Tableau有自己的颜色科学家, 这些颜色都是他们挑选过的. 如果你的项目没有要求必须使用哪种颜色的话, 往往Tableau内置的颜色就够用了

调色盘的类型:

分类调色盘 (Categorical Palettes)

用于区分不同的类别或维度值。每种颜色代表一个独特的类别,适合用于条形图、饼图等需要区分不同组的图表。

在下边的这个截图当中, 当我把数据中的Category拖拽到颜色上时, 就会出现一个编辑颜色的新的界面

在这个界面的右侧, 有一个叫select color palette的选项. 这里就是我们选择调色盘的地方.

这里的调色盘叫分类调色盘. 如果我们看调色盘中的颜色. 他们的颜色都是尽可能的不一样. 这么做的目的也非常明显.就是当他们放在一起的时候, 你可以非常容易区分哪个值对应哪个颜色

当我们把category品类这个字段放在颜色上并且使用Tableau给推荐的这个调色盘时, 我们可以看到Technology, Office Supplies还有Furniture分别在下边的这个柱状图里分配了不同的颜色. 这个颜色可以是线, 可以是柱状图也可以是饼状图.

如果我想要改变单个值的颜色, 我应该怎么办?

假设我们的Furniture我不想让它是这个蓝色, 而是一个其他的蓝色怎么办?

首先在调色板的下拉箭头中选择一个不同的调色板

然后在左侧选中Furniture, 在选中Furniture之后, Furniture的文字后边会出现一个灰色的背景

这时, 再选中右边调色盘中你想呀赋予Furniture的颜色. 然后点击Apply. 这个时候你就会看到Furniture从之前的蓝色变成了我们选中的这个蓝色.

下边的这个动图里, 就有完成的演示

如果调色盘里没有我想要的颜色, 我对于Furniture有我自己的想法怎么办?

我们再次回到这个界面. 与上次操作不同的是, 这一次你需要做的是双击左侧Furniture的这个文字. 它会出现一个你之前没见到过的对话框.

这个对话框非常重要, 叫做Select Color选择颜色. 这个新的对话框非常重要⭐️⭐️⭐️⭐️⭐️

在你未来的开发过程当中, 你会发现你会经常需要打开这个对话框.

Basic colors基础颜色

在左上角的这个区域, Tableau提供了9x6一共54种常见的颜色. 从左到右, 从浅到深. 在这些常见颜色重有四个重要的颜色分别是: 深红色, 深绿色, 白色 和 深蓝色

深红色

深绿色

白色

蓝色

红绿是财报中非常常用的颜色, 红色用来代表下降或者变差, 而绿色代表变化, 或者反过来.

白色往往有特殊的作用. 当我们的背景也是白色的时候, 我么把一部分图形变成白色可以起到隐藏这部分图表的效果.

观察下边这个图, 此刻我把Furniture的颜色变成白色, 再把Label变成白色之后. Furniture感觉仿佛彻底消失在图表中了.

Tableau提供的这个蓝色非常适合作为柱状图或者趋势图的颜色. 首先它不是黑色, 所以能够跟文字区分开. 其次这个颜色又足够深, 但我们使用白色文字作为label时, 能够得到非常好的对比度.

在下边的这个截图中, 用这个蓝色做为底色的柱状图就有非常不错的观感, 是我个人非常喜欢使用的颜色.

到了这里, 选择颜色界面就先提供了54种选择. 如果这些选择不能满足你. 那么就来到了下一种option. Color Picker

Pick Screen Color 选中屏幕上的颜色

在选中颜色的界面中, 你会看到这个选项. 它能够让你跟随鼠标去选中当前屏幕上显示的其他图片的颜色, 你可以复制粘贴这个颜色到Tableau中.

接下来看我在动图里的演示

当你锁定了你想要使用的颜色时, 这个颜色就会出现在右侧的这个颜色光谱中. 它会告诉你你选中的这个颜色所对应的代码是什么.

Hue, Sat Val | Red Green Blue 分别是其他颜色系统所使用的颜色参数. 我们所需要关注的就是最下边的那个HTML后边的#67b5fd 也就是前边所提到的颜色的HEX代码

使用自己的HEX CODE

如果你已经知道你要使用的颜色代码, 你可以跳过pick screen color. 直接把你的颜色hex code复制粘贴到HTML后边的部分. 然后你的颜色就会自动更新.

在下边的这个动图中, 我先把颜色变成红色, 然后再复制粘贴我们想要的颜色, 新的颜色就会直接替换当前我们选中的颜色

超级实用的功能: 保存自定义颜色 Add to Custom Colors

想象一下, 我们有10个图表里的Furniture都需要使用我们自定义的这个蓝色. 我做完第一个图, 颜色调好. 完事

到了第二个图, 我想要的这个蓝色找不到了. 因为它既不在我的调色板里, 也不在Tableau给我的那几个基础颜色里. 这时候我就只能再次打开color picker, 然后找到那个蓝色. 把第二个图里的颜色再改掉. 这个时候我要这么不停的重复做十遍的话, 整个人要崩溃了. 所以你这时候在学这一课的时候就得掌握如何保存自定义颜色以致于你未来不需要傻乎乎一遍遍重复这个操作.

保存自定义颜色的方法非常简单. 当你通过复制粘贴, 或者color picker确定你所需要使用的颜色之后, 点击左侧的Add to Custom Colors的这个选项之后. 你所选中的这个颜色就会添加到Custom Colors下边的白色空格里.

保存多个自定义颜色

需要注意的是, 如果你需要保存不止一个颜色, 那么一定要注意操作的顺序.

在下边这个动图里你可以看到

如果我们下选中左边的白色方块, 再在右侧选中颜色的话, 我们的自定义颜色就会被保存在你之前选中的地方.

如果你是在右侧先选中一个自定义颜色, 然后再点击Add to custom colors的话, 自定义颜色就会随机保存在没有自定义颜色的方块里.