在线调色板
工具简介
配色板工具帮助用户快速生成、调整、提取配色方案。支持多种配色模型:互补色(Complementary)、三等分色(Triadic)、分裂互补(Split-Complementary)、类似色(Analogous)、矩形(Tetradic)、单色(Monochromatic)。提供色盲模拟(红绿色盲/蓝黄色盲)、WCAG 对比度检测、十六进制/RGB/HSL 格式互转、一键复制颜色值、导出为 CSS/SCSS/Swift/XML 等代码格式。适合设计师、前端开发、品牌设计场景。
使用步骤
1
选择基础色
点击色卡上的基础色块,使用拾色器选择颜色,或粘贴十六进制值(支持 #xxx 和 #xxxxxx 简写)。
2
查看配色方案
工具自动生成 6 种配色方案的色板(互补/三等分/类似色等),点击切换不同方案预览。
3
导出使用
点击具体颜色值复制到剪贴板,或「导出」生成 CSS/SCSS/JSON 等代码片段,「色盲模拟」可预览视觉效果。
常见问题
什么是 WCAG 对比度?
WCAG(网页内容无障碍指南)定义了文字与背景色的最小对比度:AA 级 4.5:1(正文)/3:1(大文字);AAA 级 7:1(正文)/4.5:1(大文字)。本工具实时显示当前配色的对比度,辅助无障碍设计。
色盲模拟有什么用?
全球约 8% 男性、0.5% 女性有不同程度色觉障碍。通过模拟红绿色盲(最常见)、蓝黄色盲、全色盲下的显示效果,确保配色对色盲用户也具备区分度。
如何从图片提取配色?
点击「从图片提取」,上传图片,工具通过 K-means 聚类算法提取 5-8 个主色,生成配色方案,适合从品牌图、自然风景中提取灵感。
支持哪些代码格式导出?
支持 CSS 变量(:root { --color: #xxxxxx; })、SCSS 变量($color: #xxxxxx;)、Swift UIColor、XML 资源文件、JSON、PNG 色卡图片等 10+ 格式。