枫丹昼端庄空阔清亮

德波大饭店·斜照

Hotel Debord in Slanting Light

色卡

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

重构渐变

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

0%3b6bb516%50659344%646b8258%4b7f8070%476c3c82%9f823e100%9d8798

为什么和谐

同一族的第三种框,支点是位置:〈苍风高地·晴穹〉的框只由彩度画(上缘 0.121 对中心 0.073),〈明冠山地·素昼〉的只由明度画(四缘 0.87 / 0.71 / 0.71 / 0.65 全站在中心 0.61 的亮侧)——两篇的极值都留在画内、堆在同一侧。这里是两根轴各占一条边,而且都被画框裁开:最艳的 4000 个像素一个不漏地落在 240°–270° 这一个色相桶里、重心 (0.38, 0.07),那是从画外垂进来的两幅幡(彩度 0.128 与 0.117);最亮的 4000 个里有 3593 个压在下缘的日照石板上(L 0.93 与 0.94)。正中的饭店本体 L 0.53、彩度 0.037,低于全图彩度中位数 0.056,两样都不占——把彩度的顶和明度的顶发给相对的两条边,主体不必自己变强就当得上主体。

最艳的东西被画框切掉了

两幅垂幡从上缘探进画面,顶端和挂它们的杆子都不在画里。它们是全图彩度的天花板:左幡整块 L 0.53、彩度 0.128、259°,其中最艳的 3% 到 0.179,峰值 0.200;右幡 0.117。而背后那面巨墙无论量哪一处,Cmax 都只在 0.077–0.113 之间,饭店本体也只有 0.117——「最艳的 4000 个像素」除了这两幅幡无处可去。同族的另外两篇里,极值是完完整整待在画内的:〈苍风高地·晴穹〉的上缘彩度 0.121 对中心 0.073,〈明冠山地·素昼〉的四缘明度 0.87 / 0.71 / 0.71 / 0.65 对中心 0.61(两组数字均引自该两篇),它们靠「离中心多远」成框。这里多押了一道:把最强的一块色放在向画外延伸的位置,它连一件完整的东西都不是,就只能当边界,当不成主角。

最亮的一带铺在脚下

明度的顶在对面那条边上:最亮的 4000 个像素有 3593 个落在画面底部两格,L 0.93 与 0.94,重心 (0.71, 0.98) 和 (0.54, 0.95);下缘整条带子均值 L 0.67,而全图明度中位数是 0.50。这条带子还是全画唯一不姓蓝的大面——受日的石板 334°、L 0.65,退进影里就转成 287°、L 0.52。两个极值分在上下两缘,又分在两根不同的轴上,所以它们连彼此都不抢。

中心拿的是两个最低值

正中的饭店 L 0.53、彩度 0.037:比下缘暗 0.14,彩度不到左幡的三分之一,还是全画最接近中性的一块大面——全图无彩像素只有 8.56%,连背后那面看着是灰的巨墙,实测都是 265° 的紫蓝、彩度 0.078。龙脊雪山把冷与暖分给了四缘和中心;这里分的是明度和彩度,而且上下两缘各拿走一根轴。做版面同理:品牌色压在页眉、留白铺在页脚,版心什么都不用加就成了版心。

带走这组颜色

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

/* 德波大饭店·斜照 · Hotel Debord in Slanting Light — Teyvat Palette */
:root {
  --banner-blue: oklch(0.53 0.128 259); /* 幡蓝 #3b6bb5 */
  --wall-violet: oklch(0.51 0.078 265); /* 石壁紫 #506593 */
  --hotel-limestone: oklch(0.53 0.037 271); /* 灰岩白 #646b82 */
  --glass-teal: oklch(0.56 0.056 198); /* 彩窗青 #4b7f80 */
  --cypress-green: oklch(0.49 0.084 139); /* 柏影绿 #476c3c */
  --flowerbed-gold: oklch(0.62 0.094 86); /* 花坛黄 #9f823e */
  --sunlit-flagstone: oklch(0.65 0.036 334); /* 日照石粉 #9d8798 */
  --gradient-hotel-debord: linear-gradient(180deg, oklch(0.53 0.128 259) 0%, oklch(0.51 0.078 265) 16%, oklch(0.53 0.037 271) 44%, oklch(0.56 0.056 198) 58%, oklch(0.49 0.084 139) 70%, oklch(0.62 0.094 86) 82%, oklch(0.65 0.036 334) 100%);
}

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

色卡