颜色选择器与转换器

页面上的所有输入框描述的是同一个颜色，改动其中任何一个，其他的都会跟着更新：

• 选择颜色：点击颜色条，打开浏览器自带的取色面板，凭眼睛挑选。
• HEX 框：输入或粘贴色值，带不带 # 都可以，支持 3 位和 6 位写法。
• R、G、B 框：每个通道填 0 到 255，适合一次只微调一个通道。

页面默认是 #4f46e5，一种靛蓝色，对应 rgb(79, 70, 229) 和 hsl(243, 75%, 59%)。每种格式旁边都有自己的复制按钮。

几个参考颜色在页面上的显示：

复制哪种格式取决于用在哪里。HEX 最简洁，适合写 CSS、标注设计稿和制定品牌规范。RGB 适合按通道处理颜色的代码，比如在 canvas 上绘图或给图片着色。HSL 最容易调整：色相和饱和度不变，只改亮度，就能得到同一颜色更深或更浅的版本。

HSL 的数值四舍五入到整数，所以相近的颜色可能显示相同的 HSL。#808080 和 #7f7f7f 是两种不同的灰，但都显示为 hsl(0, 0%, 50%)。把 HSL 复制出去再转回来，可能会和原色差一档。

颜色必须精确时，比如对齐标志或品牌色，请复制 HEX 或 RGB。打算继续调色时再用 HSL。

• 透明度。没有 Alpha 通道，#4f46e580 这样的 8 位色值和 4 位色值都不被接受。
• 颜色名称。输入 red、teal 或“红色”都不行，请输入十六进制色值。
• 无效色值。HEX 框里的内容无法识别时，色块变成灰色，下方出现“请输入有效的 3 位或 6 位 HEX 颜色（例如 #4f46e5）。”的提示，RGB 和 HSL 也会显示默认靛蓝色的数值，而不是你的颜色。复制之前先把色值改对。
• 复制的是你输入的原样。HEX 的复制按钮会照搬框里的内容。如果你输入的是 f80，复制出来的就是不带 # 的 f80。拖动取色器或改一下 RGB 框，色值会被改写成完整的 #ff8800。