
Click a swatch to copy its HEX; hover for the OKLCH value.
The gradient distilled from the scene, unrolled left to right by stop; the authored angle is 180° (used by the hero and exports), while gallery cards share a uniform 135° sweep.
Change the hue and the intensity no longer has to be bought with lightness. The most chromatic 3% of this frame's 90°–165° sits at L 0.70 with chroma 0.155; the most chromatic 3% of its own 210°–270° has to fall to L 0.62 to reach 0.124 — the green is 0.08 lighter and 0.031 richer. That is why its median lightness is the second highest of the four (0.68) while its chroma ceiling is the highest of the three daylight frames (0.195). Blue and violet pay for chroma in lightness; green and cyan do not. Whether a palette can be rich is settled by which side of the wheel its dominant sits on.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Chouji's House in Bright Daylight · Chouji's House in Bright Daylight — Teyvat Palette */
:root {
--meadow-green: oklch(0.68 0.138 155); /* Meadow Green #42b172 */
--thatch-straw: oklch(0.73 0.068 88); /* Thatch Straw #baa676 */
--cliff-teal: oklch(0.54 0.072 185); /* Cliff Teal #367c74 */
--sky-blue: oklch(0.75 0.097 235); /* Sky Blue #6db8e3 */
--far-haze: oklch(0.76 0.087 216); /* Far Haze #6bbfd4 */
--step-stone: oklch(0.68 0.042 119); /* Step Stone #959c7f */
--gradient-choujis-house: linear-gradient(180deg, oklch(0.75 0.097 235) 0%, oklch(0.76 0.087 216) 14%, oklch(0.54 0.072 185) 34%, oklch(0.73 0.068 88) 52%, oklch(0.68 0.042 119) 72%, oklch(0.68 0.138 155) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.