What are the hex codes in the Cotton Candy & Electric Blue Glow palette?

The Cotton Candy & Electric Blue Glow color palette consists of Space #2B1D42, Cotton Candy #FFA4D7, Apricot #FFD3A3, Electric Blue #7BFCFF.

How should I use the Cotton Candy & Electric Blue Glow palette on a website?

Use Electric Blue #7BFCFF as the background, Space #2B1D42 for text, Cotton Candy #FFA4D7 for buttons and links, and Apricot #FFD3A3 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Space on Electric Blue at 12.68:1.

Which colors in Cotton Candy & Electric Blue Glow have enough contrast for text?

The highest-contrast pair is #2B1D42 on #7BFCFF with a ratio of 12.68:1, which passes WCAG AA for normal text.

#2B1D42Space

#FFA4D7Cotton Candy

#FFD3A3Apricot

#7BFCFFElectric Blue

Cotton Candy & Electric Blue Glow color palette

Modern Teal

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Space	`#2B1D42`	`rgb(43, 29, 66)`	`hsl(263, 39%, 19%)`	`oklch(26.8% 0.068 299)`
Cotton Candy	`#FFA4D7`	`rgb(255, 164, 215)`	`hsl(326, 100%, 82%)`	`oklch(82.4% 0.124 345)`
Apricot	`#FFD3A3`	`rgb(255, 211, 163)`	`hsl(31, 100%, 82%)`	`oklch(89.3% 0.079 69)`
Electric Blue	`#7BFCFF`	`rgb(123, 252, 255)`	`hsl(181, 100%, 74%)`	`oklch(91.9% 0.114 197)`

Why it works and how to use it

Cotton Candy & Electric Blue Glow is a vivid complementary color palette tagged modern, teal. Space and Electric Blue sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. 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, Cotton Candy takes the lead while the rest support. Lightness runs from 19% to 82%. Well suited to websites, presentations and branding.

Background: Electric Blue (#7BFCFF) is the lightest color, so it belongs on large surfaces.
Text: Space (#2B1D42) on #7BFCFF gives 12.68:1, passing WCAG AAA.
Primary: Cotton Candy (#FFA4D7) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Apricot (#FFD3A3) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Space on Electric Blue at 12.68:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Cotton Candy & Electric Blue 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

#2B1D42

#FFA4D7

#FFD3A3

#7BFCFF

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
`#2B1D42` on `#7BFCFF`	Aa	12.68:1	AAA
`#2B1D42` on `#FFD3A3`	Aa	11.13:1	AAA
`#2B1D42` on `#FFA4D7`	Aa	8.51:1	AAA
`#FFA4D7` on `#7BFCFF`	Aa	1.49:1	Fail
`#FFA4D7` on `#FFD3A3`	Aa	1.31:1	Fail
`#FFD3A3` on `#7BFCFF`	Aa	1.14:1	Fail

:root {
  --space: #2B1D42;
  --cotton-candy: #FFA4D7;
  --apricot: #FFD3A3;
  --electric-blue: #7BFCFF;
}

$space: #2B1D42;
$cotton-candy: #FFA4D7;
$apricot: #FFD3A3;
$electric-blue: #7BFCFF;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'space': '#2B1D42',
        'cotton-candy': '#FFA4D7',
        'apricot': '#FFD3A3',
        'electric-blue': '#7BFCFF',
      },
    },
  },
};

{
  "name": "Cotton Candy & Electric Blue Glow",
  "colors": [
    "#2B1D42",
    "#FFA4D7",
    "#FFD3A3",
    "#7BFCFF"
  ]
}

background: linear-gradient(135deg, #2B1D42, #FFA4D7, #FFD3A3, #7BFCFF);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2024-09-06 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood