璃月朝静謐空霊東洋

絶雲の間・朝霧

Jueyun Karst at Dawn

色カード

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

再構成グラデーション

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

0%c2dde235%8ac4c360%44969182%285e6a100%1c4351

なぜ調和するのか

隣接する色相 + 明度の階段で空気遠近法をつくる。唯一の暖色である赭岩は 5% 未満の面積で現れながら、それだけで画面全体を生かしている——中国山水の余白と点睛を、そのまま色彩の言語へ翻訳したもの。

モノクロマティックの胆力

主体はすべて 188°–225° の青の近傍に押し込まれ、五つの階層は明度(0.36 → 0.92)だけで引き離されている。色相を減らし明度を増やす。それだけで一枚の画面を支えきれる——最も過小評価されがちな配色戦略である。

空気遠近法 = 明度の階段

遠い山ほど明るく、灰へ寄る(彩度が距離とともに減衰する)。大気散乱の物理を色彩へ翻訳したものだ。UI の階層(前景 / カード / 背景)も同じ論理を使える——後ろへ行くほど環境色へ近づける。

5% の補色で点睛する

赭岩(60°)は青磁(195°)のほぼ補色だが、面積は山体の稜線に厳しく限られている。補色の正しい使い方は、決して半分ずつではない。95:5 である。

この配色を持ち帰る

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

/* 絶雲の間・朝霧 · Jueyun Karst at Dawn — Teyvat Palette */
:root {
  --mist-white: oklch(0.92 0.015 200); /* 雲霧の白 #dae8e8 */
  --celadon: oklch(0.75 0.07 195); /* 青磁 #77bcbc */
  --pine-jade: oklch(0.58 0.08 188); /* 松石の緑 #378a83 */
  --ochre-cliff: oklch(0.58 0.08 60); /* 赭岩 #9d6f48 */
  --indigo-peak: oklch(0.4 0.055 225); /* 黛山 #224e5e */
  --gradient-liyue-jueyunjian-dawn: linear-gradient(170deg, oklch(0.88 0.03 210) 0%, oklch(0.78 0.06 195) 35%, oklch(0.62 0.08 190) 60%, oklch(0.45 0.06 215) 82%, oklch(0.36 0.05 225) 100%);
}

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