颜色选择器

可视化拾色器,支持HEX、RGB、HSL格式互转,实时预览颜色效果。

在线颜色选择器适合设计和前端调试

颜色选择器可以帮助你快速获取 HEX、RGB、HSL 等常见色值,并实时预览颜色效果。无论是调整网页按钮、整理品牌配色、复制设计稿颜色,还是检查 CSS 变量,都可以用这个工具快速完成颜色选择和格式转换。

HEX 色值常用于 CSS 和设计标注,RGB 适合需要透明度或程序处理的场景,HSL 更适合按色相、饱和度和亮度微调颜色。使用时可以先选择接近的颜色,再根据预览效果微调。

使用步骤

  1. 通过拾色器选择目标颜色。
  2. 查看对应的 HEX、RGB 或 HSL 色值。
  3. 根据需要复制到 CSS、设计稿或配置文件。
  4. 调整颜色后实时查看预览效果。

颜色格式说明

  • HEX:网页和设计稿中最常见的十六进制色值。
  • RGB:使用红、绿、蓝三个通道表示颜色。
  • HSL:通过色相、饱和度和亮度描述颜色。
  • CSS 变量:适合统一管理站点主题色。

颜色选择器常见问题

HEX 和 RGB 可以互相转换吗?

可以。它们只是同一种颜色的不同表示方式,本工具会自动给出对应格式。

HSL 适合什么场景?

HSL 适合按色相和亮度做主题色变化,例如生成 hover 色、浅色背景和深色文本。

复制的颜色能直接用于 CSS 吗?

可以,HEX、RGB 和 HSL 都是现代 CSS 支持的常见颜色写法。