首页 颜色转换
颜色转换
#RGB 会把每一位写成两遍，变成 #RRGGBB。#ff0000 是 rgb(255, 0, 0) 和 hsl(0, 100%, 50%)。颜色留在这个浏览器里。
为什么做
设计和样式表会把同一种颜色写成 #ff0000、rgb(255, 0, 0) 或 hsl(0, 100%, 50%)。
把短的 #abc 拉成六位，再把 HSL 收成整数，通道可能移动 1。
-
01怎么用
改 HEX、RGB 或 HSL 中的任意一个，另外两个字段和色块会一起变。
色块用那个 HEX 做背景。复制结果会把 HEX、rgb()、hsl() 三行放进剪贴板。
关掉标签后颜色就消失。这一页不读取透明度通道。
-
02结果示例
#ff0000、#00ff00、#0000ff 分别是 hsl(0, 100%, 50%)、hsl(120, 100%, 50%)、hsl(240, 100%, 50%)，并且都能换回同一个 HEX。
#fff 是 #ffffff、rgb(255, 255, 255)、hsl(0, 0%, 100%)。#000000 是 hsl(0, 0%, 0%)。
输入#ff0000
#ff0000 rgb(255, 0, 0) · hsl(0, 100%, 50%) #00ff00 rgb(0, 255, 0) · hsl(120, 100%, 50%) #0000ff rgb(0, 0, 255) · hsl(240, 100%, 50%) #abc #aabbcc · 换回 #a9bacb -
03需要知道的事
色相 360 和 0 相同。hsl(360, 100%, 50%) 是 #ff0000。
灰色 #808080 的饱和度是 0，所以色相出来是 0。亮度 50% 换回去是 128, 128, 128。
通道超出范围或带小数时，只在那一栏显示错误，最后的颜色不会被复制。
这个转换是屏幕上的 sRGB。它不算印刷用的 CMYK。
常见问题
- Q#f00 和 #ff0000 一样吗？
- A一样。每一位写两遍就成了 #ff0000。
- Q#abc 的 HSL 换回去还是同一个 HEX 吗？
- A不是。hsl(210, 25%, 73%) 换回去是 #a9bacb。
- Q八位 HEX 能读吗？
- A不能。只读取 #RGB 和 #RRGGBB。
- Q颜色会保存吗？
- A不会。颜色只在这个浏览器里计算，不会送到服务器。
这一页怎样算出
这一页把 HEX、RGB、HSL 换成同一种 sRGB 颜色。#RRGGBB 用两位写出红、绿、蓝。#ff0000 是 rgb(255, 0, 0) 和 hsl(0, 100%, 50%)。#00ff00 的色相是 120，#0000ff 的色相是 240。#RGB 会把每一位写两遍。#abc 变成 #aabbcc，也就是 rgb(170, 187, 204) 和 hsl(210, 25%, 73%)。
HSL 用和 CSS 一样的转换，画面把色相、饱和度、亮度四舍五入成整数。再用这些整数换回去，通道可能移动 1。#abc 的 hsl(210, 25%, 73%) 换回去是 #a9bacb。#808080 是 rgb(128, 128, 128) 和 hsl(0, 0%, 50%)，再换回去仍是 #808080。色相 360 和 0 相同，所以 hsl(360, 100%, 50%) 是 #ff0000。
RGB 的每个通道是 0 到 255 的整数。饱和度和亮度从 0 到 100。八位 HEX 和小数不会读取。超出范围时只在那一栏显示错误，最后的颜色不会被复制。这个转换是屏幕上的 sRGB，不算印刷用的 CMYK。颜色只在这个浏览器里计算，不会送到服务器。