ナタ昼広闊浮遊ほのあたたか

アトクパンの大地・漂う火の粉

Atocpan, Drifting Embers

色カード

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

再構成グラデーション

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

0%4d76ad26%6c618c58%a97372100%ab7a57

なぜ調和するのか

多色相を同居させる整列は一種類ではない。この絵の八つの色相帯は平均明度がすべて 0.54–0.68 という 0.14 の一枠に収まり、彩度のほうは 0.052–0.087 に散っている——テケメカンの谷とちょうど裏返しで、あちらが揃えたのは彩度(0.091 / 0.092 / 0.094)、明度は 0.47 から 0.73 まで広がっていた。どちらのチャンネルを押さえるかで、もう一方が自由になる。160° の振れ幅は、明度が譲ったものだ。

尾根の上に明度差がない

天頂は実測 L 0.56、彩度 0.097、256°。山体の受光面は L 0.61、0.069、20°——明度差はわずか 0.05、色相は 124° 離れている。左下の岩稜から画面中心の峰へ登っていく、この絵でいちばん長い稜線は、まるごと色相で引かれていて、明暗で切られた区間がひとつもない。結果は峰の上に出ている。砕けて浮かぶ岩塊と巻き上がる砂塵が稜線をまたぎ、半分は空に、半分は岩の上にあるのに、どちらも貼りつけたようには見えない。主体を背景の手前に浮かせず場面の中に置きたいなら、まず背景と同じ明度まで寄せて、輪郭は色相に任せること。

浮いた明度は遠近にすべて使われる

八つの色相帯が使う明度幅は 0.14 しかないのに、画面全体は L 0.42 から 0.84 まで動く——余った両端は一枠も無駄になっていない。すべて距離に回されている。最も明るい 4000 画素はふた山に分かれ、ひとつは (0.10, 0.65)、もうひとつは (0.96, 0.65)、どちらも L 0.87 の遠い海で、画面中心の山は L 0.60 である。この絵の奥行きは横に走る。山が縦方向を占めきってしまったので、遠景は左右へ退くしかない。明度が色相の仕分けを兼ねなくなれば、ひとつのことだけを言えるようになる。

火の粉は、浮かんでいる空と同じ彩度

左右の純粋な空の部分(x 0–0.28 と 0.72–1 の上三割)では、暖色画素 332 個に対して青の画素が 150,773 個。火の粉は実測 L 0.72–0.73、彩度 0.093–0.095、それを支える空は L 0.57–0.59、彩度 0.086–0.096——彩度はまったく同じで、見分けがつくのは 125° の色相差と 0.14 の明度による。画面全体も同じ規律だ。八帯の彩度は 0.052–0.087 の間にしかなく、最も鮮やかな 4000 画素は七つの色相帯に散らばり、最大の一群(30°–60°、1,326 個)ですら三分の一を占めるにすぎない。同じ物差しでクァワカン断崖は 4000 個すべてが一本の帯に入る。ひとつの画面で八色を同時に使いたいなら、どれかの彩度を上げる前に、どれかが明度で他を押さえつけていないかを確かめること。

この配色を持ち帰る

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

/* アトクパンの大地・漂う火の粉 · Atocpan, Drifting Embers — Teyvat Palette */
:root {
  --zenith-blue: oklch(0.56 0.097 256); /* 天頂の青 #4d76ad */
  --ochre-ridge: oklch(0.61 0.069 20); /* 赭の嶺 #a97372 */
  --summit-mauve: oklch(0.52 0.069 296); /* 峰の紫 #6c618c */
  --meadow-gold: oklch(0.62 0.078 56); /* 草地の黄 #ab7a57 */
  --drifting-ember: oklch(0.73 0.095 23); /* 火の粉の橙 #dd908c */
  --far-sea: oklch(0.87 0.045 249); /* 遠海の白 #bed7f1 */
  --gradient-atocpan: linear-gradient(180deg, oklch(0.56 0.097 256) 0%, oklch(0.52 0.069 296) 26%, oklch(0.61 0.069 20) 58%, oklch(0.62 0.078 56) 100%);
}

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