颜色转换器

在 HEX、RGB 和 HSL 色彩代码之间转换,并整理为便于复制和分享的代码片段。

颜色转换器
所选颜色 #0EA5E9
分享 URL https://comutil.com/zh-hans/color?preset=brand-token
清除
色板预览
推荐文本颜色
#111827
已将 品牌令牌交接 规范化为便于复制的 HEX、RGB、HSL 和令牌片段。
预设可分享 #0EA5E9

已将 品牌令牌交接 规范化为便于复制的 HEX、RGB、HSL 和令牌片段。

当前输入 #0EA5E9
推荐文本颜色 #111827
规范化输出
HEX
适合用于 CSS、浏览器工具和设计文档的紧凑格式。
#0EA5E9
RGB
适合设计交接、Canvas 工作和图像工具的精确通道值。
rgb(14, 165, 233)
HSL
当你需要分别调整色相、饱和度或明度时更方便。
hsl(199, 89%, 48%)
R、G、B 通道
适合写入工单、规格和令牌的纯数字通道值。
14, 165, 233
可读性上下文

在此色块上使用 深色文本 可获得最强的小字号文本对比度。

白色文本
#FFFFFF
2.77:1
预览文本
Aa 正文示例
正常文本: 需要更高对比度
大号文本: 需要更高对比度
深色文本
#111827
6.40:1
预览文本
Aa 正文示例
正常文本: 通过
大号文本: 通过
交接代码片段
CSS 变量
:root {
  --brand-accent: #0EA5E9;
  --brand-accent-rgb: 14 165 233;
}
设计令牌 JSON
{
  "color": {
    "accent": {
      "value": "#0EA5E9",
      "rgb": "14 165 233",
      "hsl": "hsl(199, 89%, 48%)"
    }
  }
}
内联样式
background-color: #0EA5E9;
color: #111827;
什么是颜色格式?

Web 上的颜色可以用多种格式表示。HEX 使用十六进制表示法 (#RRGGBB),RGB 指定红、绿、蓝分量 (0-255),而 HSL 使用色相 (0-360)、饱和度和亮度 (0-100%)。每种格式在不同的用例中都有其优势,例如设计工作或程序化颜色处理。

颜色格式详情

HEX 颜色以十六进制对 RGB 值进行编码(每个通道 16-255)。RGB 直接指定颜色强度 (0-255)。HSL 将颜色(色相)与强度(饱和度/亮度)分离,使得创建颜色变体更加直观。所有格式都可以表示相同的 1670 万种颜色。

常见使用场景
  • 将设计工具颜色转换为 CSS
  • 创建颜色主题和调色板
  • 调整颜色亮度和饱和度
  • 跨平台匹配品牌颜色
  • 颜色对比度的无障碍测试
格式比较
HEX #RRGGBB - 紧凑、支持广泛、易于复制/粘贴
RGB rgb(R, G, B) - 易于程序化操作
HSL hsl(H, S%, L%) - 通过调整分量易于创建变体
常见问题

什么时候应该使用 HSL 而不是 RGB?

当您需要创建颜色变体(更亮、更暗、更高/更低饱和度)时,HSL 更好,因为您可以调整单个分量。RGB 更适合混色以及图像处理工作。

什么是 HEX 简写?

HEX 简写使用 3 位数字而不是 6 位(用 #RGB 代替 #RRGGBB)。每一位数字都会重复一次:#F00 变成 #FF0000(红色)。仅当每对数字相同时才有效。