璃月昼清らかみずみずしい繁り山の暮らし

春茶々房・翠の昼

Chunming Teaworks in Verdant Daylight

色カード

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

再構成グラデーション

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

0%376e6f18%4f6c7338%378e7e58%dfe4d476%608872100%62ad5f

なぜ調和するのか

面積が主色を決められるかどうかには倍率の閾値がある:この絵の 150°–180° には 282,997 画素あり、120°–150° の 149,431 画素より 89% 多い。ところが最も鮮やかな 4000 画素のうち、前者は 353 個、後者は 3,487 個——多い分の八割は一票にもならなかった。〈璃沙郊・金の昼〉では 4.6 倍の面積が頂点の厚みを押さえ込んだが、ここの 1.89 倍では押さえ込めない。配色を見るとき、面積の差が二倍に届かないなら、面積で主色を決めてはいけない。

面積はこの絵で引き分けを出す

全画の 90°–165° の緑は 314,656 画素、165°–210° の青は 314,576 画素——差は 80 個、比率は 35.74% 対 35.73%。山ひとつ分の茶畑の斜面と、山ひとつ分の樹冠と崖の対決である。三番目の役はとうに脱落している:茶房自身の白壁はあの 17.14% の無彩の主体で、最も明るい 4000 画素は実測 L 0.91 / 彩度 0.021。しかも全画の 330°–30° はわずか 42 画素——璃月の茶房でありながら、朱の一点もない。主色は緑か青のどちらかにしかなり得ず、そして面積を数える道はここで断たれる。30° 刻みで数え直しても、最頻は青の側に残ったままだ。

八割多くても色相は出せない

最も鮮やかな 4000 画素のうち、120°–150° が 3,487 個、150°–180° は 353 個——9.9 倍、面積とはちょうど逆向きである。その 3,487 個が落ちる位置の平均は (0.20, 0.50)、画面左の山なりに敷かれた茶畑の斜面だ:矩形 (0.02, 0.55) から幅 0.15 高さ 0.12 の実測は L 0.68 / 彩度 0.134 / 143°、最も鮮やかな 3% は 0.161 に届く。青の一族にはこれほど光を受けた面がない——手前の大きな木 (0.24, 0.20) は L 0.59 / 0.087 / 179°、山向こうの崖 (0.86, 0.20) は L 0.50 / 0.058 / 198°。二族の天井はそれで 0.216 対 0.157 になる。

面積はある倍率を超えて初めて効く

〈璃沙郊・金の昼〉では青帯 529,098 画素に対し緑帯 115,260 画素、4.6 倍の面積が「最も鮮やかな 4000 のうち緑 3,244 / 青 573」という逆符号を押さえ込み、主色は青のままだった。この絵は倍率を 1.89 まで下げ、もう押さえ込めない。だから「どの一族が最大か」と「どの一族の天井際の一群が最も厚いか」は別々に報告するだけでなく、前者がどれだけ勝っているかも見なければならない:二倍に届かない差は、背景の広さであって主色の資格ではない。インターフェースでも同じだ——ある色を主色にしたいなら、最大の面を塗り潰す必要はない。光の当たる場所で隣より一段厚ければいい。

この配色を持ち帰る

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

/* 春茶々房・翠の昼 · Chunming Teaworks in Verdant Daylight — Teyvat Palette */
:root {
  --tea-terrace-green: oklch(0.68 0.134 143); /* 茶畑の緑 #62ad5f */
  --canopy-teal: oklch(0.59 0.087 179); /* 樹冠の青 #378e7e */
  --far-cliff-slate: oklch(0.5 0.058 198); /* 遠崖の蒼 #376e6f */
  --stone-step: oklch(0.59 0.056 160); /* 石段の灰 #608872 */
  --roof-slate: oklch(0.51 0.036 216); /* 黛の瓦 #4f6c73 */
  --plaster-white: oklch(0.91 0.021 119); /* 白壁 #dfe4d4 */
  --gradient-chunming-teaworks: linear-gradient(190deg, oklch(0.5 0.058 198) 0%, oklch(0.51 0.036 216) 18%, oklch(0.59 0.087 179) 38%, oklch(0.91 0.021 119) 58%, oklch(0.59 0.056 160) 76%, oklch(0.68 0.134 143) 100%);
}

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