フォンテーヌ無人の場機械灯のぬくもり

鉄拳闘技・灯の下

Pankration Ring under Lanternlight

色カード

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

再構成グラデーション

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

0%1f2c4014%3d445924%cbeeff46%4c383162%9d5628100%29261e

なぜ調和するのか

ハイライトは取引であり、レートを決めるのは材質である。同じ灯の下で、左の木の階段は 0.10 明るくなるだけで彩度を 0.025 から 0.061 まで交換した。一方、闘技台のリベット鉄板は 0.16 も明るくなって彩度は 0.016 から 0.031 にしか動かない——拡散反射の材質は光を彩度に換え、鏡面の材質は光を明度に換える。

二つの色温度、同じ予算

画面上部三分の一(y 0–0.30、276,480 画素)は実測 L 0.34、彩度 0.037、色相 265°。同じ高さの中央の帯(y 0.42–0.72、同じく 276,480 画素)は L 0.34、彩度 0.031、色相 41°。冷たい側と暖かい側で明度は寸分違わず、彩度の差もわずか 0.006——136° 離れた二つの色温度が配っているのは同じ予算なのだ。だから下の煉瓦と木に色があり、上の鋼管に色がないことを、光のせいにはできない。違いは材質の側にしかない。

0.10 明るくして 0.036、0.16 明るくして 0.015

闘技台へ下りる左の木の階段は全体で L 0.29、彩度 0.025、最も彩度の高い 3% は L 0.39、彩度 0.061。左壁の煉瓦(13,056 画素)は L 0.34、彩度 0.025、最も彩度の高い 3% は L 0.38、彩度 0.039——拡散反射の二つは、明度が少し上がれば彩度もついて伸びる。鏡面はその逆だ。左上の鋼管の陰面は L 0.30、彩度 0.026、管を走る縦のハイライトは L 0.43、彩度 0.044。鉄板は乾いた面の L 0.23、彩度 0.016 から中央の反射帯の L 0.39、彩度 0.031 へ——0.16 明るくなって、入ってきた彩度は 0.015 だけ。仕組みは単純で、拡散反射のハイライトは固有色にさらに光を掛けたものだから彩度も一緒に伸びるしかない。鏡面のハイライトは光源そのものの像であり、この部屋で最も強い光はほぼ白(送風窓の奥は L 0.93、彩度 0.043)なのだから、返ってくるのは明度だけになる。二つの面を別々の材質として読ませたいなら、固有色ではなく、ハイライトのレートを変えること。

灯に最も近い面が、最も色を持たない

闘技台の床はリベットを打った一枚の鉄板で、画面下四分の一(189,249 画素)はほぼこれだけ——L 0.27、彩度 0.015。真上の木組みには四つの灯が吊るされている。その灯のある横帯(y 0.62)は彩度 0.034、鉄板の帯(y 0.90)は 0.013 しか残らない。さらに徹底しているのは、鉄板の矩形の中で 180°–300° に落ちる画素を探すと一つもないことだ。0°–90° に落ちるものは 5,949 個、彩度 0.034。上半分を占める 265° の鋼の青は、一筋もこの床に映っていない。暖かさをほんの少しだけ、しかも中央の反射帯にしか受け取らない。金属の床を描くなら、灯が色をつけてくれることを当てにしないこと——その予算は明度の欄から出すしかない。

この配色を持ち帰る

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

/* 鉄拳闘技・灯の下 · Pankration Ring under Lanternlight — Teyvat Palette */
:root {
  --vent-daylight: oklch(0.93 0.043 228); /* 冷窓の白 #cbeeff */
  --pipe-steel: oklch(0.34 0.037 265); /* 配管の青 #2f384b */
  --riveted-iron: oklch(0.27 0.015 93); /* 鉄板の灰 #29261e */
  --tier-brick: oklch(0.34 0.025 42); /* 観覧席の赭 #44342e */
  --stair-timber: oklch(0.39 0.061 55); /* 階段木の黄 #5e3c24 */
  --lantern-glow: oklch(0.53 0.111 51); /* 灯焔の橙 #9d5628 */
  --gradient-pankration-ring: linear-gradient(180deg, oklch(0.29 0.041 259) 0%, oklch(0.39 0.037 271) 14%, oklch(0.93 0.043 228) 24%, oklch(0.36 0.031 38) 46%, oklch(0.53 0.111 51) 62%, oklch(0.27 0.015 93) 100%);
}

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