
Inazuma City, Sakura in the Mist
色をクリックすると HEX をコピー、ホバーで OKLCH 値を表示します。
シーンから蒸留したグラデーションをストップ順に左から右へ展開。完成角度は 180°(ヒーローとエクスポートで使用)、ギャラリーのカードは一律 135° の斜めで表示します。
アクセントの二つの使い方が、この一枚で勝負を分ける。桜の粉は約 3%——璃月港の暖色(2.6%)とほぼ同じ面積なのに、島じゅうに数十の小さな点として撒かれている。集めれば主役、撒けばテクスチャ。面積が同じでも、役割は別物になる。
CSS 変数、Tailwind v4 テーマ、または SVG。ワンクリックでプロジェクトへコピーできます。
/* 稲妻城・霧の桜 · Inazuma City, Sakura in the Mist — Teyvat Palette */
:root {
--sea-mist: oklch(0.765 0.072 235.4); /* 海霧の青 #85bbda */
--shallow-teal: oklch(0.706 0.063 203); /* 浅瀬の青 #70acb2 */
--castle-indigo: oklch(0.599 0.096 250.4); /* 天守の藍 #5284b7 */
--sakura-pink: oklch(0.727 0.08 318.8); /* 桜粉 #bd97c7 */
--electro-violet: oklch(0.66 0.067 296); /* 雷紫 #958ab7 */
--gradient-inazuma-city: linear-gradient(180deg, oklch(0.765 0.072 235) 0%, oklch(0.727 0.08 319) 30%, oklch(0.706 0.063 203) 55%, oklch(0.66 0.067 296) 78%, oklch(0.599 0.096 250) 100%);
}1080×1350 の PNG。元の風景・パレット・カラーコードが入っているので、保存してそのまま投稿できます。