Architectural Concrete, Alabaster & Warm Charcoal Category: Aesthetic 9,900/mo searches

Neutral Minimalist Palette — HEX Codes, Swatches & UI Palette

Understated, gallery-grade minimalism inspired by brutalist architecture and Scandinavian design. Replaces harsh pure black and white with nuanced warm grays and soft graphite for quiet luxury.

Deep Graphite Text

Matte Obsidian

#121316

Secondary Heading

Charcoal Slate

#363A45

Muted Icon Neutral

Soft Cement Gray

#8C92A4

Architectural Divider

Subtle Border Line

#E2E8F0

Soft Glare-Free Surface

Alabaster Paper

#F8FAFC

Open in Web Studio Color Wheel Tint & Shade Scale

Color Swatches & Technical Specifications

Exact color codes, luminance values, and WCAG contrast ratings for each swatch in the Neutral Minimalist Palette.

Matte Obsidian

Deep Graphite Text

HEX #121316

RGB rgb(18, 19, 22)

HSL hsl(225deg, 10%, 8%)

vs White: 18.58:1 (AAA) vs Black: 1.13:1 (Fail)

Charcoal Slate

Secondary Heading

HEX #363A45

RGB rgb(54, 58, 69)

HSL hsl(224deg, 12%, 24%)

vs White: 11.36:1 (AAA) vs Black: 1.85:1 (Fail)

Soft Cement Gray

Muted Icon Neutral

HEX #8C92A4

RGB rgb(140, 146, 164)

HSL hsl(225deg, 12%, 60%)

vs White: 3.11:1 (AA Large) vs Black: 6.76:1 (AA)

Subtle Border Line

Architectural Divider

HEX #E2E8F0

RGB rgb(226, 232, 240)

HSL hsl(214deg, 32%, 91%)

vs White: 1.23:1 (Fail) vs Black: 17.03:1 (AAA)

Alabaster Paper

Soft Glare-Free Surface

HEX #F8FAFC

RGB rgb(248, 250, 252)

HSL hsl(210deg, 40%, 98%)

vs White: 1.05:1 (Fail) vs Black: 20.07:1 (AAA)

UI Design & Color Hierarchy Guide

The preferred aesthetic for luxury real estate, high-end fashion portfolios, and modern indie web apps. Subtle 1px borders in #E2E8F0 provide structure without noise.

60% Dominant Base

Use the primary neutral/light swatch (Alabaster Paper) for canvas backgrounds and card surfaces.

30% Structural Secondary

Apply midtones for navigation bars, card headers, borders, and secondary buttons.

10% Accent Callout

Reserve high-saturation focal colors for CTAs, conversion badges, and active state highlights.

WCAG 2.1 Accessibility & Contrast Matrix

Legibility ratings between palette elements and key backgrounds (Lightest: Alabaster Paper | Darkest: Matte Obsidian):

Swatch	Contrast vs Light Canvas	Contrast vs Dark Canvas
Matte Obsidian (#121316)	17.76:1 AAA	1.0:1 Fail
Charcoal Slate (#363A45)	10.86:1 AAA	1.64:1 Fail
Soft Cement Gray (#8C92A4)	2.97:1 Fail	5.98:1 AA
Subtle Border Line (#E2E8F0)	1.18:1 Fail	15.07:1 AAA
Alabaster Paper (#F8FAFC)	1.0:1 Fail	17.76:1 AAA

CSS Custom Properties & Design Tokens

Copy and paste production-ready tokens directly into your CSS stylesheet or Tailwind CSS configuration:

CSS Variables

:root {
  --color-1: #121316; /* Matte Obsidian - Deep Graphite Text */
  --color-2: #363A45; /* Charcoal Slate - Secondary Heading */
  --color-3: #8C92A4; /* Soft Cement Gray - Muted Icon Neutral */
  --color-4: #E2E8F0; /* Subtle Border Line - Architectural Divider */
  --color-5: #F8FAFC; /* Alabaster Paper - Soft Glare-Free Surface */
}

Tailwind CSS Config

{
  colors: {
    'palette-1': '#121316',
    'palette-2': '#363A45',
    'palette-3': '#8C92A4',
    'palette-4': '#E2E8F0',
    'palette-5': '#F8FAFC'
  }
}

Explore More Curated Color Palettes

Browse seasonal palettes, retro aesthetic color schemes, nature tones, and dark mode themes.

All Color Palettes Named Color Dictionary Interactive Color Wheel