颜色转换器 - HEX转RGB、HSL、HSV 在线
在HEX、RGB、HSL和HSV格式间转换颜色，带实时预览。用取色器可视化选择，复制CSS颜色代码 — 免费颜色代码转换器。
常见问题
什么是颜色转换器?
颜色转换器是一种在HEX、RGB、HSL、HSV和CMYK等不同格式之间转换颜色值的工具。每种格式以不同方式表示颜色:HEX使用十六进制表示法(#FF5733),RGB使用红-绿-蓝值(rgb(255, 87, 51)),HSL使用色相-饱和度-亮度(hsl(14, 100%, 60%)),CMYK用于印刷。此工具可为Web开发、设计和无障碍工作提供无缝转换。
HEX、RGB和HSL有什么区别?
HEX是一种紧凑的6位十六进制格式(#RRGGBB),常用于CSS和设计工具。RGB(红、绿、蓝)为每个通道使用0-255的十进制值,便于编程操作。HSL(色相、饱和度、亮度)更人性化:色相是颜色(0-360度),饱和度是强度(0-100%),亮度是明暗(0-100%)。紧凑表示用HEX,计算用RGB,视觉调整颜色属性时用HSL。
HSV和HSL有什么区别?
HSV(色相、饱和度、明度)和HSL(色相、饱和度、亮度)都使用相同的色相分量(0-360度),但在表示亮度方面有所不同。在HSV中,最大Value(V=100%)给出纯色,而在HSL中,最大Lightness(L=100%)始终为白色。HSV因为更直观地映射到调色混合而受到图形设计师和取色器的青睐。HSL更适合CSS,因为调整亮度可以创建可预测的色调和阴影。
什么是WCAG对比度,为什么它很重要?
WCAG(Web内容无障碍指南)对比度测量前景色和背景色之间的亮度差异。比率范围从1:1(无对比度)到21:1(白底黑字)。为符合无障碍标准,普通文本需要4.5:1(AA)或7:1(AAA),大文本(18px以上粗体或24px以上)需要3:1(AA)或4.5:1(AAA)。适当的对比度确保视觉障碍用户和在各种光照条件下都能阅读内容。
什么是色彩和谐,如何使用?
色彩和谐是基于色轮位置的美观悦目的颜色组合。互补色位于彼此对面(如蓝色和橙色),创造高对比度。类似色相邻(如蓝色、蓝绿色、绿色),创造和谐的设计。三元色形成三角形(如红色、黄色、蓝色),提供平衡的多样性。强调用互补色,统一设计用类似色,活力界面用三元色。
这个颜色转换器安全且保护隐私吗?
是的。此工具使用客户端JavaScript 100%在浏览器中运行。没有颜色数据、调色板或设计信息会发送到任何服务器。所有转换、对比度计算和调色板生成都在您的设备上本地进行。这使其可以安全地处理机密品牌颜色、客户项目或任何敏感的设计工作。
代码示例
// HEX to RGB
const hexToRgb = (hex) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
};
// RGB to HSL
const rgbToHsl = (r, g, b) => {
r /= 255; g /= 255; b /= 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) { h = s = 0; }
else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
case g: h = ((b - r) / d + 2) / 6; break;
case b: h = ((r - g) / d + 4) / 6; break;
}
}
return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
};
console.log(hexToRgb('#FF5733')); // { r: 255, g: 87, b: 51 }
console.log(rgbToHsl(255, 87, 51)); // { h: 11, s: 100, l: 60 }