What are the hex codes in the Pistachio & Lavender Gray Glow palette?

The Pistachio & Lavender Gray Glow color palette consists of Gunmetal #283342, Pistachio #85D869, Lavender Gray #ACC2E4, Frost #EBF2FC.

How should I use the Pistachio & Lavender Gray Glow palette on a website?

Use Frost #EBF2FC as the background, Gunmetal #283342 for text, Pistachio #85D869 for buttons and links, and Lavender Gray #ACC2E4 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Gunmetal on Frost at 11.35:1.

Which colors in Pistachio & Lavender Gray Glow have enough contrast for text?

The highest-contrast pair is #283342 on #EBF2FC with a ratio of 11.35:1, which passes WCAG AA for normal text.

#283342Gunmetal

#85D869Pistachio

#ACC2E4Lavender Gray

#EBF2FCFrost

Pistachio & Lavender Gray Glow color palette

Tech Minimal Gray Green White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Gunmetal	`#283342`	`rgb(40, 51, 66)`	`hsl(215, 25%, 21%)`	`oklch(31.8% 0.031 256)`
Pistachio	`#85D869`	`rgb(133, 216, 105)`	`hsl(105, 59%, 63%)`	`oklch(80.4% 0.168 138)`
Lavender Gray	`#ACC2E4`	`rgb(172, 194, 228)`	`hsl(216, 51%, 78%)`	`oklch(80.9% 0.054 259)`
Frost	`#EBF2FC`	`rgb(235, 242, 252)`	`hsl(215, 74%, 95%)`	`oklch(95.9% 0.015 257)`

Why it works and how to use it

Pistachio & Lavender Gray Glow is a split color palette tagged tech, minimal, gray. The hues span about 111°, 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.

The palette holds together thanks to its split hue relationship and a strong light-to-dark ladder (95% down to 21% lightness). A natural fit for a SaaS landing page or dashboard.

Background: Frost (#EBF2FC) is the lightest color, so it belongs on large surfaces.
Text: Gunmetal (#283342) on #EBF2FC gives 11.35:1, passing WCAG AAA.
Primary: Pistachio (#85D869) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Lavender Gray (#ACC2E4) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Gunmetal on Frost at 11.35:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Pistachio & Lavender Gray Glow

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

#283342

#85D869

#ACC2E4

#EBF2FC

Color-blind check: under tritanopia, Pistachio and Lavender Gray 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
`#283342` on `#EBF2FC`	Aa	11.35:1	AAA
`#283342` on `#85D869`	Aa	7.32:1	AAA
`#283342` on `#ACC2E4`	Aa	7.06:1	AAA
`#ACC2E4` on `#EBF2FC`	Aa	1.61:1	Fail
`#85D869` on `#EBF2FC`	Aa	1.55:1	Fail
`#85D869` on `#ACC2E4`	Aa	1.04:1	Fail

:root {
  --gunmetal: #283342;
  --pistachio: #85D869;
  --lavender-gray: #ACC2E4;
  --frost: #EBF2FC;
}

$gunmetal: #283342;
$pistachio: #85D869;
$lavender-gray: #ACC2E4;
$frost: #EBF2FC;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'gunmetal': '#283342',
        'pistachio': '#85D869',
        'lavender-gray': '#ACC2E4',
        'frost': '#EBF2FC',
      },
    },
  },
};

{
  "name": "Pistachio & Lavender Gray Glow",
  "colors": [
    "#283342",
    "#85D869",
    "#ACC2E4",
    "#EBF2FC"
  ]
}

background: linear-gradient(135deg, #283342, #85D869, #ACC2E4, #EBF2FC);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-02-04 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood