Teyvat Paletteテイワットパレット
シーンライブラリ
GitHub
ギャラリー
星落ちの谷・澄んだ遠景
モンド昼開豁清朗遠意

星落ちの谷・澄んだ遠景

Starfell Valley in Clear Air

色カード

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

再構成グラデーション

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

0%56acdb30%93b9d952%dcef5668%93b384100%358050

なぜ調和するのか

〈モンド城・和やかな風〉は、あの街の身分は赤瓦の 47° に宿ると言った——星落ちの谷から望むと、その同じ屋根が 243° を示し、街区全体を暖色の窓で漉しても十数個のノイズしか残らない。身分の色は空気に全額没収され、それでもあの街はモンドのままである。色の名前は輪郭が語るのであって、色相が語るのではない。

01

赤瓦は青い

遠くに並ぶ屋根は風車と大聖堂のあいだに挟まれ、実測 L 0.77、C 0.061、h 243°——頭上の空(235°)よりさらに 8 度青い。街区全体を 315–90° の暖色の窓に通すと、五万の画素から残るのはわずか 13 個、平均 317°。画面全体に広げても、赤の帯でもっとも彩度の高い一群が 0.058 にしか届かない。〈モンド城・和やかな風〉のあの 47° の赤瓦は、ここには一枚も残っていない。それでも誰もこの街を見誤らない——十字の風車の帆と聖堂の尖塔が、すでに言うべきことを言い切っているからだ。遠景は観客のために固有色を預かる必要がない。色相は丸ごと空気に渡し、輪郭だけを残せばいい。

02

金色の木は緑である

谷底の黄葉の木立は中央の小さな湖を囲んで並び、その最も明るい 3% は実測 h 116°、L 0.91、C 0.174——緑の帯にしっかり留まっている。画面全体で色相が 90° を下回る画素はわずか 0.16%、平均 85°、しかもそれはこの木々の葉先そのものだ。それでも金と読めるのは、足元の手前の樹冠が L 0.54、C 0.106 だからである。同じ緑の一族の内側で、明度を 0.37 上げ、彩度を六割上げただけで、目は勝手に別の色名を与える。「新しい色」が欲しければ、まず明度と彩度をその一族の極値まで押し上げること。色相を動かすのはそのあとでいい。

03

この絵に灰色はない

左右の崖は灰色に見えるが、実測は 241° と 228°、彩度 0.066 と 0.068——空(235°、彩度 0.108)の六割しかない、薄められた空であって無彩色ではない。画面で本当に無彩(C<0.025)なのは 4.70% だけだ。呼び間違えられた三つの色は同じひとつの事実である。赤瓦も、金の木も、灰の岩も、自分の固有色を守っていない。46% の青の帯と 38% の緑の帯が、そのすべてを取り込んでしまった。風景のパレットを組むなら、まずその日の二本の色相帯を決め、次に各々の物体がそこからどれだけ離れているかを問うこと——物体に「あるべき色」を先に与えてはいけない。

この配色を持ち帰る

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

/* 星落ちの谷・澄んだ遠景 · Starfell Valley in Clear Air — Teyvat Palette */
:root {
  --clear-sky: oklch(0.71 0.108 235); /* 晴空の青 #56acdb */
  --hazed-town: oklch(0.77 0.061 243); /* 霞のモンド #93b9d9 */
  --cliff-shadow: oklch(0.54 0.066 241); /* 岩影の青 #4a7492 */
  --false-gold: oklch(0.91 0.174 116); /* 梢の金 #dcef56 */
  --meadow-green: oklch(0.73 0.075 136); /* 草坡の緑 #93b384 */
  --canopy-green: oklch(0.54 0.106 153); /* 木陰の緑 #358050 */
  --gradient-starfell-valley: linear-gradient(180deg, oklch(0.71 0.108 235) 0%, oklch(0.77 0.061 243) 30%, oklch(0.91 0.174 116) 52%, oklch(0.73 0.075 136) 68%, oklch(0.54 0.106 153) 100%);
}

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