What Color Is Urabayanagi? A Traditional Japanese Color Explained Through Pronunciation and Color Swatches
Urabayanagi (裏葉柳) is a traditional Japanese color name for a soft, pale yellow-green reminiscent of the underside of a willow leaf. Its pronunciation is written differently in some references, and online color guides do not always agree on a single digital swatch. By checking those sources, we can understand the color and find ways to use it in websites and announcement banners.
How to pronounce Urabayanagi and where its name comes from
The Japanese dictionary Seisenban Nihon Kokugo Daijiten gives the reading “ura-ba-yanagi” (うらばやなぎ), describing a dyed color resembling the underside of a willow leaf. The Japanese color reference Wairo Daijiten, however, writes the reading as “ura-ha-yanagi” (うらはやなぎ). Rather than silently treating one spelling as universal, it is more accurate to identify which reference you are using.
The color belongs to the family of muted yellow-greens. It is lighter and less vivid than a strong spring green, and often has a soft, slightly grayish quality. Its traditional name points to a natural surface, not to one fixed computer color value. Different swatch collections can therefore give it somewhat different digital representations.
Compare two color swatches and try them in a web design
A HEX code is a hexadecimal notation for specifying a color on the web. Wairo Daijiten shows Urabayanagi as #C1D8AC, while the color reference I-IRO gives #C1CCAF. The I-IRO example is slightly darker and has a more muted, grayish appearance. Neither should be presented as the sole correct value; choose one for your project and keep the code consistent throughout your design.
A product page for natural materials and handcrafted goods
For a product-focused page, try an ivory #FAF8F2 background, an Urabayanagi #C1D8AC band behind a product description heading, and deep gray-green #263B34 for the main text and heading letters. The contrast ratio—a measure of the lightness difference between two colors—is about 7.79:1 between that text and the green band, or 11.25:1 on the ivory background. Keeping the large areas light lets product photography stand out while the darker text carries the information.
For a purchase button, a deep reddish brown #734C3B with white #FFFFFF lettering gives approximately 7.43:1 text contrast. The button itself contrasts with the ivory background by about 7.00:1, so the action is visually distinct within the subdued palette. Using the brown only on buttons or small accents can preserve Urabayanagi as the main color.
A seasonal event announcement banner
For a calmer-looking announcement, use I-IRO’s Urabayanagi #C1CCAF across the banner background. Set the title in deep gray-green #263B34 and the event date or a short highlight in dark reddish brown #664333. These text-to-background contrast ratios are approximately 7.13:1 and 5.18:1, respectively. If the registration details need a visible frame, a deeper green-gray #465C48 border has about 4.34:1 contrast against that background.
Check text contrast when using such pale greens
Urabayanagi #C1D8AC and white #FFFFFF have a contrast ratio of only about 1.53:1, so white body text on that pale green is not sufficiently distinct. The first Urabayanagi swatch differs from ivory #FAF8F2 by about 1.44:1, while the two Urabayanagi swatches #C1D8AC and #C1CCAF differ by only about 1.09:1. If these pale areas need clear boundaries, add spacing, labels, or a darker line rather than relying on hue differences alone.
WCAG 2.2 (Web Content Accessibility Guidelines) Level AA requires at least 4.5:1 text contrast for normal-sized text and 3:1 for large text. Essential visual information identifying interface controls can also require 3:1 contrast against adjacent colors. HueRoll lets you enter a HEX value, explore related color combinations, and check the selected color against white and black. It cannot compare arbitrary two-color pairs or automatically determine AA or AAA compliance, so check your final combinations separately.