颜色选择器

HEX: #0070f3
RGB: rgb(0, 112, 243)
HSL: hsl(212, 100%, 48%)
预览文本

这个工具是什么?

我们的颜色选择器让您以视觉方式或输入特定值选取任何颜色,然后立即查看其在 HEX、RGB 和 HSL 格式的等效值。您还可以探索颜色的明度变化,并一键复制任何格式。这是设计师、开发人员和任何在数字媒体中使用颜色的人的必备工具。

使用方法

  1. 点击色彩光谱上的任何位置以选取颜色。
  2. 拖动色相滑块以更改基本颜色。
  3. 调整亮度/饱和度滑块以进行精细控制。
  4. 或直接在输入字段中输入特定的 HEX、RGB 或 HSL 值。
  5. 点击任何颜色代码将其复制到剪贴板。

常见用途

使用技巧

常见问题

HEX、RGB 和 HSL 颜色格式之间有什么区别?

HEX 和 RGB 都通过红、绿、蓝分量描述颜色(只是不同的符号),而 HSL 通过色相、饱和度和亮度描述——设计师通常发现这种格式对独立调整颜色亮度或生动性更直观。

我如何找到我在设计稿中看到的颜色的确切 HEX 代码?

使用色彩光谱或在输入字段中输入已知的 RGB/HSL 值——该工具即时转换并显示等效的 HEX 代码。

我可以直接复制颜色代码用于 CSS 吗?

可以。点击任何显示的颜色代码(HEX、RGB 或 HSL)将其复制到您的剪贴板,可直接粘贴到样式表中。

该工具是否支持 alpha 透明度值?

如果 RGBA 或 HSLA 格式在输出中可用,您可以捕获颜色旁的透明度;查看标准 RGB/HSL 字段旁的格式选项。

我的颜色选择是否被发送到服务器?

不会。所有颜色转换数学都在您的浏览器本地进行——没有颜色值被传输或记录到任何地方。

选择颜色并获取 HEX、RGB、HSL 代码,支持配色方案与对比度检查。

颜色选择器 · 颜色工具 · 配色方案 · HEX 代码 · RGB 代码 · HSL 代码 · 设计工具 · 颜色选择 · 颜色转换器 · 颜色代码 · 配色方案 · 颜色生成器 · 颜色实用工具 · 颜色选择器在线 · 颜色选择工具 · 颜色对比 · 颜色对比检查 · 颜色对比工具 · 颜色对比度 · 颜色对比计算器