Medium Taupe
HEX: #674C47 | Modern Palette
On White
7.77:1
PASS
On Black
2.70:1
FAIL
Color Specifications
HEX
#674C47
RGB
103, 76, 71
HSL
9°, 31% ,40%
CMYK
0, 26.21, 31.07, 59.61
About Medium Taupe
Medium Taupe (#674C47) is a color with RGB(103, 76, 71) and HSL(9.37°, 31.07%, 40.39%). In design, it fits Muted, Warm styles and is suitable for Text, Print. Its complementary color is #476267, which creates strong contrast. Its triadic palette includes #47674C and #4C4767.
- HEX: #674C47
- RGB: 103, 76, 71
- HSL: 9.37°, 31.07%, 40.39%
- Style: Muted, Warm
- Use case: Text, Print
- Complementary color: #476267
- Triadic colors: #47674C, #4C4767
Live Components
LIGHT
DARK
System Notification Box
Color Palettes
Medium Taupe #674C47 is used in Monochromatic, Neutral + Accent, Analogous, 3 + 1 + 1 palettes, giving designers ready-made combinations for backgrounds, surfaces, accents, and interface elements.
Monochromatic
Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
Neutral + Accent
Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
Analogous
Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
3 + 1 + 1
Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.
Color Harmonies
Medium Taupe #674C47 pairs with #476267 as its complementary color, and #47674C and #4C4767 in triadic combinations. These harmony relationships help create balanced color combinations for UI, branding, and design work.
Frequently Asked Questions
Medium Taupe (#674C47) is a color with RGB(103, 76, 71) and HSL(9.37°, 31.07%, 40.39%).
#674C47 pairs strongly with #476267 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.
#674C47 is suitable for Text, Print and works well with Muted, Warm styles.
Code Snippets
/* Background */
.element {
background-color: #674C47;
}
/* Text */
.element {
color: #674C47;
}
/* Border */
.element {
border: 1px solid #674C47;
}
/* Linear gradient to complementary */
.element {
background: linear-gradient(
to right,
#674C47,
#477D87
);
}
/* Radial gradient */
.element {
background: radial-gradient(
circle,
#674C47,
#477D87
);
}
// SCSS variable
$medium-taupe: #674C47;
// With RGB channels (useful for rgba() usage)
$medium-taupe-r: 103;
$medium-taupe-g: 76;
$medium-taupe-b: 71;
// Usage
.element {
background-color: $medium-taupe;
color: rgba($medium-taupe-r, $medium-taupe-g, $medium-taupe-b, 0.8);
}