Palette

Sunken Library Scroll

Muted and mysterious, like ancient texts preserved in the quiet depths of a watery ruin.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sunken Library Scroll 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 Sunken Library Scroll.

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

Data visualization

#36454F#5A6A74#80909A#A6B4BC#CFCFD0

Palette guide

How to use Sunken Library Scroll

Overview

The Sunken Library Scroll palette offers a sophisticated and mysterious range of cool greys, evoking the quiet depths of ancient, water-preserved texts. Featuring a deep charcoal (#36454F), a muted slate grey (#5A6A74), a mid-tone grey (#80909A), a light silver (#A6B4BC), and a near-white grey (#CFCFD0), this collection is inherently elegant and understated. Designers can use these refined hues to create minimalist, professional, or enigmatic designs. Developers will find this palette excellent for user interfaces that require a clean, serious, and timeless aesthetic, perfect for tech, finance, luxury goods, or editorial platforms that value clarity and gravitas.

Best used for

Professional corporate branding
Tech and finance website interfaces
Editorial and publishing design
Luxury product packaging
Minimalist app themes
Architectural and interior design presentations

Suggested color roles

primary

Utilize #36454F as a strong primary, conveying professionalism and depth, ideal for main branding, headers, or dark mode backgrounds.

secondary

Apply #5A6A74 as a supportive secondary, perfect for subheadings, navigation, or to add subtle contrast and structure.

accent

Introduce #80909A as a versatile accent, suitable for interactive elements, borders, or to guide the eye without being intrusive.

background

Employ #CFCFD0 or #A6B4BC as a clean, light background, providing a crisp canvas that allows the darker greys to stand out.

text

For dark backgrounds, use #CFCFD0 or white. For light backgrounds, use #36454F or #5A6A74 for optimal readability and a cohesive look.

Accessibility notes

Ensure sufficient contrast when using lighter greys like #A6B4BC or #CFCFD0 for text on similar light grey backgrounds.
The darkest greys (#36454F, #5A6A74) provide excellent contrast for text on lighter backgrounds, making them ideal for body copy.
Be mindful of the subtle differences between adjacent lighter greys; do not rely solely on color to convey important information or states.
Verify that interactive elements have clear visual states (e.g., hover, focus) that are distinguishable from surrounding elements within this monochromatic range.

Recommended combinations

Deep Scroll

Ideal for professional branding, dark mode interfaces, or elegant editorial layouts, conveying gravitas and clarity.

#36454F · #5A6A74 · #CFCFD0

Muted Depths

Excellent for subtle layering, background textures, or creating a sophisticated sense of depth in user interfaces.

#5A6A74 · #80909A · #A6B4BC

Parchment Light

Perfect for light mode backgrounds, secondary information, or clean, readable body text areas with a modern feel.

#A6B4BC · #CFCFD0 · #36454F

CSS variables

:root {
  --sunken-library-scroll-1: #36454F;
  --sunken-library-scroll-2: #5A6A74;
  --sunken-library-scroll-3: #80909A;
  --sunken-library-scroll-4: #A6B4BC;
  --sunken-library-scroll-5: #CFCFD0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sunken-library-scroll": {
        1: "#36454F",
        2: "#5A6A74",
        3: "#80909A",
        4: "#A6B4BC",
        5: "#CFCFD0",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#5A6A74

Color 3#80909A

Color 4#A6B4BC

Color 5#CFCFD0

Accessibility

Contrast checker

1.8:1Fail

3:1AA18

4.7:1AA

6.4:1AA

1.8:1Fail

1.7:1Fail

2.6:1Fail

3.6:1AA18

3:1AA18

1.7:1Fail

1.5:1Fail

2.1:1Fail