How to Combine Seiji-iro and Gray? Color Scheme Examples with Different Lightness Levels

Seiji-iro, or celadon green, is a soft blue-green with a grayish quality. When pairing it with gray, the brightness of the gray often matters more than the color name itself. Compare a pale-gray background with a dark-gray one to see how the heading, body text, and buttons should change with the surrounding colors.

The lightness of gray changes how Seiji-iro stands out

Seiji-iro takes its name from celadon ceramics covered with a blue-green glaze. One digital color sample is ■#7EBEA5. Traditional Japanese color names do not have a single universally fixed color code. A HEX (hexadecimal) color code expresses a screen color using a hash sign followed by letters and numbers; we use six-digit HEX codes in this article.

Lightness means how light or dark a color appears. Seiji-iro ■#7EBEA5 and pale gray ■#F3F5F4 are both relatively light, with a contrast ratio of about 1.96:1. They differ in hue, but this is a weak pairing for fine boundaries or small text. Dark gray ■#303B40 against Seiji-iro ■#7EBEA5 gives about 5.37:1, making the blue-green area more distinct. Choose the gray background first, then decide whether Seiji-iro should appear as a small accent or a more prominent element.

Color scheme examples with light and dark gray

Example 1: A pottery product listing with a pale-gray background

For a page showcasing product photos, use pale gray ■#F3F5F4 for the overall background and white ■#FFFFFF for the product cards. Set headings, prices, and descriptions in deep gray ■#26353A. Use Seiji-iro ■#7EBEA5 only for a short decorative underline beneath a featured heading or a small panel beside a photo. Fill the “View Product” button with dark gray ■#303B40 and use white ■#FFFFFF for its label. This makes the action easier to locate within the otherwise light palette.

A white ■#FFFFFF card may blend into the pale-gray ■#F3F5F4 page because the two surfaces differ very little in lightness. Where a visible card boundary is necessary, add a gray ■#6E7E78 border and leave enough space between cards. Avoid adding so many outlines that they compete with the photos.

Example 2: A pottery exhibition banner on dark gray

For an exhibition announcement, let dark gray ■#303B40 cover most of the banner. Set the exhibition title in white ■#FFFFFF, and the dates and venue in pale gray ■#F3F5F4. Use Seiji-iro ■#7EBEA5 for the background of a “Reserve a Visit” button, with deep-gray ■#26353A text on the button. Against the dark surroundings, a relatively small blue-green button is enough to distinguish the action, while the white heading remains the strongest text element.

Check contrast between text, borders, and adjacent surfaces

A contrast ratio measures the difference in brightness between adjacent colors. The Web Content Accessibility Guidelines (WCAG) 2.2 specify at least 4.5:1 for normal-sized text and 3:1 for large text at Level AA. Deep gray ■#26353A against white ■#FFFFFF has a ratio of about 12.71:1, while pale gray ■#F3F5F4 against dark gray ■#303B40 has about 10.51:1. Both combinations meet the normal-text threshold.

Deep-gray ■#26353A lettering on a Seiji-iro ■#7EBEA5 button reaches about 5.93:1 and also meets that threshold. White ■#FFFFFF lettering on the same Seiji-iro background, however, provides only about 2.14:1—not enough even for large text. Do not assume white lettering is suitable for every colored button.

Meaningful non-text elements, such as borders or icons needed to identify controls, generally need a ratio of at least 3:1 against adjacent colors. The border gray ■#6E7E78 in Example 1 reaches about 3.90:1 against the pale background ■#F3F5F4 and 4.27:1 against the white card ■#FFFFFF. Seiji-iro ■#7EBEA5 against pale gray ■#F3F5F4 is only about 1.96:1, so do not rely on a fine blue-green line as an essential control indicator. A purely decorative line is different from a meaningful border. HueRoll can check a selected color against white or black, but contrast between other pairs of colors must be calculated separately.