🎨
颜色转换器
Live Preview在 HEX、RGB、HSL 颜色格式之间转换。
Supports #hex, rgb(r,g,b), hsl(h,s,l)
HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
HSV
hsv(217, 76%, 96%)
颜色模型详解（HEX/RGB/HSL）
颜色模型是表示颜色的数学系统。HEX（十六进制）是HTML和CSS中使用的6位代码，表示红、绿、蓝三个分量。RGB（红、绿、蓝）在数字成像中常用，每个通道使用0到255的十进制值。
HSL（色调、饱和度、亮度）对人类更直观，因为它以基本颜色（色调）、强度（饱和度）和亮度来描述颜色。了解这些模型有助于为您的设计和开发需求选择正确的格式，确保在不同平台和设备之间保持一致性。
如何使用此工具
- 在饱和度/亮度方块中拖动光标并使用色调滑块，通过可视化颜色选择器选择颜色。
- 或者，在"手动输入"字段中输入特定值（支持#hex、rgb或hsl格式）。
- 观察"预览"框以实时查看所选颜色。
- 在下方的HEX、RGB、HSL和HSV卡片中查看转换后的值。
- 点击任意卡片上的"复制"图标将该特定格式保存到剪贴板。
常见使用场景
- 网页设计：将设计工具中的颜色（通常为RGB/HSL）转换为CSS样式表中使用的HEX代码。
- 品牌一致性：确保您的品牌颜色在不同数字格式和媒体中准确呈现。
- UI开发：通过调整HSL中的亮度值，快速生成基础颜色的较浅或较深变体。
- 无障碍测试：使用预览检查所选颜色是否为可读文本和UI元素提供了足够的对比度。
专业技巧
- 设计按钮等UI组件时使用HSL，因为只需调整亮度值即可轻松创建悬停状态。
- 在CSS中使用透明度时，优先使用
rgba()或hsla()以获得更好的可读性和对alpha通道的控制。 - 始终检查颜色对比度，以确保您的设计对有视觉障碍的用户是无障碍的。