How Are Gunjo Blue and Blue Different? Comparing Color Swatches and HEX Codes

Gunjo-iro (群青色), often described as gunjo blue, belongs to the blue color family, but it is not interchangeable with the broad word “blue.” Gunjo-iro refers to a violet-leaning blue associated with mineral pigments used in Japanese painting, while everyday “blue” can cover a wide range of light and dark shades. In web design, relying on a color name alone can also produce different results depending on the reference or CSS color keyword used. Here we compare four documented swatches and their practical text and background combinations.

Gunjo is a violet-leaning blue; “blue” names a wider color family

The Japanese reference I-IRO describes gunjo-iro as a deep blue with a violet undertone and lists ■#3E4C9C, with RGB values red 62, green 76, and blue 156. Another Japanese color reference, Wairo Daijiten, lists the similar gunjo swatch ■#4C6CB3, with RGB red 76, green 108, and blue 179. I-IRO’s entry for ao (青), or “blue,” gives a vivid blue ■#006CBA, with RGB red 0, green 108, and blue 186. That is one source-defined example of Japanese “ao,” not the only color that people might call blue.

In CSS (the styling language used to control the appearance of web pages), the named color blue has the fixed value ■#0000FF, according to MDN. Thus, writing the CSS keyword blue does not produce I-IRO’s Japanese ao swatch. RGB represents the red, green, and blue light components of a screen color. HEX is a web color notation consisting of a hash sign followed by six hexadecimal digits.

The two gunjo swatches have a contrast ratio of approximately 1.51:1, so their brightness values differ more noticeably. I-IRO’s gunjo ■#3E4C9C and ao ■#006CBA differ by about 1.42:1, and gunjo ■#3E4C9C versus CSS blue ■#0000FF by about 1.11:1. A contrast ratio measures the difference in relative luminance, not the direction of the hue. Gunjo has a more violet-leaning, subdued appearance; I-IRO’s ao appears more cyan-leaning and vivid; and CSS blue represents another, purer blue direction.

The word gunjo also has a history as the name of a blue mineral pigment. The Nara National Museum’s Shōsō-in exhibition glossary explains that pigments described as gunjo include some made from copper compounds, and the name can also refer to materials such as lapis lazuli. This does not mean historical pigment samples have one fixed modern HEX code. Keep the history of the pigment separate from the digital swatch selected for a website.

Apply the different blues to an art exhibition and a learning-service page

Example A: an exhibition page about pigments in Japanese painting.Use I-IRO’s gunjo ■#3E4C9C for a large heading area and place a white ■#FFFFFF “The Art of Gunjo” title on it. That pair has approximately 7.72:1 text contrast, above the normal-text threshold. Set artwork descriptions in dark charcoal ■#263040 on a warm off-white ■#F8F6F1 section; this combination reaches about 12.31:1. Reserve pale gold ■#F5D680 for a short decorative rule beneath the title rather than the main text. Gold and gunjo have about 5.45:1 contrast, meeting the 4.5:1 normal-text minimum; we still reserve gold for decoration in this example. Give the “Explore the Exhibition” button the same gunjo fill and white lettering.

Example B: a new-feature announcement for a learning service.Keep most of the page white ■#FFFFFF, with feature names and descriptions in dark charcoal ■#263040. A short “New Feature” badge can use the vivid I-IRO ao ■#006CBA fill with white ■#FFFFFF lettering. That text-to-background pair has about 5.45:1 contrast, above the normal-text minimum. Check small lettering at its actual rendered size. If the primary “Try the Feature” button uses CSS blue ■#0000FF, white ■#FFFFFF button text has approximately 8.59:1 contrast. Keep the badge and main button distinct in purpose rather than spreading multiple vivid blue fills across every section.

Check white-text contrast and do not distinguish states through similar blues alone

Against white ■#FFFFFF text, the I-IRO gunjo ■#3E4C9C has a contrast ratio of approximately 7.72:1, Wairo Daijiten’s gunjo ■#4C6CB3 about 5.12:1, I-IRO’s vivid ao ■#006CBA just 5.45:1, and the CSS keyword blue ■#0000FF about 8.59:1. Under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, normal-sized text generally requires at least 4.5:1 contrast; large text requires at least 3:1. All four swatches compared here support normal-sized white lettering, but that should not be assumed for every shade called “blue.”

I-IRO’s gunjo ■#3E4C9C and ao ■#006CBA also contrast by only about 1.42:1. Do not use those two fills as the sole indicator of adjacent “Selected” and “Not Selected” controls. Include readable labels, shapes, or other cues. Important visual information needed to identify a user-interface component generally requires at least 3:1 contrast against adjacent colors. Verify the actual colors where text, controls, and borders meet, not just their names.

HueRoll accepts HEX color input and shows the selected color’s contrast against white and black. It cannot directly compare arbitrary pairs of custom colors or automatically judge WCAG AA/AAA compliance. The comparisons in this article were calculated separately.