
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.
A light with no colour is a colour-rendering meter: the same skylight, falling on a mossed cliff, grows more chromatic as it grows brighter (leaf-shadowed stretch L 0.36 / chroma 0.087 → lit stretch L 0.64 / 0.144), and falling on the paving of the square, grows greyer as it grows brighter (four rectangles along the bottom edge, left to right, L 0.68 / 0.73 / 0.75 / 0.77 against chroma 0.024 / 0.016 / 0.016 / 0.018). Within one picture the sign of the lightness-chroma correlation can point opposite ways on two surfaces — and what that sign reads is not the light, but whether the material has a hue of its own.
CSS variables, a Tailwind v4 theme or SVG — one click to copy into your project.
/* Acara Crafts in Plain Shade · Acara Crafts in Plain Shade — Teyvat Palette */
:root {
--moss-cliff-green: oklch(0.62 0.14 145); /* Mossy Cliff Green #479c4d */
--leaf-shadow-green: oklch(0.36 0.087 148); /* Leaf-Shadow Green #154921 */
--plain-paving: oklch(0.74 0.017 105); /* Plain Paving #acaca0 */
--awning-red: oklch(0.56 0.123 35); /* Awning Red #b05640 */
--thatch-straw: oklch(0.45 0.047 76); /* Thatch Straw #645237 */
--glazed-jar: oklch(0.85 0.042 112); /* Glazed Jar White #ced1b2 */
--gradient-location-acara-crafts: linear-gradient(180deg, oklch(0.36 0.087 148) 0%, oklch(0.62 0.14 145) 30%, oklch(0.56 0.123 35) 55%, oklch(0.45 0.047 76) 72%, oklch(0.74 0.017 105) 100%);
}A 1080×1350 PNG carrying the scene, its palette and every value — save it and post it as is.