Metallic Sunburst
HEX: #9C7C38 | Modern Palette
On White
3.92:1
FAIL
On Black
5.35:1
PASS
Color Specifications
HEX
#9C7C38
RGB
156, 124, 56
HSL
40°, 64% ,61%
CMYK
0, 20.51, 64.1, 38.82
About Metallic Sunburst
Metallic Sunburst (#9C7C38) is a color with RGB(156, 124, 56) and HSL(40.8°, 64.1%, 61.18%). In design, it fits Warm styles and is suitable for Text, Button, Accent. Its complementary color is #38589C, which creates strong contrast. Its triadic palette includes #389C7C and #7C389C.
- HEX: #9C7C38
- RGB: 156, 124, 56
- HSL: 40.8°, 64.1%, 61.18%
- Style: Warm
- Use case: Text, Button, Accent
- Complementary color: #38589C
- Triadic colors: #389C7C, #7C389C
Live Components
LIGHT
DARK
System Notification Box
Color Palettes
Metallic Sunburst #9C7C38 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
Metallic Sunburst #9C7C38 pairs with #38589C as its complementary color, and #389C7C and #7C389C in triadic combinations. These harmony relationships help create balanced color combinations for UI, branding, and design work.
Frequently Asked Questions
Metallic Sunburst (#9C7C38) is a color with RGB(156, 124, 56) and HSL(40.8°, 64.1%, 61.18%).
#9C7C38 pairs strongly with #38589C as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.
#9C7C38 is suitable for Text, Button, Accent and works well with Warm styles.
Code Snippets
/* Background */
.element {
background-color: #9C7C38;
}
/* Text */
.element {
color: #9C7C38;
}
/* Border */
.element {
border: 1px solid #9C7C38;
}/* Linear gradient to complementary */
.element {
background: linear-gradient(
to right,
#9C7C38,
#5D85DB
);
}
/* Radial gradient */
.element {
background: radial-gradient(
circle,
#9C7C38,
#5D85DB
);
}// SCSS variable
$metallic-sunburst: #9C7C38;
// With RGB channels (useful for rgba() usage)
$metallic-sunburst-r: 156;
$metallic-sunburst-g: 124;
$metallic-sunburst-b: 56;
// Usage
.element {
background-color: $metallic-sunburst;
color: rgba($metallic-sunburst-r, $metallic-sunburst-g, $metallic-sunburst-b, 0.8);
}