Ink & Paper color palette
Built like a printed page: warm paper #F7F3EE, a slightly aged parchment, two taupes and a deep brown-black ink, #2C2416. The first and last colors are far apart in lightness, so long reading is comfortable. Everything in between is soft and slightly yellowed. Publishers, literary magazines, journaling apps, independent bookshops and newsletter writers will feel at home with it.
Ink & Paper palette in use
Set body text in #2C2416 on a #F7F3EE background. #E8E0D5 suits pull quotes and sidebars, #8B7D6B captions and buttons, and #C4B8A8 rules and borders.
This pair measures 13.86:1, so it works for body text too. The button uses #8B7D6B with black text.
ButtonGood for
- Literary magazine website
- Journaling app
- Independent bookshop
- Newsletter template
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 |
|---|---|---|---|
#2C2416 | #F7F3EE | 13.86:1 | AAA |
#2C2416 | #E8E0D5 | 11.70:1 | AAA |
#2C2416 | #C4B8A8 | 7.85:1 | AAA |
#2C2416 | #8B7D6B | 3.82:1 | AA large |
#8B7D6B | #F7F3EE | 3.62:1 | AA large |
#8B7D6B | #E8E0D5 | 3.06:1 | AA large |
Ink & Paper palette as code
CSS variables
:root {
--ink-and-paper-1: #F7F3EE;
--ink-and-paper-2: #E8E0D5;
--ink-and-paper-3: #C4B8A8;
--ink-and-paper-4: #8B7D6B;
--ink-and-paper-5: #2C2416;
}Tailwind v4
@theme {
--color-ink-and-paper-1: #F7F3EE;
--color-ink-and-paper-2: #E8E0D5;
--color-ink-and-paper-3: #C4B8A8;
--color-ink-and-paper-4: #8B7D6B;
--color-ink-and-paper-5: #2C2416;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'ink-and-paper': {
100: '#F7F3EE',
200: '#E8E0D5',
300: '#C4B8A8',
400: '#8B7D6B',
500: '#2C2416',
},SCSS
$ink-and-paper-1: #F7F3EE;
$ink-and-paper-2: #E8E0D5;
$ink-and-paper-3: #C4B8A8;
$ink-and-paper-4: #8B7D6B;
$ink-and-paper-5: #2C2416;JSON
["#F7F3EE","#E8E0D5","#C4B8A8","#8B7D6B","#2C2416"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.