Teyvat Paletteテイワットパレット
シーンライブラリ
GitHub
ギャラリー
モンドの英雄の象徴・木陰の正午
モンド昼粛然木陰追想

モンドの英雄の象徴・木陰の正午

Symbol of Mondstadt's Hero at Shaded Noon

色カード

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

再構成グラデーション

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

0%468bcb20%71bc8252%18454368%3d84db100%91c26d

なぜ調和するのか

同じ色が一枚の絵に二度現れ、一度は背景、一度は主役になっている:上端を横切る空の帯は実測 249° / 彩度 0.120 / L 0.62、木の下の記念碑から立ちのぼる光柱は 255° / 彩度 0.150 / L 0.61——差は 6°、0.030、0.01 でしかない。光柱が主役になる理由はそれ自身にはなく、それに接している一帯にある:樹冠の陰の面は L 0.36。ある色を焦点にしたいなら、まずその色ではなく、隣を変えること。

01

空と光柱は同じ青

全画で最も彩度の高い 4000 画素のうち 2655 個が 240°–270° に落ち、位置は画面中央やや下の (0.49, 0.64)。それは空ではなく、木の下の記念碑からまっすぐ樹冠へ立ちのぼる一条の光柱だ。測るのに使った縦帯は画幅のわずか 1.6%、読みは 255° / 彩度 0.150 / L 0.61。上端を横切る空は 249° / 彩度 0.120 / L 0.62。数値の上では同じ青なのに、目はそのうち片方だけを事件として扱う。

02

違いは接している一帯だけ

光柱の両脇の幹と影は実測 L 0.45 / 彩度 0.063。光柱はそれに対して明度差 0.16、彩度はその 2.4 倍になる。同じ青を空へ掛け直せば、隣との差は明度 0.01、彩度はその 1.25 倍しか残らず、消えてしまう。〈懸木の民 部族秘蔵所・緑の夜〉ら五篇は同じ資産を五つの環境へ運んでこれを測ったが、この絵はもっと安い——一枚の絵の中に同じ青が二度出ている。場所を変えずに読める:強さは色自身の属性ではない。

03

色相の帳簿は同じ、絵は二枚

〈風唸りの丘・晴れと松の陰〉と並べて測る:緑帯 33.78% 対 32.33%、シアン帯 16.25% 対 12.08%、ブルー帯 47.00% 対 45.67%——三本の色相帯の面積がほぼ一本ずつ一致し、国も時刻も同じなのに、一方は風景、もう一方は主役のいる絵になる。動いているのは残る二つのチャンネルだけ:明度の中央値が 0.61 対 0.70、彩度のピークが 0.234 対 0.175。〈ブロー地区・澄明の昼〉の組は明度の中央値と彩度の p99 を押さえて面積だけを動かした。この一対はちょうど逆で、面積をほぼ釘づけにして、明度と彩度を動かしている。絵に主役を与えたいなら、色相の表に答えを探さないこと。

この配色を持ち帰る

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

/* モンドの英雄の象徴・木陰の正午 · Symbol of Mondstadt's Hero at Shaded Noon — Teyvat Palette */
:root {
  --noon-blue: oklch(0.62 0.12 249); /* 正午の青 #468bcb */
  --monument-shaft: oklch(0.61 0.15 255); /* 碑光の青 #3d84db */
  --sunlit-canopy: oklch(0.73 0.112 150); /* 樹冠の黄緑 #71bc82 */
  --canopy-underside: oklch(0.36 0.049 190); /* 樹冠裏の青 #184543 */
  --trunk-shadow: oklch(0.45 0.063 233); /* 幹影の青 #2e5b73 */
  --meadow-green: oklch(0.76 0.126 133); /* 丘草の緑 #91c26d */
  --gradient-symbol-of-mondstadts-hero: linear-gradient(180deg, oklch(0.62 0.12 249) 0%, oklch(0.73 0.112 150) 20%, oklch(0.36 0.049 190) 52%, oklch(0.61 0.15 255) 68%, oklch(0.76 0.126 133) 100%);
}

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