Oatmeal

#D1B399

What color is Oatmeal?

Oatmeal is a warm, pale tan with soft yellow and grey undertones, hex #D1B399, close to the color of unbleached linen. The tone is muted and slightly dusty, without the brightness of cream or the depth of caramel.

What is the meaning of the color Oatmeal?

The name comes directly from the food: cooked oat porridge, which has been a dietary staple in Scotland and Northern England since at least the 14th century. As undyed and minimally processed wool and cotton fabrics grew popular in the 18th and 19th centuries, oatmeal became a standard trade term for their natural, off-white color. The term was in documented use by British textile merchants by the mid-1800s to describe undyed woolen goods sold in bulk. Marks and Spencer built much of its early knitwear range around this natural shade, anchoring oatmeal as a recognized commercial color in British retail.

RGB
209, 179, 153
HSL
28°, 38%, 71%
CMYK
0, 14, 27, 18
HSV
28°, 27%, 82%
Oatmeal color

What colors go with Oatmeal?

Colors that pair well with Oatmeal include:
Sage Green: soft, natural contrast
Terracotta: warm earthy depth
Charcoal: grounding, strong balance
Dusty Blue: cool, calm complement
Burnt Sienna: rich tonal warmth

Similar Colors

Conversions & Codes

Format Value CSS
HEX #D1B399 color: #D1B399;
RGB 209, 179, 153 color: rgb(209, 179, 153);
RGB Percentage 82%, 70%, 60% color: rgb(82%, 70%, 60%);
CMYK 0%, 14%, 27%, 18% Not supported in CSS
HSL 28°, 38%, 71% color: hsl(28, 38%, 71%);
HSV 28°, 27%, 82% Not supported in CSS
CIE-LAB 57, 6, 9 color: lab(57% 6 9);
Decimal 13743001 Not supported in CSS

Color Variations

Shades

#D1B399
#C6A180
#BB8E67
#AF7C4F
#966A43
#7D5838
#64472D
#4B3522

Tints

#F1E8E0
#EDE1D6
#E8D9CC
#E3D2C2
#DFCAB8
#DAC2AD
#D6BBA3
#D1B399

Tones

#D1B399
#CEB39C
#CCB49F
#C9B4A1
#C6B4A4
#C3B4A7
#C0B4AA
#BDB4AD

Hues

#D1B399
#C5D199
#9BD199
#99D1C1
#99B7D1
#A599D1
#CF99D1
#D199A9

Color Harmonies

Analogous

#D1999B
Click to copy
#D1B399
Click to copy
#D1CF99
Click to copy
98%

Complementary

#D1B399
Click to copy
#99B7D1
Click to copy

Split Complementary

#D1B399
Click to copy
#99D1CF
Click to copy
#999BD1
Click to copy

Triadic

#D1B399
Click to copy
#99D1B3
Click to copy
#B399D1
Click to copy

Tetradic

#D1B399
Click to copy
#9BD199
Click to copy
#99B7D1
Click to copy
#CF99D1
Click to copy

Square

#D1B399
Click to copy
#9BD199
Click to copy
#99B7D1
Click to copy
#CF99D1
Click to copy

CSS & Dev Snippets

CSS
.oatmeal {
  color: #D1B399;
}
SCSS
$oatmeal: #D1B399;
RGB
rgb(209, 179, 153)

Accessibility & Contrast

White background

1.98:1
1.98
contrast ratio on a white background
Element
AA
AAA
Small text
Large text
UI element

Black background

10.62:1
10.62
contrast ratio on a black background
Element
AA
AAA
Small text
Large text
UI element

Popular Tags