Teyvat Palette提瓦特色卡
场景库
GitHub
画廊
维卡拉商栈·白照
须弥昼曝晒端整空阔

维卡拉商栈·白照

Wikala Funduq at White Noon

色卡

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

重构渐变

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

0%2c513d14%365b5130%21634c48%a3d89f70%d4da5a100%d2d7c7

为什么和谐

上下靠明度分开,前提是两端先收进同一族色相:同一对矩形量维卡拉商栈的上下缘,明度是 0.34 对 0.87——差 0.53,而色相 158° 对 123° 同在绿青一族,彩度 0.043 对 0.023 都低。全图 120°–180° 的绿青带一带就吃掉 610,777 个像素,而下缘石地那块矩形最艳的 3% 也只有彩度 0.030。色相和彩度双双让开,那 0.53 才会被读成「阳光落在石头上」,而不是「换了一种材料」。同一批的〈沙普尔旅舍·崖荫〉把这笔差额整个记在彩度上(上下明度都是 0.33),两张都分得开——分得开是共同项,读作什么地方,是那根轴决定的。

01

同一面墙,日照只买明度

画面右半那面被太阳打亮的瓦墙实测 L 0.83 / 彩度 0.096 / 色相 143°,左半背光的同一种瓦墙 L 0.45 / 彩度 0.076 / 色相 167°:明度差 0.38,彩度只差 0.020,色相 24°。直射光在这张画里几乎只走明度这一根通道。而 120°–180° 的绿青带共 610,777 个像素、均值 L 0.44 / 彩度 0.057——大半张画是同一种釉瓦,它被切成明暗两半,对称构图就有了左右。想表现强烈的日照,别顺手加饱和度;把明度差做到 0.38、彩度差留在 0.02 以内,它才像光,不像两桶漆。

02

地面没有立场,明度那一笔才花得干净

下缘那片石地 L 0.87 / 彩度 0.021 / 色相 121°,连它最艳的 3% 也只到 0.030、最大值 0.042——整块地面压在无彩线 0.025 附近,而全图彩度中位数是 0.045,它只有一半。正因为地面不带色相立场,它和上缘瓦顶之间那 0.53 的明度差没有被任何色相干扰,读作「同一片光下的两级」。倒过来想:这块地要是也上了釉,0.53 立刻变成两种材料的对峙。要靠明度讲空间,先找一块最大的面,把它的色相清空。

03

一畦黄花顶着天花板,而它并没换族

正中那畦黄花是全图彩度最高的一小撮:最艳的 3% 实测 L 0.86 / 彩度 0.151 / 色相 112°,全图彩度最大值 0.194 也落在绿带里;而真正的暖色——330°–90° 那一整片窗口——全图只有 1,582 个像素(census 里橙 0.03% 加黄 0.15%)。看着是黄花,实测 112°,还在绿黄之间,一步都没走出主色族。它靠的是坐在 L 0.87 的白石地上,成了整张对称构图的正中心。这是明度那一笔用干净之后的红利:底下越素,一撮高彩度越不需要面积,也越不需要一个新色相。

带走这组颜色

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

/* 维卡拉商栈·白照 · Wikala Funduq at White Noon — Teyvat Palette */
:root {
  --eave-deep-green: oklch(0.4 0.054 159); /* 檐顶深绿 #2c513d */
  --arch-pillar-stone: oklch(0.44 0.046 174); /* 拱柱石青 #365b51 */
  --shaded-tile-teal: oklch(0.45 0.076 167); /* 荫瓦青 #21634c */
  --sunlit-tile-green: oklch(0.83 0.096 143); /* 日照瓦绿 #a3d89f */
  --flowerbed-yellow: oklch(0.86 0.151 112); /* 花圃嫩黄 #d4da5a */
  --sunbleached-flagstone: oklch(0.87 0.021 121); /* 晒白石地 #d2d7c7 */
  --gradient-wikala-funduq: linear-gradient(180deg, oklch(0.4 0.054 159) 0%, oklch(0.44 0.046 174) 14%, oklch(0.45 0.076 167) 30%, oklch(0.83 0.096 143) 48%, oklch(0.86 0.151 112) 70%, oklch(0.87 0.021 121) 100%);
}

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