ナタ昼灼熱開豁トーテム

コアテペック山・烈日

Coatepec Mountain under a Blazing Sun

色カード

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

再構成グラデーション

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

0%4f97ed32%72a7c168%a9614d100%7a4936

なぜ調和するのか

向かい側の色を主体の中へ持ち込む。空(254°、40%)と赤岩(37°、21%)は 143° 離れ、彩度もどちらも低くない——そして崖面を流れる紋様は実測 231°、空とは 23° の差しかない。衝突する二つの半分が二枚のポスターではなく一枚の絵になるのは、片方がもう片方の色を借りているからだ。

崖に空の色番号が書いてある

崖面の領域から青緑系の色相の画素だけを取り出すと(1.6 万個)、平均は 231°・彩度 0.068。空は 254°・彩度 0.147。両者の差は 23° で、37° の赤岩の上では同じ青として読まれる。画面が自分で行った調停である:二つの色のあいだに第三の色を挟むのではなく、向かい側の色を少量だけ主体の内部に描き込む。UI でも同じだ。アクセントと広い地の色を喧嘩させたくないなら、地のテクスチャや罫線やアイコンにアクセントの同族を少し置くほうが、中間色を足すより安く済む。

最も飽和しているのは空で、主役ではない

空は彩度 0.147、ピーク 0.205 で画面最高、赤岩は 0.098 しかない。ふつう最も飽和した面が主役を奪うが、ここでは奪わない。明度も最高(L 0.67)で、しかもディテールがないからだ——飽和と明度と空白が揃うと、「近い」ではなく「明るい」と読まれる。ある面を飽和させたまま目立たせたくないなら、そこからディテールを抜くこと。

三本目の色帯が接地を担う

台地の草地は 72°、彩度 0.092 で画面の下縁を占め、青と赭の境界を宙ではなく地面の上に落としている。寒暖衝突の三つのつまみ(明度・彩度・面積)のうち、層岩巨淵の一篇が回したのは面積だった。ここでは三つとも大きく動かさず、「色を借りる + 接地する暖色帯」で処理している。同じ問題に別の道具。

この配色を持ち帰る

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

/* コアテペック山・烈日 · Coatepec Mountain under a Blazing Sun — Teyvat Palette */
:root {
  --noon-blue: oklch(0.67 0.147 254); /* 正午の青 #4f97ed */
  --mesa-ochre: oklch(0.57 0.098 37); /* 赭色の台地 #a9614d */
  --banded-teal: oklch(0.7 0.068 231); /* 岩紋の青 #72a7c1 */
  --dry-gold: oklch(0.55 0.092 72); /* 枯草の金 #93682e */
  --crimson-crown: oklch(0.57 0.081 331); /* 緋の冠 #93668d */
  --gradient-coatepec-mountain: linear-gradient(175deg, oklch(0.67 0.147 254) 0%, oklch(0.7 0.068 231) 32%, oklch(0.57 0.098 37) 68%, oklch(0.457 0.074 41.6) 100%);
}

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