What are the hex codes in the Seafoam & Blue Gray Haze palette?

The Seafoam & Blue Gray Haze color palette consists of Graphite #4A4E4D, Blue Gray #6887C8, Baby Blue #AAC7F2, Seafoam #94EA9E.

How should I use the Seafoam & Blue Gray Haze palette on a website?

Use Seafoam #94EA9E as the background, Graphite #4A4E4D for text, Baby Blue #AAC7F2 for buttons and links, and Blue Gray #6887C8 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Graphite on Seafoam at 5.84:1.

Which colors in Seafoam & Blue Gray Haze have enough contrast for text?

The highest-contrast pair is #4A4E4D on #94EA9E with a ratio of 5.84:1, which passes WCAG AA for normal text.

#4A4E4DGraphite

#6887C8Blue Gray

#AAC7F2Baby Blue

#94EA9ESeafoam

Seafoam & Blue Gray Haze color palette

Cold Blue Green

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Graphite	`#4A4E4D`	`rgb(74, 78, 77)`	`hsl(165, 3%, 30%)`	`oklch(42.0% 0.005 179)`
Blue Gray	`#6887C8`	`rgb(104, 135, 200)`	`hsl(221, 47%, 60%)`	`oklch(62.7% 0.105 264)`
Baby Blue	`#AAC7F2`	`rgb(170, 199, 242)`	`hsl(216, 73%, 81%)`	`oklch(82.3% 0.069 258)`
Seafoam	`#94EA9E`	`rgb(148, 234, 158)`	`hsl(127, 67%, 75%)`	`oklch(86.3% 0.134 147)`

Why it works and how to use it

Seafoam & Blue Gray Haze is a split color palette tagged cold, blue, green. The hues span about 94°, enough contrast to create a focal point without the harshness of true complements. Neither washed out nor loud, it adapts to most contexts. The overall temperature is cool.

It works because the lightness range is wide (30% to 81%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.

Background: Seafoam (#94EA9E) is the lightest color, so it belongs on large surfaces.
Text: Graphite (#4A4E4D) on #94EA9E gives 5.84:1, passing WCAG AA.
Primary: Baby Blue (#AAC7F2) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Blue Gray (#6887C8) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Graphite on Seafoam at 5.84:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Seafoam & Blue Gray Haze

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

#4A4E4D

#6887C8

#AAC7F2

#94EA9E

Color-blind check: under tritanopia, Baby Blue and Seafoam become hard to tell apart, so do not rely on that pair alone to carry meaning.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#4A4E4D` on `#94EA9E`	Aa	5.84:1	AA
`#4A4E4D` on `#AAC7F2`	Aa	4.89:1	AA
`#6887C8` on `#94EA9E`	Aa	2.47:1	Fail
`#4A4E4D` on `#6887C8`	Aa	2.37:1	Fail
`#6887C8` on `#AAC7F2`	Aa	2.07:1	Fail
`#AAC7F2` on `#94EA9E`	Aa	1.19:1	Fail

:root {
  --graphite: #4A4E4D;
  --blue-gray: #6887C8;
  --baby-blue: #AAC7F2;
  --seafoam: #94EA9E;
}

$graphite: #4A4E4D;
$blue-gray: #6887C8;
$baby-blue: #AAC7F2;
$seafoam: #94EA9E;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'graphite': '#4A4E4D',
        'blue-gray': '#6887C8',
        'baby-blue': '#AAC7F2',
        'seafoam': '#94EA9E',
      },
    },
  },
};

{
  "name": "Seafoam & Blue Gray Haze",
  "colors": [
    "#4A4E4D",
    "#6887C8",
    "#AAC7F2",
    "#94EA9E"
  ]
}

background: linear-gradient(135deg, #4A4E4D, #6887C8, #AAC7F2, #94EA9E);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-03-08 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood