Sepia Film color palette
Old photographs fade to these tones: dark sepia #704214, a reddish sienna, amber, honey and a pale parchment, #F8D5A0. The set is warm with no cool tones at all, which gives anything it touches an aged, nostalgic quality. It covers both text and background on its own. Family history sites and documentary posters suit it best.
Sepia Film palette in use
Put #704214 text on a #F8D5A0 background. #A0522D works for buttons and headings, and #C68642 and #E0A860 for borders, photo frames and dividers.
This pair measures 6.05:1, so it works for body text too. The button uses #A0522D with white text.
ButtonGood for
- Family history website
- Documentary film poster
- Antique dealer catalog
- Barbershop branding
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#704214 | #F8D5A0 | 6.05:1 | AA |
#A0522D | #F8D5A0 | 4.01:1 | AA large |
#704214 | #E0A860 | 4.01:1 | AA large |
Sepia Film palette as code
CSS variables
:root {
--sepia-film-1: #704214;
--sepia-film-2: #A0522D;
--sepia-film-3: #C68642;
--sepia-film-4: #E0A860;
--sepia-film-5: #F8D5A0;
}Tailwind v4
@theme {
--color-sepia-film-1: #704214;
--color-sepia-film-2: #A0522D;
--color-sepia-film-3: #C68642;
--color-sepia-film-4: #E0A860;
--color-sepia-film-5: #F8D5A0;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'sepia-film': {
100: '#704214',
200: '#A0522D',
300: '#C68642',
400: '#E0A860',
500: '#F8D5A0',
},SCSS
$sepia-film-1: #704214;
$sepia-film-2: #A0522D;
$sepia-film-3: #C68642;
$sepia-film-4: #E0A860;
$sepia-film-5: #F8D5A0;JSON
["#704214","#A0522D","#C68642","#E0A860","#F8D5A0"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.