What Is Susutake-iro? The Origin and Color Codes of Soot-Bamboo Brown

Susutake-iro (煤竹色) is a dark reddish brown inspired by bamboo darkened by soot and smoke. Its muted, slightly grayish tone can be used in websites introducing traditional crafts or exhibitions. However, the color name does not correspond to just one universal digital code. This guide explains its pronunciation and origin, compares published color swatches, and shows how to combine it with text and background colors.

Susutake-iro comes from bamboo darkened by smoke

The Japanese name 煤竹色 is usually read susutake-iro; some dictionaries also record susudake-iro. Susutake refers to bamboo that has gradually darkened from exposure to smoke, such as near a traditional hearth. The color name evokes that sooty, reddish dark brown, rather than the green of fresh bamboo.

The Japanese color reference Dentōshoku no Iroha describes Susutake-iro as a color used for kimono, haori jackets, and sashes during the Edo period. That history does not mean all naturally darkened bamboo or historical fabrics had exactly the same hue. When using the name in a digital design, choose a specific swatch.

Compare the HEX codes and practical website color schemes

Wairo Daijiten gives ■#6F514C as an example of Susutake-iro, while I-IRO lists ■#5F5145. HEX is a color code written with a hash sign and six hexadecimal digits for use on the web. RGB represents colors with the red, green, and blue components of light. The two sources use slightly different codes:

The two shades have a contrast ratio of approximately 1.08:1. A contrast ratio expresses the difference in relative brightness between two colors; these two samples are extremely similar in brightness. Rather than assuming either code is the only correct one, record the selected HEX value and its reference in your design notes.

Example A: a product page for bamboo handicrafts.Use warm off-white ■#F8F3E9 over most of the page and behind the product photographs. Set item names and short headings in the Wairo Daijiten Susutake shade ■#6F514C, and put prices and descriptions in dark charcoal ■#302B28. Make a “View the Work” button Susutake brown ■#6F514C with off-white ■#F8F3E9 lettering. The brown heading against off-white measures approximately 6.42:1; charcoal body text against off-white reaches about 12.64:1; and the button lettering against its fill measures 6.42:1. Limiting the dark brown to text and buttons leaves more light space around the craft photographs.

Example B: an exhibition banner for crafts in a traditional house.Fill the large banner area with Susutake brown ■#6F514C and place the exhibition title and dates in off-white ■#F8F3E9. For a “See Event Details” button, use a muted gold-brown ■#D8B46C fill with charcoal ■#302B28 lettering. The button fill differs from the surrounding Susutake background by approximately 3.61:1; charcoal lettering on the gold-brown fill reaches about 7.10:1. Since dark brown covers more of this design, keep the headline short and place longer details in a separate light-colored section.

Check text on dark backgrounds and small accent areas

White ■#FFFFFF lettering on Susutake brown ■#6F514C has a contrast ratio of approximately 7.10:1. WCAG (Web Content Accessibility Guidelines) 2.2 Level AA generally calls for at least 4.5:1 for normal-sized text and 3:1 for large text. The solid-color text and background pairs proposed here exceed those numerical thresholds, but font size, weight, and any images placed behind text still need to be checked.

Muted gold-brown ■#D8B46C against off-white ■#F8F3E9 has a much lower contrast ratio of about 1.78:1. If that same gold-brown button is moved onto a pale webpage, its boundary may become difficult to recognize. When a line or filled region is needed to identify an interactive control, the relevant visual cue generally needs at least 3:1 contrast against adjacent colors. Recheck the button in its actual surroundings rather than assuming one button style works everywhere.

HueRoll lets you adjust a color using HEX input and compare the selected shade against white or black. It does not compare arbitrary custom color pairs or automatically decide WCAG pass or fail. The particular text, button, and background combinations above were calculated separately.