What are the hex codes in the Studio Blue Gray & Eggshell palette?

The Studio Blue Gray & Eggshell color palette consists of Licorice #141210, Graphite #4D4742, Blue Gray #329BD4, Eggshell #F2EAE2.

How should I use the Studio Blue Gray & Eggshell palette on a website?

Use Eggshell #F2EAE2 as the background, Licorice #141210 for text, Blue Gray #329BD4 for buttons and links, and Graphite #4D4742 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Licorice on Eggshell at 15.7:1.

Which colors in Studio Blue Gray & Eggshell have enough contrast for text?

The highest-contrast pair is #141210 on #F2EAE2 with a ratio of 15.7:1, which passes WCAG AA for normal text.

#141210Licorice

#4D4742Graphite

#329BD4Blue Gray

#F2EAE2Eggshell

Studio Blue Gray & Eggshell color palette

Dark Minimal Black Gray Blue White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Licorice	`#141210`	`rgb(20, 18, 16)`	`hsl(30, 11%, 7%)`	`oklch(18.4% 0.005 67)`
Graphite	`#4D4742`	`rgb(77, 71, 66)`	`hsl(27, 8%, 28%)`	`oklch(40.2% 0.012 62)`
Blue Gray	`#329BD4`	`rgb(50, 155, 212)`	`hsl(201, 65%, 51%)`	`oklch(65.6% 0.126 237)`
Eggshell	`#F2EAE2`	`rgb(242, 234, 226)`	`hsl(30, 38%, 92%)`	`oklch(94.1% 0.014 68)`

Why it works and how to use it

Studio Blue Gray & Eggshell is a complementary color palette tagged dark, minimal, black. Near-complementary hues (about 171° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. Warm and cool hues are mixed, which adds depth.

Two of the four colors are near-neutral, which leaves room for Blue Gray to lead. Lightness runs from 7% to 92%. Well suited to websites, presentations and branding.

Background: Eggshell (#F2EAE2) is the lightest color, so it belongs on large surfaces.
Text: Licorice (#141210) on #F2EAE2 gives 15.7:1, passing WCAG AAA.
Primary: Blue Gray (#329BD4) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Graphite (#4D4742) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Licorice on Eggshell at 15.7:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Studio Blue Gray & Eggshell

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#141210

#4D4742

#329BD4

#F2EAE2

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#141210` on `#F2EAE2`	Aa	15.7:1	AAA
`#4D4742` on `#F2EAE2`	Aa	7.69:1	AAA
`#141210` on `#329BD4`	Aa	6.03:1	AA
`#4D4742` on `#329BD4`	Aa	2.95:1	Fail
`#329BD4` on `#F2EAE2`	Aa	2.6:1	Fail
`#141210` on `#4D4742`	Aa	2.04:1	Fail

:root {
  --licorice: #141210;
  --graphite: #4D4742;
  --blue-gray: #329BD4;
  --eggshell: #F2EAE2;
}

$licorice: #141210;
$graphite: #4D4742;
$blue-gray: #329BD4;
$eggshell: #F2EAE2;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'licorice': '#141210',
        'graphite': '#4D4742',
        'blue-gray': '#329BD4',
        'eggshell': '#F2EAE2',
      },
    },
  },
};

{
  "name": "Studio Blue Gray & Eggshell",
  "colors": [
    "#141210",
    "#4D4742",
    "#329BD4",
    "#F2EAE2"
  ]
}

background: linear-gradient(135deg, #141210, #4D4742, #329BD4, #F2EAE2);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2026-07-23 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood