了解UI设计软件拾色器的原理并选择合适的模式

对于刚入门的UI设计师来说，在调配颜色的时候常常犯愁，总感觉很难调配出合适的颜色。如果对设计软件拾色器的构成原理没有进行了解，那么你在选取拾色器颜色的时候是不是完全凭感觉。若是对色彩天生就有很好的敏感那倒可以一试，但是大部分同学还是需要不断练习才能提高对色彩的敏感度和审美水平，那么我们就要了解设计软件不同色彩模式下的拾色器构成原理，并选择更容易理解和调色的拾色器模式。

一、首先我们来了解 Photoshop 的拾色器

Photoshop 的拾色器支持的色彩模式最多，并且每一种模式可选单个参数进行设置。左边显示当前调色板状态，右边垂直滑动条调节选中参数的值：

HSB 模式：此模式是我们最常用的拾色器模式，一般设计软件默认的拾色器也是 HSB 模式。HSB 拾色器调色板区域是调节饱和度 (S) 和明度 (B) ，然后调节色相 (H) 的是单独的滑动条，那调色思路可以这样：首先从滑动条选取想要的色相，然后从调色板区域调节饱和度和亮度，这种思路是最容易理解，也是最容易选取合适颜色的。

RGB模式：此模式的拾色器也比较常用，红绿蓝三个通道的混合产生不同的色彩，虽然理解不难，但调配起来并不轻松。如上图，比如我们选中红色 (R) 通道，可以这么理解，调色板往上是添加绿色的分量，往右是添加蓝色的分量，滑动条是调节红色的分量，这样理解虽不难，但是我们去调配一个想要的颜色的时候，就很难把握三个颜色通道混合所需要的分量，特别微调的时候也不好掌控。

LAB模式：此模式的拾色器比较难理解，设计印刷品的时候可以尝试用这种模式，可以确保色彩的真实还原度。以上的图描述了这种模式的拾色器构成原理，方便大家理解。

此外，Photoshop 还支持 CMYK 模式以及直接输入 HEX 的值设置颜色，但 是在调色板中选取的颜色和实际 CMYK 的颜色值以及呈现的真实色彩是有区别的。

二、了解一下其他几款常用UI设计软件的拾色器

Figma、Sketch、Adobe Xd 默认的拾色器是 HSB 模式，也支持直接输入 HEX 的值设置颜色，而每个软件可选的色彩模式拾色器是有区别的：

Figma 支持 HEX、RGB、CSS（rgba）、HSL、HSB 模式设置参数，调色板可以切换 HSL 和 HSB 模式，如上图，HSL 和 HSB 调色原理很相似

Sketch 支持 HEX、RGB、HSB、HSL 模式设置参数，调色板可以切换 HSL 和 HSB 模式

Adobe Xd 支持 HEX、RGB、HSB 模式设置参数

三、总结

从以上几款常用设计软件的拾色器分析来看，Photoshop 的拾色器模式最多，并且支持一个模式不同参数的调色板切换，但是不能直接在拾色器中设置颜色透明度。而 Figma、Sketch、Adobe Xd 这几款设计软件默认是 HSB 模式的拾色器，并且都支持在拾色器中设置颜色透明度。其中 Figma、Sketch 还支持 HSL 模式拾色器。HSB / HSL 模式拾色器是最常见也是最容易调色的拾色器，所以如果你刚入门UI设计，建议先学会这两种模式的拾色器调色。此外，如果对于本文提到的这些色彩模式不理解的话，可以阅读我上一篇文章：UI设计师应该了解的色彩模式有哪几种。

最后谢谢大家的阅读，有不明白的可以在评论区留言，记得点赞、关注哦。