Combining Ainezu Blue-Gray and Ivory: How to Create a Calm Web Color Scheme

Ainezu is a traditional Japanese color name for a muted, bluish gray, while ivory is a white with a slight yellow tint. These colors can work together on a website that puts artwork or product photos first. But using two restrained colors does not automatically make headings or buttons easy to find. The key is to give the background, text, and decorative accents different jobs.

Let ivory cover the page and use Ainezu as a visual marker

Color references give slightly different HEX codes for Ainezu. For this example, we will use the bluish gray■#6C848D and pair it with an ivory-toned■#FFF9F0. HEX is a way of expressing web colors using a # sign followed by six hexadecimal digits or letters. These codes are specific choices for this design example, not the only possible definitions of these color names.

The slight contrast between blue-gray and warm ivory can help divide the page without adding a vivid accent. Start with ivory across most of the page, and bring in Ainezu for a short bar beside a section heading or a divider between content areas. A large blue-gray panel may attract more attention than the photos, so begin with smaller areas and adjust after reviewing the whole layout.

Decide on the roles before adding colors: ivory for broad surfaces, Ainezu for visual markers, and a darker shade for the words people need to read and the buttons they need to use. This keeps the design consistent from one section to the next.

A practical layout for a small gallery website

Imagine a gallery website featuring pottery or home accessories in different colors. Leave breathing room around the photos, while the site colors support the descriptions rather than compete with the products.

• Page background: ivory-toned■#FFF9F0. Extend it from the header through the main content to connect the page visually.
• Headings and body text: deep blue-gray■#263842. Its strong contrast against the page background makes it suitable for both headings and smaller descriptions.
• Section markers: Ainezu■#6C848D. Use it as a short vertical rule beside a heading, rather than as small text.
• Product cards: white■#FFFFFF. The difference from the ivory background is subtle, so spacing and heading placement should also separate the cards.
• “View work” button: use a darker blue-gray■#425965 for the button background and ivory-toned■#FFF9F0 for its text.

For example, place a hero photo and brief introduction near the top, followed by a row of work cards with consistent spacing. Keep each card’s title and description in the same dark blue-gray. Reserve the Ainezu rule for the beginning of a section, instead of repeating it on every line. Add a clear label to the button so visitors understand where it leads.

White cards can blend into an ivory page because their lightness is so similar. Do not depend on the small difference between those two colors to establish card boundaries. Consistent gaps and clear heading positions can organize the content without adding dark outlines everywhere.

Adjust text colors and check button contrast

A contrast ratio measures the difference in relative brightness between text and its background. Under the Web Content Accessibility Guidelines (WCAG) 2.2 Level AA, regular-sized text needs a contrast ratio of at least 4.5:1 and large text at least 3:1.

Ainezu■#6C848D used as regular-sized text on the ivory-toned■#FFF9F0 background reaches about 3.77:1, below the 4.5:1 requirement. Keep the Ainezu color as a visual accent instead, and switch smaller text to deep blue-gray■#263842. That text color reaches about 11.62:1 against the same background.

Check buttons as a complete foreground-and-background pair, too. Ivory-toned■#FFF9F0 text on a deep blue-gray■#425965 button reaches about 7.04:1, exceeding the requirement for regular text. The button also has the same strong contrast against the surrounding ivory page.

These measurements do not automatically apply when you place text on a photograph or make a background partially transparent. Check the actual adjacent colors in those situations. Use underlines to identify links and clear shapes and labels for buttons, rather than relying only on their colors.