Teyvat Paletteテイワットパレット
シーンライブラリ
GitHub
ギャラリー
スメール夜神秘生命感幽邃

雨林・夜光

Rainforest Bioluminescence

色カード

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

再構成グラデーション

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

0%0b1c2c40%00363a70%006552100%2eb184

なぜ調和するのか

発光体の配色の定石は、極端に暗い地 + 高明度・高彩度の光源色。暗部は黒ではなく、青を帯びた深い緑である。蛍光の感触はエフェクトではなく、明度差そのものから生まれる。

01

暗部にも色がある

最も深いところは L がわずか 0.22 でありながら、なお C 0.04 の青を帯びている——純黒は雰囲気を殺す。ダークな UI の地の色も同じことだ。背景には必ず色相をわずかに与えること。肉眼でほとんど読み取れない量でよい。

02

明度差がそのまま発光になる

蛍光の青と地の色の明度差は 0.55 に達する。glow フィルタは要らない。対比そのものが光っている。ある要素を「光らせたい」なら、まず周囲との L の差が十分かを確かめること。

03

紫は緑の解毒剤

大面積の緑はこもりやすい。茸紫(305°)がトライアド的なアクセントとして神秘を作り、面積は同じく 5% 以下に押さえられている。緑を基調にした設計で最も使い勝手のよい第二の色相は、黄でも青でもなく、しばしば紫である。

この配色を持ち帰る

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

/* 雨林・夜光 · Rainforest Bioluminescence — Teyvat Palette */
:root {
  --bioluminous-cyan: oklch(0.78 0.12 180); /* 蛍光の青 #4ad0ba */
  --moss-glow: oklch(0.62 0.11 165); /* 苔光の緑 #359b75 */
  --deep-canopy: oklch(0.36 0.06 170); /* 深林の緑 #144738 */
  --midnight-blue: oklch(0.24 0.045 245); /* 夜幕の青 #0a2133 */
  --mushroom-violet: oklch(0.55 0.1 305); /* 茸紫 #7f62a0 */
  --gradient-sumeru-rainforest-night: linear-gradient(200deg, oklch(0.22 0.04 250) 0%, oklch(0.3 0.06 200) 40%, oklch(0.45 0.09 175) 70%, oklch(0.68 0.13 165) 100%);
}

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