几秒钟做出一整套界面配色,上线之前就先验证它。
色相与色度两个滑块,即可生成完整而统一的色彩体系:背景、文本、边框、操作与提醒。所有颜色实时更新,拖动时就能看到整套系统随之变化。
基于 OKLCH
颜色在 OKLCH 空间中生成,因此整套配色的明度在视觉上保持均匀。红色不会比黄色更暗,每个色彩标记都保持你想要的分量。超出色域的颜色通过降低色度来收敛,绝不偏移色相。
在真实界面中查看
导航栏、
几秒钟做出一整套界面配色,上线之前就先验证它。
色相与色度两个滑块,即可生成完整而统一的色彩体系:背景、文本、边框、操作与提醒。所有颜色实时更新,拖动时就能看到整套系统随之变化。
基于 OKLCH
颜色在 OKLCH 空间中生成,因此整套配色的明度在视觉上保持均匀。红色不会比黄色更暗,每个色彩标记都保持你想要的分量。超出色域的颜色通过降低色度来收敛,绝不偏移色相。
在真实界面中查看
导航栏、主卡片、按钮、搜索框和状态标签组成的示例界面,会实时使用你的配色渲染。这是判断一套配色是否站得住脚的最快方式。
WCAG 对比度,实时评级
每一组关键搭配都按 WCAG 2.1 打分:背景上的文本、次要文本、主次操作以及每种提醒色。每一组都会给出 AAA、AA、AA Large 或 Fail 评级,并附精确比值。你在应用里就能发现问题,而不是等到审核。
色觉模拟
以红色盲、绿色盲、蓝色盲和全色盲的视角查看配色,与原图并排对照。凡是承载语义却不再可区分的颜色组合都会列出,并说明是色觉障碍导致的,还是这两种颜色本就过于接近,两者的解决办法并不相同。
导出到你的工作流
• CSS 自定义属性(OKLCH 或 HSL)
• 同时包含浅色与深色的 CSS 主题
• SwiftUI 的 Color 扩展
• Android XML 颜色资源
可复制到剪贴板,也可保存为文件。
随身携带的预设
保存喜欢的配色,重命名,一键重新应用。预设通过你自己的 iCloud 账户私密同步。
分享配色
把整套配色生成图片,存到照片,或发送给需要的人。
此外
• 浅色与深色主题一键切换
• 轻点任意色块即可复制十六进制值
• 每步编辑均可撤销
• 在真实场景中查看提醒色及其对比度
• 支持 iPhone 与 iPad,大屏采用左右分栏布局
无需账户。不做追踪。不收集分析数据。预设和设置始终属于你。