What Color Is Koji-iro? Its Pronunciation and Color Code Explained

How do you pronounce Koji-iro, and what kind of orange does it describe? This Japanese color name comes from a citrus fruit, but color-reference websites give slightly different HEX values for it. Here we look at its name and origin, compare two published swatches, and explain how to pair the color with text and backgrounds on a web page.

How to pronounce Koji-iro and where the name comes from

柑子色 is usually read kōji-iro (commonly written koji-iro without the accent mark). It is a traditional Japanese color name associated with the fruit of kōji, a type of mandarin citrus, and refers to a bright yellowish red or orange shade. A Japanese dictionary also records kanji-iro in historical usage. For finding modern color swatches, the pronunciation koji-iro is a useful starting point.

Koji-iro and mikan-iro both take their names from citrus fruit, but their origins and published color samples are not identical. A color name does not determine one universal numerical value on a screen. In web production, record the precise color code together with the name and its source.

Compare two published swatches using HEX and RGB

The Japanese color reference I-IRO lists Koji-iro as ■#F9A963, or RGB red 249, green 169, blue 99. Color-Site.com lists Koji-iro as ■#FAA755, or RGB red 250, green 167, blue 85. Both are published examples, but they are not the same code. HEX is a way to specify a screen color with a # sign and six hexadecimal digits or letters. RGB expresses a color using numerical amounts of red, green, and blue light.

Both samples belong to a bright orange range, and their relative-luminance contrast ratio is about 1.01:1, indicating only a small difference in brightness. The I-IRO sample has a blue-channel value 14 units higher than the Color-Site.com sample, giving it a slightly softer orange appearance. Compare the swatches side by side before choosing one. Once you choose a swatch, save the source name and the HEX value together instead of mixing numbers from different references.

A practical web palette and text contrast checks

Imagine a compact web page introducing traditional Japanese colors. Use warm off-white ■#FFF8ED as the page background and dark charcoal ■#302A25 for its headings and body text. Make a short information card about the origin of Koji-iro in the I-IRO shade ■#F9A963 with charcoal ■#302A25 lettering. For the “View Details” button, use deep green ■#265044 behind warm off-white ■#FFF8ED text. This gives the information card and the action different visual roles.

A contrast ratio measures the difference in relative brightness between two colors. Charcoal ■#302A25 on warm off-white ■#FFF8ED reaches about 13.41:1. Charcoal ■#302A25 on the Koji-iro ■#F9A963 card reaches about 7.34:1, and warm off-white ■#FFF8ED text on the deep green ■#265044 button reaches about 8.60:1. These exceed the 4.5:1 requirement for ordinary text under the Web Content Accessibility Guidelines (WCAG) 2.2 Level AA.

By contrast, white ■#FFFFFF text on Koji-iro ■#F9A963 has a ratio of only about 1.93:1 and is insufficient for ordinary text. The Koji-iro card ■#F9A963 also differs from the off-white page background ■#FFF8ED by only about 1.83:1. If a clearly visible card boundary matters, add a dark border or sufficient spacing. Screens and surrounding colors can affect perception, so verify the actual text and background combination in the final design.