Teyvat Paletteテイワットパレット
シーンライブラリ
GitHub
ギャラリー
ブロー地区・澄明の昼
フォンテーヌ昼清朗のびやか遠望

ブロー地区・澄明の昼

Belleau Region in Limpid Daylight

色カード

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

再構成グラデーション

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

0%449efc20%a9dcff55%84beef76%76bcc2100%2c8eb9

なぜ調和するのか

画面を清らかに見せたいなら、彩度を下げるのではなく、その面積を下げること。ブロー地区の天井はまったく低くない——真上の空は実測 彩度 0.163、全画面のピーク 0.175 とはわずか 0.012 差だ——ただしその一段は最上縁にしか敷かれておらず、残りの面積はすべて積雲の 0.072 と、10.21% を占める青碧帯の 0.073 に渡されている。だから彩度の中央値は 0.093 で止まる。同じフォンテーヌ、同じ青の族でも、リフィー地区の中央値は 0.121、そして両者の彩度 p99 は 0.164 対 0.160——天井は光が与え、中央値は構図が与える。

01

濃いのは最上縁の一本だけ

画面最上縁の一本(高さ 3%)は実測 L 0.71 / 彩度 0.152 / 色相 251°、中央の幅 40%・高さ 5% を取れば 0.163 で、全画面のピーク 0.175 もここにある。0.05 を越えて下れば積雲が引き継ぐ:右の一団は L 0.87 / 彩度 0.072、中央の一団は 0.84 / 0.083。左端から右端まで架かるあの白い高架橋——画中最大の人工物——ですら実測 L 0.78 / 彩度 0.093 / 色相 245°、ちょうど全画面の彩度中央値の上に乗っている。ピーク彩度はこの絵では一本の縁であって、一面の空ではない。「晴れ」を出したいが「派手」にしたくないなら、最高の一段を画枠のいちばん外へ追いやり、主視野に広げないこと。

02

草も浅瀬も砂も、同じ青碧

島の草地に見える斜面は実測 色相 203° / 彩度 0.071、その下の浅瀬は 208° / 0.076、あの白い砂浜さえ 213° / 0.076——三つの素材は互いに 10° と離れず、すべて 165°–210° の青碧帯に落ちている。そしてこの帯は全画面の 10.21%。島全体の範囲で 90°–165° の緑を探しても拾えるのは 5408 画素、その矩形の 5% にも満たない。全画面に 330°–90° の暖色探索をかければ、灰の閾値に届く画素は一つも無い——砂浜に暖かい粒は一粒も無いのだ。0.093 という中央値を買っているのは、0.07 前後で止まっているこの広大な青碧である。濃度を節約したいなら、まず画面で最も面積の大きいものを選び、それを低彩度に置くこと。全体の彩度を一律に下げても取り戻せない。

03

目立ちは差分——0.070 対 0.015

ブロー地区の天頂は彩度 0.163、自身の中央値より 0.070 高い。リフィー地区で最も濃い海面は 0.136 だが、その中央値 0.121 より 0.015 高いだけだ。二枚の彩度の天井はほぼ同じ(p99 0.164 対 0.160)なのに、買える注意は五倍近く違う——一つの色の目立ちは、その色そのものではなく、中央値を引いた差だからである。中央値を低く抑えるのは保守ではなく、額度を貯めること。同じピークでも、底が一段低ければ一段大きく響く。

この配色を持ち帰る

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

/* ブロー地区・澄明の昼 · Belleau Region in Limpid Daylight — Teyvat Palette */
:root {
  --zenith-blue: oklch(0.69 0.163 252); /* 天頂の青 #449efc */
  --cumulus-blue: oklch(0.87 0.072 239); /* 積雲の青 #a9dcff */
  --aqueduct-blue: oklch(0.78 0.093 245); /* 長橋の青灰 #84beef */
  --isle-cyan: oklch(0.75 0.071 203); /* 洲の青碧 #76bcc2 */
  --deep-bay: oklch(0.61 0.109 232); /* 深湾の青 #2c8eb9 */
  --gradient-belleau-region: linear-gradient(180deg, oklch(0.69 0.163 252) 0%, oklch(0.87 0.072 239) 20%, oklch(0.78 0.093 245) 55%, oklch(0.75 0.071 203) 76%, oklch(0.61 0.109 232) 100%);
}

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