What Is Tsuyukusa-iro? The Origin of Its Name and Color Swatches You Can Use in Color Schemes

Tsuyukusa-iro, also called dayflower blue, is a clear blue associated with the small blue petals of the dayflower plant. Where does the name come from, and which colors work with it in a web design? Here is the story behind the name, along with practical color swatches and two banner layouts.

The name comes from the blue petals of the dayflower

Tsuyukusa-iro is a traditional Japanese color named after the blue petals of the dayflower and the blue once obtained by applying the flower’s juice to cloth. The plant was formerly known as tsukikusa (月草), and early Japanese poetry refers to using its color on clothing. The pigment dissolves readily in water, so the dyed blue could wash away. Even today, aobana-gami, paper colored with pigment from a larger-flowered relative, is used to draw temporary guide lines for traditional Yuzen textile dyeing.

One digital representation of Tsuyukusa-iro is ■#38A1DB. Some references use a slightly more subdued blue, ■#4CA3D8. A traditional color name does not specify one universal screen color code, so this article uses ■#38A1DB as its reference. A HEX (hexadecimal) color code is a way to express screen colors using a hash sign followed by letters and numbers; these examples use the six-digit format.

Two usable color schemes featuring Tsuyukusa-iro

A nature-walk banner with a pale background

Use a pale blue-white ■#F7FBFE for the background and deep navy ■#172E45 for the heading and body text. Introduce Tsuyukusa-iro ■#38A1DB as a short decorative underline beneath the heading or a thin color strip beside a photograph. This brings in the flower-inspired blue without making the copy compete with it. Fill the event-information button with deep navy ■#172E45 and set its label in white ■#FFFFFF. Keeping the blue accents aligned can help the banner feel organized without giving them a large share of the space.

A summer-event banner with a blue background

If Tsuyukusa-iro ■#38A1DB covers the whole background, use deep navy ■#172E45 for the event name and its short description. Set the date in a small warm-ivory panel ■#FFF9EF, with deep navy ■#172E45 text inside that panel. Make the sign-up button deep navy ■#172E45 with white ■#FFFFFF lettering. Rather than giving the blue and ivory equal areas, reserve the ivory for the date so visitors can find that information quickly.

These are suggested combinations rather than fixed rules. If the photographs are already colorful, consider using fewer blue decorative elements and adjust the amount of each color to suit the surrounding content.

Check contrast before using the blue for text or controls

A contrast ratio measures the difference in brightness between text and its background. Under the Web Content Accessibility Guidelines (WCAG) 2.2, the Level AA threshold is 4.5:1 for normal-sized text and 3:1 for large text.

White ■#FFFFFF text on Tsuyukusa-iro ■#38A1DB has a contrast ratio of about 2.88:1, which falls short even for large text. Deep navy ■#172E45 against Tsuyukusa-iro ■#38A1DB, however, is about 4.82:1 and meets the normal-text threshold. Deep navy ■#172E45 on the pale background ■#F7FBFE is about 13.34:1, and white ■#FFFFFF on the deep-navy button ■#172E45 is about 13.88:1.

Tsuyukusa-iro ■#38A1DB against the pale background ■#F7FBFE reaches only about 2.77:1. Avoid relying on this pairing for small text or borders and icons needed to understand or operate an interface. A purely decorative line has a different role from an essential visual cue. HueRoll checks contrast between the selected color and white or black only; other pairs, such as the two blues in these examples, need separate contrast calculations.