モンド昼青々静けさ野の気

イノシシの生息地・晴れ間

Boar Habitat in a Clearing of Light

色カード

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

再構成グラデーション

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

0%4191ae18%2a704f46%1e444570%5b8a89100%a3cf6d

なぜ調和するのか

その一度は必要条件であって十分条件ではない:草地 146° と空 243° は 97° 離れ、等距離点は 14.5° に出る。そして 330°–60° の窓には確かに何かがある——1,221 ピクセル、色相 39°、草に散らばる四頭の褐色のイノシシだ。ただし残る二本のチャンネルには一円も払っていない:明度 0.31 に対して画面の中央値 0.54、彩度 0.045 に対して 0.089、どちらも半分前後でしかない。こうして焦点は、いちばん大きくいちばん明るい面へまるごと戻る——最も彩度の高い 4000 ピクセルは 4000 個すべてが下縁の陽に透けた草の斜面、色相 135°、彩度 0.182。色相を正しく選んだうえで、明度か彩度を中央値より上へ持ち上げること。さもなければその一度はただ占めているだけだ。

四頭のイノシシは正しい場所に立っている

330°–60° という 90° 幅の窓が画面全体からすくい上げるのは 1,221 ピクセル、0.139%、色相 39° だけ——計算で出た 14.5° から 25° ずれてはいるが、この絵が出せるいちばん近い答えであり、しかも実物の上に載っている:草地の四頭のイノシシと、その足元に掘り返された土だ。それ以外に外の族の色はない。290°–335° はわずか 3 ピクセルである。

正しく立っていても、まったく見えないことはある

下縁のイノシシ一頭の暖色ピクセルだけを測ると 648 個、L 0.31、C 0.045、Cmax 0.069。画面の明度中央値は 0.54、彩度中央値は 0.089、そのすぐ足元の陽の当たる草は L 0.80 / C 0.135 である。色相の帳簿ではこの絵で唯一の外の族なのに、残る二冊ではどちらも最下段——だから初見でイノシシに気づかなかった人が多いはずだ。アクセントの色相を正しく選んだのに消えてしまうときは、まずその明度が画面で何番目かを測ること。

誰も受け取らなければ、焦点はいちばん大きい面へ行く

最も彩度の高い 4000 ピクセルは 4000 個すべてが緑、色相 135°、平均彩度 0.182、しかも (0.48, 0.90) の小さな一画に集まっている——広場の真ん中で日光を直に受けた草だ。緑は 64.64% を占め、いちばん大きな面であると同時に 0.199 の彩度の天井も持ち去っている。広場を囲む樹冠は 0.088 まで、木の下でいちばん暗い層は 0.043 しかない。アクセントが支払えないとき、画面は焦点を空席のままにはしない——面積が最大で最もよく光を受けた面へ自動的に配ってしまう。そしてそれは、たいていあなたの望んだ結果ではない。

この配色を持ち帰る

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

/* イノシシの生息地・晴れ間 · Boar Habitat in a Clearing of Light — Teyvat Palette */
:root {
  --sky-gap: oklch(0.62 0.089 225); /* 隙間の空の青 #4191ae */
  --canopy-green: oklch(0.49 0.088 160); /* 樹冠の緑 #2a704f */
  --deep-shade: oklch(0.36 0.043 197); /* 深い陰の青 #1e4445 */
  --boulder-grey: oklch(0.6 0.051 193); /* 巨石の灰 #5b8a89 */
  --sunlit-meadow: oklch(0.8 0.135 129); /* 陽に透ける草 #a3cf6d */
  --boar-brown: oklch(0.31 0.045 40); /* イノシシの褐 #44281f */
  --gradient-boar-habitat: linear-gradient(180deg, oklch(0.62 0.089 225) 0%, oklch(0.49 0.088 160) 18%, oklch(0.36 0.043 197) 46%, oklch(0.6 0.051 193) 70%, oklch(0.8 0.135 129) 100%);
}

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