Paletton

Paletton：专业在线配色方案设计工具

核心功能

• 色轮配色引擎：基于色相、饱和度、亮度的交互式色轮，支持单色、互补、三色、四色等经典配色模式
• 实时预览：调整颜色时，网页界面、UI元素、文本背景等场景同步更新效果
• 预设方案库：内置数百种行业配色模板（扁平设计、Material Design、复古风格等）
• 颜色管理：可保存/导出调色板（HEX/RGB/HSL/CSS代码），支持PDF/PNG导出
• 无障碍检测：自动对比度检测，确保配色符合WCAG 2.1 AA/AAA标准

适用场景

操作流程

1. 选择配色模式：点击色轮上的预设按钮（单色/互补/三色/四色/自定义）
2. 调整颜色参数：拖动色相滑块或直接输入色值（支持HEX/RGB/HSL）
3. 预览效果：在右侧面板切换“网页”“UI”“文本”等场景模板
4. 导出方案：点击“保存调色板”生成代码片段，或下载PDF/PNG文件

进阶技巧

• 锁定颜色：在色轮上右键锁定某个颜色，调整其他颜色时该色值保持不变
• 随机生成：点击“随机”按钮快速获得灵感，不满意可撤回
• 对比度测试：在“无障碍”选项卡中查看前景/背景色对比度数值及AA/AAA评级
• 颜色历史：自动记录最近10次使用的颜色，方便回溯调整

技术优势

• 纯前端实现，无需注册即可使用
• 支持触屏操作（平板/手机端适配良好）
• 导出代码兼容CSS、SASS、LESS、Stylus等预处理器
• 颜色公式基于CIE Lab色彩空间，确保跨设备显示一致性

典型应用案例

• 品牌视觉系统：为初创公司生成主色+辅助色+强调色组合（如：主色#2C3E50，辅色#E74C3C，强调色#3498DB）
• 数据仪表盘：为KPI指标创建渐变色序列（如：从#27AE60到#E67E22指示绩效等级）
• 移动端界面：模拟iOS/Android系统配色规范，测试深色模式兼容性