枫丹昼清透幽碧灵动

幽林雾道·碧昼

Foggy Forest Path in Teal Daylight

色卡

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

重构渐变

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

0%62cddb16%abfcfc40%3e949f62%7bbd5184%023934100%023536

为什么和谐

两个极值不必分给相对的两条边——摞在同一条中轴上,画面就从「有框」变成「有去处」:最亮的 2034 个像素在 (0.48, 0.31) 的水灵漩涡上,L 0.94;最艳的 3310 个在 (0.46, 0.67) 与 (0.49, 0.62) 的那片草地上,彩度 0.148 与 0.149。两个重心的横坐标只差 0.02,一个在天上、一个在地上,中间就是那条路。框的活交给第三根轴:左树 L 0.30、右树 0.30、下缘草 0.31。

三条边同一档暗,第四条被放走

左侧那株前景针叶树实测 L 0.30 / 彩度 0.050 / 195°,右侧那株 L 0.30 / 0.049 / 197°,下缘草坡 L 0.31 / 0.053 / 186°——三条边的明度差 0.01,彩度全部压在全图中位数 0.065 以下。第四条边不参与:上缘的天 L 0.77 到 0.83、彩度 0.093 到 0.100、色相 203°–208°,和三条暗边同族却亮出半个明度轴。〈明冠山地·素昼〉的框是四缘全落在中心的亮侧;这里只有三缘落在暗侧,而缺的那一缘正是主体进来的地方。框不必封闭——封闭的框没有入口。

最亮和最艳摞成一条竖线

最亮的 4000 个像素里 2034 个在 (0.48, 0.31),L 0.94 / 彩度 0.079 / 196°,那是悬在谷口的水灵漩涡;最艳的 4000 个里 2712 个落在 120°–150°(L 0.71 / 彩度 0.149、重心 (0.46, 0.67)),另有 598 个在 150°–180°(L 0.69 / 0.148、重心 (0.49, 0.62))。把那片草地单独取出来,它最艳的 3%(553 个像素)是 L 0.73 / 彩度 0.157 / 135°,全图峰值 0.179 就在这里。两个重心的横坐标是 0.48 与 0.46。〈德波大饭店·斜照〉把两个极值发给相对的两条边、让主体两样都不占;这张反过来把它们摞在一起,于是「最亮」和「最艳」不再是两个地标,是一条从天连到地的线。

一个极值只支一笔

漩涡拿了明度就不再要别的:色相 196°,和最暗的左树 195° 只差 1°;彩度 0.079,比它背后的天 0.093 还低。草地拿了彩度也不再要别的:L 0.71 到 0.73,正好夹在天的 0.79 和树的 0.30 中间。各支一笔,所以摞在一起也不打架。画面其余的部分连一笔都不支——那条看着像沙土的小路实测 L 0.41 / 彩度 0.071 / 173°,和树、和天同族;绿只占 6.33% 却握着 0.179 的天花板,占 76.54% 的青带彩度均值只有 0.067;对全图做 330°–90° 的暖色搜索,总共 2 个像素、彩度 0.027。做重点色同理:一个元素只准在一根通道上出格,第二根还回去,你就放得下不止一个重点。

带走这组颜色

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

/* 幽林雾道·碧昼 · Foggy Forest Path in Teal Daylight — Teyvat Palette */
:root {
  --open-sky: oklch(0.79 0.1 207); /* 林隙天青 #62cddb */
  --spirit-glow: oklch(0.94 0.079 196); /* 灵光白 #abfcfc */
  --path-end-green: oklch(0.73 0.157 135); /* 路尽绿 #7bbd51 */
  --far-ridge: oklch(0.62 0.083 206); /* 远岭青 #3e949f */
  --bank-grass: oklch(0.31 0.053 186); /* 岸草暗 #023934 */
  --frame-conifer: oklch(0.3 0.05 195); /* 缘树墨 #023536 */
  --gradient-foggy-forest-path: linear-gradient(180deg, oklch(0.79 0.1 207) 0%, oklch(0.94 0.079 196) 16%, oklch(0.62 0.083 206) 40%, oklch(0.73 0.157 135) 62%, oklch(0.31 0.053 186) 84%, oklch(0.3 0.05 195) 100%);
}

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

色卡