颜色 转换器

HEX、RGB 与 HSL 详解

HEX 是颜色的 6 位十六进制表示，以 # 前缀。每对字符代表红、绿、蓝通道（00–FF）。它是网页开发和 CSS 中最常用的格式。

RGB（红、绿、蓝）通过混合三个光通道来定义颜色，每个范围从 0 到 255。rgb(255, 0, 0) 是纯红色。RGB 对于理解颜色混合很直观，但对于调整亮度或饱和度不太直观。

HSL（色相、饱和度、亮度）是最友好的格式。色相是色轮上的角度（0°=红色，120°=绿色，240°=蓝色）。饱和度控制鲜艳程度（0%=灰色，100%=全彩）。亮度控制明亮程度（0%=黑色，100%=白色）。HSL 可以通过简单调整亮度来轻松创建颜色变体。

何时使用各种格式

HEX：CSS 样式表、设计工具、品牌指南。最紧凑且使用最广泛的格式。
RGB：JavaScript 颜色操作、画布绘制、需要以编程方式混合通道时。
HSL：创建调色板、调整亮度/饱和度、生成无障碍配色方案。最适合设计工作。

CSS 颜色使用技巧

现代 CSS 支持所有三种格式。当您需要创建悬停状态（只需改变亮度）、深色模式变体或一致的调色板时，使用 hsl()。对于常见颜色（如 #fff 和 #000），使用简写 HEX（#RGB）。

常见问题

如何将 HEX 转换为 RGB？

将 HEX 代码分成 3 对（RR、GG、BB），将每对从十六进制转换为十进制。#FF6B6B = R:255、G:107、B:107。本工具自动完成转换。

RGB 和 HSL 有什么区别？

RGB 混合红、绿、蓝光（0–255）。HSL 使用色相（颜色）、饱和度（鲜艳度）和亮度（明亮度）。HSL 对于创建颜色变体更直观。

如何将颜色转换为 HEX？

将每个 RGB 值（0–255）转换为 2 位十六进制数，然后加上 # 前缀。RGB(255, 107, 107) → #FF6B6B。

什么是 HSL 颜色？

色相（0–360°）、饱和度（0–100%）、亮度（0–100%）。色相选择颜色，饱和度控制鲜艳度，亮度控制明亮程度。

如何查找颜色的 RGB 值？

点击上方的颜色色块打开颜色选择器。选择任何颜色，RGB、HEX 和 HSL 值会立即显示。