Blue Chip to Candy Grape Fizz color palette

0058A8Blue Chip 6B8FF7Polar Glow F9F6FFGhost White 00354ASea of Stars 73C8FCNevermind Nirvana 7F64F4Candy Grape Fizz

Open in generator Export PNG, PDF, ASE…

About this palette

Blue Chip to Candy Grape Fizz is a 6-color cool palette: #0058A8 (Blue Chip), #6B8FF7 (Polar Glow), #F9F6FF (Ghost White), #00354A (Sea of Stars), #73C8FC (Nevermind Nirvana), #7F64F4 (Candy Grape Fizz). It mixes blue, white, purple tones and feels cool overall. The strongest text pairing is #F9F6FF on #00354A with a contrast ratio of 12.22:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blue Chip	rgb(0, 88, 168)	hsl(209, 100%, 33%)
Polar Glow	rgb(107, 143, 247)	hsl(225, 90%, 69%)
Ghost White	rgb(249, 246, 255)	hsl(260, 100%, 98%)
Sea of Stars	rgb(0, 53, 74)	hsl(197, 100%, 15%)
Nevermind Nirvana	rgb(115, 200, 252)	hsl(203, 96%, 72%)
Candy Grape Fizz	rgb(127, 100, 244)	hsl(251, 87%, 67%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa12.22:1 Super#F9F6FF on #00354A
Aa12.22:1 Super#00354A on #F9F6FF
Aa7.09:1 Very good#00354A on #73C8FC
Aa7.09:1 Very good#73C8FC on #00354A
Aa6.64:1 Good#0058A8 on #F9F6FF
Aa6.64:1 Good#F9F6FF on #0058A8
Aa4.29:1 Poor#6B8FF7 on #00354A
Aa4.29:1 Poor#00354A on #6B8FF7

Color blindness preview

CSS variables

/* Blue Chip to Candy Grape Fizz — https://swatchly.xyz/palette/0058a8-6b8ff7-f9f6ff-00354a-73c8fc-7f64f4 */
:root {
  --blue-chip: #0058a8;
  --polar-glow: #6b8ff7;
  --ghost-white: #f9f6ff;
  --sea-of-stars: #00354a;
  --nevermind-nirvana: #73c8fc;
  --candy-grape-fizz: #7f64f4;
}

Tailwind CSS v4

/* Blue Chip to Candy Grape Fizz — https://swatchly.xyz/palette/0058a8-6b8ff7-f9f6ff-00354a-73c8fc-7f64f4 */
@theme {
  --color-blue-chip: #0058a8;
  --color-blue-chip-50: #eff6ff;
  --color-blue-chip-100: #deedff;
  --color-blue-chip-200: #bedbff;
  --color-blue-chip-300: #97c6ff;
  --color-blue-chip-400: #61a6f9;
  --color-blue-chip-500: #428bdf;
  --color-blue-chip-600: #2670c1;
  --color-blue-chip-700: #0058a8;
  --color-blue-chip-800: #004585;
  --color-blue-chip-900: #003469;
  --color-blue-chip-950: #002045;
  --color-polar-glow: #6b8ff7;
  --color-polar-glow-50: #ebf1ff;
  --color-polar-glow-100: #dae5ff;
  --color-polar-glow-200: #bbceff;
  --color-polar-glow-300: #97b4ff;
  --color-polar-glow-400: #6b8ff7;
  --color-polar-glow-500: #5375da;
  --color-polar-glow-600: #3e5cbc;
  --color-polar-glow-700: #2e479e;
  --color-polar-glow-800: #213783;
  --color-polar-glow-900: #182a6b;
  --color-polar-glow-950: #0d194a;
  --color-ghost-white: #f9f6ff;
  --color-ghost-white-50: #f9f6ff;
  --color-ghost-white-100: #eeecf2;
  --color-ghost-white-200: #dad8de;
  --color-ghost-white-300: #c3c1c8;
  --color-ghost-white-400: #a3a1a9;
  --color-ghost-white-500: #88858d;
  --color-ghost-white-600: #6d6a72;
  --color-ghost-white-700: #56545b;
  --color-ghost-white-800: #434147;
  --color-ghost-white-900: #333237;
  --color-ghost-white-950: #201e22;
  --color-sea-of-stars: #00354a;
  --color-sea-of-stars-50: #eaf8ff;
  --color-sea-of-stars-100: #d5f0ff;
  --color-sea-of-stars-200: #badef1;
  --color-sea-of-stars-300: #9fc8de;
  --color-sea-of-stars-400: #7ba8c0;
  --color-sea-of-stars-500: #5d8ca4;
  --color-sea-of-stars-600: #437188;
  --color-sea-of-stars-700: #2f596e;
  --color-sea-of-stars-800: #204557;
  --color-sea-of-stars-900: #00354a;
  --color-sea-of-stars-950: #0a202a;
  --color-nevermind-nirvana: #73c8fc;
  --color-nevermind-nirvana-50: #e8f6ff;
  --color-nevermind-nirvana-100: #d3edff;
  --color-nevermind-nirvana-200: #a7dcff;
  --color-nevermind-nirvana-300: #73c8fc;
  --color-nevermind-nirvana-400: #57a8d9;
  --color-nevermind-nirvana-500: #358dbe;
  --color-nevermind-nirvana-600: #1372a1;
  --color-nevermind-nirvana-700: #005b83;
  --color-nevermind-nirvana-800: #004768;
  --color-nevermind-nirvana-900: #003752;
  --color-nevermind-nirvana-950: #002235;
  --color-candy-grape-fizz: #7f64f4;
  --color-candy-grape-fizz-50: #f3f3ff;
  --color-candy-grape-fizz-100: #e8e7ff;
  --color-candy-grape-fizz-200: #d2cfff;
  --color-candy-grape-fizz-300: #b9b3ff;
  --color-candy-grape-fizz-400: #998aff;
  --color-candy-grape-fizz-500: #7f64f4;
  --color-candy-grape-fizz-600: #6749d3;
  --color-candy-grape-fizz-700: #5233b2;
  --color-candy-grape-fizz-800: #412394;
  --color-candy-grape-fizz-900: #321778;
  --color-candy-grape-fizz-950: #1f0a51;
}