颜色选择器
HEX: #0070f3
RGB: rgb(0, 112, 243)
HSL: hsl(212, 100%, 48%)
预览文本
这个工具是什么?
我们的颜色选择器让您以视觉方式或输入特定值选取任何颜色,然后立即查看其在 HEX、RGB 和 HSL 格式的等效值。您还可以探索颜色的明度变化,并一键复制任何格式。这是设计师、开发人员和任何在数字媒体中使用颜色的人的必备工具。
使用方法
- 点击色彩光谱上的任何位置以选取颜色。
- 拖动色相滑块以更改基本颜色。
- 调整亮度/饱和度滑块以进行精细控制。
- 或直接在输入字段中输入特定的 HEX、RGB 或 HSL 值。
- 点击任何颜色代码将其复制到剪贴板。
常见用途
- 在设计稿中找到您看到的颜色的 HEX 代码
- 将 RGB 颜色值转换为 HEX 以用于 CSS
- 探索品牌调色板的颜色变化
- 在构建或设计网页时检查颜色代码值
使用技巧
- 使用 HEX 输入字段输入已知颜色代码,立即查看其 RGB 和 HSL 等效值。
- HSL 对设计师通常更直观——色相(0-360)、饱和度和明度相互独立。
- 如果浏览器在选取时更新地址栏,请将特定颜色的网址加入书签。
常见问题
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 代码 · 设计工具 · 颜色选择 · 颜色转换器 · 颜色代码 · 配色方案 · 颜色生成器 · 颜色实用工具 · 颜色选择器在线 · 颜色选择工具 · 颜色对比 · 颜色对比检查 · 颜色对比工具 · 颜色对比度 · 颜色对比计算器