在 HEX、RGB 和 HSL 色彩代码之间转换,并整理为便于复制和分享的代码片段。
已将 UI 强调色检查 规范化为便于复制的 HEX、RGB、HSL 和令牌片段。
在此色块上使用 白色文本 可获得最强的小字号文本对比度。
:root {
--brand-accent: #7C3AED;
--brand-accent-rgb: 124 58 237;
}
{
"color": {
"accent": {
"value": "#7C3AED",
"rgb": "124 58 237",
"hsl": "hsl(262, 83%, 58%)"
}
}
}
background-color: #7C3AED; color: #FFFFFF;
Web 上的颜色可以用多种格式表示。HEX 使用十六进制表示法 (#RRGGBB),RGB 指定红、绿、蓝分量 (0-255),而 HSL 使用色相 (0-360)、饱和度和亮度 (0-100%)。每种格式在不同的用例中都有其优势,例如设计工作或程序化颜色处理。
HEX 颜色以十六进制对 RGB 值进行编码(每个通道 16-255)。RGB 直接指定颜色强度 (0-255)。HSL 将颜色(色相)与强度(饱和度/亮度)分离,使得创建颜色变体更加直观。所有格式都可以表示相同的 1670 万种颜色。
当您需要创建颜色变体(更亮、更暗、更高/更低饱和度)时,HSL 更好,因为您可以调整单个分量。RGB 更适合混色以及图像处理工作。
HEX 简写使用 3 位数字而不是 6 位(用 #RGB 代替 #RRGGBB)。每一位数字都会重复一次:#F00 变成 #FF0000(红色)。仅当每对数字相同时才有效。