What Is Tobi-iro? Pronunciation, Color Swatches, and Colors That Pair Well with It

What exactly is Tobi-iro, and which colors work well alongside it? This traditional Japanese reddish brown has a subdued character. By comparing two published color swatches, we can build practical palettes for websites and banners without sacrificing text readability.

How to pronounce Tobi-iro and recognize the color

Tobi-iro (鳶色, pronounced “toh-bee-ee-roh”) is a traditional Japanese color name inspired by the feathers of the black kite, a bird of prey called a tobi in Japanese. It is also known as Tobi-cha (鳶茶). The name refers to a deep brown with a reddish cast: darker than a bright orange-brown and more subdued than a vivid red.

A historical color name does not, however, correspond to one universally fixed digital color. Reference sources use slightly different levels of redness and lightness. Instead of relying on the name alone, choose a specific swatch for your design.

Color swatches and three colors that pair well

A HEX code is a six-digit hexadecimal notation for specifying a color on the web. For Tobi-iro, the Japanese Color Dictionary (Wairo Daijiten) and I-IRO provide these examples:

Both swatches are dark, reddish browns, with a slight difference in brightness. We will use ■#95483F from the Japanese Color Dictionary as the reference for the following palettes. Keeping that exact code consistent across headings and buttons helps avoid accidental variations.

Pair Tobi-iro with ivory and charcoal

For an editorial page or a shop featuring handcrafted goods, use pale ivory ■#FAF5ED as the background, Tobi-iro ■#95483F for headings, and charcoal ■#2D2A28 for body text. Tobi-iro against the ivory background has a contrast ratio of about 5.91:1, while the charcoal body text achieves about 13.13:1. A spacious, light backdrop lets the reddish brown provide emphasis without covering the entire page.

For a small accent, try muted sage green ■#BFD1C0. The difference in hue gives the warm brown a gentle contrast without making either color overly vivid. If you use sage as the background of an information card, pair it with charcoal ■#2D2A28 text for approximately 8.89:1 contrast. The sage card itself is not strongly separated from the ivory page, so use spacing or a darker border to establish its boundary.

Use Tobi-iro as a banner background

For an announcement banner, make Tobi-iro ■#95483F the broad background and use off-white ■#FFFDF7 for the headline, reaching approximately 6.30:1 contrast. Put dates or supporting details on a sage green ■#BFD1C0 panel with charcoal ■#2D2A28 text, which achieves about 8.89:1. A sign-up button can use an off-white ■#FFFDF7 fill and Tobi-iro ■#95483F lettering, making both the button and its label distinguishable from the dark banner.

What to adjust when the palette looks too dark

Avoid placing charcoal ■#2D2A28 text directly on a Tobi-iro background. In this palette the contrast ratio is only about 2.22:1. Switch to a light text color rather than layering two dark shades. Likewise, sage green and ivory differ by only about 1.48:1, so do not rely on that color difference alone for an essential border or interaction state.

WCAG 2.2 (Web Content Accessibility Guidelines) Level AA calls for a contrast ratio of at least 4.5:1 for normal-sized text and 3:1 for large text. HueRoll lets you enter HEX codes and explore color combinations, but its built-in contrast comparisons are limited to the selected color against white or black. Check the actual two-color combinations in your final layout separately before publishing.