十六进制颜色选择器和调色板转换器

十六进制颜色选择器和转换器(RGB、HSL、HSV)

直接在浏览器中将十六进制转换为 RGB、HSL 和 HSV,复制和声样本并导出 CSS 或 JSON。

输入#RGB 或#RRGGBB(带或不带#)。无效值保留最后一次良好的转化。

转换

HEX#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217.219, 91.2%, 59.8%)
HSVhsv(217.219, 76%, 96.5%)
和谐样本
生成和谐颜色
色调/遮光条

导出色板

选择或粘贴十六进制颜色,转换为 RGB、HSL 和 HSV,生成互补/类似/三元/单色样本,复制值以及导出 CSS 或 JSON。免费、快速且完全在您的浏览器中运行。

如何使用这个十六进制颜色选择器

输入或粘贴十六进制值,或使用本机选择器。该页面会立即将其转换为 RGB、HSL 和 HSV,生成和谐色板和色调/阴影条,并使所有内容都准备就绪。使用 URL 共享您的设置 - 状态存储在查询字符串中。

十六进制、RGB、HSL 和 HSV 参考

Hex 是一种紧凑的 RGB 编码。 RGB 描述红/绿/蓝通道。 HSL表示色调、饱和度和亮度; HSV 使用色调、饱和度和明度(亮度)。该工具在浏览器中使用确定性数学——无需上传,也无需外部 API。

互补、类似、三元和单色

补色将色调旋转 180°。类似的步骤以围绕您的底座的固定角度进行色调调整。 Triadic 使用 120° 偏移。单色保持色调并改变亮度。计数控制适用于模拟和单色模式。

CSS 变量和 JSON 导出

导出生成具有稳定名称的 :root 自定义属性(例如 --color-base、--color-analogous-1)和带有 baseHex 的 JSON、和谐模式以及脚本或设计标记的样本列表。

常见问题解答

#ABC 是否扩展到六位数字?

是的。三位数的十六进制按数字对扩展,因此#ABC 变为#AABBCC。

如果我的十六进制无效会怎样?

您会看到一个内联错误。最后一个有效颜色保留在转换行、选取器和导出中,直到您再次输入有效的十六进制。

和谐色是如何计算的?

它们是确定性的:互补是 HSL 中 180° 的色调偏移;类似地使用固定的色调步骤;三元组使用 120° 偏移;单色改变亮度,同时保持基础的色调和饱和度。

JSON 导出中包含什么内容?

稳定的键:baseHex、harmony、harmonyCount(如果适用)、harmonySwatches(十六进制字符串)、tintShadeStrip 和 stripCount — 适用于工具或文档。

我可以分享我的颜色吗?

是的。 URL 会更新十六进制、和声模式、计数和条带大小,以便您可以添加书签或共享准确的设置。