颜色代码转换器
输入颜色并复制 HEX、RGB 和 HSL 值。
#624DE3CC
工具介绍
颜色代码转换工具可同时以 HEX、RGB、HSL 三种格式显示同一种颜色，并支持相互转换。你可以直接输入颜色、从预设颜色中选择，或使用取色器从屏幕上取色，同时还能调整透明度。无论是网页设计、UI 制作、CSS 编写还是图片编辑，都能轻松将颜色转换成你需要的代码格式。
使用方法
选择颜色
在 HEX、RGB 或 HSL 输入框中输入数值，或选择预设颜色。在支持的环境下，也可以点击取色器按钮直接从屏幕上取色。
调整透明度
拖动透明度滑块控制颜色的不透明度。设置会同步反映在上方预览和颜色代码中。
查看并复制结果
在预览区确认颜色后，点击 HEX、RGB 或 HSL 输入框旁的复制按钮，将所需的值复制到剪贴板。
主要特点
HEX、RGB、HSL 同时显示
以一种格式输入颜色，即可同时查看对应的 HEX、RGB、HSL 值。
实时预览与透明度
修改颜色值或透明度时，预览会即时更新，滑块还能帮你创建半透明颜色。
取色器与预设颜色
在支持的浏览器中，可使用取色器从屏幕取色，或点击常用预设颜色快速应用。
各格式单独复制
可分别复制 HEX、RGB、HSL 值，直接用于 CSS、设计工具和文档中。
直接输入数值
如果已经知道颜色代码，直接在输入框中输入即可查看转换结果。
浏览器内处理
你的颜色值和转换结果仅在浏览器中处理，不会发送到任何服务器。
使用场景
转换 CSS 颜色代码
将设计稿中的 HEX 颜色转换为 RGB 或 HSL，用于 CSS 样式。
在设计工具间传递颜色
当不同程序要求的颜色格式不一致时，可将同一颜色转换为各程序所需的代码格式。
创建半透明背景
调整透明度，生成适合叠加层、背景、按钮和边框使用的半透明颜色。
从屏幕取色
使用取色器选择网页、图片或应用屏幕上显示的颜色，并查看其代码。
管理品牌颜色
将品牌颜色的 HEX、RGB、HSL 值放在一起，确保在网页、印刷和设计文档中保持一致。
常见问题
HEX、RGB、HSL 有什么区别？
HEX 用十六进制表示颜色，例如 #8AD0FF。RGB 用数值表示红、绿、蓝的强度，而 HSL 通过色相、饱和度、明度来描述颜色。
应该使用哪种格式？
HEX 简单直接，在网页和设计文档中最为常用。需要直接调整颜色通道时用 RGB 更方便，想要直观地改变色相或明度时则推荐 HSL。
透明度如何体现在颜色代码中？
带透明度的 HEX 值以 8 位代码显示，即在常规 6 位代码后追加 alpha 值。例如 #8AD0FFCC 中，最后两位就代表透明度。
6 位和 8 位 HEX 有什么区别？
6 位 HEX 只包含红、绿、蓝三种值。8 位 HEX 在末尾增加了 alpha 值，用来表示透明度。
透明度 100% 和 0% 分别代表什么？
100% 表示完全不透明，0% 表示完全透明。中间的值会生成半透明颜色，让背景透显出来。
RGB 的取值范围是多少？
RGB 值中，红、绿、蓝各自的范围是 0 到 255。数值越大，对应颜色成分越强。
HSL 中的各个值代表什么？
H 是色相，通常是 0 到 359 度之间的值。S 是饱和度，L 是明度，两者都以百分比表示。
取色器在所有浏览器中都能用吗？
支持情况取决于浏览器和环境。在不支持的环境中，可以使用颜色输入框或预设颜色。
选择预设颜色后还能编辑吗？
可以。选择预设后，你可以调整 HEX、RGB、HSL 值或透明度来微调颜色。
复制按钮会复制什么值？
每个复制按钮都会复制当前颜色在该格式下的值。你可以只复制需要的 HEX、RGB 或 HSL 值。
我输入的颜色会发送到服务器吗？
不会。所有处理均在你的浏览器内完成，你的颜色值和转换结果绝不会被传输到服务器。
相关工具
