Palette

Old Library Velum

Rich, warm browns and aged yellows evoke the comforting atmosphere of an old library and ancient texts.

warmnatural5 colors

More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Old Library Velum 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 Old Library Velum.

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

Data visualization

#8B4513#CD853F#DEB887#F5DEB3#FFFDD0

Palette guide

How to use Old Library Velum

Overview

The "Old Library Velum" palette brings to life the comforting atmosphere of an ancient library with its rich, warm browns and aged yellows. From the deep #8B4513 to the inviting #CD853F and the creamy #FFFDD0, these colors evoke the textures of antique books and illuminated manuscripts. This palette is ideal for designs aiming for a natural, rustic, or historically rich aesthetic, offering a sense of warmth and authenticity. Designers can build inviting and sophisticated layouts, while developers will find these warm, harmonious tones excellent for creating user interfaces that feel both established and welcoming.

Best used for

Historical society or archival websites
Vintage-inspired stationery and print design
Craft and artisan product branding (e.g., leather, paper)
Cozy cafe or bookstore interior design concepts
E-commerce sites for antique goods or collectibles
Educational platforms with a focus on humanities

Suggested color roles

primary

Utilize #8B4513 as a deep, grounding primary color for headers, important calls-to-action, or rich backgrounds, like aged wood.

secondary

Apply #CD853F for supportive content blocks, navigation elements, or as a warm accent to add depth and visual interest.

accent

Employ #FFFDD0 as a soft, creamy highlight for text, icons, or subtle decorative elements, reminiscent of vellum parchment.

background

Use #F5DEB3 as a light, warm base for main content areas, providing a clean yet aged canvas for information.

text

For optimal readability on light backgrounds like #F5DEB3, use #8B4513 or a dark brown. On darker backgrounds, #FFFDD0 or a near-white color provides excellent contrast.

Accessibility notes

Ensure #8B4513 text on #F5DEB3 backgrounds meets WCAG AA contrast standards.
Be cautious when pairing #DEB887 text on #F5DEB3 for body copy, as contrast may be insufficient.
Use #FFFDD0 for text on #8B4513 or #CD853F to ensure good readability for all users.
Test all interactive elements (buttons, links) to confirm their color changes meet contrast requirements.

Recommended combinations

Parchment & Ink

Perfect for a classic document look: dark text on a light background, with a rich mid-brown for headings or links.

#8B4513 · #F5DEB3 · #CD853F

Aged Leather

Create a warm, layered effect with these browns for different content sections, evoking the feel of old, worn leather.

#CD853F · #DEB887 · #8B4513

Illuminated Text

Combine the deepest brown with the creamy accent for high contrast, using the mid-brown for supporting details, mimicking ancient manuscripts.

#8B4513 · #FFFDD0 · #CD853F

CSS variables

:root {
  --old-library-velum-1: #8B4513;
  --old-library-velum-2: #CD853F;
  --old-library-velum-3: #DEB887;
  --old-library-velum-4: #F5DEB3;
  --old-library-velum-5: #FFFDD0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "old-library-velum": {
        1: "#8B4513",
        2: "#CD853F",
        3: "#DEB887",
        4: "#F5DEB3",
        5: "#FFFDD0",
      }
    }
  }
}

Hex values

Color 1#8B4513

Color 2#CD853F

Color 3#DEB887

Color 4#F5DEB3

Color 5#FFFDD0

Accessibility

Contrast checker

2.4:1Fail

3.8:1AA18

5.4:1AA

6.8:1AA

2.4:1Fail

1.6:1Fail

2.3:1Fail

2.9:1Fail

3.8:1AA18

1.6:1Fail

1.4:1Fail

1.8:1Fail