フォンテーヌ昼端正広漠清明

ホテル・ドゥボール・斜光

Hotel Debord in Slanting Light

色カード

色をクリックすると HEX をコピー、ホバーで OKLCH 値を表示します。

再構成グラデーション

シーンから蒸留したグラデーションをストップ順に左から右へ展開。完成角度は 180°(ヒーローとエクスポートで使用)、ギャラリーのカードは一律 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。元の風景・パレット・カラーコードが入っているので、保存してそのまま投稿できます。