What are the hex codes in the Juicy Pistachio & Blue Gray palette?

The Juicy Pistachio & Blue Gray color palette consists of Charcoal #18495B, Blue Gray #4891C0, Pistachio #B6C15B, Beige #FDF6E3.

How should I use the Juicy Pistachio & Blue Gray palette on a website?

Use Beige #FDF6E3 as the background, Charcoal #18495B for text, Blue Gray #4891C0 for buttons and links, and Pistachio #B6C15B for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Charcoal on Beige at 9.08:1.

Which colors in Juicy Pistachio & Blue Gray have enough contrast for text?

The highest-contrast pair is #18495B on #FDF6E3 with a ratio of 9.08:1, which passes WCAG AA for normal text.

#18495BCharcoal

#4891C0Blue Gray

#B6C15BPistachio

#FDF6E3Beige

Juicy Pistachio & Blue Gray color palette

Cold Blue White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Charcoal	`#18495B`	`rgb(24, 73, 91)`	`hsl(196, 58%, 23%)`	`oklch(38.1% 0.060 226)`
Blue Gray	`#4891C0`	`rgb(72, 145, 192)`	`hsl(204, 49%, 52%)`	`oklch(63.0% 0.102 239)`
Pistachio	`#B6C15B`	`rgb(182, 193, 91)`	`hsl(66, 45%, 56%)`	`oklch(78.1% 0.127 114)`
Beige	`#FDF6E3`	`rgb(253, 246, 227)`	`hsl(44, 87%, 94%)`	`oklch(97.4% 0.026 90)`

Why it works and how to use it

Juicy Pistachio & Blue Gray is a complementary color palette tagged cold, blue, white. Charcoal and Beige sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. Neither washed out nor loud, it adapts to most contexts. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Blue Gray takes the lead while the rest support. Lightness runs from 23% to 94%. Well suited to websites, presentations and branding.

Background: Beige (#FDF6E3) is the lightest color, so it belongs on large surfaces.
Text: Charcoal (#18495B) on #FDF6E3 gives 9.08:1, passing WCAG AAA.
Primary: Blue Gray (#4891C0) is the most saturated mid-tone; use it for buttons and links (3.2:1 against the background, fine for UI elements).
Accent: Pistachio (#B6C15B) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Charcoal on Beige at 9.08:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Juicy Pistachio & Blue Gray

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

#18495B

#4891C0

#B6C15B

#FDF6E3

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
`#18495B` on `#FDF6E3`	Aa	9.08:1	AAA
`#18495B` on `#B6C15B`	Aa	5.02:1	AA
`#4891C0` on `#FDF6E3`	Aa	3.2:1	AA large only
`#18495B` on `#4891C0`	Aa	2.84:1	Fail
`#B6C15B` on `#FDF6E3`	Aa	1.81:1	Fail
`#4891C0` on `#B6C15B`	Aa	1.77:1	Fail

:root {
  --charcoal: #18495B;
  --blue-gray: #4891C0;
  --pistachio: #B6C15B;
  --beige: #FDF6E3;
}

$charcoal: #18495B;
$blue-gray: #4891C0;
$pistachio: #B6C15B;
$beige: #FDF6E3;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'charcoal': '#18495B',
        'blue-gray': '#4891C0',
        'pistachio': '#B6C15B',
        'beige': '#FDF6E3',
      },
    },
  },
};

{
  "name": "Juicy Pistachio & Blue Gray",
  "colors": [
    "#18495B",
    "#4891C0",
    "#B6C15B",
    "#FDF6E3"
  ]
}

background: linear-gradient(135deg, #18495B, #4891C0, #B6C15B, #FDF6E3);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-10-16 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood