Sepia meaning and palette guide
HEX
#704214
RGB
112, 66, 20
HSL
30°, 70%, 26%
HSV
30°, 82%, 44%
Brown with memory baked in — warm, slightly yellowed, and quietly nostalgic. #704214 suggests paper edges and attic boxes even on a screen. It softens contrast the way time softens edges.
Best for
Financial services branding and client-facing digital experiences.
Accessibility
White text on sepia passes AAA at 8.47:1, so it is safe for dark backgrounds and section headers.
How does sepia compare to nearby colors?
What is the difference between sepia and coffee?
Sepia (#704214) feels more signal-like on screen, while Coffee (#6F4E37) pushes the family in the opposite direction. Sepia reads faster on screen, so it changes the palette from steady to attention-seeking more quickly than Coffee does. Use sepia when you want more pigment and immediate screen energy, and coffee when the same family should feel calmer or more spreadable.
What color is sepia?
Sepia toning is a historic photographic process. The color name persists in filters, archival UI themes, steampunk aesthetics, and heritage brand identities.
What is the hex code for sepia?
| Format | Value |
|---|---|
| HEX | #704214 |
| RGB | rgb(112, 66, 20) |
| HSL | hsl(30°, 70%, 26%) |
| HSV / HSB | hsv(30°, 82%, 44%) |
| CMYK (approx.) | cmyk(0%, 41%, 82%, 56%) |
Convert Sepia to other color formats
Open the color converter with Sepia (#704214) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Sepia in the color converter →What does sepia mean in design?
Sepia is often associated with history, sentiment, and gentle melancholy. Compared with umber it is often warmer and more "aged paper"; compared with chocolate it is usually dustier and less dessert-rich.
How do I use sepia in code?
| CSS (hex) | color: #704214; |
| CSS (rgb) | color: rgb(112, 66, 20); |
| CSS (hsl) | color: hsl(30, 70%, 26%); |
| RGB % | rgb(44%, 26%, 8%) |
| Tailwind | text-[#704214] |
| SwiftUI | Color(red: 0.439, green: 0.259, blue: 0.078) |
| UIKit | UIColor(red: 0.439, green: 0.259, blue: 0.078, alpha: 1.0) |
| Android | Color.rgb(112, 66, 20) |
| Compose | Color(0xFF704214) |
| Web Safe | #663300 |
Is sepia accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 8.47:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaBlack text on this color | 2.48:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| AaThis color as text on white | 8.47:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| AaThis color as text on black | 2.48:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.
How does sepia look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with sepia
White sharpens sepia without cooling it off, which is useful when you need a clean interface or slide layout around the color.
Navy blue reins in sepia without deadening it, which is useful when you want warmth to stay present but not dominate every part of the page.
Against deep sepia, cream softens the mood without weakening readability, so the palette stays inviting rather than severe.
Charcoal gives sepia a modern dark partner that feels softer and more material than default black.
Sage Green sits far enough away from sepia in lightness that the pair reads cleanly at presentation distance instead of collapsing into one band.
What colors clash with sepia
Neon Green is so artificial beside sepia that the source color starts to look accidental instead of rooted and deliberate.
With sepia, magenta introduces a second emotional story instead of reinforcing the first one, so the palette can feel internally split.
Cyan can make sepia feel more software-default than designed, especially when the rest of the palette is trying to hold onto material nuance.
With sepia, Pastel Pink often steers the system toward nursery or confectionery cues instead of the more grounded mood the source color supports.
How should I use sepia in design?
- •Sepia works well as a dark background with light text, or as a bold accent for headlines and callout bars in presentations and branded materials.
- •Pair sepia with cool accents (navy, sage, steel blue) for sharp contrast, or keep it with other warm tones (cream, gold, tan) for a cohesive, editorial feel.
- •Sepia fits food packaging, hospitality branding, and editorial layouts where natural warmth and material texture are more important than synthetic brightness.
What are good sepia palettes?
Dark precision
Financial services branding and client-facing digital experiences.
Design with sepia in Moda
Create a presentation or document using sepia as your accent color. Moda's AI applies your color palette automatically.
Create a design with sepia →What are the shades and tints of sepia?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for sepia?
Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.
Similar colors
Chocolate
Chocolate is nearly adjacent to sepia in hue; what separates them is intensity, with chocolate reading cleaner and more assertive.
Brown
Brown is nearly adjacent to sepia in hue; what separates them is intensity, with brown reading cleaner and more assertive.
Coffee
Coffee is almost the same hue as sepia; the real difference is value, with coffee feeling more open and surface-friendly.
Taupe
Taupe sits close to sepia on the wheel, but it carries less chroma, which makes it better for steadier surfaces and calmer long-form use than for sharper emphasis and quicker visual pickup.
Mocha
Mocha is almost the same hue as sepia; the real difference is value, with mocha feeling more open and surface-friendly.
Frequently asked questions
What is the hex code for sepia?
The hex code for sepia is #704214. In RGB, that's 112 red, 66 green, and 20 blue. The approximate CMYK equivalent is 0% cyan, 41% magenta, 82% yellow, and 56% key (black).
Is sepia a warm or cool color?
Sepia sits on the warm side of the palette, so it pairs easily with other warm tones and becomes more energetic when you place it against cooler blues or blue-grays.
Is sepia better for accents, structure, or surfaces?
Sepia sits in the usable middle: strong enough to anchor a section or call attention to a key moment, but calm enough to support a broader system when the surrounding values are well managed.
Where does sepia work best in a layout?
Sepia has enough depth to anchor a layout while still reading as a color, which makes it useful for dark section blocks, headlines, and heavier accents.
Is sepia accessible?
Sepia is strong enough for white text at 8.47:1 contrast, so it can handle dark panels, tags, and section headers without much trouble. As text on white, though, it is usually better reserved for larger headings or short accents than for long paragraphs.
More brown colors
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Brown colors
Compare sepia with other brown tones.
Neutral colors
Explore nearby color families to build stronger palettes and contrasts.
Orange colors
Explore nearby color families to build stronger palettes and contrasts.
Red colors
Explore nearby color families to build stronger palettes and contrasts.
Last updated April 6, 2026
Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.