Teyvat Palette提瓦特色卡
场景库
GitHub
画廊
坚岩隘谷·晴昼
纳塔昼壮阔野性鲜亮

坚岩隘谷·晴昼

Tequemecan Valley in Clear Daylight

色卡

点击色块复制 HEX;悬停查看 OKLCH 值。

重构渐变

从场景蒸馏出的渐变,按停靠点从左到右展开;成品角度 190°(hero 与导出使用),画廊卡片统一以 135° 斜向展示。

0%6fafdd20%75b4ec58%5a763b100%864636

为什么和谐

多色相想读成一个地方,先把彩度对齐:这幅画三块大面积的平均彩度是 0.091(赭岩)、0.092(草原)、0.094(天空)——色相隔着 95° 和 111°,彩度却几乎一模一样,所以它们看着像同一场光下的三样东西,而不是三张贴纸。

01

三块大面积,彩度差不到 0.003

橙带 17.7%(均值 35°、彩度 0.091、L 0.47)、绿带 31.3%(130°、0.092、0.53)、蓝带 16.7%(241°、0.094、0.73)。彩度三项落在 0.091–0.094 的一线上,而色相跨了 206°。这是「统一」在配色里最便宜的做法:统一不必靠色相靠近,把彩度调到同一档就够——它相当于宣布这些颜色是同一盏灯照出来的。蒙德城与璃月港那一对讲的是同一个公式换身份,这一篇讲的是不同色相怎么共用一个身份。

02

赭与绿几乎同明度,分工交给了天空

岩 L 0.47 与草 L 0.53 只差 0.06,两块面积又是画面里最大的两块——按常理这么近的明度会互相震颤。真正稳住画面的是天空那 0.73:它比两者都高出 0.20 以上,一口气把明度的上限接管了。于是前后关系由「谁更亮」交给了「谁在上面」。要让两块大色块贴着同一明度共处,得有第三块面去承担明暗结构。

03

点缀色是唯一破格的一档

整幅画的彩度中位数 0.084、p99 0.154,而前景那几丛橙色树冠取最饱和的 3% 实测 L 0.70、彩度 0.175、色相 50°;最饱和的 4000 个像素平均 0.167,位置在 (0.28, 0.86)。它们的面积很小,却是唯一被允许越过 0.15 的东西。前面三块把彩度对齐成背景,点缀色才有地方可去——纪律不是为了压低所有颜色,是为了给一个例外腾出空间。

带走这组颜色

CSS 变量、Tailwind v4 主题或 SVG,一键复制到你的项目。

/* 坚岩隘谷·晴昼 · Tequemecan Valley in Clear Daylight — Teyvat Palette */
:root {
  --mesa-ochre: oklch(0.47 0.091 35); /* 岩壁赭 #864636 */
  --plateau-green: oklch(0.53 0.092 130); /* 台原绿 #5a763b */
  --valley-sky: oklch(0.73 0.094 241); /* 谷天蓝 #6fafdd */
  --flame-canopy: oklch(0.7 0.175 50); /* 焰冠橙 #f1771e */
  --far-ridge: oklch(0.75 0.104 246); /* 远岭青 #75b4ec */
  --gradient-tequemecan-valley: linear-gradient(190deg, oklch(0.73 0.094 241) 0%, oklch(0.75 0.104 246) 20%, oklch(0.53 0.092 130) 58%, oklch(0.47 0.091 35) 100%);
}

1080×1350 的 PNG,原图、色卡与色值都在里面——存下来直接发。