How to Use Ruri Blue and Gold: How the Amount of Decoration Changes a Color Scheme’s Impression

Pairing Japanese ruri blue with gold gives different results depending on how much gold is used. A few thin gold rules and small ornaments can keep the design restrained, while broader gold bands or information panels give the decorations a much stronger presence. In either approach, treat important text and buttons separately from ornamentation and check the contrast of the actual colors used.

Start with ruri blue and give gold a specific decorative role

Ruri-iro (瑠璃色) is a deep blue with a violet undertone named after ruri, the gemstone lapis lazuli. For this article, we use the I-IRO swatch ■#1C529D (RGB red 28, green 82, blue 157). Wairo Daijiten lists a very similar but slightly different value, ■#1E50A2, so keep a record of the source and exact color code chosen. RGB expresses screen colors using red, green, and blue light components, while HEX is a web color code written with a hash sign and six hexadecimal digits.

Our gold ■#D4AF62, warm ivory ■#F7F3EB, and dark charcoal ■#27313F are selected design examples rather than fixed definitions of their names. Gold suggests the appearance of metal, but a flat color specified by this HEX code cannot reproduce actual metallic reflections or shine. Begin by planning these as solid screen colors.

Ruri blue ■#1C529D and muted gold ■#D4AF62 have a contrast ratio of approximately 3.69:1. A contrast ratio is the numerical difference in relative luminance between two colors. A short gold line on blue can work as a decorative divider, but this pair does not provide enough contrast for normal-sized gold lettering under WCAG Level AA. Use another text color, such as white ■#FFFFFF, for essential dates and body information.

Compare a restrained 5% gold accent with a more prominent 15%

Example A: a special-exhibition page for an art museum with minimal decoration.As an illustrative distribution of colored background and decorative areas, consider 65% ruri blue, 30% ivory, and 5% gold. Put the exhibition title in white ■#FFFFFF on a large ruri-blue ■#1C529D heading area. Place dates, opening hours, and ticket details on ivory ■#F7F3EB with charcoal ■#27313F text. White on ruri blue reaches approximately 7.66:1 contrast, while charcoal on ivory reaches 11.88:1. Reserve gold ■#D4AF62 for a short rule below the title or small corner accents. Give the “View Exhibition Details” button a ruri-blue ■#1C529D fill with white ■#FFFFFF lettering on the ivory section. With blue taking most of the area and gold limited to details, the information remains the main focus.

Example B: a landing page for a gift confectionery collection with more decoration.Try an illustrative balance of 55% ivory, 30% ruri blue, and 15% gold. Keep generous ivory ■#F7F3EB space around the product photographs, and use ruri blue ■#1C529D for product-group headings and the main action button. Expand gold ■#D4AF62 beyond fine decorative rules to a small information panel labeled “Limited Gift Set.” Set its text in dark charcoal ■#27313F; charcoal on gold provides approximately 6.33:1 contrast, suitable for normal-sized text. This larger gold area creates a more embellished appearance, but avoid giving every secondary detail a gold background or too many elements will compete for attention.

These 5% and 15% figures are examples for comparing decorative coverage, not universal layout rules or accessibility thresholds. Adapt them to photographs, whitespace, and the amount of content visible on mobile screens. In both layouts, use words such as “Limited” and “Book” to explain meaning rather than relying on gold alone.

Check gold lettering, panel boundaries, and text contrast separately

Muted gold ■#D4AF62 against white ■#FFFFFF has only about 2.08:1 contrast, so avoid white body text on a gold panel. Gold ■#D4AF62 lettering on ruri blue ■#1C529D has about 3.69:1 contrast, below the 4.5:1 requirement for normal-sized text at Level AA of WCAG (Web Content Accessibility Guidelines) 2.2. Large text has a minimum of 3:1, but its actual size and weight must be checked. Keeping gold for decoration and white for essential text on blue makes the intended roles clearer.

Gold ■#D4AF62 against ivory ■#F7F3EB also contrasts by only about 1.88:1. Do not use a thin gold border as the sole necessary visual boundary for an input on ivory. If a clear boundary is needed, use ruri blue ■#1C529D, which contrasts with ivory by approximately 6.92:1. Visual information required to identify user-interface components generally needs at least 3:1 contrast against adjacent colors. Extremely fine lines and keyboard-focus indicators should be checked in the rendered page as well.

HueRoll lets you adjust a selected color using HEX input and check that color against white or black. It cannot directly compare arbitrary custom color pairs or automatically determine WCAG conformance. The contrast ratios for the ruri-blue, gold, text, and background combinations here were calculated separately.