How Can You Use Ruri Blue on a Website? Backgrounds and Accent Colors That Enhance Its Deep Blue
Ruri blue, or ruri-iro in Japanese, is a deep blue with a slight violet cast. It can make a memorable website background, but spreading the same dark blue across every section may make photographs and explanatory text less prominent. To let the color stand out while keeping information easy to read, give the backgrounds, lettering, and accent color distinct roles.
Use ruri blue in focal areas and keep reading sections light
One commonly listed color sample for ruri blue is #1E50A2. HEX is a way of specifying web colors using a hash sign followed by six hexadecimal digits. The traditional color name does not have just one universally fixed code, so we will use this example as our starting point.
Placing ruri blue #1E50A2 behind a short introduction or headline at the top of the page gives it a clear role. Use white #FFFFFF for the text on that background. This pair has a contrast ratio of about 7.71:1. A contrast ratio measures the difference in relative brightness between two colors; this pairing exceeds the 4.5:1 minimum generally required for normal text under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA.
There is no need to keep dates, descriptions, and other detailed information on a dark blue background throughout the page. Switching to a lighter background for longer text creates a clear difference between the areas that establish the visual mood and those that people need to read carefully.
Example palette for a glass-art exhibition website
Imagine a site showing photographs of glass artworks alongside exhibition dates, venue information, and a visitor booking option. The following assignments let ruri blue represent the exhibition while leaving practical details well organized.
- Top section: Use ruri blue #1E50A2 as the background, with white #FFFFFF for the exhibition title and a short introduction. Keep the blue panel limited to this opening area rather than extending it behind every artwork photograph.
- Exhibition details: Choose a pale blue-tinted off-white #F6F8FC for the section background and dark blue-gray #26394F for body text. Their contrast ratio is about 11.09:1. Ruri blue #1E50A2 headings on the same pale background have a ratio of about 7.25:1.
- Artwork cards: Give each card a white #FFFFFF surface. White against the pale page background #F6F8FC has a ratio of only about 1.06:1, so add a blue-gray border #667D9C where the card edges need to be clear. The border contrasts at about 4.22:1 with the white card and 3.97:1 with the page background.
- Visitor booking button: Inside the ruri blue #1E50A2 opening section, place a soft coral #F2B8A2 button with dark blue-gray #26394F text. The button surface contrasts with the surrounding blue at about 4.46:1, and the button text has a ratio of about 6.83:1 against the coral.
Coral is a warm color noticeably different in hue from blue, so it can help visitors locate the booking action. If every photograph or card also gets a coral outline, however, the accent starts competing with ruri blue. Use it sparingly, such as for the main action.
Check the accent against its surroundings and text color
Even with the same coral #F2B8A2, the result changes when you move the button onto the pale content background #F6F8FC: the two surfaces contrast at only about 1.63:1. The button would be less distinct than it is on ruri blue, so revisit its fill or outline when changing its location.
White #FFFFFF text on the coral #F2B8A2 button has a contrast ratio of about 1.73:1 and does not meet the normal-text requirement. Keep lettering dark even when the overall palette is gentle. Mark links with underlines as well as color, and check both text and controls on smaller screens.
HueRoll lets you view HEX codes for colors such as ruri blue and compare a selected color with white or black. It does not calculate contrast for any two arbitrary colors or automatically determine WCAG compliance. The custom pairings in this example, including coral against blue-gray, have therefore been checked separately.