HEX 颜色选择器
常用预设
使用浏览器自带的可视化取色控件选择颜色，或输入三位、六位 HEX 值。工具会转换为 RGB、HSL 和估算 CMYK，并计算相对亮度以及与白色和黑色的准确对比度。颜色只在当前浏览器中处理，不会写入步骤页面的 URL。
如何选择颜色
-
1
从示例或取色控件开始
选择一个示例颜色，或打开浏览器自带的取色控件。
-
2
输入准确的 HEX 值
输入 #F60 这样的三位值或 #FF6600 这样的六位值，短格式会被正确展开。
-
3
查看计算后的格式
集中查看 HEX、RGB、HSL、估算 CMYK 和 sRGB 相对亮度。
-
4
检查对比度并复制
比较颜色与白色、黑色的对比度，然后复制所需的 HEX、RGB 或 HSL 值。
实际工作中的颜色表示法
每种颜色模型回答的问题都略有不同。
表示法参考
| 表示法 | 组成 | 常见用途 |
|---|---|---|
| HEX | #RRGGBB | CSS、设计工具、品牌规范 |
| RGB | 红色 0–255、绿色 0–255、蓝色 0–255 | CSS rgb()、图像编辑器 |
| HSL | 色相 0–360°、饱和度 %、亮度 % | CSS hsl()、设计系统 |
| CMYK | 青色 %、品红 %、黄色 %、key/黑色 % | 印刷、印前处理 |
无障碍对比度
WCAG 2.2 定义了文本和背景之间的最低对比度：
- 普通文本 AA：≥ 4.5:1
- 大号文本 AA（18 pt 或 14 pt 加粗）：≥ 3:1
- 普通文本 AAA：≥ 7:1
选择器会实时计算该颜色相对于白色和黑色的对比度。如果你需要使用自定义前景色，请针对每一组颜色再用专门的对比度检查工具确认。
提示
- HEX 是大多数设计工具的默认表示法，但三位短 HEX（
#F60）等同于#FF6600，不是#F06060。 - HSL 更适合搭建调色板：锁定色相，通过改变亮度生成浅色和深色层级。
- CMYK 和 RGB 不能完美互转，印刷中的 CMYK 结果取决于印刷配置文件。请始终在真实纸张上打样确认。
- 如果面向现代 CSS 设计，可以考虑 OKLCH，以获得感知上更均匀的亮度阶梯。
常见问题
Photoshop 会应用颜色配置文件，屏幕通常使用 sRGB，印刷则可能使用其他配置文件。浏览器会把没有配置文件的 HEX 值当作 sRGB 渲染。如果文档设置为 Adobe RGB 或 ProPhoto，像素值相同，但感知到的颜色会变化。
一样。两者都表示纯红色：红色为 255，绿色和蓝色为 0。HEX 只是把每个 0 到 255 的通道值写成两位十六进制。
先选择主色并复制 HSL 值。在 CSS 或设计软件中固定色相和饱和度，再调整亮度。每一组前景色和背景色都应单独检查对比度。
当前颜色会在这个浏览器标签页中保留最多 30 分钟，以便完成引导步骤。它不会写入 URL，也不会通过 Livewire 发送。重新开始、关闭标签页、清除浏览器数据或到期都会将其删除。
相关工具
BBCode 转 HTML 转换器
将 BBCode（论坛标记）转换为干净的 HTML。支持格式标签、列表、引用、代码、图片、链接和表格。
Base64 转 Hex 转换器
将 Base64 字符串转换为其底层字节的十六进制表示。适合检查令牌、密钥、证书和 JWT。
二进制转 ASCII 转换器
粘贴二进制（用空格分隔的字节或一长串比特），即可得到它所表示的 ASCII 文本。支持 7 位和 8 位编码。
二进制转十六进制转换器
将二进制输入转换为纯大写十六进制值。非 0 和 1 字符会被忽略，前导零不会保留。
二进制转八进制转换器
通过每三位分组将二进制转为八进制。适合 Unix 权限、旧系统和紧凑的数字显示。
二进制转十进制
即时将二进制数转换为十进制。显示按位展开，让你看清每一位的贡献。