Teyvat Palette提瓦特色卡
场景库
GitHub
画廊
希望之路·渊光
枫丹幽邃静水微明

希望之路·渊光

Chemin de L'Espoir in Abyssal Light

色卡

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

重构渐变

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

0%024b6a30%025b6358%41dbec78%00e2ef100%0151ab

为什么和谐

面积、彩度天花板、明度天花板,一个色相族最多拿两样:这片深水里蓝占 84.73%,也握着 0.250 的彩度峰值(最艳的 4000 个像素 4000/4000 落在 240°–270°),第三样就整根还了出去——最亮的 3584 个像素全部落在 196°–206°,属于只占 15.14% 的青。分完之后,画面其余的一切没有通道可用:一半的像素挤在 L 0.33 到 0.39 的六个百分点里,只能靠色相互相分开。

01

主色族拿了两样

蓝带 210°–270° 占 84.73%,均值 L 0.41 / 彩度 0.093;最艳的 4000 个像素 4000/4000 落在 240°–270°,均值 L 0.47 / 彩度 0.185、重心 (0.42, 0.62),全图峰值 0.250。落到东西上是两丛发光的海藻:左下那片最艳的 3% 是 L 0.45 / 彩度 0.159 / 257°,中央那丛只统计 240°–270° 的像素是 L 0.41 / 0.122 / 251°。〈莫尔泰区·晴翠〉同样是一张八成蓝的枫丹画,蓝占 80.12%,可 0.200 的天花板归了只占 7.50% 的绿;这里主色族自己把它拿走了,而代价立刻出现在下一条。

02

明度那一样整根还了出去

最亮的 4000 个像素分在七格上,合计 3584 个,色相全部落在 196°–206°,L 0.82 到 0.85、彩度 0.126 到 0.143。它们是左侧那排发光珊瑚(重心 (0.08, 0.30) 与 (0.28, 0.28))和谷底那道亮着的石门(重心 (0.58, 0.69) 与 (0.61, 0.67))——都属于只占 15.14% 的青带。青带的彩度均值 0.074 比蓝带的 0.093 还低,峰值 0.168 也够不着 0.250:它拿明度,而且只拿明度。要在一片单色调里放光,别让光和底色是同一族——偏出去二三十度,再把明度的天花板整根交给它。

03

剩下的一切只剩色相可用

明度 p01 是 0.33、p50 是 0.39:一半的画面挤在六个百分点里,而这张画读作深渊。三样完全不同的东西量下来几乎同亮——右侧崖体 L 0.39 / 彩度 0.082 / 235°,中央那面石墙 L 0.39 / 0.067 / 208°,左上那段砌石 L 0.43 / 0.073 / 206°——把它们分开的只有 29° 的色相。而备用通道一根都没有:无彩像素 0.00%,330°–90° 的暖色搜索返回 nothing matched,连那几条看着有黄条纹的鱼实测也是 L 0.51 / 彩度 0.096 / 216°,同一矩形里的暖色搜索一样是零;全图 99.99% 关在 165°–270° 这 105° 里。做暗场色板先把这三样分配清楚:一个色相拿满两样,剩下的东西就只能靠色相活着,而色轮上你只剩一百来度。

带走这组颜色

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

/* 希望之路·渊光 · Chemin de L'Espoir in Abyssal Light — Teyvat Palette */
:root {
  --abyss-blue: oklch(0.39 0.082 235); /* 渊蓝 #024b6a */
  --algal-flare: oklch(0.45 0.159 257); /* 藻焰蓝 #0151ab */
  --coral-glow: oklch(0.83 0.142 202); /* 珊瑚白光 #00e2ef */
  --gate-light: oklch(0.82 0.126 206); /* 门光青 #41dbec */
  --masonry-teal: oklch(0.43 0.073 206); /* 砌石青 #025b63 */
  --gradient-chemin-de-lespoir: linear-gradient(225deg, oklch(0.39 0.082 235) 0%, oklch(0.43 0.073 206) 30%, oklch(0.82 0.126 206) 58%, oklch(0.83 0.142 202) 78%, oklch(0.45 0.159 257) 100%);
}

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