Teyvat Paletteテイワットパレット
シーンライブラリ
GitHub
ギャラリー
諸界の秘蔵展示室・星と霞
紫の穹低い曦清らかな寂

諸界の秘蔵展示室・星と霞

Secret Hall of the Realms, Stars and Afterglow

色カード

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

再構成グラデーション

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

0%4e6cb124%fafdf540%9e6d5756%5b569b70%5f73ca84%5c5576100%8a7d98

なぜ調和するのか

退くのは淡さであって、暗さではない。右の巨柱は 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)しかない。一枚の面を背景へ退かせたいとき、急いで暗く落としてはいけない——暗さは画面に穴をもう一つ掘るが、淡さは掘らない。

01

脇役は主体より倍大きい。それでも脇役である

右の石柱はサンプリングで 87420 画素、中央の亭のステンドグラスは 45562 画素——脇役の面積は主体の二倍近くあり、しかもより手前に置かれている。それでも実測は L 0.47 / 彩度 0.052 / 色相 293°、主体は L 0.49 / 0.109 / 285°。明度差 0.02 は肉眼では分からず、色相差 8° は同一の族、違うのは彩度の 2.1 倍だけである。全画面で最も彩度の高い 4000 画素のうち 2519 画素が 274°、1481 画素が 268°、重心は (0.47, 0.60) と (0.49, 0.63)、すべてあの亭とその足元の門の光の上にある(門の光は実測 L 0.58 / 彩度 0.135 / 272°、ピーク 0.203)。大きな面を退場させるとき、いちばん安上がりな一筆はその彩度を抜くことだ。

02

敷石は主体より 0.12 明るい

手前の広場の敷石は実測 L 0.61 / 彩度 0.044 / 307°、右の白い崖は L 0.57 / 0.056 / 287°——どちらもステンドグラスの亭の L 0.49 より明るいのに、彩度はその 0.109 の四割ほどしかない。〈明星斎・真昼〉が登録した条件は「同じ明度なら彩度で分けられる」だった。この絵は明度を逆に 0.12 並べ替えているのに、分離はまったく緩まない。つまりあの規則の「同じ明度」は必要条件ではなく、いちばん手間のかからない並べ方の一つにすぎない。主従は彩度が分けるのだから、明度の軸は別のものを描くのに回してよい——ここで描いているのは、空から地面までの空気である。

03

いちばん徹底した譲りは、あの光そのもの

左の地平線に浮かぶ光の塊が、全画面で最も明るい。最も明るい 4000 画素のうち 3872 画素が (0.16, 0.50) に落ち、実測 L 0.99 / 彩度 0.011——この絵の彩度中央値 0.061 の五分の一にも届かず、無彩の線 0.025 の下を踏んでいる。それは明度のチャンネルを占め切ると同時に、色相をまるごと手放した。だから彩度の天井 0.203 は一分も欠けずに亭のステンドグラスのものになる。インターフェースでも同じだ:主体に彩度を独占させたいなら、画面でいちばん明るい面をまず空にすること。空にするとは暗く落とすことではなく(暗く落とせばそれは光でなくなる)、無彩の線の下まで淡く抜くことである。

この配色を持ち帰る

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。元の風景・パレット・カラーコードが入っているので、保存してそのまま投稿できます。