Material Orange 200 #A36100

Material Design Palette

Copy-ready color values

HEX#A36100

RGBrgb(163, 97, 0)

HSLhsl(36, 100%, 32%)

HSVhsv(36, 100%, 64%)

CMYK approx.cmyk(0, 40, 100, 36)

Color value table

Format	Value	Copy
HEX	`#A36100`
RGB	`rgb(163, 97, 0)`
HSL	`hsl(36, 100%, 32%)`
HSV	`hsv(36, 100%, 64%)`
CMYK approx.	`cmyk(0, 40, 100, 36)`
CSS keyword	`material-orange-200`

Contrast and classification

DarkLightness4.92:1Contrast with white4.27:1Contrast with blackRed / OrangeColor family

Shade and tint preview

White 10%
#AC711A

White 30%
#BF904D

White 70%
#E3D0B3

White 90%
#F6EFE6

Black 10%
#935700

Black 30%
#724400

Black 70%
#311D00

Black 90%
#100A00

Harmony palettes

Complementary

#5C9EFF

#83B5FF

Analogous

#9B6114

#A3550C

Triadic

#6100A3

#00A361

Split complementary

#79AFFF

#4B82D1

Using Material Orange 200

Material Orange 200 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-orange-200: #a36100;
}

.button-primary {
  background: var(--color-material-orange-200);
  color: #ffffff;
}

$material-orange-200: #a36100;

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