Font Blend

Editorial Cream

A warm editorial palette inspired by print magazines: cream paper, ink-black text, a brick-red primary, and a muted gold secondary.

editorialwarmclassiceditorialwarmelegant

Using Editorial Cream in a Layout

Editorial Cream is built for text-first pages. The warm off-white background sits close to paper, and the near-black text on top keeps the reading contrast high without the hard glare of pure white. Use the brick-red primary for links, pull quotes, and the one or two actions that must stand out; the muted gold secondary works better as a supporting tone for labels, bylines, and rules.

The palette tolerates generous whitespace. Instead of filling the page with color, let the background carry most surfaces and reach for the red or gold only where the content needs a focal point. A common pattern is a white card on the cream canvas with a thin gold border, which keeps the editorial feel while giving interactive regions a clear edge. Check the contrast table on this page before placing red text on white; the red is strong at display sizes and works best for headlines rather than long paragraphs.

Palette colors
Every color role with HEX, RGB, HSL, and OKLCH values. Click any value to copy.
Background

rgb(247, 243, 237)

hsl(36, 38%, 95%)

oklch(96.6% 0.009 78.3)

Text

rgb(31, 27, 22)

hsl(33, 17%, 10%)

oklch(22.5% 0.011 73.3)

Primary

rgb(139, 46, 31)

hsl(8, 64%, 33%)

oklch(43.7% 0.130 31.7)

Secondary

rgb(194, 168, 120)

hsl(39, 38%, 62%)

oklch(74.3% 0.071 82.4)

Accent

rgb(217, 119, 87)

hsl(15, 63%, 60%)

oklch(67.2% 0.131 38.8)

Surface

rgb(255, 255, 255)

hsl(0, 0%, 100%)

oklch(100.0% 0.000 89.9)

Border

rgb(226, 217, 204)

hsl(35, 27%, 84%)

oklch(88.9% 0.020 77.3)

Muted

rgb(138, 128, 116)

hsl(33, 9%, 50%)

oklch(60.5% 0.022 72.4)

WCAG contrast checks
Three semantic pairs evaluated against WCAG 2.2 AA (4.5:1 for normal text).

Text on background

Ratio 15.49:1

AA pass

Primary on background

Ratio 7.57:1

AA pass

Accent on background

Ratio 2.82:1

Below AA
Export tokens
Six formats covering most design system workflows. Each copies cleanly to your clipboard.
tokens.css
:root {
  --color-background: #F7F3ED;
  --color-foreground: #1F1B16;
  --color-primary: #8B2E1F;
  --color-secondary: #C2A878;
  --color-accent: #D97757;
  --color-surface: #FFFFFF;
  --color-border: #E2D9CC;
  --color-muted: #8A8074;
}

Related Palettes