
Lempo Isle in Night Blue
色をクリックすると HEX をコピー、ホバーで OKLCH 値を表示します。
シーンから蒸留したグラデーションをストップ順に左から右へ展開。完成角度は 180°(ヒーローとエクスポートで使用)、ギャラリーのカードは一律 135° の斜めで表示します。
アクセントに配られる彩度の予算は「主場の色相からどれだけ離れているか」で決まる。この夜景は 73.04% が青帯、平均彩度 0.145——空そのものが彩度の天井(ピーク 0.282)である。右の高い竿の上の灯は青帯の平均 259° からわずか 23° しか離れておらず、彩度を 0.239 まで、全画面の 99 パーセンタイル 0.222 を越えて持ち上げる。一方そこから 132° 離れた暖色は全部あわせて 45,126 画素、画面の 5.13%、ピークでも 0.165 しかなく、99 パーセンタイルにさえ届かない。同族のアクセントは彩度を買い、対立するアクセントは明度しか買えない。
CSS 変数、Tailwind v4 テーマ、または SVG。ワンクリックでプロジェクトへコピーできます。
/* レンポ島・夜の青 · Lempo Isle in Night Blue — Teyvat Palette */
:root {
--night-vault: oklch(0.45 0.183 263); /* 夜天の青 #184ab8 */
--machine-indigo: oklch(0.35 0.067 262); /* 機体の藍 #273a5d */
--furnace-orange: oklch(0.69 0.1 35); /* 炉火の橙 #d18471 */
--pole-lamp-violet: oklch(0.56 0.222 282); /* 竿灯の紫 #6855f0 */
--water-gold: oklch(0.82 0.044 44); /* 川面の金 #debcad */
--slope-green: oklch(0.42 0.058 147); /* 斜面の草緑 #37563a */
--gradient-lempo-isle: linear-gradient(180deg, oklch(0.45 0.183 263) 0%, oklch(0.35 0.067 262) 30%, oklch(0.69 0.1 35) 62%, oklch(0.42 0.058 147) 82%, oklch(0.82 0.044 44) 100%);
}1080×1350 の PNG。元の風景・パレット・カラーコードが入っているので、保存してそのまま投稿できます。