What Is Kanaria-iro? Its Pronunciation and Name Origin Explained with Color Swatches

Kanaria-iro, written 金糸雀色 in Japanese, is a name for a yellow inspired by the canary bird. Its pronunciation is “kanaria-iro.” Depending on the reference, swatches range from a slightly muted yellow to a lighter and brighter shade, so the name alone does not guarantee an exact screen color. This guide explains how to read the name, where it came from, and what three published color samples look like, with practical advice for using them on the web.

How to read Kanaria-iro and where its name comes from

金糸雀色 is generally read kanaria-iro. The Japanese word 金糸雀 refers to a canary, a small songbird. The Japanese color reference “伝統色のいろは” (Traditional Colors of Japan) also records an alternative reading, kinshijaku-iro.

The color name comes from the canary’s plumage. Rather than describing only the vivid yellow of familiar domesticated canaries, some color references associate the Japanese name with a more muted yellow resembling wild canaries. Canaries are said to have reached Japan in the Edo period, and some references date the development of the color name to the Meiji period or later. However, an exact year when the name was first used has not been established here.

Compare three published Kanaria-iro color swatches

HEX (a hexadecimal color code used to specify colors on the web) does not have one universally agreed value for this Japanese color name. The three samples below are values published under the name Kanaria-iro by different color-reference websites.

The shade ■#ECE038 listed by “伝統色のいろは” and ■#EBD842 listed by “原色大辞典” are both relatively subdued, slightly green-leaning yellows. In comparison, ■#FFEF6C from “カラーサイト.com” is lighter and gives a softer, brighter impression. All three are examples reported by those sources, not proof that any one code is the only correct version of Kanaria-iro.

When creating a website or graphic, record the source swatch and its exact HEX value together with the color name. This makes it easier to keep the yellow consistent as the design moves between files and collaborators.

Use the yellow on the web while maintaining text contrast

For a light product-information card, try a soft cream ■#FFFCF2 background with dark gray ■#252525 body text. Use Kanaria-iro ■#ECE038 sparingly beside the headline or as the fill of a short “New” label. Include the word “New” rather than relying on color alone, and add a dark outline if the yellow label does not stand apart clearly from the pale background.

For a darker event promotion, consider a deep bluish background ■#253040, a short yellow ■#ECE038 headline, and white ■#FFFFFF explanatory text. The dark gray ■#252525 against cream ■#FFFCF2 in the first example has a contrast ratio of approximately 14.93:1. The yellow ■#ECE038 against dark blue-gray ■#253040 in the second example measures approximately 9.70:1.

White ■#FFFFFF lettering directly on this yellow ■#ECE038, however, has a contrast ratio of only about 1.37:1. Dark gray ■#252525 lettering on the same yellow provides about 11.16:1. For normal-sized text, WCAG (Web Content Accessibility Guidelines) 2.2 Level AA specifies at least 4.5:1 contrast between text and background. Check the actual text and background together before finalizing your design.

HueRoll allows you to adjust colors by entering HEX values and check the selected color against white or black. It cannot compare arbitrary pairs of colors or automatically decide whether a pairing meets WCAG. Verify the colors that will actually touch each other in the finished layout with a separate contrast checker.