Umber is a warm, earthy brown that exudes a rich, rustic vibe. It sits between yellow and red on the color wheel, leaning toward brown. With its natural pigment feel, it's perfect for artistic palettes. Pair it with burnt sienna or ochre for cozy, grounded designs.
Umber is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #635147
- RGB value: 38.8% red, 31.8% green, 27.8% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines
For variations within the same spectrum as umber, consider:
- Mahogany (#C04000): Mahogany shares Umber's rich, earthy undertones, offering a warm and inviting hue reminiscent of natural wood.
- Burnt Sienna (#ED7B58): Burnt Sienna captures Umber's reddish-brown qualities. It reflects an earthy, warm depth common in natural pigments.
- Brown (#895129): Brown closely mirrors Umber's dark, classic tone, making it a fundamental shade among neutral colors and brown shades.
- Rust (#B7410E): Rust exhibits a warm, earthy appeal like Umber, enriched with a hint of orange that echoes the warmth of earth tones.
To complement Umber, consider pairing it with:
- Mint Green (#ADEBB3): This refreshing hue introduces a cool contrast that balances Umber's warm, earthy tones, creating a harmonious and natural palette.
- Saffron (#F1C338): The sunny vibrancy of saffron pairs beautifully with Umber, adding a warm, inviting glow that enriches the earthy feel.
- Powder Blue (#B8E3E9): The light and airy quality of powder blue softens Umber’s depth, providing a calming and tranquil backdrop.
- Goldenrod (#FFA024): Goldenrod brings a touch of brightness that complements Umber’s natural pigments, evoking a rustic and warm ambiance.
While Umber is a deep, earthy brown often used in natural pigments, certain colors don't harmonize as well with it:
- Neon Green (#2CFF05): The intense brightness of neon green conflicts with umber’s muted, earthy tone, resulting in a harsh, overpowering contrast.
- Hot Pink (#FF46A2): Hot pink’s vibrant and warm nature creates a visual clash with umber, as both fight for attention.
- Bright Yellow (#FFED29): Bright yellow’s high saturation overwhelms umber’s subtle richness, making it difficult for the eye to rest comfortably.
- Aqua (#00FFF0): Aqua’s cool vibrancy starkly contrasts with umber’s warm, dense hue, leading to discord rather than harmony.
- Electric Blue (#00F0FF): The boldness of electric blue overpowers the neutral tones of umber, disrupting its natural pigment aesthetic.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Earthy Twilight
Walnut Seashell
Rustic Cocoa
Contrast checker
Contrast 7.5
- Large Text
#635147
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Contrast 2.8
- Large Text
#635147
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #635147, known as Umber, has RGB values of R:99, G:81, B:71 and CMYK values of C:0, M:18, Y:28, K:61.
| VALUE | CSS | |
|---|---|---|
| HEX | #635147 | #635147 |
| RGB DECIMAL | 99, 81, 71 | RGB(99,81,71) |
| RGB PERCENTAGE | 38.8, 31.8, 27.8 | RGB(38.8%,31.8%,27.8%) |
| CMYK | 0, 18, 28, 61 | |
| HSL | HSL(21.4, 16.5%, 33.3%) | HSL(21.4, 16.5%, 33.3%) |
| HSV (OR HSB) | 21.4°, 28.3, 38.8 | |
| WEB SAFE | #10210251 | #10210251 |
| BINARY | 01100011, 01010001, 01000111 | |
| iOS - SwiftUI | Color(red: 0.388, green: 0.318, blue: 0.278) | |
| iOS - UIKit | UIColor(red: 0.388, green: 0.318, blue: 0.278, alpha: 1) | |
| Android - Compose | Color(0xFF635147) |
