
The Sea of Clouds in Far Light
色をクリックすると HEX をコピー、ホバーで OKLCH 値を表示します。
シーンから蒸留したグラデーションをストップ順に左から右へ展開。完成角度は 180°(ヒーローとエクスポートで使用)、ギャラリーのカードは一律 135° の斜めで表示します。
白が光になるには、隣人の色相から遠ざかるか、いっそ色相を持たないかのどちらかが要る。彩度を半分削っただけでは、それはやはり空のままだ。雲来の海で最も明るい 4000 画素は上辺の二マスにあり、L 0.90 と 0.89、彩度 0.039 と 0.042、色相はどちらも 243°——頭上の空の 0.086 に対して確かに半分以上を削っている。しかし 243° は、全画面の 76.02% を占める青帯の平均 233° からわずか 10° しか離れていない。だからそれは空へ吸収され、「より遠い」と読まれて「光」とは読まれない。この絵に光源は無く、焦点は下辺が自力で稼ぐしかない。
CSS 変数、Tailwind v4 テーマ、または SVG。ワンクリックでプロジェクトへコピーできます。
/* 雲来の海・遠照 · The Sea of Clouds in Far Light — Teyvat Palette */
:root {
--cloud-rim: oklch(0.9 0.039 243); /* 雲縁の白 #c9e2f6 */
--sea-sky: oklch(0.76 0.08 233); /* 海天の青 #7cbadc */
--cliff-shadow: oklch(0.67 0.071 222); /* 崖影の青 #629fb5 */
--shoal-jade: oklch(0.72 0.077 193); /* 浅湾の碧 #67b4b2 */
--eave-vermilion: oklch(0.7 0.074 43); /* 軒瓦の朱 #c6907a */
--gradient-sea-of-clouds: linear-gradient(180deg, oklch(0.9 0.039 243) 0%, oklch(0.76 0.08 233) 30%, oklch(0.67 0.071 222) 55%, oklch(0.72 0.077 193) 76%, oklch(0.7 0.074 43) 100%);
}1080×1350 の PNG。元の風景・パレット・カラーコードが入っているので、保存してそのまま投稿できます。