Teyvat Paletteテイワットパレット
シーンライブラリ
GitHub
ギャラリー
水仙十字結社・光の柱
フォンテーヌ昼澄んだ荘厳舞う塵

水仙十字結社・光の柱

The Narzissenkreuz Ordo in a Shaft of Light

色カード

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

再構成グラデーション

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

0%96746a18%5be8ac30%a6de7c50%34313772%655045100%fef8ed

なぜ調和するのか

光の彩度は、その明度の残高である。同じ一枚の薔薇窓でも、いちばん鮮やかな端(玉青の環、彩度 0.150、ピーク 0.195)といちばん明るい端(床に落ちた光柱、明度 0.98、彩度 0.016)は同じ場所ではない。染める仕事はしたがって、主光の当たらない余光に回る——光柱の外の床石は明度 0.45、色相 51° しかないのに、高みの二本の桃色の幟を 38° と 23° に、中央の桃色の環卓を 79° と 80° に引き寄せ、画面全体の 300°–360° には 23 画素しか残らない。明るくてしかも色のある光が欲しいなら、色は光源に残し、明るさはそれが照らす面に配ること。

01

いちばん明るい所といちばん鮮やかな所は別

薔薇窓は面全体で明度 0.82、彩度 0.059。そのピーク 0.195 は画面 (0.53, 0.32) の玉青の環にあり、全画面で最も鮮やかな一点だ。ところがこの窓が床に落とす光柱は明度 0.98、彩度はわずか 0.016——画面の明度 p99 はすでに 1.00 で、軌道は端まで走り切っている。明度が白に届いた場所には払える彩度が残らない。これは描画の妥協ではなく、この軸そのものの形だ。「色のある強い光」を描くなら、ひとつの面に二つの仕事をさせないこと。

02

二本の桃色の幟に、紅の画素はひとつもない

画面上縁からは幅の広い桃色の幟が二本垂れ、中央の円形の議事卓には桃色の織物が巻かれている——実測すると幟の先端は 38° と 23°、環卓は 79° と 80°、すべて余光の 51° の暖色側に落ちる。画面全体の 300°–360° は 23 画素。これらは強い光に洗い流されたのではない。洗われたのは光柱を正面から浴びた床石(彩度 0.016)のほうで、幟は光柱の外に掛かり、明度 0.45 のあの余光にずるずると引かれてきたのだ。

03

向きは光の色相が決め、引かれるか否かは決めない

同じ街の〈「公爵」の執務室・緑の翳〉は、同じことが別の色相で起きた例だ。あちらの光は緑で(緑の帯 43.06%、112°)、緋色の漆を 96° まで引いた。こちらの余光は暖色で(51°)、桃色を 38° まで引いた。二つの部屋の 300°–360° はそれぞれ 44 画素と 23 画素しか残らず、両者の唯一の共通点は色温度ではなく、**光が一束しかない**ことだ。室内の配色を検討するときは、色温度の異なる光が何束あるかをまず数えること——色板はその数字の結果でしかない。

この配色を持ち帰る

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

/* 水仙十字結社・光の柱 · The Narzissenkreuz Ordo in a Shaft of Light — Teyvat Palette */
:root {
  --rose-jade: oklch(0.84 0.15 162); /* 窓の玉青 #5be8ac */
  --rose-green: oklch(0.84 0.14 133); /* 窓の翠 #a6de7c */
  --shaft-white: oklch(0.98 0.016 80); /* 光柱の白 #fef8ed */
  --ambient-amber: oklch(0.45 0.033 51); /* 余光の褐 #655045 */
  --banner-amber: oklch(0.59 0.046 38); /* 幟の橙 #96746a */
  --pillar-shadow: oklch(0.32 0.01 310); /* 柱の翳 #343137 */
  --gradient-the-narzissenkreuz-ordo: linear-gradient(200deg, oklch(0.59 0.046 38) 0%, oklch(0.84 0.15 162) 18%, oklch(0.84 0.14 133) 30%, oklch(0.32 0.01 310) 50%, oklch(0.45 0.033 51) 72%, oklch(0.98 0.016 80) 100%);
}

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