What are the hex codes in the Mint & Electric Blue Hour palette?

The Mint & Electric Blue Hour color palette consists of Electric Blue #80FEFA, Mint #AFF0A1, Seafoam #9DE0C3, Pistachio #B0B864.

How should I use the Mint & Electric Blue Hour palette on a website?

Use Electric Blue #80FEFA as the background, Pistachio #B0B864 for text, Mint #AFF0A1 for buttons and links, and Seafoam #9DE0C3 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Mint & Electric Blue Hour have enough contrast for text?

The highest-contrast pair is #80FEFA on #B0B864 with a ratio of 1.77:1, which does not meet WCAG AA; add a darker or lighter neutral for body text.

#80FEFAElectric Blue

#AFF0A1Mint

#9DE0C3Seafoam

#B0B864Pistachio

Mint & Electric Blue Hour color palette

Spring Pastel Light Cold Teal Green

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Electric Blue	`#80FEFA`	`rgb(128, 254, 250)`	`hsl(178, 98%, 75%)`	`oklch(92.4% 0.113 193)`
Mint	`#AFF0A1`	`rgb(175, 240, 161)`	`hsl(109, 72%, 79%)`	`oklch(89.2% 0.124 140)`
Seafoam	`#9DE0C3`	`rgb(157, 224, 195)`	`hsl(154, 52%, 75%)`	`oklch(85.4% 0.079 166)`
Pistachio	`#B0B864`	`rgb(176, 184, 100)`	`hsl(66, 37%, 56%)`	`oklch(75.8% 0.109 113)`

Why it works and how to use it

Mint & Electric Blue Hour is a vivid split color palette tagged spring, pastel, light. The hues span about 112°, enough contrast to create a focal point without the harshness of true complements. These are bold, punchy colors that need generous white space around them. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Mint takes the lead while the rest support. Lightness runs from 56% to 79%. Well suited to websites, presentations and branding.

Background: Electric Blue (#80FEFA) is the lightest color, so it belongs on large surfaces.
Text: Pistachio (#B0B864) on #80FEFA gives 1.77:1, so pair it with a darker neutral for body copy.
Primary: Mint (#AFF0A1) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Seafoam (#9DE0C3) for highlights, badges and hover states.

No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

BrandFeaturesPricingBlogGet started

Design faster with Mint & Electric Blue Hour

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

#80FEFA

#AFF0A1

#9DE0C3

#B0B864

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
`#80FEFA` on `#B0B864`	Aa	1.77:1	Fail
`#AFF0A1` on `#B0B864`	Aa	1.6:1	Fail
`#9DE0C3` on `#B0B864`	Aa	1.4:1	Fail
`#80FEFA` on `#9DE0C3`	Aa	1.26:1	Fail
`#AFF0A1` on `#9DE0C3`	Aa	1.14:1	Fail
`#80FEFA` on `#AFF0A1`	Aa	1.11:1	Fail

:root {
  --electric-blue: #80FEFA;
  --mint: #AFF0A1;
  --seafoam: #9DE0C3;
  --pistachio: #B0B864;
}

$electric-blue: #80FEFA;
$mint: #AFF0A1;
$seafoam: #9DE0C3;
$pistachio: #B0B864;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'electric-blue': '#80FEFA',
        'mint': '#AFF0A1',
        'seafoam': '#9DE0C3',
        'pistachio': '#B0B864',
      },
    },
  },
};

{
  "name": "Mint & Electric Blue Hour",
  "colors": [
    "#80FEFA",
    "#AFF0A1",
    "#9DE0C3",
    "#B0B864"
  ]
}

background: linear-gradient(135deg, #80FEFA, #AFF0A1, #9DE0C3, #B0B864);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2026-03-31 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood