What Kind of Purple Is Sumire-iro? Comparing Its Color Code and Similar Shades

TIPS

What shade of purple is sumire-iro? Named after the Japanese violet flower, it appears with slightly different color codes across reference charts. For web design, comparing it with nearby shades such as kikyō-iro and Edo purple—and the much lighter fuji-iro—helps reveal differences in blue undertones, red undertones, and brightness. Here are representative swatches and practical considerations for text and backgrounds.

What Is Sumire-iro? A Bluish Purple Named After Violets

Sumire-iro (菫色) refers to a purple reminiscent of violet flowers. It is generally described as a bluish purple, although real violet flowers vary in color. The name does not identify one exact measurement taken from a flower.

On the web, HEX color notation specifies the red, green, and blue components of a color using hexadecimal digits. One published reference value for sumire-iro is ■#7058A3, combining red 112, green 88, and blue 163. Blue is the largest component. Another Japanese color reference uses the slightly darker ■#714C99 as its swatch for the same name.

Sumire-iro also appears among JIS conventional Japanese color names, but that does not mean every digital reference uses exactly the same HEX value. CSS—the language used to style web pages—does not recognize the Japanese name “菫色” as a color keyword. Choose a particular code for your design and use it consistently.

Compare Sumire-iro with Similar Purple Color Codes

These are examples of web color swatches published by Japanese color-name references. Surrounding colors can influence how each appears, so compare them side by side at the same size on a consistent background.

Reference sumire-iro: ■#7058A3. A medium-dark, blue-leaning purple used as the starting point for this comparison.
Alternative sumire-iro: ■#714C99. Slightly darker than the reference shade, with a greater proportion of red relative to blue.
Kikyō-iro (balloon-flower purple): ■#5654A2. Contains less red than the reference shade and leans more strongly toward blue.
Edo purple: ■#745399. Similar in overall darkness to the reference shade but slightly more red-leaning.
Fuji-iro (wisteria purple): ■#BBBCDE. Much lighter and softer than the other four swatches, making it a candidate for larger background areas.

Sumire-iro and kikyō-iro are both close to blue-purple. Compare kikyō-iro when you want more blue; compare sumire-iro or Edo purple when you want to retain a little more red. Fuji-iro differs much more in lightness, so it can serve as a supporting background while staying in the purple family.

Using Sumire-iro for Website Text, Backgrounds, and Buttons

Imagine a spring collection page for a Japanese confectionery shop. Give the page a pale ■#F8F7FA background and use sumire-iro ■#7058A3 for headings introducing seasonal sweets. The calculated text-to-background contrast ratio is about 5.44:1. For paragraphs, use a deep purple ■#241E37; against ■#F8F7FA, the ratio is approximately 14.95:1.

For an information card showing the sales period, use fuji-iro ■#BBBCDE as the card background and ■#241E37 for its text. Their contrast ratio is about 8.63:1. A sign-up button can use ■#7058A3 for its background and ■#F8F7FA for the label. That pair provides approximately 5.44:1 for the button text and also about 5.44:1 between the button and a surrounding ■#F8F7FA page background.

However, fuji-iro ■#BBBCDE and the pale page background ■#F8F7FA differ by only about 1.73:1. Do not rely on that subtle boundary alone to identify an interactive area or a meaningful icon. If the boundary carries essential information, use a darker color and reinforce it with clear labels, shapes, or spacing.

WCAG (Web Content Accessibility Guidelines) 2.2 Level AA requires at least 4.5:1 contrast for normal-sized text and 3:1 for large text. HueRoll accepts a selected HEX code and lets you examine its contrast against white and black; it does not accept Japanese color names as direct input, compare arbitrary pairs, or automatically determine AA or AAA compliance. The color-pair ratios in this article were calculated separately from the HEX codes shown here.