What Colors Go with Forget-Me-Not Blue? How to Create a Soft Color Scheme

Warm ivory, pale peach, and deep blue-gray can all work with forget-me-not blue, a light floral blue known as wasurenagusa-iro in Japanese. The combination can feel gentle without making important text or buttons disappear, provided you give the colors different roles. Here are two practical layouts: a flower-subscription page and a spring flower-photography exhibition banner.

Pair forget-me-not blue with ivory, pale peach, and deep blue-gray

Forget-me-not blue is named for the light-blue blossoms of the forget-me-not flower. The Japanese color reference Wairo Daijiten gives ■#89C3EB as a swatch, with RGB values of red 137, green 195, and blue 235. RGB represents screen colors using red, green, and blue light components. HEX is a six-digit hexadecimal web color code preceded by a hash sign. We use the published blue value as the starting point and choose the other three colors as design proposals.

Try warm ivory ■#FFF9F1 across the largest background areas and pale peach ■#F7DFD8 for a short label or decoration. Deep blue-gray ■#25475C provides a much darker color for body text and important action buttons. This avoids making every part of the page equally pale. Instead of using all four colors in equal amounts, choose which one will dominate and give the others supporting roles.

Two layouts for a flower subscription and a photo exhibition

Example A: a flower-subscription product page.Set the page background to ivory ■#FFF9F1 and display the flower photographs with space around them. Use forget-me-not blue ■#89C3EB for a short heading band, with deep blue-gray ■#25475C for the heading and body text. Give a small “First Delivery” label a pale peach ■#F7DFD8 background and the same deep blue-gray ■#25475C lettering. Make the “Subscribe” button deep blue-gray ■#25475C with white ■#FFFFFF text. The text-to-background contrast ratios are approximately 5.19:1 on the blue heading band, 9.40:1 for body text on ivory, 7.73:1 for the peach label, and 9.84:1 for white text on the button.

Example B: a spring flower-photography exhibition banner.Use forget-me-not blue ■#89C3EB as the large background area, with a short “Spring Flower Photography” heading in deep blue-gray ■#25475C. Put the date and venue in a small pale-peach ■#F7DFD8 information panel with deep blue-gray ■#25475C text. Give the “View Exhibition Details” button a deep blue-gray ■#25475C fill and white ■#FFFFFF lettering. The dark button and surrounding blue background have a contrast ratio of about 5.19:1, helping distinguish the main action from the lighter surface.

Example A leaves more room for ivory, while Example B gives blue the largest area. These are suggestions for illustrative layouts, not fixed color proportions. Adjust the areas according to the photographs and the amount of information on the page.

Keep pale boundaries and small text clearly distinguishable

Forget-me-not blue ■#89C3EB against white ■#FFFFFF has a contrast ratio of only about 1.90:1, so avoid placing small white text on that blue. The contrast between forget-me-not blue ■#89C3EB and ivory ■#FFF9F1 is also just 1.81:1, while pale peach ■#F7DFD8 against ivory ■#FFF9F1 measures about 1.22:1. Where the edge of a light-colored element is necessary for understanding or operating the page, add an appropriate deep blue-gray ■#25475C outline, label, or other visual cue.

At Level AA, WCAG (Web Content Accessibility Guidelines) 2.2 generally requires at least 4.5:1 contrast for normal-sized text and 3:1 for large text. Visual information needed to identify user-interface components generally needs at least 3:1 contrast against adjacent colors. Not every decorative panel requires a strong border. On mobile screens, check that headings, dates, and buttons remain in a clear reading order.

HueRoll lets you adjust colors using HEX input and check the selected color against white or black. It cannot compare arbitrary custom color pairs or automatically determine WCAG conformance. The actual text, background, and button combinations described here were calculated separately.