Teyvat Paletteテイワットパレット
シーンライブラリ
GitHub
ギャラリー
九略茶館・昼の光
璃月昼晴朗素っ気ない居座り

九略茶館・昼の光

Jiulue Teahouse under Plain Daylight

色カード

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

再構成グラデーション

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

0%599cba18%6d9c9c44%4b575f62%a8424c100%bfc7bc

なぜ調和するのか

建てられたものには色がない。画面の下半分 45% を占める石段と敷石は彩度 0.019、茶館一棟の平均は 0.020、画面全体の 56.13% が無彩の閾値の下にある——色はすべて移ろうものに預けられている。空(229°)、絶壁(195°)、そして庭心に立つ紅楓(17°、彩度 0.134)に。彩度は変わるものにだけ配り、変わらないものは空けておく。だからこの場所は幾度でも飾り直せる。

01

建物は自分の色番号を持たない

左半分を占める茶館一棟——青瓦の屋根、木の回廊、白い漆喰壁——の平均彩度は 0.020 で、無彩と呼ぶ閾値 0.025 の下にある。そこから最も彩度の高い 3% だけを抜き出しても、平均は 229°・彩度 0.089。その 229° は頭上に広がる空の色相そのものだ(空は彩度 0.082)。建物が持つわずかな色さえ空からの借り物で、自前の色番号はひとつも出していない。何度でも飾り直せる空間が欲しいなら、まず空間そのものを黙らせること。

02

楓が画面の彩度をすべて背負う

画面で最も彩度の高い 4000 画素のうち 3697 が同じ場所に集まっている:庭心 (0.51, 0.43) の紅楓、平均 17°・彩度 0.134、ピーク 0.197 は画面全体の最高値である。二番目に暖かいのは橙の木(35°・彩度 0.102)で、右の画縁の最も外側 (0.98, 0.32) に押しやられ、いまにも画面から出そうになっている。暖色は合わせて 5.71% しかない。それでもこの絵で記憶に残る色はそこにしかない——足元の敷石は L 0.82 まで明るいのに彩度 0.018、画面で最も明るい 4000 画素(L 0.90)もすべてその石の上にあって彩度 0.016 だからだ。最も明るい面が無彩であってはじめて、最も鮮やかなものに立つ場所ができる。

03

余白は、あとで塗るためにある

同じ茶館の海灯祭版が、この余白の使い道を証明している。無彩画素は 56.13% から 25.82% へ落ち、同じ下半分の地面は彩度 0.019 から 0.032 へ上がり、その最も鮮やかな 3% は 252° の冷たい影から 33° の灯火へ裏返る。地が空だったから、祭が乗るのだ。プロダクトも同じである——枠、器、区切りは無彩に保ち、彩度の予算は入れ替わる中身のために取っておく。季節も催しもテーマも、殻を描き直さずに替えられる。

この配色を持ち帰る

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

/* 九略茶館・昼の光 · Jiulue Teahouse under Plain Daylight — Teyvat Palette */
:root {
  --open-sky: oklch(0.66 0.082 229); /* 天光の青 #599cba */
  --karst-teal: oklch(0.66 0.051 195); /* 岩の青 #6d9c9c */
  --court-stone: oklch(0.82 0.018 137); /* 石庭の白 #bfc7bc */
  --eave-slate: oklch(0.45 0.02 239); /* 軒の灰 #4b575f */
  --maple-red: oklch(0.52 0.134 17); /* 楓の紅 #a8424c */
  --rim-orange: oklch(0.54 0.102 35); /* 画縁の橙 #a15745 */
  --gradient-jiulue-teahouse: linear-gradient(180deg, oklch(0.66 0.082 229) 0%, oklch(0.66 0.051 195) 18%, oklch(0.45 0.02 239) 44%, oklch(0.52 0.134 17) 62%, oklch(0.82 0.018 137) 100%);
}

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