Back to palettes

Palette

Worn Leather Journal

Comfortable, aged browns evoke the tactile feel and comforting patina of a well-used leather journal.

NeutralRetro5 colors
More Neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Worn Leather Journal reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Worn Leather Journal.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#5D4037#6D4C41#795548#8D6E63#A1887F

Palette guide

How to use Worn Leather Journal

Overview

The Worn Leather Journal palette embodies a comforting and nostalgic feel, featuring a harmonious gradient of warm, muted browns. Anchored by the deep, rich brown of #5D4037, this palette progresses through inviting mid-tones like #6D4C41 and #795548, culminating in softer, aged hues such as #8D6E63 and #A1887F. It's designed for projects aiming to evoke a sense of history, craftsmanship, and quiet contemplation. Ideal for designers and developers seeking to create engaging experiences that feel authentic and grounded, reflecting the tactile quality of a beloved, well-used journal. This palette is perfect for adding warmth and vintage charm.

Best used for

  • Personal branding and blogs
  • Craft and artisan product websites
  • Storytelling or narrative-focused applications
  • Digital scrapbooking interfaces
  • Rustic cafe or bookstore branding
  • Retro UI themes

Suggested color roles

primary

#5D4037 - A strong, grounding brown suitable for key headings, brand logos, or deep background elements.

secondary

#795548 - Use for subheadings, navigation, or interactive elements to provide a warm, inviting contrast.

accent

#A1887F - A softer, lighter brown, excellent for subtle highlights, borders, or decorative UI elements.

background

#A1887F - While a bit darker than a typical background, it can serve as a warm, rich canvas, especially when paired with lighter text.

text

#5D4037 - Best for body text against very light backgrounds. For backgrounds like #A1887F, consider using a light cream or white text for readability.

Accessibility notes

  • Text in #5D4037 on #A1887F might have insufficient contrast; test thoroughly.
  • Lighter colors like #8D6E63 and #A1887F should not be used for small text on similar backgrounds.
  • Ensure interactive elements using mid-tones like #795548 have clear focus states.
  • Provide alternative text colors (e.g., white) for use on darker palette shades.

Recommended combinations

Journal Entry

Creates a classic, readable structure for content blocks and headings.

#5D4037 · #795548 · #A1887F

Aged Warmth

Ideal for backgrounds with subtle depth and prominent text overlays.

#6D4C41 · #8D6E63 · #5D4037

Subtle Texture

Great for layered UI elements or soft gradients that evoke a vintage paper feel.

#795548 · #8D6E63 · #A1887F

CSS variables

:root {
  --worn-leather-journal-1: #5D4037;
  --worn-leather-journal-2: #6D4C41;
  --worn-leather-journal-3: #795548;
  --worn-leather-journal-4: #8D6E63;
  --worn-leather-journal-5: #A1887F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "worn-leather-journal": {
        1: "#5D4037",
        2: "#6D4C41",
        3: "#795548",
        4: "#8D6E63",
        5: "#A1887F",
      }
    }
  }
}

Related searches

earthy brown palettevintage journal colorsretro warm tonesrustic brown designnostalgic color scheme

Palette colors

Hex values

Color 1#5D4037
·
Color 2#6D4C41
·
Color 3#795548
·
Color 4#8D6E63
·
Color 5#A1887F
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.4:1Fail
2:1Fail
2.8:1Fail
2
1.2:1Fail
1.2:1Fail
1.6:1Fail
2.3:1Fail
3
1.4:1Fail
1.2:1Fail
1.4:1Fail
2:1Fail
4
2:1Fail
1.6:1Fail
1.4:1Fail
1.4:1Fail
5
2.8:1Fail
2.3:1Fail
2:1Fail
1.4:1Fail

Similar palettes

More like Worn Leather Journal

View all Neutral