01 / COLOR LAB色彩实验

从一个颜色，
建立完整设计系统。

FROM ONE COLOR TO A DESIGN SYSTEM.

输入一个基础色，生成配色关系、设计角色、完整色阶与实际使用建议。

INPUT / 01

基础颜色

BASE COLOR

#5B6CFF

配色逻辑 / COLOR LOGIC
02 / DESIGN ROLES

设计角色

YOUR PALETTE

不只是颜色组合，而是明确每个颜色在设计中的任务。

03 / DESIGN JUDGEMENT

配色判断

COLOR DECISION

基于明度、色度与色相，快速判断当前颜色更适合承担什么设计角色。

RULE BASED / 规则计算
04 / PERCEPTUAL SCALE

感知色阶

COLOR SCALE

以基础颜色作为 500，使用 OKLCH 生成感知更加均匀的 50–950 色阶。

05 / LIVE PREVIEW

实际预览

LIVE PREVIEW

把配色放进真实设计层级，再判断它是否真正可用。

LIVE CANVASWEB / DIGITAL PRODUCT
COLOR SYSTEM / 001

Design with
clear intention.

Build expressive digital products with a color system made for real interfaces.

SHIDAFA® DESIGN ARCHIVESCROLL TO EXPLORE  ↓
06 / ACCESSIBILITY

对比检查

CONTRAST CHECK / WCAG

使用 WCAG 相对亮度公式检查正文、按钮和关键色彩组合。

07 / EXPORT

复制与导出

DESIGN HANDOFF

复制后可直接进入 Photoshop、Illustrator、Figma、After Effects 或 CSS 工作流。