Colors EncyclopediaUse this color
Create with Ochre
Open a professional color tool with #CC7722 already applied. Each configuration stays canonical to the tool and can be adjusted or shared.
Generate palette & CSS variablesCreate 50–950 tokens and export CSS, SCSS, JSON, or Tailwind.Open configured tool →Open in Gradient StudioStart with Ochre and its complementary color.Open configured tool →Mix this colorBlend it with a complementary color and copy color-mix() CSS.Open configured tool →Check contrastOpen the strongest black or white background pairing.Open configured tool →Accessible combinationsReview AA and AAA text options, alternatives, warnings, and UI guidance.Open configured tool →Create glass surfaceUse this color as the tint for a translucent UI panel.Open configured tool →
CSS Utilities
--color-ochre: #CC7722;
.bg-ochre { background-color: #CC7722; }
.text-ochre { color: #CC7722; }Color history, meaning and use · Editorially reviewed
About Ochre Color
Ochre is a family of earth pigments rather than one narrowly fixed color. Its red, yellow, orange, brown, and even purplish variations reflect the kinds and proportions of iron-bearing minerals present. Ready availability and durable earthy tones made ochres recurring materials across long spans of artistic practice.
For contemporary design, Ochre supplies warmth without the brightness of a pure yellow or orange. It works well with stone neutrals, dark blue, plant greens, and uncoated-paper themes. Because the real material family is broad, a single HEX should be treated as a palette anchor rather than proof that every object described as ochre will match it.
This page selects one digital Ochre reference from a much wider mineral and pigment range.
WCAG Accessibility
Contrast checks for Ochre against black and white text.
Black text6.23:1AA Pass
White text3.37:1AA Fail
Downloadable color reference infographic
Ochre Color Reference Infographic
Save a high-resolution infographic of Ochre, including its color values, coordinated palette, and black and white text contrast.
Color Harmonies
Variants
Pairings
Machine-readable data
Machine-Readable Color Data (JSON)
Perfect for CSS, design systems, automation, and AI ingestion.
Luminance0.2615
Black text6.23:1AA Pass
White text3.37:1AA Fail
hexCanonical HEX valuergbRed, green, blue channelshslHue, saturation, lightnesscmykApproximate print conversionwcagAA and AAA contrast optionsharmoniesMathematical harmony setsvariantsGenerated tone variantsnearestColorsKnowledge graph neighborsStructured sections
Color systems
{
"hex": "#CC7722",
"rgb": [
204,
119,
34
],
"hsl": [
30,
71,
47
],
"cmyk": [
0,
42,
83,
20
],
"luminance": 0.2615,
"contrast": {
"black": 6.23,
"white": 3.37
}
}WCAG
{
"AA": [
"#000000",
"#1A1A1A"
],
"AAA": []
}Harmonies
{
"complementary": "#2378CD",
"analogous": [
"#CD2323",
"#CDCD23"
],
"triadic": [
"#23CD78",
"#7823CD"
],
"tetradic": [
"#23CD23",
"#2378CD",
"#CD23CD"
],
"splitComplementary": [
"#23CDCD",
"#2323CD"
],
"monochromatic": [
"#E5A666",
"#CC7722",
"#7E4A15"
]
}Variants
{
"light": "#E5A666",
"dark": "#7E4A15",
"saturated": "#E77808",
"desaturated": "#B3783D",
"pastel": "#E0B890",
"neon": "#FF8C1A"
}Pairings
{
"best": [
"#000000",
"#2378CD",
"#CD2323",
"#CDCD23"
],
"avoid": [
"#B3783D",
"#E5A666"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#E5A666",
"#B3783D"
]
}Knowledge graph
{
"nearestColors": [
"chocolate",
"cinnamon",
"bronze",
"copper",
"polished-copper"
],
"generatedPalettes": [
"ochre"
],
"generatedComparisons": [
"bronze-vs-ochre",
"chocolate-vs-ochre",
"cinnamon-vs-ochre",
"dark-goldenrod-vs-ochre"
],
"relatedFamilies": [
"/colors/by-family/orange",
"/colors/by-temperature/warm",
"/colors/by-tone/balanced"
],
"relatedTools": [
"/harmonies/ochre",
"/wcag/ochre",
"/css/colors/ochre",
"/hex/cc7722",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/orange",
"/colors/by-temperature/warm",
"/colors/by-tone/balanced"
],
"narrower": [
"/palettes/ochre"
],
"related": [
"/colors/chocolate",
"/colors/cinnamon",
"/colors/bronze",
"/colors/copper",
"/colors/polished-copper",
"/compare/bronze-vs-ochre",
"/compare/chocolate-vs-ochre",
"/compare/cinnamon-vs-ochre",
"/compare/dark-goldenrod-vs-ochre",
"/harmonies/ochre",
"/wcag/ochre",
"/css/colors/ochre",
"/hex/cc7722",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
}
}Full JSON dataset
{
"slug": "ochre",
"name": "Ochre",
"hex": "#CC7722",
"uses": [
"warm accents",
"food branding",
"interior palettes"
],
"psychology": {
"associations": [
"warmth",
"comfort",
"approachability"
],
"contexts": [
"hospitality",
"craft",
"food",
"home decor"
],
"avoidIn": [
"cold technical interfaces"
]
},
"aliases": [],
"sourceType": "curated",
"confidence": "medium",
"reviewStatus": "manual",
"sourceUrl": "https://www.colorsencyclopedia.com/assets/colors.json",
"origin": {
"type": "common",
"notes": "Curated common color reference used in design and editorial color systems."
},
"family": "orange",
"temperature": "warm",
"tone": [
"balanced"
],
"editorialNotes": "Curated internal color record with computed technical properties.",
"tags": [
"orange",
"warm",
"balanced",
"warm-accents",
"food-branding",
"interior-palettes",
"warmth",
"comfort",
"approachability"
],
"popularity": 80,
"rgb": [
204,
119,
34
],
"hsl": [
30,
71,
47
],
"cmyk": [
0,
42,
83,
20
],
"luminance": 0.2615,
"contrast": {
"black": 6.23,
"white": 3.37
},
"harmonies": {
"complementary": "#2378CD",
"analogous": [
"#CD2323",
"#CDCD23"
],
"triadic": [
"#23CD78",
"#7823CD"
],
"tetradic": [
"#23CD23",
"#2378CD",
"#CD23CD"
],
"splitComplementary": [
"#23CDCD",
"#2323CD"
],
"monochromatic": [
"#E5A666",
"#CC7722",
"#7E4A15"
]
},
"variants": {
"light": "#E5A666",
"dark": "#7E4A15",
"saturated": "#E77808",
"desaturated": "#B3783D",
"pastel": "#E0B890",
"neon": "#FF8C1A"
},
"wcag": {
"AA": [
"#000000",
"#1A1A1A"
],
"AAA": []
},
"css": {
"variable": "--color-ochre: #CC7722;",
"utility": ".bg-ochre { background-color: #CC7722; }",
"textUtility": ".text-ochre { color: #CC7722; }"
},
"nearestColors": [
"chocolate",
"cinnamon",
"bronze",
"copper",
"polished-copper"
],
"generatedPalettes": [
"ochre"
],
"generatedComparisons": [
"bronze-vs-ochre",
"chocolate-vs-ochre",
"cinnamon-vs-ochre",
"dark-goldenrod-vs-ochre"
],
"relatedFamilies": [
"/colors/by-family/orange",
"/colors/by-temperature/warm",
"/colors/by-tone/balanced"
],
"relatedTools": [
"/harmonies/ochre",
"/wcag/ochre",
"/css/colors/ochre",
"/hex/cc7722",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
],
"semanticRelations": {
"broader": [
"/colors/by-family/orange",
"/colors/by-temperature/warm",
"/colors/by-tone/balanced"
],
"narrower": [
"/palettes/ochre"
],
"related": [
"/colors/chocolate",
"/colors/cinnamon",
"/colors/bronze",
"/colors/copper",
"/colors/polished-copper",
"/compare/bronze-vs-ochre",
"/compare/chocolate-vs-ochre",
"/compare/cinnamon-vs-ochre",
"/compare/dark-goldenrod-vs-ochre",
"/harmonies/ochre",
"/wcag/ochre",
"/css/colors/ochre",
"/hex/cc7722",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
},
"pairings": {
"best": [
"#000000",
"#2378CD",
"#CD2323",
"#CDCD23"
],
"avoid": [
"#B3783D",
"#E5A666"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#000000"
],
"lowContrast": [
"#E5A666",
"#B3783D"
]
}
}