How to Choose a Wisteria Purple Color Code: Comparing Bluish and Reddish Tones with Color Swatches

TIPS

Fujiiro, or wisteria purple, is a pale blue-violet inspired by wisteria blossoms. Looking up its color code reveals several possible values. The right choice for a website depends partly on whether you want a cooler, bluer shade or a purple with a warmer reddish undertone. Here, three swatches let you compare those differences without changing the overall brightness very much. We will also consider backgrounds and lettering.

There is no single universally fixed HEX code for fujiiro

The Japanese color reference Wairo Daijiten gives #BBBCDE as one example of fujiiro, while another color reference, I-IRO, uses #9F9BCA. Color names help communicate a general appearance, but references do not always assign exactly the same numeric value. When designing a website, choose and share the specific code rather than relying on the color name alone.

HEX is a way to represent a web color with a hash sign and six hexadecimal digits. RGB specifies the red, green, and blue light components as numbers from 0 to 255; each pair of HEX digits corresponds to one of those components. Comparing RGB values provides a practical way to see how the hue has been adjusted.

Compare bluish, reference, and reddish wisteria color swatches

These three examples have roughly similar overall brightness. The middle value comes from a Japanese color-name reference; the two outer swatches are deliberately adjusted examples for web design. They do not establish new official names for traditional Japanese colors.

Variation Swatch and HEX RGB (red, green, blue)
More bluish (adjusted example) #B0C0E2 176, 192, 226
Reference wisteria shade #BBBCDE 187, 188, 222
More reddish (adjusted example) #CCB2D8 204, 178, 216

In the bluer #B0C0E2 sample, the green component is slightly higher than the red component, shifting the color toward blue. In the reference #BBBCDE shade, red and green are almost equal, resulting in a muted blue-violet. The redder #CCB2D8 sample increases red and narrows the gap between red and blue, giving the purple a warmer look.

Consider a website promoting a flower exhibition. If a photograph contains a great deal of blue sky, try the reddish sample in a small headline panel. If reddish-purple blossoms dominate the photograph, compare them with the bluer sample as a background. The better choice depends on the actual photograph and the area covered by each color, so test the candidates in the same layout rather than assuming one is always correct.

Check the text color when using your chosen shade as a background

Because all three colors are relatively light, a dark, purple-tinted charcoal such as #302C42 is one text option. Its contrast ratio against the bluer #B0C0E2 is approximately 7.34:1, against the reference #BBBCDE it is 7.26:1, and against the redder #CCB2D8 it is 6.98:1. A contrast ratio measures the difference in relative brightness between two colors.

White #FFFFFF lettering, in contrast, reaches only about 1.83:1 against the bluer #B0C0E2, 1.85:1 against the reference #BBBCDE, and 1.92:1 against the redder #CCB2D8. Under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, normal text generally needs at least 4.5:1 contrast, and large text at least 3:1. Dark lettering is therefore more suitable than white text on these pale backgrounds.

For a practical exhibition information card, use off-white #FCFAF8 around the card, the reference wisteria #BBBCDE on the card surface, and #302C42 for the text. The page and card backgrounds contrast at about 1.78:1. If the card boundary must stand out, add a deep purple-gray #69587C outline: it contrasts with the card at about 3.46:1 and with the surrounding off-white at about 6.13:1. A sign-up button in deeper purple #57466D with white #FFFFFF lettering provides about 8.39:1 contrast between its text and fill.

When comparing swatches, keep the surrounding background and photographs consistent. HueRoll lets you enter a HEX value, adjust the color, inspect RGB and other values, and compare the selected color with white or black. It does not accept color names directly, calculate contrast between arbitrary pairs of colors, or automatically report WCAG compliance. Check custom two-color combinations with a separate contrast calculation.