颜色转换器
支持HEX、RGB、HSL、HSV颜色格式转换 - 实时预览、快速转换
颜色预览
颜色信息
| 格式 | 值 |
|---|---|
| HEX | #000000 |
| RGB | rgb(0, 0, 0) |
| HSL | hsl(0, 0%, 0%) |
| HSV | hsv(0, 0%, 0%) |
| 十进制 | 0 |
常用颜色库
颜色格式详细说明
HEX（十六进制）格式
使用6位十六进制数字表示颜色，每两位分别代表红、绿、蓝三个通道。
格式： #RRGGBB
示例： #FF0000（红色）、#00FF00（绿色）、#0000FF（蓝色）
范围： 00-FF（0-255）
最佳使用场景：
- ✅ CSS样式编写
- ✅ HTML颜色属性
- ✅ 网页设计
- ✅ 设计工具（Figma、Photoshop）
- ✅ 品牌色彩代码
- ✅ 最紧凑的格式，易于复制粘贴
RGB（红绿蓝）格式
使用三个0-255的数字分别表示红、绿、蓝三个颜色通道的强度。
格式： rgb(R, G, B)
示例： rgb(255, 0, 0)（红色）、rgb(0, 255, 0)（绿色）
范围： 0-255
最佳使用场景：
- ✅ CSS样式编写
- ✅ 动态颜色计算
- ✅ JavaScript编程
- ✅ 需要调整单个通道时
- ✅ 图像处理和分析
- ✅ 屏幕显示颜色
HSL（色调、饱和度、亮度）格式
基于人类视觉感知的颜色模型，更直观地表示颜色特性。
格式： hsl(H, S%, L%)
示例： hsl(0, 100%, 50%)（红色）、hsl(120, 100%, 50%)（绿色）
参数说明：
- H（色调）：0-360°，0=红、120=绿、240=蓝
- S（饱和度）：0-100%，0=灰色、100=纯色
- L（亮度）：0-100%，0=黑色、50=正常、100=白色
最佳使用场景：
- ✅ 设计系统和主题
- ✅ 颜色变体生成
- ✅ 深色/浅色模式切换
- ✅ 颜色调和和搭配
- ✅ 用户界面设计
- ✅ 最符合人类直觉
HSV（色调、饱和度、明度）格式
另一种基于人类感知的颜色模型，常用于图像处理和设计工具。
格式： hsv(H, S%, V%)
示例： hsv(0, 100%, 100%)（红色）、hsv(120, 100%, 100%)（绿色）
参数说明：
- H（色调）：0-360°，同HSL
- S（饱和度）：0-100%，0=灰色、100=纯色
- V（明度）：0-100%，0=黑色、100=最亮
最佳使用场景：
- ✅ 图像处理软件
- ✅ 颜色选择器
- ✅ 设计工具（Photoshop、Illustrator）
- ✅ 颜色分析
- ✅ 视频编辑
- ✅ 专业设计工作流
颜色格式对比
| 格式 | 示例 | 优点 | 缺点 | 主要用途 |
|---|---|---|---|---|
| HEX | #FF0000 | 紧凑、易读、广泛支持 | 不直观、难以调整 | Web开发、CSS |
| RGB | rgb(255,0,0) | 直观、易于计算、编程友好 | 不够紧凑 | 编程、动态颜色 |
| HSL | hsl(0,100%,50%) | 最直观、易于调和、易于变体 | 支持度不如HEX | 设计系统、主题 |
| HSV | hsv(0,100%,100%) | 专业工具支持、精确控制 | Web支持有限 | 设计工具、图像处理 |
使用建议
🎨 设计师：优先使用HSL或HSV，便于颜色调和和创建变体。
💻 前端开发：CSS中使用HEX或RGB，JavaScript中使用RGB便于计算。
🖼️ 图像处理：使用HSV或RGB，取决于具体的处理需求。
📱 移动应用：使用RGB或HEX，确保跨平台兼容性。
🎯 品牌管理：同时记录HEX和RGB，便于不同场景使用。
同类工具推荐
热门工具推荐
电功率计算器
专业的电功率计算器，支持功率(P)、电压(V)、电流(I)之间的自动计算。输入任意两个值，第三个值自动计算。适用于电气工程、电路设计、用电安全等场景。完全免费，精确计算。
立即使用一元二次方程计算
专业的一元二次方程在线求根计算器，支持一元二次方程求解、判别式计算、韦达定理验证、根的判定等功能。适用于学生数学学习、教师教学辅助、工程技术计算等场景。输入方程系数a、b、c，快速计算方程的根。
立即使用余数计算
专业的在线余数计算器，支持余数计算、求余运算、取模计算、整除判断等功能。适用于学生数学学习、教师教学辅助、程序员开发调试、日常分配计算等场景。输入被除数和除数，快速计算商和余数。
立即使用