What Color Is Hanada-iro? Pronunciation, Origins, and Color Codes

Hanada-iro (縹色) is a traditional Japanese name for a shade of blue associated with indigo dyeing. However, references give slightly different colors for the name. This article explains how to pronounce it, where the name comes from, and how to choose a specific HEX code for use in web design.

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

The Japanese color name 縹色 is read “hanada-iro.” Kanjipedia describes it as a pale indigo color or sky blue, while references to the conventional JIS color name describe it as a “strong blue.” Both refer to a blue color, but the wording reflects differences in how its depth is described.

Hanada-iro can also be written 花田色 or 花色. Some descriptions connect the character for “flower” with the blue blossoms of the dayflower plant. The color has a long history in indigo dyeing. The Heian-period compilation Engishiki records four grades called deep, middle, next, and light hanada. Historically, too, the name has covered more than one depth of blue.

On a screen today, the traditional name alone does not select an exact color. Including the source of a swatch and its numerical code helps everyone involved in a website project use the same shade.

Compare three Hanada-iro color swatches and HEX codes

HEX is a web color notation that starts with a # sign followed by six hexadecimal digits or letters. These three references each publish a swatch under the name Hanada-iro:

• Colordic (Japanese Color Dictionary): #2792C3 — a comparatively bright blue. Its RGB components are red 39, green 146, and blue 195.
• Traditional Colors of Japan (Iroha): #0086AD — darker and slightly closer to blue-green than the first sample.
• I-IRO: #2B6493 — a deeper blue than the first sample. Its RGB values are red 43, green 100, blue 147.

Colordic’s ■#2792C3 and Iroha’s ■#0086AD are both described as Hanada-iro, but they are not identical values. Translating a historical dye color into digital values involves interpretation and color reproduction choices. Rather than assuming that one name has a single universal HEX code, choose the actual swatch and record its code.

Using Hanada-iro in web design without losing legibility

On a website promoting a Japanese art exhibition, Hanada-iro could appear in a short decorative band or date label, while longer text uses a darker color. The following palette is one practical example:

• Page background: soft off-white ■#F6F4EE
• Headings and button background: deep blue ■#20566D
• Body text: dark blue-gray ■#26353A
• Decorative strip or section accent: Hanada-iro from Colordic ■#2792C3
• Button text: white ■#FFFFFF

Also check the contrast ratio, a measure of the difference in relative brightness between two colors. Hanada-iro ■#2792C3 against white ■#FFFFFF has a contrast ratio of approximately 3.51:1, which falls below the WCAG Level AA requirement of 4.5:1 for regular-size text. WCAG stands for Web Content Accessibility Guidelines. Black ■#000000 text on that same Hanada-iro background is approximately 5.99:1.

The I-IRO swatch ■#2B6493 with white ■#FFFFFF lettering has a contrast ratio of approximately 6.27:1. Check the text color against each swatch rather than assuming that one choice works for all of them.

Deep blue ■#20566D as text on off-white ■#F6F4EE gives about 7.31:1; white ■#FFFFFF text on a deep-blue ■#20566D button gives about 8.04:1. Dark blue-gray ■#26353A body text on off-white ■#F6F4EE gives about 11.55:1. There is no need to use exactly the same blue for decorations and paragraphs.

HueRoll lets you enter and adjust a HEX code and check your selected color against white or black. It does not directly compare arbitrary pairs of colors or automatically judge WCAG AA or AAA compliance. Before publishing a design, check each actual foreground-and-background pair with a separate contrast calculator.