更新时间：2026年10月06日

颜色选择器用来选定颜色、输入色值、从图片取色，以及调整填充的透明度和渐变。先选中要修改的对象，再打开填充色块；已有品牌色时直接输入色值，参考图片时用吸管取色。颜色确定后，还要放回实际背景中观察，不能只看选择器里的色块。

在Pixso 的界面设计中，选定的颜色可以直接用于按钮、文字和背景。下面从选择颜色开始，再把色板、共享样式和渐变放回同一份设计稿中练习。

1. 颜色选择器是什么？如何工作？

颜色选择器是用来选择、定义和提取颜色的工具。你可以输入已有的色值，也可以在色彩区域中调节颜色，或者用吸管从图片中取样；最终得到的颜色会用于当前选中对象的填充等属性。

设计软件中的颜色选择器侧重为当前对象设定颜色，例如 Photoshop、Figma、Pixso 中的拾色器。Adobe Color、Coolors 等工具则更侧重组合与探索配色方案。选出一个颜色和搭配整套颜色是两个任务，取到好看的颜色后，还要考虑它在页面中的用途。

2. Pixso颜色选择器介绍

Pixso 是一款UI/UX设计工具。在编辑器中选中图形或文字，点击右侧的填充色块，即可打开颜色选择器。除了调整当前颜色，还可以保存常用色、创建颜色样式，并将样式发布到团队组件库，供其他设计文件调用。

Pixso颜色选择器的特点：

适合人群：

（1）利用HSB模式选色并一键复制使用

选中对象并打开颜色选择器，在颜色格式菜单中选择 HSB。先用 H 调整色相，再用 S 调整饱和度、用 B 调整明度；已有确定色值时，直接输入 HEX 或 RGB 即可，不必先转换到 HSB。

HSB选色：S 为 0 时是从黑到白的中性色，B 越小越暗、越大越亮。B 改变颜色的明暗，不等于透明度；想让背景透出来，要调整颜色的透明度。
复制颜色代码：确定颜色后，按交付需要复制 HEX 等色值或 CSS 颜色写法。若填充使用了透明度，也要把该值一并传递，避免开发端只复制颜色而得到不同效果。

（2）保存与共享配色方案

在设计过程中，复用配色方案可以减少重复选色。这里要区分两件事：把常用颜色留在色板中便于再次选取，以及创建、发布颜色样式供团队调用。保存到色板不等于已经发布成团队共享样式。

自定义颜色：把常用颜色添加到色板，后续可直接选取；适合暂存探索中的色样，或整理一个项目常用的颜色。
共享颜色样式：点击对应属性的样式图标，创建并命名颜色样式；需要跨文件共享时，再发布到团队组件库。名称宜表达用途，如“文字/主要”“背景/页面”，而不只是“蓝色1”。

寻找配色方向时，也可以先浏览下面的资源，把其中适合项目的少量颜色选出来，再给文字、背景和强调操作分配用途。

（3）图片取色

如果想使用图片中的某个颜色，先把参考图片放到 Pixso 画布上，再选中要修改的目标对象，打开填充颜色，使用吸管在图片上取样。取色后确认目标对象已经变色；照片中同一区域往往有明暗变化，可多比较几个取样点，而不是默认第一次取到的颜色最合适。

（4）自由定制渐变并预览效果

在填充类型中选择渐变，再分别选中渐变色标设置颜色。拖动渐变方向与色标位置，观察对象上的过渡范围；如果只是想把一端淡出，可调整该端色标的透明度，不必把它改成白色。

除了渐变色标，填充本身的透明度与混合模式也会改变显示结果。上图展示了半透明填充及混合模式菜单，设置时应连同对象背后的颜色一起观察。

调整颜色透明度：降低填充的透明度后，后方颜色会参与最终显示。只想让背景半透明而保持文字清楚时，应调整背景的填充，不要直接降低包含文字的整组图层透明度。
颜色混合模式：正片叠底、颜色加深等模式会改变上下层颜色的混合方式。同一色值在不同底色上可能呈现不同效果；如果要使用稳定的品牌色，先用正常模式检查，再决定是否需要混合。

以音乐播放器为例，从专辑封面取一个橙色作为播放按钮和进度条的强调色，再分别放到浅色背景与渐变背景上。曲名、时长等文字另选清楚的文字色，不必把照片里所有颜色都搬进界面。

比较时先看三个位置：曲名是否清楚、播放按钮能否从背景中辨认、进度条的已播放部分是否醒目。若橙色在浅色背景上不够清楚，可以调整颜色的明度或周围背景；若渐变导致局部难读，优先为文字保留稳定的底色区域。

交付前再确认色值、填充透明度和图层透明度：这三项可能共同影响最终结果。不要把半透明颜色截屏后再吸取的结果，当作原始品牌色保存；颜色样式应记录设计中实际使用的值。

颜色选择器的练习可以从一个按钮开始：输入色值、从图片取样、调整透明度，再试一组渐变。把满意的颜色保存下来，并在实际背景中比较效果。打开 Pixso，完成一组播放器配色。

如果还没有配色方向，可以到Pixso 设计资源社区寻找设计系统和配色资源，例如 Material Design 相关资源。先观察颜色分别用于什么位置，再选择适合自己页面的用法。