What Is Kihada-iro? Pronunciation, Origin of the Name, and Color Codes

Kihada-iro (黄蘗色) is a bright, slightly greenish yellow. Its name comes from a plant dye used in Japan for centuries, but published color swatches do not always use exactly the same digital values. This article explains how to pronounce the name, where it came from, and how to choose a HEX color code and practical text and background colors for a website.

How to pronounce Kihada-iro and understand its origin

黄蘗色 is generally pronounced kihada-iro; Japanese dictionaries also record the alternative reading kiwada-iro. Another written form is 黄檗色. Kihada is a tree in the citrus family whose inner bark is yellow and has long been used to make a yellow dye. The word ōbaku is also used for the tree or its medicinal bark, but the usual reading of the color name is kihada-iro.

The Nara National Museum’s Shōsō-in exhibition glossary explains that dye made by crushing and boiling the inner bark of kihada was used to color paper for Buddhist scrolls. Its insect-repelling properties were believed to be helpful for preserving these materials. The name of the color is connected to this dyeing tradition; a digital swatch is not a measurement taken directly from a piece of bark.

Compare two HEX swatches and ways to use them on the web

HEX describes a web color using a hash sign and six hexadecimal digits. Wairo Daijiten lists ■#FEF263 under the spelling 黄檗色. A separate Japanese traditional color reference, Nihon Dentōshoku Zukan, presents ■#F9E577 as another example. RGB describes a screen color in terms of its red, green, and blue light components.

Sample A ■#FEF263 appears slightly more greenish and bright, whereas Sample B ■#F9E577 looks a little softer and warmer. Their contrast ratio is approximately 1.10:1, so the difference in relative brightness is quite small. A contrast ratio measures how much the relative luminance of two colors differs. Keep a record of both the reference and the exact HEX code when choosing a shade for a project.

Example A: a webpage explaining plant-dyeing steps.Use warm off-white ■#F8F5ED as the page background and dark charcoal ■#26312D for body text. Make a small heading strip for “Materials” or “Steps” with the brighter Kihada yellow ■#FEF263, and put the heading in charcoal ■#26312D. Charcoal on off-white has a contrast ratio of about 12.36:1; charcoal on the yellow strip measures about 11.60:1. This lets the color identify sections without covering the photographs or interrupting the reading order.

Example B: an exhibition banner about historical documents.Use deep blue-green ■#234843 as the background with the exhibition name and dates in off-white ■#F8F5ED. Give a “View Exhibition Details” button the other Kihada-yellow swatch ■#F9E577, with charcoal ■#26312D lettering. Off-white text against blue-green measures about 9.27:1; charcoal on the yellow button measures about 10.58:1; and the button’s yellow fill contrasts with the surrounding blue-green by about 7.94:1.

Avoid white text on yellow and check pale boundaries

White ■#FFFFFF lettering on bright Kihada yellow ■#FEF263 has a contrast ratio of only about 1.16:1. This does not meet WCAG (Web Content Accessibility Guidelines) 2.2 Level AA’s minimum of 4.5:1 for normal-sized text or 3:1 for large text. Choose a dark text color on this yellow instead.

The yellow ■#FEF263 also contrasts with the off-white page background ■#F8F5ED by just 1.07:1. If a panel’s edge or a control boundary must be recognizable to convey meaning or functionality, add a dark outline or another sufficiently distinct visual cue. Visual information required to identify a user interface component generally needs at least 3:1 contrast with adjacent colors.

HueRoll allows you to adjust colors using HEX input and check the selected color’s contrast against white or black. It cannot directly compare arbitrary pairs of colors or automatically determine WCAG compliance. The text, button, and background combinations above were calculated separately.