即时设计教程 • 颜色管理器

「颜色管理器」主要出现于背景色、填充色、文本颜色以及描边色等多处,用于修改对应属性的颜色值。

颜色管理器的通用结构

颜色管理器主要结构如图:

 

五种填充类型

颜色管理器中最多有五种可填充类型:纯色填充、线性渐变填充、径向渐变填充、角度渐变填充、图片填充。

可以在颜色管理器顶部随时切换五种类型。

纯色

只支持一种颜色值,在基础设计中纯色最多且常见,整体用到纯色的情况下一般是较为扁平化的效果。

线性渐变

渐变的方向为一条直线,可以修改这条直线上任意点的颜色让其产生自然的过渡。

在纯色的设计中使用渐变色,可以让单纯的色块看起来更丰富、更具有动态感,不同色相的渐变做搭配逐渐形成一种年轻化的流行趋势。

 

径向渐变

渐变效果以圆形从圆心到边缘扩散,可以修改圆(或椭圆)的半径、偏心率与圆心的位置控制渐变效果。
径向渐变通常可以用于填充背景色时,让视线聚焦于某个部分;或者用于做出光源的模拟效果。

 

角度渐变

角度渐变可以用于填充某个环形进度条,令纯色进度条带有动态感;也可以直接用于做一个百分比饼图。

 

图片填充

直接将图片内容填充至某个形状内,用于让位图显示出某种特殊的形状;或者填充一些重复的图案达到作为铺衬花纹的效果,用以将简单的颜色模块变得更丰富等。

图片可以修改四种填充方式:填充、适应、拉伸、平铺。


 

拾色板

拾色板显示的是 HSB 色彩模式,通过坐标系形式,X 轴为饱和度(S)从 0 到 100 、Y 轴为明度(B)从 0 到 100,显示某一色相下根据不同的明度与饱和度产生的多种颜色组成的过渡色。

通过拾色板可以直接取到某一色相上的任一色值。

智能配色方案

根据你当前选中的某个颜色值,我们根据该颜色相应的明度、饱和度,实时智能生成一套适合的同色系配色方案,实用且快速,帮助你快速得到其他可用的色彩值。

 

取色器

选中组件后,展开颜色管理器面板,点击取色器后可以在页面上任意地方快速提取鼠标指针所在位置的色值。
点击后,当前选中的组件的填充色将被替换为取色器选择的颜色; 未选中组件时,按快捷键I可以快速打开取色器,
在画布任意位置取色后,将复制该色值,之后可任意选择一个或多个组件并在右侧面板的颜色相关属性中粘贴该颜色代码使用。

 

前后颜色对比

在颜色管理器中修改颜色后,可通过该对比区域选择恢复到修改前的颜色值。

 

色相(H)

色彩从三种基本颜色开始,以不同比例相互混合后产生多个间色,且以此同理间色产生多个复色,从而变成多种不同的色彩。色相栏由这些所有的色彩组成。

可以拖拽滑块修改当前的色相值,也可以在 HSB 的属性值中修改 H(Hues)的值。


 

三种颜色参数类型

你可以根据个人习惯切换 RGB、HSB、HEX 三种模式控制颜色参数。

RGB:即红色(R)、绿色(G)、蓝色(B)三种颜色通道相互叠加产生的颜色值,通过修改 0 - 255 的数值来修改颜色。

HSB:即由色相(H)、饱和度(S)、明度(B)三种参数控制的颜色值,HSB 的效果直接反映在拾色板中。

HEX:是十六进制颜色参数形式,通过 0 - 9 十个数字与 A - F 六个字母组成的颜色编码。黑色为 #000000,白色为 #FFFFFFF。

 

默认颜色

我们提供一组好看的默认常用 Web 色,便于你快速选用。

 

历史颜色

近期使用过的颜色将会在颜色管理器上保留。你可以在历史颜色中找回曾经用到过的颜色。

 

手动保存颜色

如果你有自己的配色喜欢和习惯,常用的颜色都可以手动保存下来