Kuchinashi Color Codes and Color Swatches: How Can You Incorporate It into a Color Scheme?

Kuchinashi-iro (支子色) is a slightly reddish yellow named for a dye made from gardenia fruit. Although it is a bright color, its Japanese name does not determine one exact digital value. This article compares two published color swatches and shows how to use them in a Japanese sweets product card and a craft-event announcement banner.

How to read Kuchinashi-iro and compare its color codes

支子色 is read kuchinashi-iro and may also be written 梔子色. The color name comes from dye made using the fruit of the gardenia plant. HEX is a six-digit hexadecimal color code preceded by a hash sign and used to specify colors on the web. The two Japanese color references below give different shades for the name.

The Wairo Daijiten example ■#FBCA4D is a warm yellow with a slightly more orange appearance. The I-IRO example ■#E6C65C, listed under the alternative spelling 梔子色, is a slightly more subdued yellow. Neither value should be presented as the only correct Kuchinashi-iro; record both the chosen code and the reference it comes from. RGB expresses screen colors through their red, green, and blue components. These two yellow swatches have a contrast ratio of about 1.08:1, so there is only a small difference in their relative brightness.

Use it in a Japanese sweets card or an event banner

Example A: a product card for seasonal Japanese sweets.Set the card background to a warm off-white ■#FFF9EF and use dark charcoal ■#2C2924 for the product name, price, and description. Place the Wairo Daijiten yellow ■#FBCA4D behind a small label reading “Seasonal,” with charcoal ■#2C2924 lettering. Make the “View Product” button deep green ■#284F43 with white ■#FFFFFF text. By reserving yellow for a short label instead of a large background area, the product photograph and key information can remain distinct.

The text-to-background contrast ratios in this example are approximately 13.83:1 for charcoal ■#2C2924 on off-white ■#FFF9EF, 9.42:1 for charcoal ■#2C2924 on Kuchinashi yellow ■#FBCA4D, and 9.17:1 for white ■#FFFFFF on deep green ■#284F43.

Example B: an evening craft-event announcement banner.Use deep blue-green ■#263A36 as the background and set a short “Craft Exhibition” heading and the event date in off-white ■#FFF9EF. Make the “Venue Details” button the more muted I-IRO yellow ■#E6C65C, with deep blue-green ■#263A36 lettering. Concentrating the yellow on the button helps distinguish the main action from the dark background. Off-white ■#FFF9EF on blue-green ■#263A36 has a contrast ratio of about 11.52:1, and blue-green ■#263A36 on the yellow ■#E6C65C has a ratio of about 7.24:1.

Check pale boundaries and avoid white text on yellow

The Wairo Daijiten yellow ■#FBCA4D and off-white ■#FFF9EF differ by only about 1.47:1. A yellow label on a pale card may therefore have an indistinct outline. If identifying its boundary is important for using or understanding the interface, add a thin charcoal ■#2C2924 outline. Placing normal-sized white ■#FFFFFF text on the same yellow ■#FBCA4D gives only about 1.54:1 contrast.

WCAG (Web Content Accessibility Guidelines) 2.2 Level AA generally requires at least 4.5:1 contrast between normal-sized text and its background, or 3:1 for large text. Choose dark text on yellow, check smaller labels and smartphone layouts, and write out meanings such as “Seasonal” rather than communicating them through color alone.

HueRoll lets you adjust colors using HEX input and check a selected color’s contrast with white or black. It cannot compare arbitrary pairs of user-selected colors or automatically determine WCAG compliance. The contrast ratios for the text, buttons, and backgrounds in this article were calculated separately.