Teyvat Palette提瓦特色卡
场景库
GitHub
画廊
「永恒绿洲」·暖霭
须弥温软浮游梦境

「永恒绿洲」·暖霭

The Orchard of Pairidaeza in Warm Haze

色卡

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

重构渐变

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

0%fbf4c224%bc8f8548%627c6776%6189cd100%547f46

为什么和谐

顶端那一撮不必是另一件东西,它可以是同一件东西离你最近的那一段——介质按距离折价的画面,彩度额度就是「近处还留了多少面积」的价钱。「永恒绿洲」八条色相带全部有货,中位数却只有 0.060;而左上角那片树冠(15494 个像素)彩度 0.044、下缘那几片大叶(18173 个像素)0.097,两者色相只差 13°,浓度差 2.2 倍。最艳的 4000 个像素分成四撮,重心分别是 (0.66, 0.87)、(0.33, 0.95)、(0.33, 0.96)、(0.71, 0.77),合计 3940 个全在画框下缘。想给一张雾景一个焦点,别去加饱和度——把一样东西挪到雾的前面,额度自己就出来了。

01

色相全在,浓度全交

八条色相带没有一条空着:红 8.85%、橙 20.57%、黄 11.36%、绿 22.95%、青 1.35%、蓝 2.06%、紫 18.03%、粉 7.82%。这种宽度通常伴着高中位数,这里却是 0.060,四张须弥里最低的一档。占面积最大的那一族——20.57% 的橙霭,实测 L 0.69 / 彩度 0.057 / 色相 32°——就是那层介质本身。它没有把画面收进一个色相,而是把每一族都按住在同一个浓度上。色域宽不宽和浓不浓是两笔账,别用一个「饱和度」旋钮同时管。

02

同一批树冠,近的浓一倍

左上角那片树冠(0.05, 0.05 起,只算 90°–165°)15494 个像素,实测 L 0.56 / 彩度 0.044 / 色相 151°;下缘那几片大叶(0.60, 0.82 起)18173 个像素,L 0.55 / 彩度 0.097 / 色相 138°。面积几乎相同、明度只差 0.01、色相只差 13°,浓度却是 2.2 倍。这层霭不搬色相,它只按距离收彩度——所以「远」在这张画里不是一个色相事件,是一张浓度的价目表。近水(0.28, 0.90 起)彩度 0.113 对远处水面(0.35, 0.55 起)0.040,同一件东西,同一个结论。

03

额度 0.058 全长在下缘

最艳的 4000 个像素:1458 个在 120°–150°、重心 (0.66, 0.87),1303 个在 270°–300°、重心 (0.33, 0.95),851 个在 240°–270°、重心 (0.33, 0.96),328 个在 90°–120°、重心 (0.71, 0.77)——3940 个的重心全在画面下缘,分别是那几片叶和那段最近的水。p99 0.118 减中位数 0.060,额度 0.058,这条下缘就是它的全部来源。做界面同理:想在一片统一的底子上开一个焦点,不必给它更高的饱和度,只要让它站在介质的前面,同一个颜色就自动变成峰值。

带走这组颜色

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

/* 「永恒绿洲」·暖霭 · The Orchard of Pairidaeza in Warm Haze — Teyvat Palette */
:root {
  --sun-crown: oklch(0.96 0.065 101); /* 冠顶金 #fbf4c2 */
  --warm-haze: oklch(0.69 0.057 32); /* 霞霭橙 #bc8f85 */
  --cliff-rose: oklch(0.66 0.047 1); /* 崖粉 #ac8790 */
  --far-canopy: oklch(0.56 0.044 151); /* 远林霜 #627c67 */
  --near-water: oklch(0.63 0.113 261); /* 汀水紫 #6189cd */
  --near-leaf: oklch(0.55 0.097 138); /* 近叶绿 #547f46 */
  --gradient-the-orchard-of-pairidaeza: linear-gradient(200deg, oklch(0.96 0.065 101) 0%, oklch(0.69 0.057 32) 24%, oklch(0.56 0.044 151) 48%, oklch(0.63 0.113 261) 76%, oklch(0.55 0.097 138) 100%);
}

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