ToolHub
打开工具

颜色选择器

专业的颜色选择工具，支持多种格式

开发者工具
启动工具 所有工具

关于此工具

颜色选择器是一款基于浏览器的工具，可以在多种格式之间选择和转换颜色。你可以从预设色板中选择，通过滑块调整色相和透明度，或直接输入 HEX 和 RGB 值。工具会即时显示颜色的 HEX、RGB、HSL 和 HSV 格式，每种格式都支持一键复制。所有处理均在浏览器本地完成，不会向任何服务器发送数据。

主要功能

如何使用

  1. 从预设色板中选择颜色，或使用取色器选取。
  2. 使用滑块调整色相和透明度。
  3. 查看 HEX、RGB、HSL 和 HSV 格式的颜色值。
  4. 一键复制任意颜色格式的值到剪贴板。

快速预览

使用场景

颜色 选择器 hex rgb

常见问题

这个工具支持哪些颜色格式？

工具支持四种格式显示颜色：HEX（如 #ff6b6b）、RGB/RGBA（如 rgb(255, 107, 107)）、HSL/HSLA（如 hsl(0, 100%, 71%)）和 HSV（如 hsv(0, 58%, 100%)）。当透明度低于 100% 时，会自动使用 RGBA 和 HSLA 格式。

如何调整颜色的透明度？

使用色相滑块下方的透明度滑块。向左拖动降低透明度，向右拖动增加透明度。颜色预览和所有格式值会实时更新。当透明度低于 100% 时，HEX 输出会包含透明通道，RGB/HSL 输出会自动切换为 rgba/hsla 格式。

HSL 和 HSV 有什么区别？

两者都是圆柱形颜色模型，但对亮度的定义不同。HSL（色相、饱和度、明度）的明度从黑色到纯色再到白色，明度 100% 始终是白色。HSV（色相、饱和度、纯度）的纯度从黑色到纯色，纯度 100% 是该颜色最纯的形式。HSL 更常用于 CSS，而 HSV 多用于图形软件。

可以直接输入 HEX 或 RGB 值吗？

可以。你可以在输入框中直接输入 HEX 值（如 #3b82f6）或 RGB 值（如 rgb(59, 130, 246)），工具会即时转换并更新所有其他格式显示、颜色预览和滑块位置。

如何复制颜色值？

点击任意格式值旁边的复制按钮，颜色值会以显示的格式复制到剪贴板（如 HEX 格式的 #ff6b6b，RGB 格式的 rgb(255, 107, 107)）。然后你可以直接粘贴到 CSS、设计工具或代码编辑器中使用。

相关工具

JSON 验证器哈希生成器UUID 生成器正则表达式测试器