This color reference tool displays the traditional Japanese color palette sourced from the NIPPON COLORS system, showing each color's Japanese name, romanization, a full-bleed preview swatch, and its HEX, RGB, and CMYK values — all copyable in one click. A Tailwind CSS-compatible gradient scale is also generated for each color.
Copying color values
Hovering over any color card reveals the HEX code (e.g. #F2A0A1), RGB components (e.g. 242, 160, 161), and CMYK four-channel values. Clicking any row copies that specific value to the clipboard. The circular progress indicators in the top-right corner of each card represent C, M, Y, and K individually — clicking a single circle copies just that channel's value.
Using the gradient scale
Each card's bottom strip shows a light-to-dark gradient scale built on Tailwind CSS palette logic. Clicking any step in the scale copies its HEX value. These steps are ready to drop directly into a Tailwind config as custom color values or into CSS custom properties.
What the color names mean
The names come from Japanese cultural and natural references — plants, flowers, seasons, and traditional crafts. Some examples:
- 桜色 (sakura-iro) — the pale pink of cherry blossoms
- 浅葱色 (asagi-iro) — a blue-green historically associated with the Shinsengumi uniform
- 山吹色 (yamabuki-iro) — the deep yellow of kerria flowers, used in gold-related contexts
Many colors appear visually similar at a glance; the names carry distinctions in hue, saturation, and cultural connotation that the swatch alone doesn't convey.
Where these colors work well
- Japanese-style UI themes where restrained, natural palettes fit the aesthetic
- Brand identity projects needing a culturally grounded color language
- Illustration and print work referencing traditional Japanese crafts or textiles
Color naming tradition
- Derived from the same system used in kimono, lacquerware, and architecture
- Encodes fine distinctions — Japanese has distinct names for shades Western palettes group as one
- Same lineage as the color vocabulary in Heian-era court literature
Getting the most from this palette
The palette is best browsed by color family rather than scrolled linearly — groupings by hue (red, blue, green, yellow, purple, brown) make it much faster to find the specific tone you need. When multiple candidates look similar, comparing their CMYK values often reveals which one leans warm vs. cool.