Ochre

HEX: #CC7722 | Modern Palette

On White
3.37:1
FAIL
On Black
6.23:1
PASS

Color Specifications

HEX
#CC7722
RGB
204, 119, 34
HSL
30°, 71% ,46%
CMYK
0, 42, 83, 20

About Ochre

Ochre (#CC7722) is a color with RGB(204, 119, 34) and HSL(30°, 71.4%, 46.7%). It is commonly associated with Energetic moods. In design, it fits Vivid, Warm styles and is suitable for Text, Button, Accent. Its complementary color is #2277CC, which creates strong contrast. Its triadic palette includes #22CC77 and #7722CC. The name comes from ὤχρα (ōkhra) (Ancient Greek).

  • HEX: #CC7722
  • RGB: 204, 119, 34
  • HSL: 30°, 71.4%, 46.7%
  • Mood: Energetic
  • Style: Vivid, Warm
  • Use case: Text, Button, Accent
  • Complementary color: #2277CC
  • Triadic colors: #22CC77, #7722CC
  • The name comes from ὤχρα (ōkhra) (Ancient Greek).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

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

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

Shades & Tints

A seamless scale of #CC7722 from deepest shade to lightest tint.

Color Characteristics

Mood
Energetic
Style
Vivid Warm
Use case
Text Button Accent

Accessibility Simulation

Deuteranopia #969614
Protanopia #848424
Tritanopia #CF7070
Achromatopsia #8C8C8C

Frequently Asked Questions

Ochre (#CC7722) is a color with RGB(204, 119, 34) and HSL(30°, 71.4%, 46.7%).

#CC7722 pairs strongly with #2277CC as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#CC7722 is suitable for Text, Button, Accent and works well with Vivid, Warm styles.

#CC7722 is commonly associated with Energetic.

The name Ochre is linked to ὤχρα (ōkhra) from Ancient Greek, meaning pale yellow, yellowish-red.

Name, History & Etymology

Origin Word ὤχρα (ōkhra)
Meaning pale yellow, yellowish-red
Language Ancient Greek
First Recorded Use Antiquity

History

Ochre is a natural earth pigment consisting of hydrated iron oxide, which gives it its characteristic yellow, red, or brown hues. It has been used by humans for an incredibly long time, making it one of the oldest pigments known. Early humans used it for body paint, cave art (e.g., Lascaux, Altamira), and even for medicinal or ritualistic purposes. Its widespread availability and durability made it a staple pigment across various cultures and continents throughout history. In ancient Egypt, yellow ochre was used for skin tones of women and gold, while red ochre was used for men's skin and pottery. Roman artists also extensively used ochre. During the Renaissance, ochre remained a fundamental pigment for artists due to its earthy tones and stability. It continues to be used in art, paints, and even as a coloring agent today.

First Recorded Use

The use of ochre as a pigment dates back tens of thousands of years, with archaeological evidence found in prehistoric cave paintings and burial sites. The word itself entered English much later, around the 15th century, via Old French and Latin.

Cultural Associations

Ochre holds significant cultural importance across many indigenous cultures worldwide. For example, Australian Aboriginal people have used ochre for millennia in ceremonies, body painting, rock art, and for medicinal purposes, with different colors often carrying specific symbolic meanings. In some African cultures, ochre is used in initiation rites and as a cosmetic. Its deep connection to the earth and its enduring presence in human history have imbued it with symbolic meanings related to life, death, fertility, and spirituality in various societies.

Similar Named Colors

Bronze #CD7F32 ΔE 2.46
Peru #CD853F ΔE 4.44
Copper #B87333 ΔE 4.79
Liver (dogs) #B86D29 ΔE 5.24

Code Snippets

/* Background */
.element {
    background-color: #CC7722;
}

/* Text */
.element {
    color: #CC7722;
}

/* Border */
.element {
    border: 1px solid #CC7722;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #CC7722,
        #2277CC
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #CC7722,
        #2277CC
    );
}

// SCSS variable
$ochre: #CC7722;

// With RGB channels (useful for rgba() usage)
$ochre-r: 204;
$ochre-g: 119;
$ochre-b: 34;

// Usage
.element {
    background-color: $ochre;
    color: rgba($ochre-r, $ochre-g, $ochre-b, 0.8);
}