Teyvat Paletteテイワットパレット
シーンライブラリ
GitHub
ギャラリー
スチームバード新聞・青い翳
フォンテーヌ昼冷ややか端正静けさ

スチームバード新聞・青い翳

The Steambird in Blue Shade

色カード

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

再構成グラデーション

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

0%6882b816%698dc742%2a5d8362%3f7f9082%247965100%8b7e8f

なぜ調和するのか

屋外の一枚でも、光が一束しかないことはある。ここには直射の陽の面がひとつもなく、照らしているのは画面の外にある空だけだ:正面扉の楣に刻まれた鍍金の銘は実測 264°、その背後の灰石の塔壁とまったく同じ。糸杉 218°、芝 174°、青緑に見える大窓 244°——木も草も金も石も 174°–264° に収まり、青の帯が 58.55% を独占し、緑は 2.52% しか残らない。「天井があるかないか」はこの物差しの目盛りではない。「色温度の異なる光が何束あるか」が目盛りだ。

01

金の文字と石の壁が同じ色相

正面扉の楣に並ぶ鍍金の銘は実測 色相 264°、彩度 0.046。中庭を隔てた背後の灰石の塔壁は 264°、彩度 0.088、右手の石壁も 264°。そしてフォンテーヌの看板ともいえる青緑の大窓は、`165°–210°` という青緑の窓の中に面全体でわずか 9 画素しか持たず、26,728 画素はすべて `210°–270°`、平均 244° に落ちる——青緑に見えて、測れば青だ。光源が空ひとつなら、空の色相がこの絵の色相になる。

02

6,750 画素は、どの物にも属していない

`300°–360°` はここに 6,750 画素あり、〈「公爵」の執務室・緑の翳〉の 44 画素の 153 倍にあたる——この色相は無事だと聞こえる。ところが最大の一群 1,913 画素は下縁のクリーム色の石段に落ちていて、彩度はわずか 0.031、画面中央値 0.059 の半分にも届かない。そして本来暖色であるはずの鍍金の鳥章は、その矩形の中の `30°–90°` に 850 画素、彩度 0.030 しか残していない。ある色相が生きているかを判定するとき、画素を数えてはいけない——いちばん鮮やかな一群が一個の物の上に載っているかを測ること。

03

屋外であることは数に入らない

同じ街の同じ日を写した〈レシュッツのクロックワーク工房・陽と翳〉には光が二束ある——右上で飛んだ直射の面(明度 0.99、彩度 0.002)と、左の塔の翳に落ちた 285° の空光だ。あちらは八本の色相帯すべてが 1% を越え、`300°–360°` に 33,648 画素がある。こちらは空光の一束だけで、五本、6,750 画素。二枚とも屋外、同じフォンテーヌの空の下だ。だからこの物差しが測っているのは壁の有無ではなく光源の数であって、一束減れば色環は半分に折り畳まれる。

この配色を持ち帰る

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

/* スチームバード新聞・青い翳 · The Steambird in Blue Shade — Teyvat Palette */
:root {
  --tower-blue: oklch(0.61 0.088 264); /* 塔石の青 #6882b8 */
  --dome-blue: oklch(0.64 0.096 260); /* 円蓋の青 #698dc7 */
  --glass-blue: oklch(0.46 0.083 244); /* 窓硝子の青 #2a5d83 */
  --cypress-blue: oklch(0.56 0.07 218); /* 糸杉の青 #3f7f90 */
  --lawn-cyan: oklch(0.52 0.086 174); /* 芝の青緑 #247965 */
  --step-blush: oklch(0.61 0.031 319); /* 石段の淡紅 #8b7e8f */
  --gradient-the-steambird: linear-gradient(180deg, oklch(0.61 0.088 264) 0%, oklch(0.64 0.096 260) 16%, oklch(0.46 0.083 244) 42%, oklch(0.56 0.07 218) 62%, oklch(0.52 0.086 174) 82%, oklch(0.61 0.031 319) 100%);
}

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