Teyvat Paletteテイワットパレット
シーンライブラリ
GitHub
ギャラリー
トヤック源泉地・碧晴
ナタ昼澄明潤沢開豁

トヤック源泉地・碧晴

Toyac Springs in Turquoise Daylight

色カード

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

再構成グラデーション

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

0%68b0f832%8cc6ec60%0084a684%6cc888100%cc6e58

なぜ調和するのか

画素の 98.82% に色が付いていれば、枠は 0.051 しか残らない(p99 0.152 引く中央値 0.101)——同じ回の四枚で最も低い。結果は測れる。天井 0.204 は最大の面に食われ(最も鮮やかな 4,000 画素のうち 2,509 個が 240°–270° の空と深い水に落ちる)、画面唯一の暖色にして一目で見つかる主役——右岸のあの桃色の大輪——は 15°–75° に 11,420 画素(1.24%)、最も鮮やかな 3% でも 0.124 どまりで、天井より 0.080 低い。小さな要素を主役にしたいなら、その要素に彩度を足すのではなく(足せない)、周りに彩度を譲る面を用意すること。

01

一寸も譲っていない

無彩はわずか 1.18%。空も水も草も浮葉も岩も、すべて彩度 0.08–0.13 に留まっている——上縁の空は L 0.74 / 0.128、下縁の浮葉と浅瀬の草は L 0.76 / 0.129、手前の深い水は L 0.57 / 0.108、左手の山影は L 0.58 / 0.088、霧に均された水平線ですら 0.081 ある。中央値 0.101 はこうして積み上がったものだ。中央値とは「平均してどれだけ鮮やかか」ではなく、「どれだけの面積が黙るのを拒んだか」である。この画の答えは、ほぼ全部。

02

主役は天井を買えない

右岸に咲く桃色の大輪が、この画唯一の暖色である。全画で 15°–75° は 11,420 画素(1.24%)しかなく、花叢の矩形内の暖色画素は L 0.65 / 彩度 0.087、全画の暖色で最も鮮やかな 3% でも L 0.64 / 0.124 / 色相 34° にとどまる。一方ピーク 0.204 は 240°–270° の青、空と深い水のものだ。天井より 0.080 低いのに、それでも視線が最初に落ちる——緑・青緑・青が合わせて 94.61% を占めるこの画で、その色相はただ一つだからである。枠を使い切ったとき、焦点に残る買い方は「誰とも色が違う」だけになる。

03

最も鮮やかな四千を、二族が分け合う

最も鮮やかな 4,000 画素は 104° 離れた二か所へ分かれる——240°–270° の空と深い水に 2,509 個(ピーク 0.204)、150°–180° の浅瀬の水草に 1,290 個(ピーク 0.168)。120°–180° の最も鮮やかな 3% は実測 L 0.80 / 彩度 0.155。どちらも天井近くに届いていて、どちらも相手を押さえ込んでいない。救いは色相の並びが途切れていないことだ——緑 7.79% → 青緑 14.81% → 青 72.01% と、間の段が欠けていない。だから三枚のコラージュではなく、一続きの流れる水として読める。枠のない画面で層を作るには、誰がより鮮やかかではなく、色相を段の欠けない坂に並べること。

この配色を持ち帰る

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

/* トヤック源泉地・碧晴 · Toyac Springs in Turquoise Daylight — Teyvat Palette */
:root {
  --zenith-blue: oklch(0.74 0.128 250); /* 天頂の青 #68b0f8 */
  --far-shoal: oklch(0.8 0.081 238); /* 遠汀の白 #8cc6ec */
  --deep-pool: oklch(0.57 0.108 224); /* 深潭の青 #0084a6 */
  --lilypad-teal: oklch(0.76 0.129 152); /* 蓮葉の青緑 #6cc888 */
  --peach-bloom: oklch(0.64 0.124 34); /* 桃花の橙 #cc6e58 */
  --gradient-toyac-springs: linear-gradient(180deg, oklch(0.74 0.128 250) 0%, oklch(0.8 0.081 238) 32%, oklch(0.57 0.108 224) 60%, oklch(0.76 0.129 152) 84%, oklch(0.64 0.124 34) 100%);
}

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