Palette

Schist Vein

Layers of cool grey, mimicking the textured and stratified appearance of schist rock formations.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Schist Vein 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 Schist Vein.

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

Data visualization

#4F555A#7A8288#AAB3B8#D9E0E5#3A4045

Palette guide

How to use Schist Vein

Overview

The Schist Vein palette offers a sophisticated and subtle range of cool greys, meticulously mimicking the textured and stratified appearance of schist rock formations. From the deep #3A4045 (Dark Grey) to the light #D9E0E5 (Light Grey), with versatile mid-tones like #4F555A, #7A8288, and #AAB3B8, this neutral collection is inherently minimalist and elegant. Designers and developers can leverage its understated strength to create clean, modern, and professional interfaces, sophisticated branding, or refined print materials. It's ideal for projects that require a grounded, versatile, and timeless aesthetic, providing a sense of stability and subtle complexity.

Best used for

Modern corporate branding
Minimalist website design
Architectural and interior design portfolios
Tech and software interfaces
Professional document design
Art galleries or museum digital presence

Suggested color roles

primary

#4F555A (Charcoal Grey) - A strong, grounding primary color, excellent for main headings, navigation, or core brand elements.

secondary

#7A8288 (Medium Grey) - Provides a versatile supporting tone, suitable for subheadings, secondary information, or UI component borders.

accent

#AAB3B8 (Light Blue-Grey) - A subtle, brighter accent that can highlight interactive elements or provide visual separation without being intrusive.

background

#D9E0E5 (Very Light Grey) - An airy, clean base that ensures high readability and a crisp, modern feel for content areas.

text

#3A4045 (Darkest Grey) for body text on light backgrounds. #FFFFFF (white) is ideal for text on #3A4045 or #4F555A.

Accessibility notes

Always use #3A4045 for body text on #D9E0E5 to ensure excellent WCAG AA contrast.
Pair lighter greys like #AAB3B8 with darker text like #4F555A to maintain readability.
Avoid using #D9E0E5 and #AAB3B8 for text and background respectively for critical information due to potential low contrast.
For interactive elements, ensure hover states provide clear visual feedback beyond a subtle color change, especially within this muted palette.

Recommended combinations

Clean Content

For a highly readable content block with a strong heading and subtle secondary text on a light background.

#D9E0E5 · #3A4045 · #7A8288

Modern Button

A professional button with clear white text, suitable for calls-to-action in a minimalist interface.

#4F555A · #AAB3B8 · #7A8288

Layered Structure

Creates subtle depth and hierarchy in UI components like cards or panels, maintaining a refined aesthetic.

#7A8288 · #4F555A · #3A4045

CSS variables

:root {
  --schist-vein-1: #4F555A;
  --schist-vein-2: #7A8288;
  --schist-vein-3: #AAB3B8;
  --schist-vein-4: #D9E0E5;
  --schist-vein-5: #3A4045;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "schist-vein": {
        1: "#4F555A",
        2: "#7A8288",
        3: "#AAB3B8",
        4: "#D9E0E5",
        5: "#3A4045",
      }
    }
  }
}

Hex values

Color 1#4F555A

Color 2#7A8288

Color 3#AAB3B8

Color 4#D9E0E5

Color 5#3A4045

Accessibility

Contrast checker

1.9:1Fail

3.5:1AA18

5.7:1AA

1.4:1Fail

1.9:1Fail

1.8:1Fail

2.9:1Fail

2.7:1Fail

3.5:1AA18

1.8:1Fail

1.6:1Fail

4.9:1AA

5.7:1AA

2.9:1Fail

1.6:1Fail

7.9:1AAA

1.4:1Fail

2.7:1Fail

4.9:1AA

7.9:1AAA

Similar palettes

More like Schist Vein

View all neutral

Stone Grotto Mist

Moonlit Canyon Stone

Moonstone Orb Glimmer

River Stone

Slate Cavern

Smoky Quartz