颜色选择器
可视化拾色器,支持HEX、RGB、HSL格式互转,实时预览颜色效果。
在线颜色选择器适合设计和前端调试
颜色选择器可以帮助你快速获取 HEX、RGB、HSL 等常见色值,并实时预览颜色效果。无论是调整网页按钮、整理品牌配色、复制设计稿颜色,还是检查 CSS 变量,都可以用这个工具快速完成颜色选择和格式转换。
HEX 色值常用于 CSS 和设计标注,RGB 适合需要透明度或程序处理的场景,HSL 更适合按色相、饱和度和亮度微调颜色。使用时可以先选择接近的颜色,再根据预览效果微调。
使用步骤
- 通过拾色器选择目标颜色。
- 查看对应的 HEX、RGB 或 HSL 色值。
- 根据需要复制到 CSS、设计稿或配置文件。
- 调整颜色后实时查看预览效果。
颜色格式说明
- HEX:网页和设计稿中最常见的十六进制色值。
- RGB:使用红、绿、蓝三个通道表示颜色。
- HSL:通过色相、饱和度和亮度描述颜色。
- CSS 变量:适合统一管理站点主题色。
颜色选择器常见问题
HEX 和 RGB 可以互相转换吗?
可以。它们只是同一种颜色的不同表示方式,本工具会自动给出对应格式。
HSL 适合什么场景?
HSL 适合按色相和亮度做主题色变化,例如生成 hover 色、浅色背景和深色文本。
复制的颜色能直接用于 CSS 吗?
可以,HEX、RGB 和 HSL 都是现代 CSS 支持的常见颜色写法。