What Is the Difference Between Sumi-iro and Black? Compare Color Swatches on Screen

How different do sumi-iro and black look when you place them side by side on a screen? Both are very dark colors, but their numerical values and appearance against surrounding backgrounds are not identical. This article compares actual swatches and explains how to use these shades for headings, body text, and a website footer.

Sumi-iro is close to black, but its color code is different

In CSS, the language used to style web pages, the named color “black” is ■#000000. RGB specifies a color using the amounts of red, green, and blue light, and all three components of CSS black are zero. HEX is a way to specify web colors using a # sign followed by six hexadecimal digits or letters.

The Japanese color reference I-IRO lists “sumi” (墨) as ■#313131, or RGB 49, 49, 49. We use this “sumi” swatch as one example for comparing ink-inspired dark colors with black, not as a universal value for sumi-iro. This is slightly lighter than black ■#000000 and has equal red, green, and blue components. Another Japanese color reference, Wa-iro, lists “sumi” (墨) as ■#373737, where red, green, and blue are all 55. Even related ink-inspired color names do not always identify the same digital shade across references.

The three swatches show their HEX codes directly on the corresponding background colors. Viewed separately, each may look almost black. Placing them next to one another makes the small brightness differences easier to compare. Screen settings and surrounding light also affect what you see, so record both the reference and the exact code instead of treating sumi-iro as one universal digital value.

Compare the colors on a handmade-goods portfolio page

Imagine a website presenting handmade accessories. Give the page a warm off-white ■#F8F6F2 background, then preview the same main heading once in black ■#000000 and once in sumi-iro ■#313131. Black is the darker option, while the I-IRO sumi sample is a slightly lighter neutral gray. Which fits better will depend on the photography, text size, and overall design.

• Body copy: use sumi-iro ■#313131 on a warm off-white ■#F8F6F2 background for product descriptions.
• Product headings: compare black ■#000000 and sumi-iro ■#313131 on the same off-white ■#F8F6F2 background, then choose one consistently.
• Product cards: use white ■#FFFFFF. Since the white card and off-white page background are close in brightness, separate cards with spacing or visible boundaries as needed.
• Page footer: use a sumi-iro ■#313131 background with white ■#FFFFFF lettering. Identify links with clear wording or underlines as well as color.

A slight change between black and sumi-iro alone may not establish a strong enough heading hierarchy. Check font size, weight, and spacing above and below each heading. Assign each dark shade a defined role rather than swapping them arbitrarily across the page.

Check contrast where similar dark shades meet

A contrast ratio is a numerical measure of the difference in relative brightness between text and its background. The Web Content Accessibility Guidelines (WCAG) 2.2 Level AA require at least 4.5:1 for ordinary text and 3:1 for large text.

Black ■#000000 on the warm off-white ■#F8F6F2 background has a contrast ratio of approximately 19.46:1, and sumi-iro ■#313131 on the same background reaches about 12.05:1. Both exceed the ordinary-text requirement. White ■#FFFFFF text on a sumi-iro ■#313131 background reaches about 13.01:1.

However, black ■#000000 text on a sumi-iro ■#313131 background reaches only about 1.61:1, far below either text threshold. Avoid placing one nearly black shade as text over another. Essential icons and boundaries can also be difficult to distinguish when similar dark colors touch. Check the actual neighboring colors in the finished layout and add clear shapes and spacing where needed.