色彩，是产品递给用户的第一张名片。
在「快缩短网址」（suo.run）的世界里，我们同样相信：一个好色盘，胜过千言万语。
以下内容，将带你拆解 Apple 与 Google 的配色心法，并用 HSB 模型为「快缩短网址」量身打造一套优雅、克制、可生长的色彩系统。

一、为品牌「定调」
1. 产品性格
• 极速：毫秒级跳转，不容拖泥带水。
• 轻盈：短链即极简，界面亦如此。
• 可信：每一次点击都需安全抵达。
因此，主色需兼具「速度感」与「安全感」。



2. 用户画像
• 一线运营、增长黑客、内容创作者，年龄 20-35，男女比例 6:4。
• 高频使用夜间模式，偏好低饱和、高对比。
• 文化语境：中文互联网，红色代表「行动」，蓝色代表「可靠」。

3. 色彩心理学速记
红：冲动、促销
橙：温暖、活力
黄：提醒、警示
绿：成功、通行
蓝：科技、信任
紫：尊贵、神秘

二、寻找灵感
• BrandColors：抓取 Stripe、Spotify、Slack 的色卡做情绪板。
• Dribbble / Behance：搜索「minimal dashboard」「dark mode SaaS」。
• Material UI：提取 Google Blue #1A73E8 与 Neutral Grey #202124。
• 室内设计：借鉴 MUJI 的暖灰与留白，让呼吸感落在界面上。



三、HSB 构建法
1. 锚定品牌色
我们给「快缩短网址」设定品牌色：
H 210°（介于蓝与靛之间，传递科技可信）
S 85%（鲜明，却不刺眼）
B 90%（高亮，适配深色模式）
十六进制：#1A8CFF

2. 24 条色带
以品牌色为圆心，H 每 15° 取一色，形成 24 条环绕色带。
例：
H195° 为邻近冷色，H225° 为互补暖色。

3. 16 色相环精炼
剔除肉眼难辨差异，保留 16 级「可感知阶梯」。
每一级再微调 S 与 B，确保 WCAG 2.1 对比度 ≥ 4.5:1。

4. 亮度与饱和度梯度
主色 #1A8CFF
‑20 B → #1473D6（悬浮态）
‑40 B → #0F5AA8（点击态）
+20 B → #4DA6FF（禁用反置）



辅助色示例：
成功绿：H 145° S 70% B 75% → #2ECC77
警示黄：H 45° S 90% B 95% → #FFB800
错误红：H 355° S 85% B 85% → #FF3B4A

5. 中性色阶梯
Grey-900 #0D0D0F（标题）
Grey-700 #3A3A3C（正文）
Grey-500 #8E8E93（辅助文字）
Grey-200 #F2F2F7（分隔线）
Grey-50 #FFFFFF（背景）



6. 渐变策略
使用品牌色邻近 30° 的冷色做线性渐变：
左 #1A8CFF → 右 #5E7CE2
角度 135°，营造「由快到稳」的视觉隐喻。

四、落地到界面
• 主按钮：品牌色 #1A8CFF，圆角 6，阴影 Y2 Blur4 #1A8CFF20。
• 短链卡片：Grey-50 背景 + Grey-200 描边，激活态抬升 2dp。
• 夜间模式：Grey-900 背景，主色亮度降至 B 75%，避免眩光。
• 成功提示：Toast 背景 #2ECC77，文字反白。
• 错误提示：Toast 背景 #FF3B4A，文字反白。

五、工具链
• coolors.co：一键生成同频色板。
• Stark：Figma 插件，实时检测对比度。
• su.run/design-token：我们将上述变量输出为 JSON Token，供前端直接引用。

尾声
色彩不是调色板，而是产品人格的延伸。
在「快缩短网址」，我们希望每一次点击都像一次深呼吸——轻盈、迅捷、安心。
愿这套色彩系统，为你的下一帧界面，注入同样的灵魂。