OKLCH × 伝統色 / Traditional colors

Design with nature and math.

Japanese color theory has long used layering, seasonal feeling, and restrained saturation. This demo translates those ideas into modern OKLCH UI tokens that can be adjusted, copied, and reused in real interface work.

Interactive system

Build a small interface palette from one cultural motif.

OKLCH separates lightness, chroma, and hue. That makes it easier to create calm layered surfaces, readable text, and consistent status colors without manually tuning every hex value.

Layer 1: Surface

Kasane interface card

Soft lightness steps create depth without heavy shadows.

Layer 2: Inner surface Border and background values are generated from the same hue.
Goshiki: Midori / Success Hue is locked to green while lightness maps to the selected theme.
Goshiki: Kurenai / Error Semantic status colors stay calm instead of becoming harsh neon alerts.

Reference palette

A compact 24-color traditional palette.

Search by kanji or romaji, filter by color family, and click a card to copy its OKLCH value.

Bring cultural harmony to your next interface.

This demo is intentionally small, but the same method can become a full design-token system for multilingual websites, admin tools, and app prototypes.

Start a project
Copied