在线取色器使用教程：怎么取屏幕颜色、HEX和RGB颜色码互转

做海报时看到一张图的主色特别好看，想抄过来却说不准具体数值？看到竞品网站的品牌蓝想还原，截图对着 PS 吸管一顿操作还没对上？做 PPT 想匹配公司 LOGO 的颜色，却只会凭感觉乱拖滑块？这些场景的本质都指向同一个需求——快速取色。其实你完全不用打开 PS，用 5iTool 的在线颜色选择器，拖一拖滑块、点一下色板，就能同时拿到 HEX、RGB、HSL 三种格式，复制即用。本文从零讲清取色器怎么用、HEX 和 RGB 到底什么意思，以及新手最容易踩的配色坑。

什么是取色器？三种颜色表示法科普

取色器（Color Picker）就是让你选择或识别颜色的工具。在网页和软件里，颜色通常用一串字符或数字来精确表达，主要有三种格式：

• HEX（十六进制）：形如 #FF5733，最常见于 CSS、HTML、设计软件，前两位代表红（R）、中间两位绿（G）、最后两位蓝（B），每一段从 00 到 FF。例如 #FFFFFF 是纯白，#000000 是纯黑。
• RGB：形如 rgb(255, 87, 51)，把红绿蓝三种光的强度用 0–255 的数字表示，三色相加得到最终颜色，适合屏幕显示。
• HSL：形如 hsl(11, 100%, 60%)，分别是色相（Hue，0–360 度的色环角度）、饱和度（Saturation）、明度（Lightness），更符合人脑对颜色的直觉，调色时更容易预判效果。

💡 小知识：同一颜色在三种格式里数值不同，但表达的色彩完全一样，工具会自动帮你换算。CSS 里三种写法都能用，挑你顺手的即可。

在线取色器怎么用？3 步拿到颜色码

下面以 5iTool 颜色选择器为例，整个过程在浏览器里完成，无需下载软件，不收集任何数据。

第 1 步：打开颜色选择器并选色
访问 5iTool 颜色选择器页面，在色板里拖动光标即可选定大致颜色，再用右侧的 Hue（色相）滑块和明度饱和度方块微调，画面会实时显示当前选中的颜色。

第 2 步：读取 HEX / RGB / HSL 数值
选好色后，下方会同步显示三种格式的颜色码，例如 HEX 是 #FF5733、RGB 是 rgb(255,87,51)。点一下对应文本框即可一键复制，无需手动选中拖拽。

第 3 步：粘贴到目标位置使用
把复制的颜色码粘到 CSS 里写 color: #FF5733;、PPT 自定义颜色里、Figma 填色框里，或者保存到你的配色文档，下次直接调用。

3 个实用配色技巧，新手也能搭出高级感

光会取色还不够，配色好不好看才是关键。掌握下面三个原则，能避免 90% 的\"花里胡哨\"：

• 主色 + 辅色 + 点缀色，比例 6:3:1：一个画面里主色占 60%（背景或大面积），辅色占 30%（次级元素），点缀色占 10%（按钮、强调）。这种黄金比例几乎不会出错。
• 用 HSL 调色比 RGB 更顺手：先在 HSL 里固定色相（H）找氛围，再统一调饱和度（S）和明度（L），出来的颜色会自带\"家族感\"，特别适合做品牌色系。
• 注意对比度和可读性：文字色和背景色的明度差至少要拉到 50% 以上，深色背景用浅色文字，浅色背景用深色文字，否则手机上根本看不清。

常见问题 FAQ

怎么从一张图片里取某一个像素的颜色？

把图片用看图软件打开后截图，再粘贴到支持图片取色的工具里用吸管点一下目标位置即可。也可以把图片放到 PS、Figma 这类设计软件里直接用吸管工具点击像素，自动得到 HEX 和 RGB 值。

HEX 颜色码和 RGB 怎么互相换算？

HEX 是十六进制，RGB 是十进制。比如 #FF5733，把 FF 换成十进制就是 255（R），57 换成十进制是 87（G），33 换成十进制是 51（B），所以对应 rgb(255, 87, 51)。嫌麻烦直接用 5iTool 颜色选择器，输入一边自动出另一边，省得手算。

颜色选择器是免费的吗？需要安装吗？

5iTool 颜色选择器完全免费、无需注册、不用安装，打开网页就能用，所有计算都在浏览器本地完成，颜色数据不会上传服务器。

设计常用的经典配色方案有哪些？

新手可以直接套用：莫兰迪灰调（低饱和度）、对比色（蓝橙、红绿）、邻近色（同色环 30 度内）。如果不知道从哪开始，可以到主流设计网站抓几个喜欢的配色，用取色器把 HEX 复制下来存成自己的色板。

取色这件事看似简单，却是设计、前端、运营都绕不开的高频动作。记住两件事：选好色后三种格式一起拿，配色遵循 6:3:1 黄金比例，新手也能做出专业级的视觉效果。下次再看到好看的颜色，别再凭感觉乱调了，打开 5iTool 颜色选择器几秒搞定。