颜色选择器

关于 颜色选择器 工具

颜色选择器帮助你选取颜色并实时转换为 HEX、RGB、HSL 三种常见色值格式，同时提供 RGB 三通道滑块独立调节、互补色和相近色推荐功能。无论是前端开发写 CSS、UI 设计配色、PPT 制作调色还是绘画取色参考，本工具都能快速准确地为你提供所需的色值和配色方案。

什么是 HEX / RGB / HSL？

HEX、RGB、HSL 是三种最常用的颜色表示方式，本质都是描述同一个颜色，只是表示方法不同。

• HEX（十六进制）：形如 #FF5733，由 # 开头加6位16进制数字组成，每2位表示一个通道（红/绿/蓝）。常用于 CSS、HTML 中。
• RGB（红绿蓝）：形如 rgb(255, 87, 51)，三个十进制数字（0-255）分别表示红、绿、蓝三个通道的强度。常用于 CSS、设计软件。
• HSL（色相饱和度亮度）：形如 hsl(11, 100%, 60%)，色相（0-360度）、饱和度（0-100%）、亮度（0-100%）。更符合人眼对颜色的直觉感知，便于配色调整。

HEX、RGB、HSL 三者区别

什么时候需要颜色选择器

以下场景适合使用颜色选择器：

• 前端开发：编写 CSS 时需要查找具体颜色的 HEX、RGB 值。
• UI 设计：配色方案设计、调色板制作。
• PPT 制作：主题色取色、图表配色。
• 网页设计：主色调、辅助色、强调色搭配。
• 绘画取色：数字绘画、插画取色参考。
• 品牌设计：VI 主色、辅助色搭配。
• 配色学习：理解互补色、相近色等配色原理。
• 色彩转换：HEX、RGB、HSL 之间互转。

如何使用颜色选择器

使用本工具选取颜色只需几步：

1. 点击主选择器选取目标颜色，或拖动 RGB 滑块分别调节红、绿、蓝三通道。
2. 查看右侧 HEX、RGB、HSL 三种格式的色值。
3. 点击色值右侧的「复制」按钮，将色值复制到剪贴板。
4. 查看互补色和相近色推荐，点击任一色块即可切换到该颜色。

整个过程在浏览器本地完成，颜色数据不上传，隐私安全。

什么是互补色和相近色

• 互补色（对比色）：色相环上相对的两种颜色（相差180度），如红与绿、蓝与橙。搭配使用可形成强烈视觉对比，常用于强调和吸引注意。
• 相近色（邻近色）：色相环上相邻的几种颜色（相差30-60度），如红、橙、黄。搭配使用和谐统一，常用于营造氛围和层次。

工具特点

• 三格式互转：HEX、RGB、HSL 三种格式实时同步显示。
• RGB滑块：红绿蓝三通道滑块独立调节，精细取色。
• 互补色推荐：自动计算并显示互补色，便于配色。
• 相近色推荐：自动生成相近色色板，激发配色灵感。
• 一键复制：点击复制按钮即可复制任意格式色值。
• 完全本地处理：所有计算在浏览器本地完成，不上传不记录。
• 免费无限制：不限使用次数，无需注册。

常见问题

• HEX 和 RGB 有什么区别？本质相同，HEX 用16进制表示，RGB 用十进制表示，详见上方对比表。
• HSL 是什么？色相/饱和度/亮度的缩写，更符合人眼直觉。
• 什么是互补色？色相环上相对的两种颜色，搭配形成对比。
• 颜色数据会上传吗？不会，100%本地计算，安全无忧。
• 支持透明度（Alpha）吗？当前版本输出不含Alpha通道，如需可手动添加 rgba 的 a 值。
• 需要安装软件吗？不需要，打开网页即可使用。