颜色选择器
转换颜色代码
选择颜色
R
G
B
颜色值
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
调色板
点击选择并复制颜色格式
HEX
#RRGGBB格式。CSS中最常用
RGB
红、绿、蓝（0-255）
HSL
色相、饱和度、亮度。直观的颜色调整
HSV/HSB
色相、饱和度、明度。用于图形工具
OKLCH
感知均匀的现代CSS颜色空间
RGBA/HSLA
包含Alpha（透明度）通道
什么是颜色选择器？
颜色选择器（Color Picker）是一款在线工具，可以在不同颜色模型之间转换代码，并直观地选择所需颜色。在Web开发、UI/UX设计、图形设计等领域，准确的颜色代码至关重要。该工具支持HEX、RGB、HSL、HSV、OKLCH等主要颜色格式，通过直观的颜色滑块和调色板探索颜色，并可即时复制代码。还支持Alpha（透明度）通道，可处理半透明颜色。
- HEX、RGB、HSL、HSV、OKLCH 5种颜色格式相互转换
- 直观的颜色滑块和颜色区域选择
- 支持Alpha（透明度）通道调节
- 一键复制颜色代码
- 随机颜色生成功能
- 提供基础/高级调色板
使用方法
- 1
选择颜色
拖动颜色滑块或在颜色区域中点击选择所需颜色。也可以直接输入HEX代码等。
- 2
确认格式
选定的颜色会自动转换为HEX、RGB、HSL、HSV、OKLCH等所有格式并显示。
- 3
调节透明度
在Alpha标签中可以在0~100%范围内调节透明度，创建半透明颜色。
- 4
复制代码
点击所需颜色格式的值即可自动复制到剪贴板。可直接粘贴到CSS、设计工具等。
常见问题
使用技巧
- HSL格式只需调节亮度（L）就能轻松创建同一颜色的明暗变体，适合主题色设计工作
- 使用随机颜色功能获得灵感后，再用颜色滑块微调可以创建富有创意的调色板
- 配合CSS custom property（变量）使用，可以方便地切换暗色/亮色模式
- 点击调色板中常用的颜色可以快速复制代码
- 利用OKLCH格式可以设计在感知上饱和度和亮度一致的颜色系统