← All posts

Tutorials

Sepia and cream backgrounds for easy reading

Bright white backgrounds are fine in a search result but punishing across a long read. A warm paper tone cuts glare, calms contrast, and lets you read for an hour without the squint. Here is how to apply one to any site with JustZix.

Why not just go dark?

Dark mode helps in a dim room, but for long-form reading many people find inverted text harder, not easier — light text on black can shimmer and blur, an effect called halation. A warm light surface keeps text crisp while removing the harsh edge of pure white. Think of paperback paper rather than office paper.

The classic sepia recipe

Sepia pairs a warm beige background with a deep brown text color. Apply it to the page shell and the article:

html, body,
article, main, .post {
  background-color: #f4ecd8 !important;
  color: #4a3b28 !important;
}
article a { color: #8a5a2b !important; }
article a:hover { color: #6b3f17 !important; }

The brown-on-beige combination keeps a contrast ratio comfortably above the accessibility floor while staying soft.

A lighter cream

If sepia feels too heavy, cream stays closer to white but kills the glare. It works well in normal daytime light:

html, body, article, main {
  background-color: #faf6ec !important;
  color: #33302a !important;
}

Don't forget the surfaces underneath

Many sites layer cards, code blocks, and blockquotes with their own backgrounds. If you only recolor the body, those panels still glow white. Sweep them too:

article pre,
article blockquote,
.card, .panel, figure {
  background-color: #efe7d2 !important;
  color: #4a3b28 !important;
  border-color: #d8cba8 !important;
}
input, textarea {
  background-color: #fbf8ef !important;
  color: #33302a !important;
}

Soften images with a filter

Photos at full saturation can clash with a warm page. A gentle filter ties them into the palette without hiding detail:

article img {
  filter: sepia(0.12) brightness(0.97) !important;
}

Keep the sepia value low — around 0.1 to 0.2 — so photographs stay natural while screenshots and diagrams blend in.

Time-of-day tone

For evening reading you can dim the surface a little further with a single warmer block. Set up a second JustZix rule you toggle on after sunset:

html, body, article, main {
  background-color: #e8ddc2 !important;
  color: #3a2f1f !important;
}

Make it a rule

Create a JustZix rule, point its URL pattern at the publication you read most, paste the background, surfaces, and image blocks into the CSS pane, and save. The site now greets you with paper instead of a lightbulb. Keep the toggle handy so you can flip between daytime cream and evening sepia.

Warm backgrounds work beautifully alongside a constrained column and roomy line-height. See the companion post on getting column width right, browse our ready-made examples for full reading themes, and download JustZix to give your eyes a rest.

Rate this post

No ratings yet — be the first.

Try it yourself

Install JustZix and paste any snippet from this article. Two minutes from zero to a working rule across all your devices.

Get JustZix

Features · How it works · Examples · Use cases