速查在线工具箱颜色模型与色彩空间速查
RGB、HEX、HSL、HSV、CMYK 各自怎么描述颜色、什么时候该用哪个，以及对比度 4.5:1 这条无障碍硬线是怎么来的。
同一个颜色可以用很多种方式描述，这不是重复发明轮子，而是因为「描述方式」本身带着使用场景：写代码用 HEX 最省事，调色用 HSL 最直观，做印刷必须用 CMYK，而显示器与专业设备之间还要靠色彩空间来对齐。
还有一条常被忽视的硬线是无障碍对比度：文字与背景的明度差不足，一部分用户在强光下就是看不清。WCAG 用 4.5 : 1 这类具体数字把它量化了，做配色时值得当作约束而不是建议。
1五种表示方式对照
同一颜色在不同模型里的写法完全不同。选哪种，取决于你要解决的是「写进代码」「调色」还是「去印刷」。
| 模型 | 取值范围 | 写法示例 | 适用场景 |
|---|---|---|---|
| RGB | 每通道 0 到 255 | rgb(24, 144, 255) | 屏幕显示、代码里的颜色定义 |
| HEX | 每通道两位十六进制 | #2b7fd4 | CSS、设计稿标注，最紧凑常用 |
| HSL | 色相 0-360、饱和度 0-100%、明度 0-100% | hsl(206, 100%, 55%) | 调色：想「同色系变浅变深」时最方便 |
| HSV / HSB | 色相 0-360、饱和度 0-100%、明度 0-100% | 设计软件中的取色面板 | 设计工具、取色器，比 HSL 更贴近人挑色的直觉 |
| CMYK | 每通道 0 到 100% | C60 M40 Y0 K0 | 印刷输出，是减色模型 |
记忆点：RGB 是加色模型（光叠加，越加越亮，三色全满为白），CMYK 是减色模型（油墨叠加，越加越暗，理论上三色全满为黑）。所以「屏幕上鲜艳的颜色印不出来」是常态，需要专门做印刷校色。
2HEX 的三种写法
HEX 是 RGB 的十六进制表达，三位一组地对应红、绿、蓝。理解这一点，换算就不再需要查表。
| 写法 | 示例 | 说明 |
|---|---|---|
#RRGGBB | #2b7fd4 | 标准六位写法，红、绿、蓝各两位十六进制 |
#RGB | #fff | 三位简写，每位会被复制一次，#fff 等于 #ffffff。仅当每位都重复时可用 |
#RRGGBBAA | #2b7fd480 | 八位写法，最后两位是透明度（Alpha），00 全透明、ff 全不透明 |
| 数值对应 | ff = 255、80 约等于 128 | 十进制与十六进制的换算：两位最大值为 255 |
| 大小写 | #1890FF 与 #2b7fd4 等价 | CSS 中不区分大小写 |
3HSL 与 HSV 差在哪里
很多人把这两个当成同一回事，它们在前两个分量上确实相同，差别只在第三个分量，但这个差别直接决定了「调色时哪个更好用」。
| 对比项 | HSL | HSV / HSB |
|---|---|---|
| 第三个分量的含义 | L 明度：0% 是黑，100% 是白 | V / B 明度：0% 是黑，100% 是最鲜艳 |
| 纯色位置 | L 为 50% | V 为 100% |
| 降低饱和度时 | L 为 50% 时退化为中灰 | V 为 100% 时退化为白 |
| 调整习惯 | 「把颜色调浅」直接加 L，适合做同色系的深浅梯度 | 「把颜色调亮」加 V，更贴近设计软件取色面板的直觉 |
| 共同优势 | 都能只改一个分量就得到同色系的变体，比在 RGB 里手工凑三个数方便得多 |
做深色 / 浅色主题配色时，HSL 特别顺手：保持色相 H 与饱和度 S 不变，只调 L 就能得到一整套同色系。这比在 RGB 里逐通道微调要准确得多。
4色彩空间：为什么颜色会对不上
同一组 RGB 数值在不同设备上显示出的颜色可能不同，因为「数值 → 颜色」的映射需要一个参照标准，这就是色彩空间。
| 色彩空间 | 覆盖范围 | 说明 |
|---|---|---|
| sRGB | 基准（最小） | 网络与绝大多数屏幕的事实标准，图片导出首选 |
| Adobe RGB | 大于 sRGB，尤以绿色与青色更广 | 印刷与摄影流程常用，直接放到网上会显得发灰 |
| Display P3 | 大于 sRGB，红绿更艳 | 苹果设备与部分高端屏幕，适合广色域内容 |
| ProPhoto RGB | 覆盖极广 | 专业后期流程，超出人眼可见范围的部分仅作计算用 |
| 色深 8 位 / 10 位 | 每通道 256 / 1024 级 | 10 位可减少渐变处的色带，HDR 与专业显示场景使用 |
最常见的翻车方式是「在广色域屏幕上调好的图，发到普通屏幕上变得又灰又暗」。稳妥做法是导出时统一转换到 sRGB，除非明确知道目标平台与观看设备都支持广色域。
5对比度：4.5 : 1 这条线
WCAG 用相对亮度算出两个颜色的对比度比值，范围从 1 : 1（同色）到 21 : 1（纯黑对纯白）。这些数字是判定可达性的硬指标。
| 级别 | 普通文字 | 大号文字 | 说明 |
|---|---|---|---|
| AA（最低要求） | ≥ 4.5 : 1 | ≥ 3 : 1 | 大号指 18pt 以上，或 14pt 加粗以上 |
| AAA（更严格） | ≥ 7 : 1 | ≥ 4.5 : 1 | 正文类内容推荐达到的水准 |
| 非文字元素 | ≥ 3 : 1 | ≥ 3 : 1 | 图标、输入框边框、图表关键元素 |
| 禁用状态 | 无强制要求 | 无强制要求 | 但不应低到完全不可辨认 |
计算对比度用的是相对亮度（对每个通道做伽马校正后加权），不是简单的 RGB 平均值。所以「浅黄底配白字」看起来还行，实际比值可能只有 1.5 : 1 左右，远达不到要求。用现成的对比度检查工具算一下最省事。
6配色时值得记住的三条
- 不要只靠颜色传达信息
- 约有相当比例的人群存在色觉差异，只用红绿区分状态会导致部分用户无法辨识。应同时用图标、文字或形状辅助
- 优先保证对比度再谈好看
- 先满足 4.5 : 1 的最低要求，再在同色系里微调出想要的气质。反过来做往往会不断妥协
- 同色系比多色系更耐看
- 用 HSL 固定色相、只调明度与饱和度建立一套梯度，比随意搭配多种色相更容易做得专业，也更容易在深色主题下复用
看完就能用的站内工具
全部工具总览 →在线颜色代码转换工具，支持HEX、RGB、HSL、CMYK等格式互转，支持颜色选择器和140+种CSS颜色名称查询，纯浏览器本地处理
RGB/HSL/HEX三向实时换算，支持滑块拖拽、色块预览、颜色历史记录、一键复制。
在线颜色预览工具，支持HEX、RGB、颜色名输入并实时预览色块，新增WCAG对比度检测（前景/背景色可读性合规）、颜色历史记录与常用色板，设计师与前端开发调色必备
检测前景背景色对比度是否符合WCAG AA/AAA无障碍标准
屏幕取色器 - 点击屏幕任意位置取色，支持HEX/RGB格式复制，基于EyeDropper API纯前端处理
在线 Canvas 交互式 HSL 色轮工具，点击或拖动色轮选色，自动生成互补、相邻、三色、四色、分裂互补、同色系 6 种配色方案，支持 HEX/RGB/HSL/HSV 互转与一键复制。
关于「颜色模型与色彩空间速查」的常见问题
RGB 和 CMYK 有什么本质区别？
RGB 是加色模型，用于屏幕发光显示：红、绿、蓝三种光叠加，全部满值就是白色，所以「越加越亮」。CMYK 是减色模型，用于印刷油墨：青、品红、黄、黑四种油墨叠加，吸收的光越多颜色越暗，理论上三色全满接近黑（实际因油墨纯度不足需要单独加黑色 K）。因此「屏幕上看到的鲜艳颜色印不出来」是常态——RGB 的色域比 CMYK 大，尤其是蓝绿一带，印刷前需要做色彩转换与打样确认。
HSL 和 HSV 该用哪个？
两者前两个分量相同（色相、饱和度），只差第三个分量：HSL 的 L（明度）为 0% 是黑、100% 是白，纯色在 50%；HSV 的 V（明度）为 0% 是黑、100% 是最鲜艳，纯色在 100%。做 CSS 配色、生成同色系深浅梯度时用 HSL 更直观（保持 H、S 不变只调 L）；在设计软件里手动取色时，HSV 的面板通常更符合「先选颜色再调明暗」的直觉。两者可以互相转换，只要知道纯色位置不同即可。
为什么网页配色要关注对比度？
因为文字的可读性直接取决于它与背景的亮度差。WCAG（无障碍指南）用相对亮度算出比值，规定普通文字至少 4.5 : 1、大号文字至少 3 : 1、图标与边框等非文字元素至少 3 : 1。达不到这个标准时，视力不佳的用户、在强光下使用手机的人、以及色觉有差异的用户都可能看不清内容。这不只是合规问题——低对比度配色在真实使用环境下的体验确实明显更差，属于最容易被忽视、修复成本又最低的一类问题。
同一组 RGB 值在不同设备上显示的颜色不一样，为什么？
因为 RGB 数值本身只说明「各通道的强度」，要变成具体颜色还需要一个色彩空间作为参照。sRGB、Adobe RGB、Display P3 等色彩空间覆盖的范围不同，同一个数值在不同空间里对应的实际颜色也不同。广色域屏幕能显示出 sRGB 无法表达的鲜艳颜色，所以一张在广色域屏幕上调好的图，直接放到只支持 sRGB 的普通屏幕上看会显得灰暗。解决办法是导出时统一转换到 sRGB，或明确标注图片的色彩配置。
继续查：相关内容
全部速查 →内容说明：本页速查数据由本站自行整理，事实性内容以对应官方规范与文档为准，未复制第三方速查表或百科的表述。数据最后核对日期：2026-10-05。若发现错误或已更新的标准，欢迎通过页脚反馈入口告知。