Matsuba-iro Color Codes and Color Scheme Examples: Tips for Using Deep Green

Matsuba-iro, meaning pine-needle green, is a muted, slightly yellowish green associated with the needles of pine trees. For a website or banner, the key is not simply to add more green. Start by deciding how much of the background it should cover and how bright the text needs to be. The following two palettes use the same deep green in different ways.

Matsuba-iro color codes and what makes the color distinctive

Matsuba-iro is a traditional Japanese name for a subdued yellow-green reminiscent of pine needles. Digital color references include a lighter, somewhat yellower version ■#839A5C and a deeper green ■#4F7942. There is no single universally fixed HEX code for the traditional name; references can differ in lightness and depth. We will use the deeper ■#4F7942 as the main color for these examples.

A HEX (hexadecimal) color code is a way to specify web colors using a hash sign followed by letters and numbers. The codes in this article have six digits. A lighter Matsuba-iro ■#839A5C can serve as a decorative accent, while the deeper ■#4F7942 can cover a background or form a heading. That difference in roles helps organize the shades of green. Whether either version is suitable for text still depends on the color behind it.

Two practical color schemes using Matsuba-iro

Bonsai class announcement: Use green sparingly on a light background

Start with warm ivory ■#F7F4EA across most of the banner and use Matsuba-iro ■#4F7942 for the heading. Put smaller details, such as the date and venue, and the body copy in a very dark green-gray ■#203124. This creates a clear difference between the headline and supporting information. Fill the booking button with Matsuba-iro ■#4F7942 and set its label in white ■#FFFFFF. Use the lighter pine green ■#839A5C only for a short decorative underline rather than for paragraphs of text.

Handcrafted products: Make deep green the main background

For a banner highlighting a new craft collection, give most of the background to Matsuba-iro ■#4F7942 and place the headline and short description in white ■#FFFFFF. Reserve a small warm-ivory ■#F7F4EA panel for information beside the product photo or a price label, with dark green-gray ■#203124 lettering inside it. The “View Details” button can also use an ivory ■#F7F4EA background with dark green-gray ■#203124 text. A sand-gold accent ■#D8B96F may work as a short purely decorative line, but should not automatically become the color of a border or icon needed to understand or operate the interface.

The first scheme leaves most of the surface light and concentrates green in important places. The second covers more space with green but keeps the ivory panels small. Changing the proportions changes how the text and photos stand out, even though the central green remains the same.

Check text and background contrast before publishing

Contrast ratio describes the difference in brightness between two adjacent colors. Under the Web Content Accessibility Guidelines (WCAG) 2.2, Level AA requires a ratio of at least 4.5:1 for normal-sized text and 3:1 for large text.

Deep Matsuba-iro ■#4F7942 against ivory ■#F7F4EA has a ratio of about 4.60:1, and deep Matsuba-iro ■#4F7942 against white ■#FFFFFF reaches about 5.07:1. Both meet the Level AA threshold for normal-sized text. The first pairing is close to the threshold, however, so dark green-gray ■#203124 may be preferable for small or thin lettering. Dark green-gray ■#203124 against ivory ■#F7F4EA has a ratio of about 12.50:1.

By contrast, lighter pine green ■#839A5C against ivory ■#F7F4EA reaches only about 2.83:1, falling short of the Level AA text requirements. Sand-gold ■#D8B96F against the deep green ■#4F7942 has a ratio of about 2.67:1. Do not rely on that difference alone for essential controls or meaningful icons, which generally require at least 3:1 against adjacent colors. For text over a photo, measure against the actual color immediately behind the letters.

HueRoll can compare a selected color with white or black. Contrast ratios for arbitrary pairs, such as pine green and ivory, must be calculated separately, and meeting the AA requirements needs to be checked rather than assumed.