颜色转换器
在 HEX、RGB 和 HSL 之间转换颜色,并提供预览。
如何使用 颜色转换器
- 以 HEX(#137256)或 RGB(rgb(19,114,86))形式输入颜色。
- 复制你需要的格式。
关于 颜色转换器
CSS 支持用多种记法表示同一种颜色,每种都有各自的用途。rgb(19, 114, 86) 用十进制明确写出三个通道,取值范围 0 到 255。#137256 是把这些相同的数字用十六进制表示,每个通道两位数字——这就是为什么二者可以互换,也是 #abc 会展开成 #aabbcc 的原因。两者都是加色模式:它们描述的是屏幕发出的光,与 CMYK 印刷正好相反,后者每添加一种油墨都会从纸面减去一部分光。
hsl() 是真正值得转换成的记法。色相是色轮上的一个角度,饱和度表示颜色有多鲜艳,明度表示有多明亮——三个可以分别推理的数字。悬停态就是同一色相、明度调低的结果。一个渐变色阶就是同一色相在多个明度层级下的表现。如果用 RGB 凭肉眼去试,你等于在同时求解三个相互耦合的方程。如果你想要一个现成的色阶,色阶生成器可以帮你生成,对比度检测工具则能告诉你结果上的文字是否依然清晰可读。
粘贴 HEX(三位或六位数字,# 可选)或一个 rgb() 值,即可同时获得全部三种格式,并附带一个随输入实时更新的色块。rgba() 可以接受,但其透明度会被舍弃。HSL 输入、八位十六进制和颜色命名均不会被解析。不会上传任何内容。
常见问题
我可以粘贴哪些格式?
三位或六位的 HEX(# 可选),以及 rgb() 和 rgba() 值。你总会同时得到 HEX、RGB 和 HSL 三种结果。
我可以粘贴 HSL 值吗?
不能作为输入。HSL 在这里是一种输出格式,所以请从 HEX 或 RGB 值开始,再从结果中读取对应的 HSL。
rgba() 颜色中的透明度会怎样处理?
会被忽略。此工具只转换三个颜色通道,返回不透明的 HEX、RGB 和 HSL 值。
为什么要转换成 HSL?
因为它把色相与饱和度、明度区分开来。只需微调明度,就能得到一个悬停态或一个保持同一色系的色调,这比重新猜测全新的 RGB 数值容易得多。
#ABC 和 #AABBCC 是同一种颜色吗?
是的。三位十六进制纯粹是一种简写——每一位都会重复一次,生成六位形式。