稻妻昼清荫幽静微凉

万端珊瑚侦探社·荫昼

Bantan Sango Detective Agency in the Shade

色卡

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

重构渐变

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

0%3c85c416%a881ba34%32693e55%202d3a74%506373100%817a84

为什么和谐

一片蓝是天还是影,量彩度就知道:这幅画 22.70% 的像素落在蓝带上,而全图最艳的 4000 个像素里一个蓝的都没有。210°–270° 的 199,894 个像素均值只有彩度 0.054,按彩度排最前面的 3%(5,997 个)才到 0.124,正好对上左上角露出来的那片天(0.120)。天光发到背光面上的那一份,色相原样、彩度砍掉一半以上——画阴影不要往黑压也不要往灰调,把天的色相按住不动,只动彩度。

两成的画面是蓝的,最艳的四千个像素里没有一个蓝

蓝带 22.70%,可全图彩度最高的 4000 个像素分给了右侧的松与草坡(2505 个,色相 139°)和屋顶那株樱(1431 个,313°),210°–270° 一个都没排上。原因在均值里:这 199,894 个蓝像素的彩度只有 0.054,而左上角那一小片真正的天是 0.120。看见一大片蓝先别记作天——天光原色转手一次就掉到一半以下。

色相一度不动,只有彩度在动

左上那块天 247°,长石阶上段 245°,侦探社那面背光的木墙 250°,整条蓝带的均值 251°——四个读数收在 6° 之内。而彩度从天的 0.120 掉到石阶的 0.035、木墙的 0.030。这幅画 45.10% 的像素在无彩阈值以下、彩度中位数只有 0.028,靠的全是这一手:阴影不是另调一个颜色,是同一个颜色的低彩度版本。

天可以只占一个画角,发出去的那份不变

〈八重堂·天青〉的蓝带占 49.95%,几乎整片是天,视平线以下那 74,563 个蓝像素是 L 0.40、彩度 0.046、色相 252°;这里天只剩左上一角,同样的背光蓝是 L 0.43、彩度 0.054、251°——色相差 1°,彩度差 0.008。两张画的天在取景里差了一倍多,它发到背光面上的那一份几乎没动。取景能决定你看见多少天,决定不了阴影是什么颜色;所以想改一幅画的整体色偏,改天的颜色,不要去改每一块阴影。

带走这组颜色

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

/* 万端珊瑚侦探社·荫昼 · Bantan Sango Detective Agency in the Shade — Teyvat Palette */
:root {
  --sky-corner: oklch(0.6 0.12 247); /* 一角天 #3c85c4 */
  --stair-shadow: oklch(0.49 0.035 245); /* 阶影蓝 #506373 */
  --eave-ink: oklch(0.29 0.03 250); /* 檐下墨 #202d3a */
  --petal-stone: oklch(0.59 0.016 318); /* 落瓣石 #817a84 */
  --pine-shade: oklch(0.47 0.09 149); /* 松影绿 #32693e */
  --sakura-crown: oklch(0.66 0.093 315); /* 樱冠紫 #a881ba */
  --gradient-bantan-sango-detective-agency: linear-gradient(155deg, oklch(0.6 0.12 247) 0%, oklch(0.66 0.093 315) 16%, oklch(0.47 0.09 149) 34%, oklch(0.29 0.03 250) 55%, oklch(0.49 0.035 245) 74%, oklch(0.59 0.016 318) 100%);
}

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

色卡