What Kind of Yellow Is Ukon-iro? The Origin of Its Name and Differences from Similar Colors
Ukon-iro is a vivid yellow with a slightly orange cast. It looks similar to yamabuki yellow and nanohana yellow, but the exact hues and brightness differ. This article explains where the name comes from and compares ukon-iro #FABF14, yamabuki yellow #F8B500, and nanohana yellow #FFEC47 side by side. Because traditional color names can correspond to different swatches, these HEX values are specific examples for comparison. HEX is a six-digit code of numbers and letters used to define colors on the web.
Ukon-iro is a yellow named after turmeric dye
“Ukon” refers to turmeric, the plant also known for its use as a spice. The name ukon-iro comes from the strong yellow color obtained by dyeing with turmeric rhizomes, the plant’s underground stems. It is a warm-looking yellow, but that does not mean there is one universally fixed digital color called ukon-iro. Swatches can vary by reference and by dyeing conditions.
The ukon-iro #FABF14 swatch in this article has RGB values of red 250, green 191, and blue 20. RGB represents screen colors with three light components—red, green, and blue—each assigned a value from 0 to 255. With high red and green values and very little blue, this example appears as a bright yellow leaning slightly toward orange. For web production, agree on the actual HEX code rather than relying on the color name alone.
Comparing ukon-iro with yamabuki and nanohana yellow
Viewing similarly sized samples together makes subtle differences easier to assess. These are the three swatches used in our comparison:
- Ukon-iro #FABF14: Red 250, green 191, blue 20. It is particularly close to the yamabuki swatch and has a vivid, warm-yellow appearance.
- Yamabuki yellow #F8B500: Red 248, green 181, blue 0. Its green and blue values are lower than those of our ukon-iro sample, making it slightly darker and more orange-leaning.
- Nanohana yellow #FFEC47: Red 255, green 236, blue 71. Its higher green and blue values produce a lighter yellow than the other two samples.
Ukon-iro and yamabuki yellow are especially close. Avoid using small unlabeled samples of those two yellows as the only way to indicate different categories. Label them in words as well. Background colors and screen settings can also influence how a difference appears, so compare the codes you will actually use rather than depending only on the impressions suggested by the names.
For web design, prioritize dark text and clear boundaries
For example, on a website introducing a natural-dyeing workshop, use warm off-white #FAF7EF as the overall background and dark ink-brown #302B23 for the headings and explanations. These colors have a contrast ratio of approximately 13.12:1. A contrast ratio measures the difference in relative brightness between text and its adjacent background.
Make only the introductory banner ukon-iro #FABF14 and place the workshop title in ink-brown #302B23, giving approximately 8.38:1 contrast. For a “Register” button, use dark blue #27415A with off-white #FAF7EF lettering. The text-to-button contrast is approximately 9.86:1, and the dark button contrasts with the ukon-iro #FABF14 banner by approximately 6.30:1. This gives the yellow and blue clearly different jobs.
By contrast, white #FFFFFF lettering on ukon-iro #FABF14 has a ratio of only about 1.68:1, which is not enough for normal-size text. Ukon-iro against off-white #FAF7EF is also only about 1.57:1. If you place a small yellow interactive element on a pale background, make its purpose recognizable through a sufficiently dark border or text, along with shape and placement.
WCAG 2.2 (Web Content Accessibility Guidelines) generally requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text at Level AA. Meaningful visual cues for controls or graphics may also need 3:1 contrast against adjacent colors. HueRoll lets you enter HEX values and check a selected color against white and black, but it does not automatically compare arbitrary pairs or judge AA compliance. Check the actual color combinations separately before publishing.