How to Choose Colors That Go with Shikon: Background and Accent Color Scheme Examples

Shikon (紫紺) is a deep Japanese purple with a dark, navy-like character. It can make a strong focal point, but combining several dark colors may bury important text or buttons. The right supporting colors depend on whether Shikon appears as a heading and action color on a light page or fills a large background itself. These two example palettes show how to choose backgrounds and accents for each purpose.

Choose colors for Shikon by deciding how light the background should be

Shikon, pronounced “shee-kon,” is a traditional Japanese color name for a very dark purple with a navy-like quality. The Wairo Daijiten color reference lists ■#460E44, while I-IRO uses the closely related ■#402842. A HEX code is a hexadecimal value for specifying a web color. Traditional color names do not always have one universally fixed digital value, so we use the former swatch consistently in these examples.

If Shikon is the color of headings or buttons, a light, ivory-like background creates separation around it. If Shikon covers a large section, keep the text light and consider a small mint-green or warm-gold accent for contrast. Accents can look more or less intense depending on their area and neighboring colors, so selecting the brightest possible color is not the goal.

Compare two background and accent palettes

A light product page: ivory and soft gold

For a website featuring Japanese crafts or handmade products, use ivory ■#F8F4EC for the page background, Shikon ■#460E44 for headings, and charcoal ■#2D2930 for body text. The heading-to-background contrast ratio—the measured difference in relative lightness—is approximately 13.61:1, and body text contrasts with ivory at approximately 13.01:1. Leaving most of the page light prevents the deep purple from dominating every section.

Use soft gold ■#E6C879 for the fill of a small information label with charcoal ■#2D2930 lettering. Text contrast is approximately 8.77:1. Because gold contrasts with ivory by only about 1.48:1, do not rely on the colored rectangle alone if the label’s edge must be recognized; add clear text, spacing, or an outline. For a purchase button, white ■#FFFFFF lettering on Shikon ■#460E44 provides approximately 14.93:1 contrast.

A dark event page: Shikon as the background and mint as the accent

For an event announcement or registration landing page, use Shikon ■#460E44 across the prominent background. Set the main heading in ivory ■#F8F4EC and the supporting text in a very pale lavender-gray ■#F2EBF0. Against Shikon, the respective text contrast ratios are about 13.61:1 and 12.74:1. These pale text colors preserve the dark-purple atmosphere while keeping the content distinct.

Make the registration button pale mint ■#A9E2D1 with Shikon ■#460E44 lettering. The text-to-button contrast is approximately 10.30:1, and the button fill also contrasts with its Shikon surroundings by approximately 10.30:1. Compared with a gold accent, this cool green gives the layout a different balance and can make a dark section feel less heavy.

Adjust accent area and verify text contrast

Black ■#000000 text placed directly on Shikon ■#460E44 has a contrast ratio of only about 1.41:1, which is not sufficient for ordinary text. Use pale letters on a dark background instead. Likewise, do not communicate a state such as “selected” or “clickable” through a barely visible difference between pale gold and ivory alone. Include meaningful text, shape, or a contrasting outline. Decorative lines and boundaries essential to understanding an interface have different roles.

Under WCAG 2.2 (Web Content Accessibility Guidelines) Level AA, the minimum contrast ratio is 4.5:1 for normal-sized text and 3:1 for large text. Important visual information that identifies user interface components can also need 3:1 contrast against adjacent colors. HueRoll accepts HEX codes, suggests related palettes, and shows contrast between the selected color and white or black. It does not calculate contrast for arbitrary two-color pairs or automatically determine AA/AAA compliance, so verify the actual pairs in the finished layout separately.