什么是颜色转换？

颜色转换是在不同颜色表示格式之间进行互相转换的过程。在前端开发和 UI 设计中，颜色通常有三种常见表示方式：Hex（十六进制，如 #3b82f6）、RGB（红绿蓝，如 rgb(59, 130, 246)）和 HSL（色相饱和度亮度，如 hsl(217, 91%, 60%)）。

Hex 格式是 CSS 中最常用的颜色表示，简洁直观，6 位或 3 位十六进制数字分别代表红、绿、蓝三个通道的值。RGB 格式将颜色分解为红、绿、蓝三个通道的数值（0–255），便于编程操作和计算。HSL 格式更贴近人类对颜色的感知，色相（Hue）表示颜色种类，饱和度（Saturation）表示鲜艳程度，亮度（Lightness）表示明暗程度。

在实际开发中，经常需要在这三种格式之间互相转换：从设计稿获取 Hex 值后转为 RGB 用于 Canvas 绘制，从 HSL 值转为 Hex 用于 CSS 编写，或通过取色器获取颜色后需要多种格式输出。

为什么需要颜色转换工具？

颜色格式转换在前端开发中是日常需求：

CSS 样式编写：设计稿标注 Hex 颜色，代码中需要 RGB 或 HSL 格式
主题系统开发：使用 HSL 格式便于通过调整色相和亮度生成主题色变体
Canvas 绘图：Canvas API 使用 RGB 格式，需要从 Hex 转换
颜色对比度计算：需要 RGB 值计算前景色与背景色的对比度
设计协作：不同工具和平台使用不同的颜色格式，经常需要互相转换

使用 IqsBot 颜色转换工具，你可以输入任意格式的颜色值，实时查看所有格式的转换结果并预览颜色效果。

相比其他在线颜色工具，IqsBot 的核心优势是纯浏览器端运行——无需安装插件，打开即用，所有计算完全在本地完成。

如何使用 IqsBot 颜色转换工具

基础用法

选择输入格式（HEX / RGB / HSL）
在输入框中输入颜色值
自动实时显示所有格式的转换结果
点击「复制」可复制任意格式的结果

高级功能

实时预览：输入颜色后即时预览色块效果
取色器：使用浏览器原生取色器直接选色
多格式输出：同时显示 HEX、RGB、HSL 三种格式
格式切换：点击格式按钮可快速切换输入格式
支持透明度：支持 #RRGGBBAA 和 rgba/hsla 格式

使用示例

示例1：Hex 转 RGB/HSL

输入格式：HEX

输入值：#3b82f6

转换结果：

HEX：#3b82f6
RGB：rgb(59, 130, 246)
HSL：hsl(217, 91%, 60%)

示例2：HSL 转 Hex

输入格式：HSL

输入值：hsl(0, 100%, 50%)

转换结果：

HEX：#ff0000
RGB：rgb(255, 0, 0)

常见问题

Q: 支持哪些颜色格式输入？

A: 支持 #RGB / #RRGGBB / #RRGGBBAA（Hex）、rgb/rgba（RGB）、hsl/hsla（HSL）格式输入。输入后自动解析并转换为其他格式。

Q: 为什么 HSL 格式更适合做主题色？

A: HSL 中色相（H）代表颜色种类，饱和度（S）代表鲜艳程度，亮度（L）代表明暗。通过固定 H 值调整 S 和 L，可以轻松生成同一色系的深浅变体，非常适合设计主题色板。

Q: 取色器怎么用？

A: 点击取色器色块，会弹出系统颜色选择器，你可以从中选择任意颜色，选择后自动填入并转换为所有格式。

Q: 3 位 Hex 和 6 位 Hex 有什么区别？

A: 3 位 Hex（如 #f60）是 6 位 Hex（如 #ff6600）的缩写形式，每个字符重复一次即可展开。两者表示的颜色完全相同，3 位只是简写。本工具同时支持两种写法。

Q: 我的数据会上传到服务器吗？

A: 绝对不会。IqsBot 的所有工具都运行在浏览器本地，颜色转换是纯数学计算，完全不需要联网即可完成。