フォンテーヌ昼幽邃青々静謐

エルトン海溝・翳る昼

Elton Trench in Dimmed Daylight

色カード

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

再構成グラデーション

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

0%62e7f726%20929358%096b8582%0fa530100%1ae044

なぜ調和するのか

暖かさとは画面のなかの順位であって、色相環上の位置ではない——全画面に 330°–90° の暖色探索をかけても一画素も当たらず、90°–110° も空である。それでも葉縁の金の縁取り、左下の黄色い花、中景の小魚は、どれも暖色として読まれる。実測は 145°、145°、142°——すべて黄緑だ。54.58% を占める 223° の青のなかでは、暖端に最も近い色相の一族が、そのまま金と見なされる。

色相環の暖かい半分は一目盛も使われない

全画面に 330°–90° の暖色探索をかけると該当画素はゼロ。45°–90° もゼロ、90°–110° もまだゼロ。窓を 90°–120° まで開いてようやく 133 画素、全体の 0.015% が現れる。緑 14.17% + 青緑 31.26% + 青 54.58%、これでこの絵のすべてである。しかもその 133 画素のうち 123 個は、左下の「黄色い花」の芯に落ちている——色相 119°、明度 0.89。この絵が出せる最も暖かいものが、まだ緑なのだ。瓊璣野の一篇は明度の軸で同じことを言っていた:高調の画面で「黒」は相対的であり、必要なのは黒ではなく周囲より 0.2 低い面である、と。色相の軸でも掟はまったく同じだ。

「暖色」に見える三つ、すべて黄緑

左上の巨大な扇葉の「金の縁取り」は、緑帯の画素だけを取ると実測 145°、彩度 0.194、明度 0.63。左下の「黄色い花」には緑帯の画素が 15181 個、145°、彩度 0.161、明度 0.61。中景を過ぎる「小魚」がいちばん弱く——その矩形で最も鮮やかな 3% は魚ですらなく 217° の水であり、魚自身は 519 画素、142°、彩度 0.102、明度 0.72 しか残らない。三者の色相差は 4° に満たず、背後の扇葉(145°、彩度 0.243)とも同族である。それが金の縁、黄の花、橙の魚という三種の暖かさに読み分けられるのは、ひとえに明度と彩度の分担によるもので、色相は一歩も動いていない。

同じ緑が、よそでは環境、ここでは金になる

サラシア海原の水草は実測 145°、彩度 0.174、画面の 35.96% を占め、植物として読まれる。こちらの緑は 148°、彩度 0.167——ほとんど同じ色でありながら、占めるのは 14.17% だけで、背後には 54.58% の 223° の青が押している。しかもあちらには本物の黄色い画素が 749 個(45°–90°、平均 81°)残っているのに、ここには一つも無い。色は変わっていない。変わったのは、画面のなかでのその色の順位である。単一の調子の画面に「暖かい」アクセントを置きたいなら、まず地の色相を測り、それから暖端へ、自分より近いものが無くなるところまで寄せればいい——本当に暖色域へ踏み込む必要はなく、そこで浮くのは色相環の半分である。

この配色を持ち帰る

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

/* エルトン海溝・翳る昼 · Elton Trench in Dimmed Daylight — Teyvat Palette */
:root {
  --trench-blue: oklch(0.49 0.089 223); /* 溝壁の青 #096b85 */
  --midwater-teal: oklch(0.6 0.095 196); /* 中層の水青 #209293 */
  --daylight-cyan: oklch(0.86 0.117 206); /* 天光の青 #62e7f7 */
  --fan-kelp: oklch(0.79 0.243 145); /* 扇葉の緑 #1ae044 */
  --leaf-rim-gold: oklch(0.63 0.194 145); /* 葉縁の金 #0fa530 */
  --minnow-amber: oklch(0.72 0.102 142); /* 遊鱗の黄 #7fb579 */
  --gradient-elton-trench: linear-gradient(180deg, oklch(0.86 0.117 206) 0%, oklch(0.6 0.095 196) 26%, oklch(0.49 0.089 223) 58%, oklch(0.63 0.194 145) 82%, oklch(0.79 0.243 145) 100%);
}

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