Material Brown 700 #9F857B

Material Design Palette

Copy-ready color values

HEX#9F857B

RGBrgb(159, 133, 123)

HSLhsl(17, 16%, 55%)

HSVhsv(17, 23%, 62%)

CMYK approx.cmyk(0, 16, 23, 38)

Color value table

Format	Value	Copy
HEX	`#9F857B`
RGB	`rgb(159, 133, 123)`
HSL	`hsl(17, 16%, 55%)`
HSV	`hsv(17, 23%, 62%)`
CMYK approx.	`cmyk(0, 16, 23, 38)`
CSS keyword	`material-brown-700`

Contrast and classification

LightLightness3.43:1Contrast with white6.12:1Contrast with blackRed / OrangeColor family

Shade and tint preview

White 10%
#A99188

White 30%
#BCAAA3

White 70%
#E2DAD7

White 90%
#F5F3F2

Black 10%
#8F786F

Black 30%
#6F5D56

Black 70%
#302825

Black 90%
#100D0C

Harmony palettes

Complementary

#607A84

#869AA2

Analogous

#9C857F

#9F847C

Triadic

#857B9F

#7B9F85

Split complementary

#7D929A

#4F646C

Using Material Brown 700

Material Brown 700 works best when it is chosen with contrast, surrounding colors, and interface state in mind. Use the HEX value for static CSS, RGB when you need channel-level control, and HSL when adjusting lightness or saturation for hover states. The CMYK value is an approximate screen-to-print conversion, so print workflows should still rely on calibrated design software or a printer profile.

CSS, SCSS, and Tailwind examples

:root {
  --color-material-brown-700: #9f857b;
}

.button-primary {
  background: var(--color-material-brown-700);
  color: #000000;
}

$material-brown-700: #9f857b;

// Tailwind arbitrary value
class="bg-[#9f857b] text-white"