
Secret Hall of the Realms, Stars and Afterglow
色をクリックすると HEX をコピー、ホバーで OKLCH 値を表示します。
シーンから蒸留したグラデーションをストップ順に左から右へ展開。完成角度は 180°(ヒーローとエクスポートで使用)、ギャラリーのカードは一律 135° の斜めで表示します。
退くのは淡さであって、暗さではない。右の巨柱は 87420 画素、L 0.47 / 彩度 0.052 / 293°。中央のステンドグラスの亭は L 0.49 / 0.109 / 285°——明度差はわずか 0.02、色相も同族で 8° しか離れていない。主従を分けているのは彩度の 2.1 倍だけである。手前の広場の敷石にいたっては主体より 0.12 明るく(L 0.61)、彩度は四割(0.044)しかない。一枚の面を背景へ退かせたいとき、急いで暗く落としてはいけない——暗さは画面に穴をもう一つ掘るが、淡さは掘らない。
CSS 変数、Tailwind v4 テーマ、または SVG。ワンクリックでプロジェクトへコピーできます。
/* 諸界の秘蔵展示室・星と霞 · Secret Hall of the Realms, Stars and Afterglow — Teyvat Palette */
:root {
--zenith-violet: oklch(0.54 0.114 265); /* 穹頂の紫 #4e6cb1 */
--horizon-white: oklch(0.99 0.011 121); /* 曦の白 #fafdf5 */
--willow-gold: oklch(0.58 0.07 45); /* 柳の金 #9e6d57 */
--stained-blue: oklch(0.49 0.109 285); /* 瑠璃の青 #5b569b */
--portal-core: oklch(0.58 0.135 272); /* 門芯の青 #5f73ca */
--pillar-stone: oklch(0.47 0.052 293); /* 柱石の灰 #5c5576 */
--plaza-rose: oklch(0.61 0.044 307); /* 敷石の霞 #8a7d98 */
--gradient-secret-hall-of-the-realms-location-context: linear-gradient(180deg, oklch(0.54 0.114 265) 0%, oklch(0.99 0.011 121) 24%, oklch(0.58 0.07 45) 40%, oklch(0.49 0.109 285) 56%, oklch(0.58 0.135 272) 70%, oklch(0.47 0.052 293) 84%, oklch(0.61 0.044 307) 100%);
}1080×1350 の PNG。元の風景・パレット・カラーコードが入っているので、保存してそのまま投稿できます。