Teyvat Paletteテイワットパレット
シーンライブラリ
GitHub
ギャラリー
旗舰·霓照
けだるさこもるネオンの光

旗舰·霓照

The Flagship under Neon Glow

色カード

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

再構成グラデーション

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

0%583f7522%f085f132%ddb18558%97546880%774678100%744a81

なぜ調和するのか

色相はどれだけ広く敷いても騒がしくならないし、天井を下げる必要もない。七本の色相帯が画面の 98.52% を覆い、268° から 96° まで走るあいだ、平均明度は 0.43 / 0.42 / 0.47 / 0.53 / 0.62 / 0.79 / 0.89 と並び、最も暗い二段が 0.01 差で入れ替わるほかは一つも乱れない。そして彩度は全行程 0.074–0.098 に釘づけで、レンジはわずか 0.024。〈上風蝕地・濁りの正午〉は騒がしさを決めるのは彩度の天井だと言い、六本の帯が 97.18% を埋めながら 0.121 を越える画素が一つもなかった。ここの天井は 0.231、ほぼ二倍である。それでも静かなのは、明度が色相の順番を代わりに整えているからだ。

01

明度が色相の順番を整える

七本の帯を色相順に並べると青 268°(0.15%)、紫 304°(27.94%)、桃 326°(25.71%)、赤 2°(37.01%)、橙 23°(5.86%)、黄 66°(1.62%)、緑 96°(0.23%)、合計 98.52%。平均明度は順に 0.43 / 0.42 / 0.47 / 0.53 / 0.62 / 0.79 / 0.89。ところが彩度は 0.079 / 0.090 / 0.098 / 0.091 / 0.074 / 0.078 / 0.078 で、どれ一つ他より濃くない。だから同じ明度の位置を争う色が二つとなく、目は 188° の幅を七つの色ではなく一続きの坂として読む。大きな色相幅を使いたくて、しかも騒がしくしたくないなら、まず彩度を下げにいくのではなく、色相の各段に重ならない明度の段を一つずつ配ること。

02

静けさには二本の道があり、これは二本目

〈往日の海・水底の昼〉が行ったのは一本目だ。99.2% が同じ一族の青、彩度中央値 0.153、無彩 0.00%——濃さは画面全体で一斉に持ち上げられているので、どこも突出しない(数値は同篇からの引用)。この絵の無彩は 1.47% しかなく、やはり灰は使えない。だが色相は 188° に広がり、彩度中央値は 0.087 しかないので、同族に頼ることも低い天井に頼ることもできない。頼っているのは順序である。同族を一斉に持ち上げるのと、異族を明度で並ばせるのは、互いに代替できない二種類の静けさだ。前者は狭さを要求し、後者は順序を要求する。どちらを使うかは手元の色相幅が決めるのであって、その逆ではない。

03

焦点は梯子の最後の一段

看板はこの規則の例外ではなく、その頂点である。最も明るい 4000 画素のうち、報告される七つのセルは色相がすべて 76°–96° に落ち、明度 0.92–0.94、最大のセルは 2,155 個で重心 (0.48, 0.29)——看板のネオン管だ。画面全体の明度中央値は 0.48 である。そのセルの彩度は 0.065 しかなく、画面の中央値 0.087 よりむしろ低い。最も鮮やかな一群は管の上にない。最も彩度の高い 4000 画素のうち 3,604 個が 300°–360°、L 0.74 と 0.77、彩度 0.192 と 0.186 に落ちる——看板が横梁と壁に落とす暈であり、部屋全体と同じ一族だ。だから一つの灯は二つの勘定で認識される。暈が「この部屋はこの色だ」を担い、芯が「光はここにある」を担う。下地がもう濃くて彩度を足す余地がないとき、芯は明度で支払うほかない。

この配色を持ち帰る

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

/* 旗舰·霓照 · The Flagship under Neon Glow — Teyvat Palette */
:root {
  --beam-violet: oklch(0.42 0.09 304); /* 梁と柱の紫 #583f75 */
  --porch-pink: oklch(0.47 0.098 326); /* 戸口の桃 #774678 */
  --wall-vermilion: oklch(0.53 0.091 2); /* 煉瓦壁の朱 #975468 */
  --lit-corner: oklch(0.62 0.074 23); /* 灯際の橙 #af7471 */
  --tube-amber: oklch(0.79 0.078 66); /* 管の黄 #ddb185 */
  --sign-halo: oklch(0.77 0.186 327); /* 看板の暈 #f085f1 */
  --door-blue: oklch(0.43 0.079 268); /* 扉の青 #3d4e7b */
  --gradient-the-flagship: linear-gradient(180deg, oklch(0.42 0.09 304) 0%, oklch(0.77 0.186 327) 22%, oklch(0.79 0.078 66) 32%, oklch(0.53 0.091 2) 58%, oklch(0.47 0.098 326) 80%, oklch(0.48 0.098 318) 100%);
}

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