Palette

Quiet Library Nook

Subtle, muted browns and grays, like the hushed comfort of an old library corner.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Quiet Library Nook 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 Quiet Library Nook.

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

Data visualization

#4A3E3E#7B6A6A#A69B9B#D4C9C9#302828

Palette guide

How to use Quiet Library Nook

Overview

The Quiet Library Nook palette presents subtle, muted browns and grays, like the hushed comfort of an old library corner. Ranging from the deep, grounding #302828 to the soft, inviting #D4C9C9, this collection offers a sophisticated and tranquil aesthetic. Designers can leverage these hex codes to create environments that feel understated and elegant, while developers will find the distinct yet harmonious shades, including #4A3E3E and #7B6A6A, easy to implement for a cohesive user interface. This palette is ideal for projects emphasizing minimalism, history, or a quiet, refined atmosphere.

Best used for

Minimalist branding and corporate identity
Literary magazine or publishing house design
Antique store or heritage brand websites
High-end stationery and paper goods
Sophisticated web design for portfolios or services
Cozy, understated interior decor concepts

Suggested color roles

primary

Use #7B6A6A as a balanced, muted mid-tone for main content areas or subtle brand elements.

secondary

Employ #A69B9B for supporting sections, sub-headers, or UI elements, providing a lighter, complementary grey-brown.

accent

Apply #302828 sparingly for strong contrasts, icons, or calls-to-action, adding significant depth and grounding.

background

The soft #D4C9C9 serves as an excellent, subtle background, ensuring optimal readability for darker text.

text

Utilize #302828 for primary text, offering superb legibility against lighter backgrounds like #D4C9C9.

Accessibility notes

Ensure #302828 text has strong contrast against #D4C9C9, meeting WCAG AA requirements for all text sizes.
Avoid using #A69B9B for small text on #D4C9C9 backgrounds; contrast may be insufficient.
When placing #7B6A6A on #D4C9C9, verify contrast for readability, especially for body text.
For interactive elements, always check contrast ratios when combining different shades within this palette.

Recommended combinations

Dusty Books

Creates subtle background layers or decorative elements, moving from light to muted grey-brown.

#D4C9C9 · #A69B9B · #7B6A6A

Old Wood

Excellent for defining strong content blocks, footers, or navigation, conveying depth and heritage.

#302828 · #4A3E3E · #7B6A6A

Quiet Study

Provides a clean, classic look for UI elements, suggesting precision and calm.

#D4C9C9 · #7B6A6A · #4A3E3E

CSS variables

:root {
  --quiet-library-nook-2-1: #4A3E3E;
  --quiet-library-nook-2-2: #7B6A6A;
  --quiet-library-nook-2-3: #A69B9B;
  --quiet-library-nook-2-4: #D4C9C9;
  --quiet-library-nook-2-5: #302828;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "quiet-library-nook-2": {
        1: "#4A3E3E",
        2: "#7B6A6A",
        3: "#A69B9B",
        4: "#D4C9C9",
        5: "#302828",
      }
    }
  }
}

Hex values

Color 1#4A3E3E

Color 2#7B6A6A

Color 3#A69B9B

Color 4#D4C9C9

Color 5#302828

Accessibility

Contrast checker

2:1Fail

3.8:1AA18

6.3:1AA

1.4:1Fail

2:1Fail

1.9:1Fail

3.2:1AA18

2.8:1Fail

3.8:1AA18

1.9:1Fail

1.7:1Fail

5.3:1AA