MT
My Toolbox

颜色选择器 — HEX、RGB、HSL 颜色转换工具

输入 HEX 代码，看到颜色，立刻得到 RGB 和 HSL。或者随机生成颜色找灵感。一键复制任何格式。给需要快速颜色转换但不想打开 Figma 的开发者和设计师用的。

选择和转换不同格式的颜色

HEX

#3498db

RGB

rgb(52, 152, 219)

HSL

hsl(204, 70%, 53%)

HEX
RGB
HSL

选择和转换不同格式的颜色

HEX

#3498db

RGB

rgb(52, 152, 219)

HSL

hsl(204, 70%, 53%)

颜色格式详解

三种格式，同一种颜色。HEX（#FF5733）是 Web 标准——紧凑，方便粘贴到 CSS。RGB（255, 87, 51）是屏幕实际使用的——三个通道各 0-255，混合红绿蓝光。HSL（14°, 100%, 60%）是人类思考颜色的方式——色相是色轮位置，饱和度是鲜艳程度，亮度是明暗。

为什么 HSL 对开发者重要：需要一个颜色的深色版本？直接降低亮度。需要柔和版本？降低饱和度。用 HEX/RGB 你得对三个通道都做数学运算。CSS 三种都支持：color: #FF5733、color: rgb(255, 87, 51)、color: hsl(14, 100%, 60%)。

Alpha 通道（透明度）加第 4 个值：rgba(255, 87, 51, 0.5) 或 hsla(14, 100%, 60%, 0.5) 表示 50% 不透明度。现代 CSS 还可以写 rgb(255 87 51 / 50%)——新的空格分隔语法。

色域说明：HEX/RGB 限于 sRGB（标准屏幕色彩空间）。现代显示器支持更宽色域（P3、Rec. 2020）。CSS 现在有 color(display-p3 1 0.34 0.2) 用于更宽的颜色，但这超出了本转换器的范围——我们专注于 99% Web 工作使用的 sRGB 格式。

使用方法

  1. 输入或粘贴 HEX 代码（带不带 # 都行）——颜色预览即时更新。
  2. 在预览下方读取 RGB 和 HSL 等价值。
  3. 点击随机按钮生成新颜色找灵感。
  4. 一键复制任何格式——直接粘贴到 CSS、Figma 或代码里。

什么时候会用到

把设计师给的 HEX 颜色转成 RGB 用在代码里

设计师从 Figma 给你 #3B82F6。你需要 rgb() 来在组件里做动态透明度变体。粘贴 HEX，拿到 RGB 值，加上 alpha 通道。

创建颜色变体（更亮/更暗/柔和）

你有品牌色，需要 hover 状态、禁用状态或背景色调。转成 HSL，然后调整亮度（+20 更亮，-20 更暗）或饱和度（-30 柔和）。比猜 HEX 值容易多了。

调试 CSS 颜色问题

屏幕上颜色看起来不对，不确定是不是值错了。从 DevTools 粘贴 HEX 进来，看预览，和预期对比。有时候问题就是 HEX 代码打错了（#FF5733 vs #F55733——很容易漏看）。

原型设计时生成随机颜色

做图表、标签系统或头像占位符？点几次随机按钮找到合适的颜色。比盯着色轮试图选"好看的颜色"强。

技巧和坑点

1.

用 HSL 做程序化颜色操作

需要设计系统里 5 个蓝色深浅？用 HSL 的基础蓝色开始，然后按亮度步进生成变体：90%、70%、50%、30%、10%。用 HEX/RGB 你得手动选每个色阶。Tailwind CSS 内部就是这么做的。

2.

HEX 不区分大小写

#ff5733、#FF5733 和 #Ff5733 是同一个颜色。大多数工具输出大写，但 CSS 两种都接受。除非 linter 要求，不用浪费时间"修正"代码库里的大小写。

3.

检查对比度确保无障碍

WCAG 要求正常文本 4.5:1 对比度，大文本 3:1。再好看的颜色，用户看不清上面的文字也没用。选完颜色后，用对比度检查器验证它和背景的对比度再提交。

4.

3 位 HEX 是简写，不是不同格式

#F00 展开为 #FF0000（每位数字翻倍）。只有每对相同时才能用：#AABBCC → #ABC，但 #A1B2C3 没有简写。代码里用 6 位更清晰；3 位适合快速笔记。

示例

Tailwind Blue 500 的所有格式

Tailwind CSS 默认蓝色——格式间转换。

Input

#3B82F6

Output

RGB: rgb(59, 130, 246) | HSL: hsl(217, 91%, 60%)

用 HSL 调整纯红色

从红色开始，通过降低亮度从 50% 到 30% 来加深。

Input

hsl(0, 100%, 50%) → hsl(0, 100%, 30%)

Output

#FF0000 → #990000（更深的红，色相不变）

功能特点

  • HEX、RGB、HSL 即时互转
  • 大面积颜色预览——看清你选的是什么
  • 随机颜色生成器快速找灵感
  • 每种格式一键复制
  • 支持 3 位和 6 位 HEX，带不带 # 都行
  • 100% 浏览器运行——数据不发送到任何地方

常见问题

HEX、RGB、HSL 有什么区别？

HEX（#RRGGBB）是十六进制表示——紧凑，CSS 默认格式。RGB（r, g, b）指定红/绿/蓝强度 0-255——显示器实际显示的。HSL（色相, 饱和度, 亮度）对应人类感知颜色的方式——色相是什么颜色，饱和度是鲜艳度，亮度是明暗。三种都描述同一个 sRGB 色彩空间，只是不同坐标系。

CSS 里该用哪种格式？

静态颜色：HEX 最常见最紧凑。需要透明度的颜色：rgb(r g b / alpha) 或 hsl(h s l / alpha)。设计系统里程序化生成色阶：HSL，因为调整亮度/饱和度很直观。现代 CSS 还支持 color-mix() 混合颜色。

为什么同一个颜色在不同屏幕上看起来不一样？

屏幕校准、颜色配置文件和色域差异。sRGB 里的 #FF0000 在广色域 P3 显示器和便宜的 TN 面板上看起来不同。Web 工作中用 sRGB（HEX/RGB 表示的）设计，接受在所有设备上精确复现颜色是不可能的（除非硬件校准）。

怎么程序化地让颜色变亮或变暗？

转成 HSL，然后调整 L（亮度）值。亮度 50% 是"纯"色；增加到 100% 变亮（接近白色），减少到 0% 变暗（接近黑色）。保持 H 和 S 不变来维持颜色特征。Tailwind 就是这样生成 50-950 色阶的。

透明度和更浅的颜色有什么区别？

透明度（alpha）让元素变透明——后面的内容透出来。更浅的颜色（HSL 亮度更高）仍然完全不透明但混入了白色。在白色背景上看起来类似，但在彩色或图片背景上差别很大。覆盖层用透明度，背景色用更浅的颜色。

使用技巧与相关工作流