璃月昼繁栄暖かさ山水

璃月港・晴れの昼

Liyue Harbor at Midday

色カード

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

再構成グラデーション

シーンから蒸留したグラデーションをストップ順に左から右へ展開。完成角度は 172°(ヒーローとエクスポートで使用)、ギャラリーのカードは一律 135° の斜めで表示します。

0%c5f5fb28%9ec8e255%60aec478%479ebf100%0072a3

なぜ調和するのか

譲る色の技法。画面の 87% を青と灰に譲り、わずか 2.6% の暖色が街そのものになる——主役の存在感は彩度を足して得るものではなく、地の色が譲って生まれる。

主役はたった 2.6%

暖色相(20°–110°)は全画素の 2.6% しかないのに、視線はそこにしか落ちない——瓦屋根、金の杏、幟が画面中央の細い帯に密集し、周囲を 48% の青と 39% の灰が囲む。冷たい地が広ければ広いほど、暖かい点は貴くなる。ある色を主役にしたいなら、その色の彩度より先に「地がどれだけ譲っているか」を問うこと。

灰までも橙に見える

屋根の三か所を実測すると彩度は 0.009–0.011——ほぼ純粋な灰である。それが暖かい橙に見えるのは、広大な青の地(平均 218°)が貸している同時対比のせい。UI でも同じことが起きる。冷たい青の上の中性グレーのボタンは、実際に橙へ寄せなくても暖かみを帯びる。

冷たさにも遠近がある

青系はそれ自体が三段に分かれる。霧の空 L 0.94、石林 L 0.81、港の水 L 0.66——そして彩度は明度が下がるにつれ 0.05 から 0.10 へ上がる。最も深いところが最も鮮やかで、だから水に深さが宿る。冷色を地に敷くことは平坦を意味しない。彩度を暗部に預ければ、層は自ずと立ち上がる。

この配色を持ち帰る

CSS 変数、Tailwind v4 テーマ、または SVG。ワンクリックでプロジェクトへコピーできます。

/* 璃月港・晴れの昼 · Liyue Harbor at Midday — Teyvat Palette */
:root {
  --sky-haze: oklch(0.939 0.05 205); /* 晴嵐 #c5f5fb */
  --karst-white: oklch(0.812 0.057 235.3); /* 石林の白 #9ec8e2 */
  --harbor-teal: oklch(0.66 0.096 226.1); /* 港の青 #479ebf */
  --ginkgo-gold: oklch(0.78 0.073 86.8); /* 杏金 #ccb581 */
  --coral-red: oklch(0.62 0.071 12); /* 珊瑚朱 #ac747b */
  --gradient-liyue-harbor: linear-gradient(172deg, oklch(0.939 0.05 205) 0%, oklch(0.812 0.057 235) 28%, oklch(0.71 0.083 218) 55%, oklch(0.66 0.096 226) 78%, oklch(0.52 0.12 235) 100%);
}

1080×1350 の PNG。元の風景・パレット・カラーコードが入っているので、保存してそのまま投稿できます。