Teyvat Paletteテイワットパレット
シーンライブラリ
GitHub
ギャラリー
天領奉行府・紺の昼
稲妻昼森厳冷ややか花明かり

天領奉行府・紺の昼

Tenryou Commission Headquarters in Navy Daylight

色カード

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

再構成グラデーション

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

0%638ac618%d09cd638%7a59a360%103b4778%28473e100%3f4c6d

なぜ調和するのか

一本の桜が色相環に持つ位置は二つだけで、その位置は木が決めていない。陰の側は L 0.53・彩度 0.117・色相 303°——〈秋沙銭湯・桜の昼〉で測った L 0.51・彩度 0.117・303° と三つとも同じ数字である。別の木、別の絵なのに、陰の半分は定数なのだ。動くのは光を受けた側の面積だけ:向こうは 5.2%、ここは 30.3%。桜が紫に読めるか桃に読めるかは、構図が受光面にどれだけ面積を割り当てたかの結果であって、調色の結果ではない。

01

陰の半分はまったく動いていない

桜冠の矩形は 156,600 画素。二つの色相窓に分けると、270°–315° に 83,632 個、平均 L 0.53・彩度 0.117・色相 303°。〈秋沙銭湯・桜の昼〉の同じ窓は 70,270 画素・L 0.51・彩度 0.117・303°。建物も季節も太陽の位置も違うのに、木の陰の面は同じ読みを返す。定数だからこそ次のことに意味が出る——315°–345° の受光側は秋沙銭湯では 3,860 画素で樹冠の 5.2%、ここでは 36,424 画素で 30.3% を占める。木の色を変えたいなら、色に触る必要はない。

02

太陽を受けたのは画面のこの三割だけ

棟に据えられた金めっきに見える飾りは、矩形を 15°–105° で検索すると 8,320 画素のうち窓に入るのはたった 11 個。全体の実測は L 0.37・彩度 0.039・色相 175° である。左の白壁は L 0.39・彩度 0.026・238°、中庭の石畳一面は L 0.42・彩度 0.058・268°——奉行府のあらゆるものが空の影の色に止まっている。画面の明度中央値 0.43 を超える実体は、樹冠の受光側 36,424 画素の L 0.76 だけ。最も彩度の高い 4000 画素のうち 2073 個も、位置 (0.88, 0.17) のそこに落ちている。「光が当たる」は絵の中できわめて希少な出来事になりうるし、その希少さ自体が構図なのだ。

03

受光側は配合ではなく面積

桜冠は全体で 156,600 画素、画面のおよそ七分の一を占め、そのうち光を受けた三割は右上の空へ向いた側にすべて集まっている。全画面では紫帯 16.98%・平均 293°、桃帯 4.93%・平均 323°。同じ回で書いた、光の届くもう二本の樹冠の陰側は 301° と 304° で、ここの 303° と 3° の中に収まる。色相はこの花が持って生まれた定数で、面積のほうがこの絵の選択なのだ。花の海を桃色に読ませたいなら、花びらの色相をいじるのではなく——それは動かない——どちらの方向から撮るかを変えること。

この配色を持ち帰る

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

/* 天領奉行府・紺の昼 · Tenryou Commission Headquarters in Navy Daylight — Teyvat Palette */
:root {
  --shaded-crown: oklch(0.53 0.117 303); /* 陰の桜紫 #7a59a3 */
  --sunlit-crown: oklch(0.76 0.1 323); /* 日の桜桃 #d09cd6 */
  --open-sky: oklch(0.63 0.101 259); /* 高天の青 #638ac6 */
  --navy-roof: oklch(0.33 0.051 220); /* 奉行の紺 #103b47 */
  --shaded-court: oklch(0.42 0.058 268); /* 影庭の青 #3f4c6d */
  --tarnished-gilt: oklch(0.37 0.039 175); /* 錆びた金具 #28473e */
  --gradient-tenryou-commission-headquarters: linear-gradient(180deg, oklch(0.63 0.101 259) 0%, oklch(0.76 0.1 323) 18%, oklch(0.53 0.117 303) 38%, oklch(0.33 0.051 220) 60%, oklch(0.37 0.039 175) 78%, oklch(0.42 0.058 268) 100%);
}

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