
Wikala Funduq at White Noon
点击色块复制 HEX;悬停查看 OKLCH 值。
从场景蒸馏出的渐变,按停靠点从左到右展开;成品角度 180°(hero 与导出使用),画廊卡片统一以 135° 斜向展示。
上下靠明度分开,前提是两端先收进同一族色相:同一对矩形量维卡拉商栈的上下缘,明度是 0.34 对 0.87——差 0.53,而色相 158° 对 123° 同在绿青一族,彩度 0.043 对 0.023 都低。全图 120°–180° 的绿青带一带就吃掉 610,777 个像素,而下缘石地那块矩形最艳的 3% 也只有彩度 0.030。色相和彩度双双让开,那 0.53 才会被读成「阳光落在石头上」,而不是「换了一种材料」。同一批的〈沙普尔旅舍·崖荫〉把这笔差额整个记在彩度上(上下明度都是 0.33),两张都分得开——分得开是共同项,读作什么地方,是那根轴决定的。
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,原图、色卡与色值都在里面——存下来直接发。