ナド・クライ靄の重さがらんとした広さ残る温もり

虚海望・霞の靄

Voidsea Outlook in Glowing Haze

色カード

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

再構成グラデーション

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

0%5e5c8022%6f628045%7d667c72%906f80100%a37a77

なぜ調和するのか

「光からどれだけ離れているか」は、まるごと色相の帳簿に付けられる。空の同じ高さを右から左へ実測すると 287° → 304° → 327° → 346°、そこから左手の地平線で燃えている輝きの 24° まで、合わせて 97° 回る。その同じ道のりで明度は 0.49 から 0.62 まで上がるだけ、彩度は 0.043 と 0.058 のあいだをうろつき、振れ幅は 0.015 しかない。〈大日御輿・白芒〉は同じ「光からの距離」の地図を彩度に描いた(日輪から外へ 0.005 が 0.058 まで上がる)。ここではその軸に使える金がない——画面全体の彩度の 99 パーセンタイルが 0.075 しかないからだ。だから方角は色相が語ることになる。

四つの色帯で一本の弧

桃 27.64%、赤 25.40%、紫 23.24%、橙 13.41%。隣り合う四つの色帯がそれぞれ十数から二十数パーセントを占め、合わせて画面の 89.69%。明度は 0.50 / 0.55 / 0.47 / 0.56、彩度は 0.039 / 0.042 / 0.047 / 0.050——四帯のあいだで彩度の差は 0.011 しかない。だから目はこれを四つの色として数えず、向きを変えていく一枚の空気として読む。彩度の低い大きな面に「光の方向」を持たせたいなら、まず彩度を固定し、そのうえで色相を一方向へ歩かせること。

道も崖も機械も天気のうち

足元の石畳の道は実測 353°、L 0.43、彩度 0.032。右手であの起重機械を載せている崖の面は 344°、L 0.44、彩度 0.038——どちらも空の弧の上に座っているので、二つの別々の「もの」ではなく天気の一部として読める。本当に弧を外れるのは斜面のわずかな草だけで、45°–165° は全画面で 48,084 画素、5.22%。最も鮮やかな 4000 画素のうち 3879 個が 30°–120° に落ち、位置はいずれも画面下縁 (0.33–0.63, 0.78–0.83) の斜面である。そして 190°–280°、青緑から青紫までのひと続きは全画面でわずか 133 画素——冷たく見えるこの絵に、青はほとんど一粒も無い。

草は鮮やかさではなく、弧の外で勝つ

その草の彩度は実測 0.055、明度 0.50。逆光側の空の 0.058 / 0.49 と寸分違わないのに、画面で唯一ひと目で色として見えるのはこちらである——57°、弧の暖端からまだ 33° 離れているからだ。画面全体の彩度は中央値 0.044、99 パーセンタイル 0.075、ピーク 0.121、明度は 1 から 99 パーセンタイルまで合わせて 0.33 しかない。二本とも痩せていれば、「光からどれだけ離れているか」の地図は色相にしか描けない。薄靄を描くときは、まず彩度と明度にどれだけ余地が残っているかを測り、余裕のあるほうに「光はどちら側か」を任せること。靄に何かを差し込みたいときも彩度を足す必要はなく、その弧の外へずらすだけでいい。

この配色を持ち帰る

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

/* 虚海望・霞の靄 · Voidsea Outlook in Glowing Haze — Teyvat Palette */
:root {
  --sunward-glow: oklch(0.62 0.052 24); /* 陽側の霞 #a37a77 */
  --near-sun-rose: oklch(0.58 0.048 346); /* 陽寄りの桃 #906f80 */
  --mid-sky-mauve: oklch(0.54 0.043 327); /* 中空の紅紫 #7d667c */
  --antisolar-violet: oklch(0.49 0.058 287); /* 反陽の紫 #5e5c80 */
  --causeway-stone: oklch(0.43 0.032 353); /* 石畳の桃鼠 #5e4951 */
  --crag-shade: oklch(0.44 0.038 344); /* 崖の翳り #624a58 */
  --slope-grass: oklch(0.5 0.055 57); /* 斜面の草 #7c5b44 */
  --gradient-voidsea-outlook: linear-gradient(225deg, oklch(0.49 0.058 287) 0%, oklch(0.52 0.049 304) 22%, oklch(0.54 0.043 327) 45%, oklch(0.58 0.048 346) 72%, oklch(0.62 0.052 24) 100%);
}

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