颜色代码转换器
多格式颜色代码转换工具，支持HEX、RGB、HSL等常用颜色格式
颜色选择器
#FF0000
颜色转换器
HEX
#FF0000
RGB
rgb(255, 0, 0)
HSL
hsl(0, 100%, 50%)
HSV
hsv(0, 100%, 100%)
CMYK
cmyk(0%, 100%, 100%, 0%)
LAB
lab(53.24, 80.09, 67.2)
对比度检测
#000000
#ffffff
21:1
对比度
Sample Text
示例文本 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
WCAG AA 正常文本:通过
WCAG AAA 正常文本:通过
WCAG AA Large:通过
颜色历史
暂无颜色历史
🎨 快速选色
品牌色彩
流行色调
快速操作
功能特色
- ✓支持HEX、RGB、HSL、HSV、CMYK、LAB格式转换
- ✓可视化颜色选择器
- ✓智能调色板生成
- ✓WCAG对比度检测
- ✓颜色历史记录
- ✓一键复制所有格式
当前颜色
#FF0000
亮度：50%
饱和度：100%
色彩理论与设计指南
深入理解色彩科学，掌握专业设计配色技巧
色彩理论基础
色彩三要素
色相 (Hue)
颜色的基本属性，0-360度的色轮位置
饱和度 (Saturation)
颜色的纯度，0-100%的鲜艳程度
亮度 (Lightness)
颜色的明暗程度，0-100%的亮度值
色彩模型对比
| 模型 | 用途 | 特点 |
|---|---|---|
| RGB | 屏幕显示 | 光学混色 |
| CMYK | 印刷输出 | 油墨混色 |
| HSL | 设计调色 | 直观调节 |
| LAB | 色彩科学 | 感知均匀 |
温度与情感
🔥 暖色调
热情、活力
温暖、友好
快乐、乐观
❄️ 冷色调
清新、平静
信任、专业
自然、和谐
配色方案
单色配色
使用同一色相的不同亮度和饱和度
类似配色
选择色轮上相邻的颜色
互补配色
选择色轮上相对的颜色
三角配色
在色轮上等距离选择三种颜色
设计应用
🌐 网页设计
- • 主色调建立品牌形象
- • 强调色引导用户操作
- • 中性色保持内容可读性
- • 对比度确保可访问性
📱 移动应用
- • 简化调色板避免混乱
- • 考虑不同屏幕和环境
- • 使用系统色彩规范
- • 支持深色模式切换
🎨 品牌设计
- • 建立一致的色彩系统
- • 考虑文化背景差异
- • 适配多种媒介输出
- • 预留色彩扩展空间
📊 数据可视化
- • 使用感知均匀的色阶
- • 避免色盲用户困扰
- • 区分分类和数值数据
- • 保持色彩语义一致性
色彩心理学
红色
热情、紧急、力量
适用：警告、促销、餐饮
橙色
友好、创造、活力
适用：娱乐、体育、创意
黄色
快乐、乐观、注意
适用：儿童、警示、快餐
绿色
自然、安全、增长
适用：环保、健康、金融
蓝色
信任、专业、冷静
适用：科技、医疗、商务
紫色
神秘、奢华、创意
适用：美容、艺术、高端
可访问性指南
✅ WCAG 标准
AA 级别： 4.5:1 (普通文字)
AAA 级别： 7:1 (高标准)
大文字： 3:1 (18pt+)
🎯 设计建议
- • 不仅依赖颜色传达信息
- • 提供足够的颜色对比度
- • 考虑色盲用户体验
- • 测试不同光照条件
🔧 测试工具
• Colour Contrast Analyser
• WebAIM Contrast Checker
• Stark (Figma/Sketch)
• Sim Daltonism (Mac)
最佳实践
✅ 推荐做法
✓建立系统性的色彩规范
✓使用60-30-10配色法则
✓保持品牌色彩一致性
✓考虑打印输出效果
✓测试多种设备显示
✓提供暗色模式支持
❌ 避免错误
✗过度使用鲜艳颜色
✗忽视色彩对比度要求
✗在不同平台不统一
✗不考虑文化色彩含义
✗颜色传达关键信息
✗没有考虑色盲用户