Teyvat Paletteテイワットパレット
シーンライブラリ
GitHub
ギャラリー
希望の道・淵の光
フォンテーヌ幽邃静水微光

希望の道・淵の光

Chemin de L'Espoir in Abyssal Light

色カード

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

再構成グラデーション

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

0%024b6a30%025b6358%41dbec78%00e2ef100%0151ab

なぜ調和するのか

面積・彩度の天井・明度の天井——ひとつの色相族が取れるのは多くて二つまでである。この深い水では青が 84.73% を占め、彩度の頂点 0.250 も握っている(最も鮮やかな 4000 画素は 4000/4000 が 240°〜270°)。だから三つ目は丸ごと手放される——最も明るい 3584 画素はすべて 196°〜206° に落ち、15.14% しかない青緑のものだ。配り終えたあと、画面の残り全部には使える通路がない:半分の画素が L 0.33 から 0.39 の六ポイントに押し込められ、互いを分けられるのは色相だけになる。

01

主色族が二つ取る

青帯 210°〜270° は 84.73% を占め、平均 L 0.41 / 彩度 0.093。最も鮮やかな 4000 画素は 4000/4000 が 240°〜270° に落ち、平均 L 0.47 / 彩度 0.185、重心 (0.42, 0.62)、全画の頂点は 0.250。ものに落とせば二叢の光る海藻だ:左下の一片で最も鮮やかな 3% は L 0.45 / 彩度 0.159 / 257°、中央の一叢を 240°〜270° の画素だけで測ると L 0.41 / 0.122 / 251°。〈モルテ区・晴翠〉も同じく八割が青のフォンテーヌの一枚で、青は 80.12% を占めていた。しかし 0.200 の天井は 7.50% しかない緑のものだった。ここでは主色族が自分でそれを取っている——その代価は次の一条にすぐ現れる。

02

明度という一つは丸ごと返された

最も明るい 4000 画素は七つのセルに分かれ、合計 3584 個。色相はすべて 196°〜206° に落ち、L 0.82 から 0.85、彩度 0.126 から 0.143。左手に並ぶ発光珊瑚(重心 (0.08, 0.30) と (0.28, 0.28))と、谷底に灯る石の門(重心 (0.58, 0.69) と (0.61, 0.67))——どれも 15.14% しかない青緑帯のものだ。青緑帯の彩度平均 0.074 は青帯の 0.093 より低く、頂点 0.168 も 0.250 には届かない。明度を取り、明度だけを取る。単調な色調の中に光を置きたいなら、光と地色を同族にしないこと——二三十度ずらし、そのうえで明度の天井を丸ごと渡すこと。

03

残りに使えるのは色相だけ

明度 p01 は 0.33、p50 は 0.39——画面の半分が六ポイントに押し込まれていて、それでもこの絵は深淵として読まれる。まったく違う三つのものがほぼ同じ明るさで測れる:右の崖体は L 0.39 / 彩度 0.082 / 235°、中央の石壁は L 0.39 / 0.067 / 208°、左上の石積みは L 0.43 / 0.073 / 206°——それらを分けているのは 29° の色相だけだ。予備の通路は一本もない:無彩画素は 0.00%、330°〜90° の暖色検索は nothing matched を返し、黄色い縞に見えるあの魚たちも実測 L 0.51 / 彩度 0.096 / 216°、同じ矩形での暖色検索もやはり零。全画の 99.99% が 165°〜270° という 105° の中に閉じ込められている。暗い場面のパレットを作るときは、まずこの三つを配り切ること。ひとつの色相に二つ取らせたら、残りのものは色相だけで生きるほかなく、色輪にはもう百度あまりしか残っていない。

この配色を持ち帰る

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

/* 希望の道・淵の光 · Chemin de L'Espoir in Abyssal Light — Teyvat Palette */
:root {
  --abyss-blue: oklch(0.39 0.082 235); /* 淵の青 #024b6a */
  --algal-flare: oklch(0.45 0.159 257); /* 藻の焔 #0151ab */
  --coral-glow: oklch(0.83 0.142 202); /* 珊瑚の白光 #00e2ef */
  --gate-light: oklch(0.82 0.126 206); /* 門の光 #41dbec */
  --masonry-teal: oklch(0.43 0.073 206); /* 石積みの青 #025b63 */
  --gradient-chemin-de-lespoir: linear-gradient(225deg, oklch(0.39 0.082 235) 0%, oklch(0.43 0.073 206) 30%, oklch(0.82 0.126 206) 58%, oklch(0.83 0.142 202) 78%, oklch(0.45 0.159 257) 100%);
}

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