Colors EncyclopediaUse this color
Create with Sepia
Open a professional color tool with #704214 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 Sepia 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-sepia: #704214;
.bg-sepia { background-color: #704214; }
.text-sepia { color: #704214; }Color history, meaning and use · Editorially reviewed
About Sepia Color
Sepia began as more than a nostalgic photographic effect. The name is associated with a dark brown ink prepared historically from cuttlefish ink sacs, and it later became familiar through monochrome drawing, wash, and photographic toning. Modern products and digital filters may reproduce the visual convention with entirely different materials, so the word now spans a material history and a broad color style.
In interfaces and editorial layouts, Sepia softens the severity of black while retaining an archival, bookish character. It works well with parchment-like neutrals, muted blue, and oxidized green, but should not be used as shorthand for historical authenticity: age, paper, chemistry, and photographic processes produce far more variation than one brown overlay. Text contrast still needs measurement rather than visual assumption.
This HEX represents a contemporary screen color, not a formula for cuttlefish ink, photographic toner, aged paper, or conservation treatment.
WCAG Accessibility
Contrast checks for Sepia against black and white text.
Black text2.48:1AA Fail
White text8.47:1AA Pass
Downloadable color reference infographic
Sepia Color Reference Infographic
Save a high-resolution infographic of Sepia, 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.0739
Black text2.48:1AA Fail
White text8.47:1AA Pass
hexCanonical HEX valuergbRed, green, blue channelshslHue, saturation, lightnesscmykApproximate print conversionwcagAA and AAA contrast optionsharmoniesMathematical harmony setsvariantsGenerated tone variantsnearestColorsKnowledge graph neighborsStructured sections
Color systems
{
"hex": "#704214",
"rgb": [
112,
66,
20
],
"hsl": [
30,
70,
26
],
"cmyk": [
0,
41,
82,
56
],
"luminance": 0.0739,
"contrast": {
"black": 2.48,
"white": 8.47
}
}WCAG
{
"AA": [
"#FFFFFF",
"#F5F5F5"
],
"AAA": [
"#FFFFFF",
"#F5F5F5"
]
}Harmonies
{
"complementary": "#144271",
"analogous": [
"#711414",
"#717114"
],
"triadic": [
"#147142",
"#421471"
],
"tetradic": [
"#147114",
"#144271",
"#711471"
],
"splitComplementary": [
"#147171",
"#141471"
],
"monochromatic": [
"#BF7022",
"#704214",
"#231406"
]
}Variants
{
"light": "#BF7022",
"dark": "#231406",
"saturated": "#7F4205",
"desaturated": "#624222",
"pastel": "#C7823D",
"neon": "#AD5700"
}Pairings
{
"best": [
"#FFFFFF",
"#144271",
"#711414",
"#717114"
],
"avoid": [
"#624222",
"#BF7022"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#FFFFFF"
],
"lowContrast": [
"#BF7022",
"#624222"
]
}Knowledge graph
{
"nearestColors": [
"saddle-brown",
"bark",
"brick-red",
"burnt-umber",
"garnet"
],
"generatedPalettes": [
"sepia"
],
"generatedComparisons": [
"sepia-vs-bark",
"sepia-vs-saddle-brown"
],
"relatedFamilies": [
"/colors/by-family/orange",
"/colors/by-temperature/warm",
"/colors/by-tone/balanced"
],
"relatedTools": [
"/harmonies/sepia",
"/wcag/sepia",
"/css/colors/sepia",
"/hex/704214",
"/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/sepia"
],
"related": [
"/colors/saddle-brown",
"/colors/bark",
"/colors/brick-red",
"/colors/burnt-umber",
"/colors/garnet",
"/compare/sepia-vs-bark",
"/compare/sepia-vs-saddle-brown",
"/harmonies/sepia",
"/wcag/sepia",
"/css/colors/sepia",
"/hex/704214",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
}
}Full JSON dataset
{
"slug": "sepia",
"name": "Sepia",
"hex": "#704214",
"uses": [
"backgrounds",
"typography",
"product surfaces"
],
"psychology": {
"associations": [
"restraint",
"clarity",
"balance"
],
"contexts": [
"interfaces",
"architecture",
"editorial design",
"packaging"
],
"avoidIn": [
"high-energy accent-only palettes"
]
},
"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",
"backgrounds",
"typography",
"product-surfaces",
"restraint",
"clarity",
"balance"
],
"popularity": 80,
"rgb": [
112,
66,
20
],
"hsl": [
30,
70,
26
],
"cmyk": [
0,
41,
82,
56
],
"luminance": 0.0739,
"contrast": {
"black": 2.48,
"white": 8.47
},
"harmonies": {
"complementary": "#144271",
"analogous": [
"#711414",
"#717114"
],
"triadic": [
"#147142",
"#421471"
],
"tetradic": [
"#147114",
"#144271",
"#711471"
],
"splitComplementary": [
"#147171",
"#141471"
],
"monochromatic": [
"#BF7022",
"#704214",
"#231406"
]
},
"variants": {
"light": "#BF7022",
"dark": "#231406",
"saturated": "#7F4205",
"desaturated": "#624222",
"pastel": "#C7823D",
"neon": "#AD5700"
},
"wcag": {
"AA": [
"#FFFFFF",
"#F5F5F5"
],
"AAA": [
"#FFFFFF",
"#F5F5F5"
]
},
"css": {
"variable": "--color-sepia: #704214;",
"utility": ".bg-sepia { background-color: #704214; }",
"textUtility": ".text-sepia { color: #704214; }"
},
"nearestColors": [
"saddle-brown",
"bark",
"brick-red",
"burnt-umber",
"garnet"
],
"generatedPalettes": [
"sepia"
],
"generatedComparisons": [
"sepia-vs-bark",
"sepia-vs-saddle-brown"
],
"relatedFamilies": [
"/colors/by-family/orange",
"/colors/by-temperature/warm",
"/colors/by-tone/balanced"
],
"relatedTools": [
"/harmonies/sepia",
"/wcag/sepia",
"/css/colors/sepia",
"/hex/704214",
"/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/sepia"
],
"related": [
"/colors/saddle-brown",
"/colors/bark",
"/colors/brick-red",
"/colors/burnt-umber",
"/colors/garnet",
"/compare/sepia-vs-bark",
"/compare/sepia-vs-saddle-brown",
"/harmonies/sepia",
"/wcag/sepia",
"/css/colors/sepia",
"/hex/704214",
"/tools/css-gradient-generator",
"/tools/color-palette-generator",
"/tools/css-color-mixer",
"/tools/contrast-checker"
]
},
"pairings": {
"best": [
"#FFFFFF",
"#144271",
"#711414",
"#717114"
],
"avoid": [
"#624222",
"#BF7022"
],
"neutral": [
"#1A1A1A",
"#F5F5F5",
"#E8E8E4"
],
"highContrast": [
"#FFFFFF"
],
"lowContrast": [
"#BF7022",
"#624222"
]
}
}