auto_ai 知识库

Appearance

一句话总结：2026 渐变回归（mesh gradient 主导）；灰阶死区是 sRGB 插值穿过低饱和区的产物——用 in oklch 插值或加中间色标修复；同色系明度渐变最安全，文本叠加必须测对比度。

2026 趋势 ​

  • 渐变回归：flat-color 反弹结束，维度感回归、渐变是主要载体
  • Mesh gradient 革命：多点混合有机流体色场成技术品牌主导风格（Apple 常态化）
  • 三家族：vivid brights（能量）/ refined pastels（柔和高级）/ deep tones（深沉）
  • Stripe 范本：渐变不作 loud hero，作模糊径向背景纹理层，低饱和邻近色
  • AI 工具惯例：紫渐变 = 创意/科技感；金融 SaaS 用同色系渐变最安全

渐变类型（从安全到大胆） ​

类型手法适用
同色系同色相内明度/饱和度过渡（深蓝→浅蓝）最安全优雅，金融/SaaS/品质感
邻近色色轮相邻（蓝→紫、橙→红）有活力不杂乱，社交/内容平台
互补色色轮相对（紫→黄）需技巧，中间易灰，配修复手段
Mesh多点混合有机流体技术品牌 hero，2026 主流

灰阶死区（核心原理） ​

渐变色深挖图.png

📌 技术总览图：wiki/attachments/渐变色深挖图.png（由 scripts/make-gradient-card.py 生成——含 sRGB vs OKLCH 插值对比、四类渐变示范、Stripe 范本与三家族）

  • 问题：sRGB 插值在互补色中间发灰（muddy middle）——插值直线穿过低饱和区
  • 修复 1（现代）：CSS Color Level 4/5 指定插值空间
    css
    background: linear-gradient(in oklch, #2563eb, #f59e0b);
color-mix(in oklab, firebrick, goldenrod);  /* Color 5 默认 oklab */
    OKLCH 沿色相弧走、保持彩度；老浏览器降级 sRGB 插值
  • 修复 2（兼容）：加中间色标绕开灰区
  • 调试清单：命名插值空间、检查 banding（色带）、midpoint、角度

最佳实践 ​

  • 文本叠加渐变必须测对比度，深浅两种文字都试
  • 渐变 ≠ 装饰：用于传达状态/层级（奖励卡薄荷→深绿、进度、hero 氛围）
  • 低饱和渐变显高级（Stripe）；高饱和渐变留 hero 与品牌时刻
  • 工具：mycolor.space、ysdaima 生成器（in oklch 多节点）、WebGradients/Eggradients、思酷素材 100 款、Mew Design AI 生成器

相关概念 ​