.webp&w=3840&q=75)
Sword and Strongbox Secure Transport Agency, Sun-Bleached
点击色块复制 HEX;悬停查看 OKLCH 值。
从场景蒸馏出的渐变,按停靠点从左到右展开;成品角度 200°(hero 与导出使用),画廊卡片统一以 135° 斜向展示。
「在不在阳光下」可以完全不记在明度上:同一堵墙,受光的一段实测 L 0.62 / 彩度 0.014 / 130°,背光的一段 L 0.59 / 0.036 / 231°——明度只差 0.03,彩度差 2.6 倍,色相隔了 101°。这幅画 62.42% 的无彩全是被太阳照着的面:白光把它照到的东西洗成灰,阴影才是这里唯一发颜色的光源。想让一大片浅色材质有层次又不脏,别用明暗画阴影,用「受光洗白、背光染蓝」,明度留给构图。
CSS 变量、Tailwind v4 主题或 SVG,一键复制到你的项目。
/* Sword and Strongbox Secure Transport Agency·晒白 · Sword and Strongbox Secure Transport Agency, Sun-Bleached — Teyvat Palette */
:root {
--sunbleached-flagstone: oklch(0.82 0.02 125); /* 曝白石 #c1c7b9 */
--shadowed-flagstone: oklch(0.56 0.033 177); /* 影里石 #607b74 */
--shaded-wall: oklch(0.59 0.036 231); /* 背光墙 #68828f */
--banner-vermilion: oklch(0.5 0.107 33); /* 幡朱 #96493a */
--sunlit-splash: oklch(0.74 0.147 33); /* 泼溅红 #f9856c */
--rooftop-tree: oklch(0.74 0.162 129); /* 檐树绿 #8bbe42 */
--gradient-sword-and-strongbox-secure-transport-agency-point-of-interest: linear-gradient(200deg, oklch(0.82 0.02 125) 0%, oklch(0.74 0.147 33) 14%, oklch(0.74 0.162 129) 28%, oklch(0.5 0.107 33) 48%, oklch(0.56 0.033 177) 72%, oklch(0.59 0.036 231) 100%);
}1080×1350 的 PNG,原图、色卡与色值都在里面——存下来直接发。