What Colors Go With Miru-iro? Tips for Adding Lighter Colors

Miru-iro is a traditional Japanese color named after miru, a type of seaweed. It is a muted, dark yellow-green with a brownish cast. When both the background and text are dark, a design built around this color can feel heavy. This article uses ■#726D40 as one example of miru-iro and shows how to introduce lighter colors on a website or an event banner. HEX is a six-digit color code used to specify colors on the web.

Pair miru-iro with lighter colors that have clear roles

Miru-iro ■#726D40 has relatively low brightness and saturation. If it covers a large area, lighter surrounding space can help preserve its depth without making the entire layout feel dark. Start with three lighter colors, each assigned a specific job:

• Warm off-white ■#F8F5EC: Use it for the main page background and breathing room. Its slight yellow cast connects naturally to the warmth in miru-iro.
• Cream ■#F1E5C6: Use it for informational cards or supplementary sections. It is warmer than the off-white and introduces a gentle change without taking over the layout.
• Light yellow ■#F4DC98: Reserve it for a registration button or a short label. Although it sits within a similar yellow family, its lighter appearance lets small areas stand apart from the dark base.

Not every surface should be a light accent. Let the broad background stay quiet, then strengthen just the elements readers need to notice. Traditional color names also do not always map to one identical HEX value across references; the combinations below are proposals for the specific swatch used here.

Two practical palettes: a website and an event banner

Example 1: A website for a plant-focused brand. Set the page background to warm off-white ■#F8F5EC, headings to miru-iro ■#726D40, and body text to dark greenish charcoal ■#273126. The contrast ratio—a numerical measure of the difference in luminance between colors—is approximately 4.84:1 for the headings and 12.40:1 for the body text against that background. Both exceed the 4.5:1 threshold for ordinary text.

Give product-detail cards a cream ■#F1E5C6 background and charcoal ■#273126 text (approximately 10.79:1). Because the card and page backgrounds are both light, add a thin dark-green ■#495237 border where a clear boundary is needed. A prominent “View Products” button can also use dark green ■#495237 with warm off-white ■#F8F5EC lettering, giving approximately 7.57:1 contrast.

Example 2: An exhibition announcement banner. Use miru-iro ■#726D40 as the main background and off-white ■#F8F5EC for the event date and heading, for a contrast ratio of approximately 4.84:1. Make only the registration button light yellow ■#F4DC98, with charcoal ■#273126 text (approximately 10.00:1). The button also has approximately 3.91:1 contrast against the miru-iro background. Keep the light accents near the headline or sign-up action so the banner retains the calm effect of its dark base.

Check text contrast and boundaries between pale colors

Colors that look good together do not automatically make readable text. WCAG 2.2 (Web Content Accessibility Guidelines), at Level AA, requires at least 4.5:1 contrast for ordinary text and 3:1 for large text. Black ■#000000 on a miru-iro ■#726D40 background provides approximately 3.98:1, which does not meet the ordinary-text threshold. Off-white ■#F8F5EC gives approximately 4.84:1 instead.

Light yellow ■#F4DC98 and off-white ■#F8F5EC are close in brightness, so placing one directly on the other gives little visual separation. Put the light-yellow button on a dark miru-iro area; distinguish pale cards with borders or spacing rather than color alone. HueRoll lets you enter a HEX value and view its contrast against white and black. It does not directly compare two arbitrary colors or automatically label AA compliance, so check the contrast of the actual color pairs separately.