TL;DR
颜色转换器能让你在 HEX、RGB、HSL、HSV 和 CMYK 之间即时转换颜色值。HEX 是 CSS 中 RGB 的紧凑表示。HSL 将色相与亮度分离，是设计系统的最佳模型。CMYK 是减色模型，专用于印刷。WCAG 2.1 要求正常文本的最低对比度为 4.5:1。现代 CSS 支持 oklch()、color-mix() 和 Display P3 宽色域颜色。
关键要点
- HEX、RGB 和 HSL 都描述相同的 sRGB 色彩空间，相互转换无损。
- HSL 是最直观的模型：调节亮度来获取深浅变体，调节饱和度控制鲜艳程度，调节色相来改变颜色类型。
- CMYK 是减色模型（油墨）。RGB 转 CMYK 因色域差异而有损。
- WCAG 2.1 AA 级要求正常文本最低 4.5:1 对比度，大文本 3:1。
- CSS Color Level 4 引入 oklch()、lab() 和 color(display-p3)，用于感知均匀的宽色域颜色。
- JavaScript 和 Python 都有简单的颜色转换公式，无需任何依赖库。
试用我们的免费在线颜色转换工具 — 即时转换 HEX、RGB、HSL、HSV 和 CMYK。
使用工具为什么颜色转换对开发者和设计师很重要
每个现代工作流都涉及多种颜色格式。设计师从 Figma 导出 HEX 代码。CSS 开发者需要 HSL 来构建动态主题系统。印刷厂要求 CMYK 值。无障碍审计员根据 WCAG 对比度标准检查 RGB 亮度值。理解这些格式的关系以及如何准确转换是基础知识。
本指南深度涵盖所有主要颜色模型，解释每种转换背后的数学公式，提供 JavaScript 和 Python 代码示例，并探讨现代 CSS 颜色函数（包括 oklch()）。无论你是在构建设计系统、做无障碍审计还是只需要快速查询颜色，这都是你的完整参考指南。
颜色模型：HEX、RGB、HSL、HSV 和 CMYK
HEX 颜色代码
HEX 颜色代码是 CSS 和网页设计中最常见的格式。十六进制代码是以 # 开头的 6 位字符串，每对字符代表一个颜色通道（红、绿、蓝），值从 00 到 FF（十六进制）。
例如，#3B82F6 解码为：R = 0x3B = 59，G = 0x82 = 130，B = 0xF6 = 246。CSS 还支持 3 位简写，如 #F00 展开为 #FF0000，以及包含透明通道的 8 位 HEX：#3B82F680 表示 50% 透明度。
何时使用 HEX：编写 CSS 样式表、使用 Figma 或 Sketch 等设计工具，或在设计规范中传达颜色时。HEX 简洁且被普遍理解。
RGB（红、绿、蓝）
RGB 是屏幕的原生颜色模型。它使用 0 到 255 的三个十进制值来定义红、绿、蓝光通道的颜色。它是一种加色模型：R=255、G=255、B=255 的组合产生白色（所有光通道最大），而 R=0、G=0、B=0 是黑色（不发光）。
在 CSS 中可以写 rgb(59, 130, 246) 或使用现代空格分隔语法 rgb(59 130 246)。对于透明度，使用 rgba(59, 130, 246, 0.5) 或现代的 rgb(59 130 246 / 0.5)。RGB 是 Canvas API 操作、WebGL 和图像处理的基本格式。
何时使用 RGB：进行程序化颜色操作、使用 Canvas API 或 WebGL，或需要精确的通道级控制时。
HSL（色相、饱和度、亮度）
HSL 使用三个人类直观的维度来表示颜色，而不是原始光强度。色相是色轮上从 0 到 360 度的度数（0=红，60=黄，120=绿，180=青，240=蓝，300=品红）。饱和度从 0%（完全灰色）到 100%（完全鲜艳）。亮度从 0%（黑色）到 50%（纯色）再到 100%（白色）。
HSL 使 RGB 中困难的颜色操作变得自然。要创建更亮的色调：增加亮度。要柔化颜色：降低饱和度。要从蓝色转为紫色：增加色相值。这就是设计系统和主题库默认使用 HSL 的原因。在 CSS 中：hsl(217, 91%, 60%)。
何时使用 HSL：构建带色阶的设计系统、创建暗色模式主题，或程序化生成和谐调色板时。
HSV/HSB（色相、饱和度、明度）
HSV（也称 HSB——色相、饱和度、亮度）与 HSL 共享相同的色相轮，但使用明度（Brightness）代替亮度（Lightness）。在 HSV 中：明度=100% 表示颜色处于最亮状态，明度=0% 始终是黑色。
关键区别：在 HSL 中，亮度=50% 无论饱和度如何都能给出纯色。在 HSV 中，明度=100% 且饱和度=100% 时才是纯色。HSV 直接对应 Photoshop、Figma 和大多数原生 OS 颜色对话框中的方形颜色选择器。CSS 不原生支持 HSV，但理解它可以避免从设计工具转换值时产生混淆。
CMYK（青、品红、黄、黑）
CMYK 是印刷中使用的减色模型。与 RGB 添加光不同，CMYK 通过白纸上的油墨层减去光。青色吸收红光，品红色吸收绿光，黄色吸收蓝光，而黑色（Key）增加深度和清晰度。每个通道从 0%（无墨水）到 100%（全覆盖）。
关键限制：CMYK 色域明显小于 sRGB。许多鲜艳的屏幕颜色——特别是明亮的绿色和蓝色——无法用 CMYK 油墨再现。因此，从 RGB 转换到 CMYK 是有损的。专业印刷工作流使用 ICC 颜色配置文件来准确管理这种色域不匹配。
何时使用 CMYK：准备胶印文件、生成用于打印的 PDF，或使用 InDesign 或 Illustrator 等平面设计工具时。
何时以及为何需要转换颜色
不同的工具、环境和工作流各有首选的颜色格式。以下是实用映射：
| 场景 | 首选格式 | 工具/环境 |
|---|---|---|
| CSS 样式表按惯例使用 HEX 或 HSL | HEX / HSL | CSS, HTML |
| Figma 和 Sketch 导出 HEX；颜色选择器显示 HSV | HEX (export), HSV (picker) | Figma, Sketch |
| JavaScript Canvas API 使用 RGB（整数或浮点） | RGB (0-255) | Canvas API, WebGL |
| WCAG 对比度计算需要 RGB 亮度值 | RGB (normalized 0-1) | WCAG tools |
| 胶印和 PDF 需要 CMYK 值 | CMYK | InDesign, PDF |
| 设计令牌通常以 HSL 存储颜色，便于操作 | HSL | Design tokens |
| Three.js 和 WebGL 着色器使用浮点 RGB（0.0-1.0） | RGB (0.0 - 1.0) | Three.js, GLSL |
| CSS 动画在 oklch() 中的插值比 rgb() 更流畅 | oklch() | CSS animations |
颜色转换公式
HEX 转 RGB
HEX 转 RGB 很简单：将每对 2 位十六进制字符解析为 16 进制整数。
// HEX to RGB
function hexToRgb(hex) {
// Remove # prefix and expand shorthand (#FFF -> #FFFFFF)
hex = hex.replace(/^#/, '');
if (hex.length === 3) {
hex = hex.split('').map(c => c + c).join('');
}
const num = parseInt(hex, 16);
return {
r: (num >> 16) & 255,
g: (num >> 8) & 255,
b: num & 255,
};
}
console.log(hexToRgb('#3B82F6'));
// { r: 59, g: 130, b: 246 }RGB 转 HEX
RGB 转 HEX：将每个十进制通道转换为 2 位十六进制字符串，必要时补零。
// RGB to HEX
function rgbToHex(r, g, b) {
return '#' + [r, g, b]
.map(v => Math.round(v).toString(16).padStart(2, '0'))
.join('');
}
console.log(rgbToHex(59, 130, 246));
// '#3b82f6'RGB 转 HSL
RGB 转 HSL 需要先归一化到 0-1 范围，找到最大/最小通道，然后计算每个 HSL 分量：
// RGB to HSL
function rgbToHsl(r, g, b) {
r /= 255; g /= 255; b /= 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const delta = max - min;
let h = 0, s = 0;
const l = (max + min) / 2;
if (delta !== 0) {
s = delta / (1 - Math.abs(2 * l - 1));
if (max === r) h = ((g - b) / delta + 6) % 6;
else if (max === g) h = (b - r) / delta + 2;
else h = (r - g) / delta + 4;
h = Math.round(h * 60);
}
return {
h: h < 0 ? h + 360 : h,
s: Math.round(s * 100),
l: Math.round(l * 100),
};
}
console.log(rgbToHsl(59, 130, 246));
// { h: 217, s: 91, l: 60 }HSL 转 RGB
HSL 转 RGB 使用辅助函数将色相扇区映射回通道强度：
// HSL to RGB
function hslToRgb(h, s, l) {
s /= 100; l /= 100;
const c = (1 - Math.abs(2 * l - 1)) * s;
const x = c * (1 - Math.abs((h / 60) % 2 - 1));
const m = l - c / 2;
let r = 0, g = 0, b = 0;
if (h < 60) { r = c; g = x; b = 0; }
else if (h < 120) { r = x; g = c; b = 0; }
else if (h < 180) { r = 0; g = c; b = x; }
else if (h < 240) { r = 0; g = x; b = c; }
else if (h < 300) { r = x; g = 0; b = c; }
else { r = c; g = 0; b = x; }
return {
r: Math.round((r + m) * 255),
g: Math.round((g + m) * 255),
b: Math.round((b + m) * 255),
};
}
console.log(hslToRgb(217, 91, 60));
// { r: 59, g: 130, b: 246 }RGB 转 CMYK
RGB 转 CMYK：归一化到 0-1，计算黑色（Key）通道，然后推导青色、品红、黄色：
// RGB to CMYK
function rgbToCmyk(r, g, b) {
r /= 255; g /= 255; b /= 255;
const k = 1 - Math.max(r, g, b);
if (k === 1) return { c: 0, m: 0, y: 0, k: 100 };
return {
c: Math.round(((1 - r - k) / (1 - k)) * 100),
m: Math.round(((1 - g - k) / (1 - k)) * 100),
y: Math.round(((1 - b - k) / (1 - k)) * 100),
k: Math.round(k * 100),
};
}
console.log(rgbToCmyk(59, 130, 246));
// { c: 76, m: 47, y: 0, k: 4 }HSL 颜色理论：直观的颜色选择
HSL 是开发者最有用的颜色模型，因为它将颜色类型（色相）与鲜艳程度（饱和度）和明暗程度（亮度）分离。这种分离支持强大的颜色操作。
创建色阶：从你的品牌颜色开始，HSL(H, S, 50%)。通过增加亮度创建更浅的色调（60%、70%、80%、90%），通过降低亮度创建更深的色调（40%、30%、20%、10%）。这从相同色相生成了一个一致的 10 级色阶。
暗色模式颜色转换：在浅色模式中，表面可能是 hsl(220, 14%, 96%)。在暗色模式中，将亮度反转为 hsl(220, 14%, 14%)。这在显著改变明暗感的同时保持了颜色特征。
柔和与鲜艳变体：相同色相，不同饱和度。hsl(217, 91%, 60%) 的品牌蓝在 hsl(217, 30%, 60%) 时产生柔和变体，在 hsl(217, 100%, 55%) 时产生鲜艳强调色。
互补色：将色相加 180 度得到互补色。如果你的品牌是 hsl(217, 91%, 60%)（蓝色），互补色为 hsl(37, 91%, 60%)（橙色）。类似色相差 30-60 度。
CMYK 印刷：与屏幕颜色的区别
屏幕和印刷颜色的根本区别在于光模型。屏幕发射光（加色），纸张反射光（减色）。屏幕上，所有颜色最大值混合得到白色。油墨混合所有颜色得到深褐色——这就是为什么 CMYK 添加了单独的黑色（Key）通道用于真正的黑色。
色域问题：标准 sRGB 可以表示许多 CMYK 油墨物理上无法再现的颜色。鲜艳的霓虹绿（rgb(0, 255, 0)）、明亮的青色和电蓝色都超出了 CMYK 色域。将这些超色域颜色转换为 CMYK 时，它们会被裁剪到最近的可再现颜色。
ICC 配置文件：专业印刷工作流使用 ICC 颜色配置文件（如欧洲胶印的 FOGRA39 或美国出版物的 SWOP）来准确建模特定印刷过程的色域。基于公式的 RGB 到 CMYK 转换忽略配置文件，只产生近似结果。
实用建议：如果你为专业印刷准备文件，请始终在支持 ICC 配置文件的软件（Photoshop、Illustrator、InDesign）中使用印刷提供商推荐的配置文件。
颜色无障碍：对比度和 WCAG
颜色无障碍确保文本和 UI 元素对所有用户可见，包括大约 8% 的男性和 0.5% 的女性存在某种形式的色觉障碍。WCAG 定义了前景文本与背景颜色之间的最低对比度比率。
WCAG 2.1 对比度要求：
- AA 级（最低标准）：正常文本（18pt 或 24px 粗体以下）4.5:1，大文本（18pt 粗体或 24px 常规）3:1，UI 组件和图形对象 3:1。
- AAA 级（增强标准）：正常文本 7:1，大文本 4.5:1。
对比度公式：ratio = (L1 + 0.05) / (L2 + 0.05)，L1 是较亮颜色的相对亮度，L2 是较暗颜色的。相对亮度将 sRGB 值线性化：小于 0.04045 的值除以 12.92；其他使用 ((c + 0.055) / 1.055) ^ 2.4。然后：L = 0.2126 * R + 0.7152 * G + 0.0722 * B。
// WCAG Contrast Ratio Calculator
function getLuminance(r, g, b) {
const [rs, gs, bs] = [r, g, b].map(c => {
c /= 255;
return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
});
return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}
function contrastRatio(r1, g1, b1, r2, g2, b2) {
const l1 = getLuminance(r1, g1, b1);
const l2 = getLuminance(r2, g2, b2);
const lighter = Math.max(l1, l2);
const darker = Math.min(l1, l2);
return ((lighter + 0.05) / (darker + 0.05)).toFixed(2);
}
// White text (#FFFFFF) on Tailwind blue-500 (#3B82F6)
console.log(contrastRatio(255, 255, 255, 59, 130, 246));
// '3.14' (fails AA for normal text — use blue-700 instead)
console.log(contrastRatio(255, 255, 255, 29, 78, 216));
// '5.95' (passes AA for normal text)无障碍颜色设计实用技巧：
- 永远不要仅用颜色传达信息。同时配合图标、标签或图案。
- 在发布前用色盲模拟器（红绿色盲、蓝黄色盲）测试。
- 使用 HSL 构建无障碍调色板：保持饱和度一致，调节亮度来实现对比度。
- 在强制颜色模式（Windows 高对比度）下测试调色板。
prefers-contrast: more媒体查询允许你为需要高对比度的用户提供高对比度变体。
CSS 颜色函数：rgb()、hsl()、oklch()
现代 CSS 支持的不仅仅是基本的 <code>#hex</code> 值。以下是当代 CSS 支持的完整颜色格式参考：
- 经典格式：
rgb(255, 87, 51)、rgba(255, 87, 51, 0.5)、hsl(14, 100%, 60%)、hsla(14, 100%, 60%, 0.5)、#FF5733。 - 现代空格分隔语法（CSS Color Level 4）：
rgb(255 87 51)、rgb(255 87 51 / 0.5)、hsl(14 100% 60%)、hsl(14 100% 60% / 0.5)。 - oklch()：感知均匀的颜色空间。
oklch(0.7 0.15 250)接受亮度（0-1）、色度（0-0.4）和色相（0-360）。OKLCH 确保具有相同亮度值的两种颜色对人眼看起来真正一样亮——不像 HSL 中 hsl(60, 100%, 50%) 的黄色看起来比 hsl(240, 100%, 50%) 的蓝色亮得多。 - lab() 和 lch()：CIE Lab 将亮度与颜色信息分离。
lab(60 -20 50)。LCH 是其柱形形式：lch(60 40 120)。 - color(display-p3)：访问 Display P3 宽色域，用于现代 Apple 显示器和 HDR 屏幕：
color(display-p3 1 0.5 0)。P3 可以表示超出 sRGB 色域的颜色。 - color-mix()：在任何颜色空间中混合两种颜色：
color-mix(in oklch, #3b82f6 60%, #ef4444)。
始终为现代颜色空间提供 sRGB 降级方案：
/* Always provide sRGB fallback for oklch() */
.button-primary {
/* Fallback for older browsers */
background-color: #3b82f6;
/* Modern: perceptually uniform, wide-gamut capable */
background-color: oklch(0.6 0.2 250);
}
/* color-mix() blending */
.card-hover {
background-color: color-mix(in oklch, #3b82f6 80%, #ef4444 20%);
}
/* HSL shade scale example */
:root {
--blue-50: hsl(214, 100%, 97%);
--blue-100: hsl(214, 95%, 93%);
--blue-200: hsl(213, 97%, 87%);
--blue-300: hsl(212, 96%, 78%);
--blue-400: hsl(213, 94%, 68%);
--blue-500: hsl(217, 91%, 60%);
--blue-600: hsl(221, 83%, 53%);
--blue-700: hsl(224, 76%, 48%);
--blue-800: hsl(226, 71%, 40%);
--blue-900: hsl(224, 64%, 33%);
--blue-950: hsl(226, 55%, 21%);
}
/* WCAG-safe dark mode */
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: hsl(220, 14%, 12%);
--bg-surface: hsl(220, 14%, 18%);
--text-primary: hsl(220, 14%, 94%);
--text-muted: hsl(220, 14%, 65%);
--border: hsl(220, 14%, 28%);
}
}调色板：生成和谐颜色
精心设计的调色板从单一品牌颜色开始，系统地推导出所有所需的深浅、色调和语义颜色。以下是主要方法：
- 色阶（Tailwind 方式）：对于每个色相，从 50（最亮）到 950（最暗）创建 11 个色阶。在 HSL 中，保持色相不变，对极端色阶稍微降低饱和度，亮度从约 97%（50 级）变化到 10%（950 级）。OKLCH 产生更感知均匀的色阶。
- 互补调色板：任何色相的互补色通过加 180 度找到。红（0）与青（180）互补。蓝（240）与橙（60）互补。使用主色作为主要操作，互补色作为强调色或警告色。
- 分裂互补：不使用精确的互补色，而是使用距基色 150 度和 210 度的两种颜色。这比直接互补创造了更生动但不那么刺眼的对比。
- 三色调色板：三种颜色等距分布在色轮的 0、120 和 240 度处。三色调色板丰富均衡，但需要谨慎——使用一种作为主导，其他作为强调色。
- 类似色调色板：距基色相 30-60 度内的颜色。类似色调色板感觉和谐自然——非常适合背景、表面和希望颜色区域间不高对比的 UI。
JavaScript 颜色转换代码示例
这些是完整的、可用于生产的 JavaScript 函数，不需要任何外部依赖。
完整工具集（所有转换 + WCAG 对比度）：
// Color Conversion Toolkit (no dependencies)
// HEX to RGB
function hexToRgb(hex) {
// Remove # prefix and expand shorthand (#FFF -> #FFFFFF)
hex = hex.replace(/^#/, '');
if (hex.length === 3) {
hex = hex.split('').map(c => c + c).join('');
}
const num = parseInt(hex, 16);
return {
r: (num >> 16) & 255,
g: (num >> 8) & 255,
b: num & 255,
};
}
console.log(hexToRgb('#3B82F6'));
// { r: 59, g: 130, b: 246 }
// RGB to HEX
function rgbToHex(r, g, b) {
return '#' + [r, g, b]
.map(v => Math.round(v).toString(16).padStart(2, '0'))
.join('');
}
console.log(rgbToHex(59, 130, 246));
// '#3b82f6'
// RGB to HSL
function rgbToHsl(r, g, b) {
r /= 255; g /= 255; b /= 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const delta = max - min;
let h = 0, s = 0;
const l = (max + min) / 2;
if (delta !== 0) {
s = delta / (1 - Math.abs(2 * l - 1));
if (max === r) h = ((g - b) / delta + 6) % 6;
else if (max === g) h = (b - r) / delta + 2;
else h = (r - g) / delta + 4;
h = Math.round(h * 60);
}
return {
h: h < 0 ? h + 360 : h,
s: Math.round(s * 100),
l: Math.round(l * 100),
};
}
console.log(rgbToHsl(59, 130, 246));
// { h: 217, s: 91, l: 60 }
// HSL to RGB
function hslToRgb(h, s, l) {
s /= 100; l /= 100;
const c = (1 - Math.abs(2 * l - 1)) * s;
const x = c * (1 - Math.abs((h / 60) % 2 - 1));
const m = l - c / 2;
let r = 0, g = 0, b = 0;
if (h < 60) { r = c; g = x; b = 0; }
else if (h < 120) { r = x; g = c; b = 0; }
else if (h < 180) { r = 0; g = c; b = x; }
else if (h < 240) { r = 0; g = x; b = c; }
else if (h < 300) { r = x; g = 0; b = c; }
else { r = c; g = 0; b = x; }
return {
r: Math.round((r + m) * 255),
g: Math.round((g + m) * 255),
b: Math.round((b + m) * 255),
};
}
console.log(hslToRgb(217, 91, 60));
// { r: 59, g: 130, b: 246 }
// RGB to CMYK
function rgbToCmyk(r, g, b) {
r /= 255; g /= 255; b /= 255;
const k = 1 - Math.max(r, g, b);
if (k === 1) return { c: 0, m: 0, y: 0, k: 100 };
return {
c: Math.round(((1 - r - k) / (1 - k)) * 100),
m: Math.round(((1 - g - k) / (1 - k)) * 100),
y: Math.round(((1 - b - k) / (1 - k)) * 100),
k: Math.round(k * 100),
};
}
console.log(rgbToCmyk(59, 130, 246));
// { c: 76, m: 47, y: 0, k: 4 }
// RGB to HSV
function rgbToHsv(r, g, b) {
r /= 255; g /= 255; b /= 255;
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const delta = max - min;
let h = 0;
const s = max === 0 ? 0 : delta / max;
const v = max;
if (delta !== 0) {
if (max === r) h = ((g - b) / delta + 6) % 6;
else if (max === g) h = (b - r) / delta + 2;
else h = (r - g) / delta + 4;
h = Math.round(h * 60);
}
return { h: h < 0 ? h + 360 : h, s: Math.round(s * 100), v: Math.round(v * 100) };
}Python 代码示例
Python 标准库包含用于 HSL 和 HSV 转换的 colorsys 模块。以下是包含 CMYK 的完整实现：
import colorsys
# RGB to HSL
def rgb_to_hsl(r, g, b):
r, g, b = r / 255.0, g / 255.0, b / 255.0
# colorsys uses HLS order, not HSL
h, l, s = colorsys.rgb_to_hls(r, g, b)
return {
'h': round(h * 360),
's': round(s * 100),
'l': round(l * 100),
}
# HSL to RGB
def hsl_to_rgb(h, s, l):
h, s, l = h / 360.0, s / 100.0, l / 100.0
r, g, b = colorsys.hls_to_rgb(h, l, s)
return {
'r': round(r * 255),
'g': round(g * 255),
'b': round(b * 255),
}
# RGB to HEX
def rgb_to_hex(r, g, b):
return '#{:02x}{:02x}{:02x}'.format(r, g, b)
# HEX to RGB
def hex_to_rgb(hex_str):
hex_str = hex_str.lstrip('#')
if len(hex_str) == 3:
hex_str = ''.join(c*2 for c in hex_str)
return {
'r': int(hex_str[0:2], 16),
'g': int(hex_str[2:4], 16),
'b': int(hex_str[4:6], 16),
}
# RGB to CMYK
def rgb_to_cmyk(r, g, b):
r, g, b = r / 255.0, g / 255.0, b / 255.0
k = 1 - max(r, g, b)
if k == 1:
return {'c': 0, 'm': 0, 'y': 0, 'k': 100}
c = (1 - r - k) / (1 - k)
m = (1 - g - k) / (1 - k)
y = (1 - b - k) / (1 - k)
return {
'c': round(c * 100),
'm': round(m * 100),
'y': round(y * 100),
'k': round(k * 100),
}
# Examples
print(rgb_to_hsl(59, 130, 246)) # {'h': 217, 's': 91, 'l': 60}
print(rgb_to_hex(59, 130, 246)) # '#3b82f6'
print(hex_to_rgb('#3B82F6')) # {'r': 59, 'g': 130, 'b': 246}
print(rgb_to_cmyk(59, 130, 246)) # {'c': 76, 'm': 47, 'y': 0, 'k': 4}CSS 命名颜色及其值
CSS 定义了 148 种命名颜色。以下是按颜色系列分组的最常用颜色及其 HEX 和 RGB 值：
| 颜色 | 名称 | HEX | RGB |
|---|---|---|---|
| red | #FF0000 | rgb(255, 0, 0) | |
| crimson | #DC143C | rgb(220, 20, 60) | |
| orange | #FFA500 | rgb(255, 165, 0) | |
| gold | #FFD700 | rgb(255, 215, 0) | |
| yellow | #FFFF00 | rgb(255, 255, 0) | |
| lime | #00FF00 | rgb(0, 255, 0) | |
| green | #008000 | rgb(0, 128, 0) | |
| teal | #008080 | rgb(0, 128, 128) | |
| cyan | #00FFFF | rgb(0, 255, 255) | |
| dodgerblue | #1E90FF | rgb(30, 144, 255) | |
| blue | #0000FF | rgb(0, 0, 255) | |
| navy | #000080 | rgb(0, 0, 128) | |
| purple | #800080 | rgb(128, 0, 128) | |
| violet | #EE82EE | rgb(238, 130, 238) | |
| magenta | #FF00FF | rgb(255, 0, 255) | |
| pink | #FFC0CB | rgb(255, 192, 203) | |
| white | #FFFFFF | rgb(255, 255, 255) | |
| silver | #C0C0C0 | rgb(192, 192, 192) | |
| gray | #808080 | rgb(128, 128, 128) | |
| black | #000000 | rgb(0, 0, 0) | |
| brown | #A52A2A | rgb(165, 42, 42) | |
| chocolate | #D2691E | rgb(210, 105, 30) | |
| coral | #FF7F50 | rgb(255, 127, 80) | |
| salmon | #FA8072 | rgb(250, 128, 114) | |
| tomato | #FF6347 | rgb(255, 99, 71) | |
| slategray | #708090 | rgb(112, 128, 144) | |
| darkgreen | #006400 | rgb(0, 100, 0) | |
| forestgreen | #228B22 | rgb(34, 139, 34) | |
| olive | #808000 | rgb(128, 128, 0) | |
| indigo | #4B0082 | rgb(75, 0, 130) |
常见问题
Q: CSS 最佳颜色格式是什么？
对于大多数项目，HEX 是最常见的选择，因为其语法紧凑且设计工具普遍支持。当你需要程序化创建色阶或动态调整颜色时，使用 HSL。对于关注感知均匀性和宽色域颜色的新设计系统，使用 oklch()。在 oklch() 获得普遍支持之前，始终提供 sRGB 降级方案。
Q: 如何将 HEX 转换为 RGB？
去掉 # 前缀，将 6 位字符分成三对 2 字符（RR、GG、BB），将每对从十六进制转换为十进制。例如，#3B82F6：R = parseInt("3B", 16) = 59，G = parseInt("82", 16) = 130，B = parseInt("F6", 16) = 246。在 JavaScript 中：const r = parseInt(hex.slice(1, 3), 16)。我们的免费工具可以即时完成此转换。
Q: HSL 和 HSV 的区别是什么？
两种模型都使用相同的色相轮（0-360 度）。区别在于处理亮度的方式。HSL 使用亮度，其中 0% = 黑色，50% = 纯色，100% = 白色。HSV 使用明度，其中 0% = 黑色，100% = 颜色最亮的表达。HSL 在 CSS 中使用。HSV 在设计工具颜色选择器（Photoshop、Figma）中使用，因为其方形选择器对颜色选择更直观。
Q: 为什么我的屏幕颜色打印出来看起来不一样？
屏幕发射光（加色 RGB 模型），而打印机使用油墨吸收光（减色 CMYK 模型）。CMYK 色域小于 sRGB，意味着许多鲜艳的屏幕颜色——特别是明亮的绿色、青色和蓝色——无法用标准印刷油墨物理再现。此外，纸张白色和油墨特性因纸张类型而异。专业印刷使用 ICC 配置文件和软打样来预测最终印刷结果。
Q: 无障碍需要什么 WCAG 对比度比率？
WCAG 2.1 AA 级要求正常文本（18pt 或 24px 粗体以下）最低对比度 4.5:1，大文本 3:1。AAA 级要求正常文本 7:1，大文本 4.5:1。非文本 UI 元素（按钮、表单控件、图标）需要至少 3:1 的对比度。对比度使用公式 (L1 + 0.05) / (L2 + 0.05) 从两种颜色的相对亮度计算。
Q: OKLCH 是什么，为什么要使用它？
OKLCH 是 CSS Color Level 4 中引入的感知均匀颜色空间。与 HSL（相同亮度值在不同色相下看起来非常不同——黄色在 L=50% 时比蓝色在 L=50% 时看起来亮得多）不同，OKLCH 确保具有相同亮度值的颜色看起来真正一样亮。这使 OKLCH 非常适合生成和谐的色阶、无障碍调色板和动画中的平滑颜色插值。浏览器支持：Chrome 111+、Safari 15.4+、Firefox 113+。
Q: 如何创建暗色模式调色板？
推荐方法是使用 HSL 或 OKLCH 系统地调整亮度维度。对于浅色模式，背景使用高亮度值（95-98%），文本使用低亮度值（5-15%）。对于暗色模式，反转这一点：深色背景亮度 10-20%，浅色文本亮度 85-95%。将所有颜色定义为 CSS 自定义属性，这样暗色模式就只是一组不同的变量值。避免简单地反转颜色——将暗色模式设计为一个有意的独立调色板。
Q: RGB 转 HSL 公式是如何工作的？
将 RGB 转换为 HSL：(1) 通过除以 255 将 R、G、B 归一化到 0-1 范围。(2) 找到 Cmax（最大通道）和 Cmin（最小通道）。(3) 亮度 = (Cmax + Cmin) / 2。(4) 如果 Cmax 等于 Cmin，饱和度 = 0（无色差）。否则，饱和度 = delta / (1 - |2L - 1|)，其中 delta = Cmax - Cmin。(5) 色相：如果 Cmax 是 R，H = 60 * ((G-B)/delta mod 6)。如果 Cmax 是 G，H = 60 * ((B-R)/delta + 2)。如果 Cmax 是 B，H = 60 * ((R-G)/delta + 4)。
颜色转换是连接设计工具、CSS 开发、印刷生产和无障碍合规性的基础技能。无论你需要快速查询 HEX 到 RGB，想用 HSL 构建程序化色阶，还是准备 CMYK 印刷输出，掌握这些转换都会使你的工作更精确、更专业。使用我们的免费在线颜色转换工具获取即时结果，并将本指南作为参考。
使用我们的免费工具即时转换 HEX、RGB、HSL、HSV 和 CMYK。
立即使用颜色转换工具