Hex、RGB、HSL：给普通人的快速指南

设计师给你发了个颜色：#3B82F6。你需要把它转成RGB给某个库用。或者你想要稍微深一点的版本。或者你想搞清楚为什么它在你的显示器上看起来不一样。

颜色系统并不复杂，但没人好好解释它们。这里是你真正需要知道的。

HEX：网页标准

#3B82F6这样分解：

• 3B = 红色（十进制59）
• 82 = 绿色（十进制130）
• F6 = 蓝色（十进制246）

每对是从00到FF的十六进制数（十进制0-255）。越多=越亮。#000000是黑色。#FFFFFF是白色。

有简写：#FFF = #FFFFFF，#09C = #0099CC。三个字符通过加倍每个字符扩展到六个。

RGB：显而易见的那个

rgb(59, 130, 246)是同一种颜色，只是写法不同。红59，绿130，蓝246。

有些格式需要百分比：rgb(23%, 51%, 96%)。同样的东西，不同的记法。

RGBA添加透明度：rgba(59, 130, 246, 0.5)是50%不透明度的那个蓝色。

HSL：真正有用的那个

hsl(217, 91%, 60%)用不同方式描述颜色：

• 色相（217）： 色轮上的位置。0=红色，120=绿色，240=蓝色。
• 饱和度（91%）： 强度。0%=灰色，100%=鲜艳。
• 亮度（60%）： 明度。0%=黑色，50%=纯色，100%=白色。

HSL为什么重要：调整颜色很直观。

想要更深的版本？降低亮度。 想要柔和的版本？降低饱和度。 想要完全不同但"感觉"相同的颜色？改变色相，保持饱和度和亮度。

在HEX或RGB中，这些调整需要数学或猜测。在HSL中，它们是单个数字的改变。

它们之间的转换

数字以不同方式表示相同的颜色。#3B82F6 = rgb(59, 130, 246) = hsl(217, 91%, 60%)。

当你需要特定格式时使用转换器。大多数设计工具显示所有三种。CSS接受所有三种。

常见情况

"让这个颜色更深" 转换为HSL，降低10-20%的亮度，转换回去。

"我需要悬停状态的变体" 转换为HSL。按钮：60%亮度。悬停：55%。激活：50%。

"这个颜色看起来褪色了" 饱和度可能太低。试试在HSL中增加它。

"精确匹配品牌颜色" 从品牌指南中获取hex代码。别凭眼力。

"颜色在不同屏幕上看起来不一样" 欢迎来到色彩校准地狱。使用相同的hex代码；接受显示器会有差异。

可访问性提示

颜色对比度很重要。浅色背景上的浅色文本=很多人看不清。

有个比例：正常文本4.5:1，大文本3:1。有工具可以检查这个。拿不准时，对比度越高越好。

白色文本在那个#3B82F6蓝色上？对比度约4.6:1——刚刚及格。更深的蓝色对正文文本更安全。

---

你不需要成为设计师。你只需要知道如何在格式之间转换，并且知道HSL让调整更容易。其他都是细节。