Do Coral and Celadon Green Go Together? Banner Color Schemes Using Two Traditional Japanese Colors

Coral and celadon green can work together in a Japanese-inspired banner. Coral brings a gentle reddish tone, while celadon contributes a subdued blue-green, creating a contrast in hue without requiring bold, saturated colors. However, their brightness is very similar, so placing text directly across the two colors or relying on their boundaries alone can make information harder to distinguish. Using a fictional spring tea-ceramics fair banner, this article compares two background arrangements and explains how to color headings, event details, and buttons.

Do coral and celadon green work together? Compare hue and brightness separately

Coral, called sango-iro in Japanese, is a pale reddish color associated with coral. Our reference swatch is ■#F5B1AA. Celadon green, or seiji-iro, takes its name from the blue-green glaze of celadon ceramics. We use ■#7EBEA5 as its reference. Color-name sources do not necessarily agree on a single digital value, so these are specific examples for this design. HEX is a six-digit hexadecimal code used to specify colors on the web.

RGB describes a screen color using red, green, and blue light components from 0 to 255. Coral ■#F5B1AA is red 245, green 177, and blue 170, making red its strongest component. Celadon green ■#7EBEA5 is red 126, green 190, and blue 165, with more green and blue. Their hues look distinct when placed side by side, but their contrast ratio is only about 1.20:1. A contrast ratio measures the difference in relative brightness between adjacent colors; different hues do not necessarily create enough light-dark separation.

One practical approach is to give one shade the large background and use the other for a smaller piece of information, such as an event-date label. Use a shared deep green ■#254239 for headings and explanations. It contrasts about 6.13:1 against coral ■#F5B1AA and 5.11:1 against celadon green ■#7EBEA5, avoiding the need to use the two pastel colors as text on top of each other.

Two banner layouts for a spring tea-ceramics fair

Option 1: Use celadon as the background and coral for the event notice. Give the “Spring Tea-Ceramics Fair” banner a celadon green ■#7EBEA5 background and use deep green ■#254239 for its headline and short introduction. The text and background contrast at about 5.11:1. Put “This Weekend” in a small coral ■#F5B1AA strip with deep green ■#254239 lettering, which contrasts at about 6.13:1.

Because the coral strip differs from the celadon background by only about 1.20:1, add a deep green ■#254239 outline around 2px wide when the notice needs a clear visual boundary. The outline contrasts about 5.11:1 with the surrounding celadon ■#7EBEA5 and 6.13:1 with the coral ■#F5B1AA inside. Set a “View Exhibitor Information” button directly on the celadon background using a deep green ■#254239 fill and off-white ■#FAF8F2 lettering. The button text has a contrast ratio of about 10.31:1, while the button contrasts with the surrounding celadon at about 5.11:1.

Option 2: Make coral the background and group details in celadon. Reverse the arrangement by using coral ■#F5B1AA for the main banner and deep green ■#254239 for the heading, giving about 6.13:1. Place the event location and opening hours in a celadon green ■#7EBEA5 information card with deep green ■#254239 text at about 5.11:1. Outline the card with the same deep green. Its border contrasts about 5.11:1 with the celadon interior and 6.13:1 with the coral exterior.

Move longer descriptions of the featured ceramics below the banner to an off-white ■#FAF8F2 section with deep green ■#254239 body text at about 10.31:1. This layout uses coral for the large visual surface and celadon for a smaller block of practical information instead of expecting two similarly light colors to separate content by themselves.

Check white text and boundaries between pale backgrounds

White ■#FFFFFF text contrasts with coral ■#F5B1AA at only about 1.79:1 and with celadon green ■#7EBEA5 at about 2.14:1. Neither combination is suitable for ordinary headings or smaller text. Off-white ■#FAF8F2 also contrasts with coral at only about 1.68:1 and with celadon at about 2.02:1. Where a pale card must be recognizable against another pale surface, add a sufficiently dark border, adequate spacing, or another clear structural cue.

Under WCAG 2.2 Level AA, normal-size text generally needs at least 4.5:1 contrast, and qualifying large text needs at least 3:1. Essential non-text indicators, including some interactive component boundaries, may also need 3:1 against adjacent colors. State the event date and booking status in words instead of relying on color alone. HueRoll accepts HEX input and checks the selected color’s contrast against white or black, but it cannot compare arbitrary color pairs or automatically determine AA or AAA compliance. Verify the actual background, text, button, and border combinations separately.