ColorPaletteXYZ Logo
ColorPaletteXYZ
Palettes/Minimal· Curated

Nordic Monolith

Balanced architectural grayscale palette crafted with crisp zinc and slate neutral steps.

#Minimal#Clean#Modern
Open in Generator
COLOR 1
#FAFAFA
Slate 50
COLOR 2
#E4E4E7
Gainsboro
COLOR 3
#71717A
Zinc 500
COLOR 4
#3F3F46
Graphite
COLOR 5
#18181B
Zinc 900

Suitable Design Applications

Brutalist Architecture StudiosHigh-End Industrial DesignMinimalist Hardware ReviewsBlack & White Photography

Visual Psychology & Mood

Unflinching discipline, tectonic permanence, and industrial honesty.

Editorial Application Advice

Granite, wet slate, and raw concrete neutrals with a razor-thin surgical cyan accent. Prioritizes form and structural shadow.

Recommended UI Role Architecture

Optimal visual hierarchy assignment for digital product interfaces:

Primary Canvas Background
#090A0C
Card & Elevated Surface
#14171C
Primary Brand CTA Accent
#38BDF8
Secondary Accent & Focus
#64748B
Typography & Headings
#F8FAFC

Color Values & Codes

HEX · RGB · HSL
Slate 50
#FAFAFA
rgb(250, 250, 250)hsl(0, 0%, 98%)Color details →
Gainsboro
#E4E4E7
rgb(228, 228, 231)hsl(240, 6%, 90%)Color details →
Zinc 500
#71717A
rgb(113, 113, 122)hsl(240, 4%, 46%)Color details →
Graphite
#3F3F46
rgb(63, 63, 70)hsl(240, 5%, 26%)Color details →
Zinc 900
#18181B
rgb(24, 24, 27)hsl(240, 6%, 10%)Color details →

Open In Design Tools

Palette Generator
Lock & shuffle colors
Contrast Checker
Test WCAG compliance
Shades & Tints
Generate tonal steps
Minimal Palettes
Explore category schemes

CSS Variables

Copy & paste directly into your stylesheet
:root {
  --color-1: #FAFAFA;
  --color-2: #E4E4E7;
  --color-3: #71717A;
  --color-4: #3F3F46;
  --color-5: #18181B;
}

Role-Based WCAG Contrast Audit

Accessibility contrast depends on assigned UI roles. Here are the contrast ratios and WCAG compliance ratings when pairing palette colors as Foreground Text against Background surfaces:

Sample Text
#FAFAFA on #3F3F4610.01:1
Normal Text AA Pass
Sample Text
#FAFAFA on #18181B16.97:1
Normal Text AA Pass
Sample Text
#E4E4E7 on #3F3F468.23:1
Normal Text AA Pass
Sample Text
#E4E4E7 on #18181B13.96:1
Normal Text AA Pass
Sample Text
#71717A on #3F3F462.16:1
Large Text Only (Fail)
Sample Text
#71717A on #18181B3.67:1
Large Text Only (Pass)

Related Palettes in Minimal

Explore Minimal
#0F172ACopy
#1E293BCopy
#2563EBCopy
#38BDF8Copy
#F8FAFCCopy
cp-featured-01Technology
SaaS Velocity Blue
TechModernCool
#FFFFFFCopy
#F4F4F5Copy
#A1A1AACopy
#27272ACopy
#E11D48Copy
cp-featured-07Minimal
Swiss Editorial Clean
MinimalCreativeBold
#2B2A29Copy
#56524ACopy
#8B8476Copy
#C4BCACCopy
#ECE8E1Copy
cp-featured-10Interior Design
Japandi Sanctuary
Interior DesignNeutralCalm
#314E35Copy
#588157Copy
#A3B18ACopy
#FFE6A7Copy
#DDA15ECopy
cp-featured-18Food
Matcha Yuzu Delight
FoodCleanFresh

Frequently Asked Questions About Nordic Monolith

Production design guidance and accessibility rules for applying the Nordic Monolith (Minimal) color palette.

What is the recommended role hierarchy for the Nordic Monolith palette?
In digital interface design, allocate #FAFAFA and #18181B for structural surface canvas and typography hierarchy (the 60% and 30% layers of the design), while using standout swatches like #E4E4E7 or #71717A as your 10% primary action accent for buttons, badges, and interactive highlights.
Are the colors in Nordic Monolith WCAG accessible for web body copy?
Always verify contrast ratios against WCAG 2.2 AA standards (minimum 4.5:1 for regular body copy and 3.0:1 for large text or graphical controls). Consult the Role-Based WCAG Contrast Audit section above to see exact scores for every foreground/background combination in this palette.
How can I export the Nordic Monolith palette to my frontend codebase?
You can copy CSS Custom Properties directly from the CSS Variables code block above, export Tailwind CSS configuration tokens, download a high-resolution PNG card, or open the entire palette inside the interactive Palette Generator to experiment with tints and harmonies.