Ochre, a warm and earthy color, lies between yellow and brown on the color wheel. This clay-like hue suggests natural pigments and rustic tones, with shades like yellow ochre and brownish-yellow. It's great for adding a grounded, timeless feel to designs, perfect for evoking a natural, inviting atmosphere.
Ochre is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #CC7722
- RGB value: 80.0% red, 46.7% green, 13.3% 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 ochre, consider:
- Mustard Yellow (#ffce1b): Mustard yellow shares a warm, earthy tone with ochre, embodying the sunlit depth found in natural ochre pigments.
- Saffron (#f1c338): With its spicy, rustic hue, saffron captures the brownish-yellow spirit of ochre, evoking an aura of warmth and tradition.
- Gold (#efbf04): Gold provides a shiny version of ochre's earthy tones, offering a similar warm hue but with a metallic sheen that suggests brightness.
- Dark Yellow (#ba8e23): Dark yellow brings a deeper, more muted approach to yellow ochre color, reflecting the aged, organic feel of clay and earthy tones.
To complement Ochre, consider pairing it with:
- Forest Green (#2E6F40): This rich, earthy tone provides a striking contrast to ochre's warmth, creating a balanced and nature-inspired palette.
- Burgundy (#660033): The deep, sophisticated hue of burgundy enhances ochre, resulting in a luxurious and inviting look that feels both bold and grounded.
- Slate Blue (#557C99): Ochre pairs beautifully with slate blue, with the coolness of blue balancing ochre’s warm, earthy tones, reminiscent of classic art palettes.
- Cream (#FDFBD4): This soft, neutral shade offers a gentle, unobtrusive backdrop, allowing ochre’s brownish-yellow vibrance and warmth to stand out.
- Olive Green (#636B2F): By mirroring ochre’s natural pigments, olive green creates an earthy, harmonious palette ideal for inspired, artist palette projects.
While Ochre is an earthy, warm hue, it may clash with:
- Bright Yellow (#FFED29): The high intensity of bright yellow can overpower ochre's subtler, brownish-yellow tones.
- Neon Pink (#FF13F0): Neon pink's vividness can be visually jarring against ochre, disrupting a cohesive artist palette.
- Blood Orange (#FF4B33): Blood orange, with its bold rusty shades, can create an unbalanced contrast with ochre's softer undertones.
- Chartreuse (#CCFF00): The electric quality of chartreuse may overshadow ochre's natural warmth, leading to tension in color wheel arrangements.
- Sky Blue (#82C8E5): Sky blue, being a cooler hue, can detract from ochre’s warm, earthy tones, creating a discordant vibe.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Spiced Azure
Desert Skies
Vivid Ember
Contrast checker
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
3.37:1
WCAG 2.2 Simple Contrast
Normal Text
- Fail
- AA
- 4.5:1
- Fail
- AAA
- 7:1
Large Text
- Pass
- AA
- 3:1
- Fail
- AAA
- 4.5:1
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
6.23:1
WCAG 2.2 Simple Contrast
Normal Text
- Pass
- AA
- 4.5:1
- Fail
- AAA
- 7:1
Large Text
- Pass
- AA
- 3:1
- Pass
- AAA
- 4.5:1
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #CC7722, known as Ochre, has RGB values of R:204, G:119, B:34 and CMYK values of C:0, M:42, Y:83, K:20.
| VALUE | CSS | |
|---|---|---|
| HEX | #CC7722 | #CC7722 |
| RGB DECIMAL | 204, 119, 34 | RGB(204,119,34) |
| RGB PERCENTAGE | 80.0, 46.7, 13.3 | RGB(80.0%,46.7%,13.3%) |
| CMYK | 0, 42, 83, 20 | |
| HSL | HSL(30.0, 71.4%, 46.7%) | HSL(30.0, 71.4%, 46.7%) |
| HSV (OR HSB) | 30.0°, 83.3, 80.0 | |
| WEB SAFE | #20410251 | #20410251 |
| BINARY | 11001100, 01110111, 00100010 | |
| iOS - SwiftUI | Color(red: 0.800, green: 0.467, blue: 0.133) | |
| iOS - UIKit | UIColor(red: 0.800, green: 0.467, blue: 0.133, alpha: 1) | |
| Android - Compose | Color(0xFFCC7722) |
