Color Converter
HEX RGB HSL conversion
HEX RGB HSL conversion 在您的浏览器中本地运行
#2563eb
rgb(37, 99, 235)
hsl(221, 83%, 53%)
About the
颜色转换器可在 HEX、RGB、HSL 和 HSV 之间转换单一颜色,并显示 WCAG 与黑白的对比度,以便您可以立即查看该颜色的文本是否可读。 HEX 和 RGB 是您在工具之间复制的格式,但 HSL 是对设计工作真正有用的格式:它将色调与亮度分开,因此您可以生成保持相同色调的色调或阴影,而不是像简单的 RGB 数学那样向灰色漂移。八位十六进制和 RGBA 值带有 Alpha 通道,转换器也可以处理这些值。
Where people use the
- 将品牌十六进制值转换为设计工具期望的 RGB 语法。
- 使用 HSL 从一个品牌色调生成一组一致的色调。
- 检查链接颜色在深色背景上是否可读。
- 将从屏幕截图中选取的颜色与最接近的十六进制值相匹配。
How to use the
- 1
以任意格式输入颜色
粘贴十六进制值(例如 2f6fed)、rgb 或 hsl 函数,或者使用选择器。其他格式会随着您的键入而更新。
- 2
一次性阅读所有陈述
Hex、RGB、HSL 和 HSV 与分离出的 alpha 通道一起显示。
- 3
检查对比度
黑白比例告诉您该颜色是否可用作文本颜色或背景。正文文本需要 4.5 比 1,大文本和界面边框需要 3 比 1。
- 4
复制您的代码所需的表格
每个字段都有自己的复制按钮,因此您可以获得样式表所需的准确语法,而不是手动重新格式化。
提示和最佳实践
- 在HSL中调整亮度,而不是在RGB中添加白色或黑色;色调保持不变。
- 以实际使用的文本的最小尺寸(而不是标题尺寸)测试对比度。
- 保留包含五个或六个值的记录调色板,而不是为每个组件发明一个新的调色板。
常见问题
十六进制颜色如何转换为 RGB?
每对十六进制数字都是一个通道,读作基数 16。在 2f6fed 中,2f 是 47 红色,6f 是 111 绿色,ed 是 237 蓝色。像 f0a 这样的三位数简写将每个数字加倍,因此变成 ff00aa。
为什么 HSL 亮度与感知亮度不同?
因为眼睛对绿色的敏感度远高于对蓝色的敏感度。纯蓝色和纯黄色可以共享亮度值,而黄色看起来更亮。这就是为什么对比度必须用亮度公式来测量,而不是根据 HSL 值来判断。
十六进制颜色的第四对数字是什么意思?
Alpha,从 00 完全透明到 ff 完全不透明。当前所有浏览器都支持八位十六进制,它是 rgba 的十六进制等效项。
CMYK 转换对于打印准确吗?
不可以,任何浏览器工具都不能。 CMYK 取决于墨水、纸张和打印机配置文件。使用此值作为起点,并通过打印供应商的 ICC 配置文件转换任何重要的内容。
如何为彩色背景选择可读文本?
比较文本颜色和背景之间的对比度。如果黑色和白色都没有达到 4.5 比 1,则背景对于正文而言过于饱和,需要在用于副本后面之前将其变暗或变亮。
为什么相同的十六进制在两个屏幕上看起来不同?
因为显示器的色域、校准和亮度有所不同。广色域屏幕显示标准 sRGB 面板无法再现的饱和色彩。除非您有特定原因不这样做,否则请使用 sRGB。