Pāua to Cotton Ball Color Palette

About this palette

Pāua to Cotton Ball is a 5-color cool, gradient palette: #31234E (Pāua), #0060A5 (Wing Commander), #5E6FFF (Blue Öyster Cult), #7CC0FE (Cooler Than Ever), #F4F6FF (Cotton Ball). It mixes purple, blue, white tones and feels cool overall. The strongest text pairing is #31234E on #F4F6FF with a contrast ratio of 13.15:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pāua	rgb(49, 35, 78)	hsl(260, 38%, 22%)
Wing Commander	rgb(0, 96, 165)	hsl(205, 100%, 32%)
Blue Öyster Cult	rgb(94, 111, 255)	hsl(234, 100%, 68%)
Cooler Than Ever	rgb(124, 192, 254)	hsl(209, 98%, 74%)
Cotton Ball	rgb(244, 246, 255)	hsl(229, 100%, 98%)

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.

Aa13.15:1 Super#31234E on #F4F6FF
Aa13.15:1 Super#F4F6FF on #31234E
Aa7.31:1 Very good#31234E on #7CC0FE
Aa7.31:1 Very good#7CC0FE on #31234E
Aa6.05:1 Good#0060A5 on #F4F6FF
Aa6.05:1 Good#F4F6FF on #0060A5
Aa3.75:1 Poor#5E6FFF on #F4F6FF
Aa3.75:1 Poor#F4F6FF on #5E6FFF

Color blindness preview

CSS variables

/* Pāua to Cotton Ball — https://swatchly.xyz/palette/31234e-0060a5-5e6fff-7cc0fe-f4f6ff */
:root {
  --p-ua: #31234e;
  --wing-commander: #0060a5;
  --blue-yster-cult: #5e6fff;
  --cooler-than-ever: #7cc0fe;
  --cotton-ball: #f4f6ff;
}

Tailwind CSS v4

/* Pāua to Cotton Ball — https://swatchly.xyz/palette/31234e-0060a5-5e6fff-7cc0fe-f4f6ff */
@theme {
  --color-p-ua: #31234e;
  --color-p-ua-50: #f6f3ff;
  --color-p-ua-100: #ede7ff;
  --color-p-ua-200: #dad0f9;
  --color-p-ua-300: #c4b9e7;
  --color-p-ua-400: #a497c9;
  --color-p-ua-500: #887aad;
  --color-p-ua-600: #6c5f8f;
  --color-p-ua-700: #554973;
  --color-p-ua-800: #40365a;
  --color-p-ua-900: #31234e;
  --color-p-ua-950: #1c162b;
  --color-wing-commander: #0060a5;
  --color-wing-commander-50: #eef6ff;
  --color-wing-commander-100: #ddedff;
  --color-wing-commander-200: #bcddff;
  --color-wing-commander-300: #95c9ff;
  --color-wing-commander-400: #63acf2;
  --color-wing-commander-500: #4391d9;
  --color-wing-commander-600: #2777bd;
  --color-wing-commander-700: #0060a5;
  --color-wing-commander-800: #004b83;
  --color-wing-commander-900: #003966;
  --color-wing-commander-950: #002443;
  --color-blue-yster-cult: #5e6fff;
  --color-blue-yster-cult-50: #f1f4ff;
  --color-blue-yster-cult-100: #e3e9ff;
  --color-blue-yster-cult-200: #c8d4ff;
  --color-blue-yster-cult-300: #a9baff;
  --color-blue-yster-cult-400: #8095ff;
  --color-blue-yster-cult-500: #5e6fff;
  --color-blue-yster-cult-600: #4853de;
  --color-blue-yster-cult-700: #373dbc;
  --color-blue-yster-cult-800: #292b9c;
  --color-blue-yster-cult-900: #1f1e7f;
  --color-blue-yster-cult-950: #111056;
  --color-cooler-than-ever: #7cc0fe;
  --color-cooler-than-ever-50: #e7f3ff;
  --color-cooler-than-ever-100: #d2e9ff;
  --color-cooler-than-ever-200: #abd6ff;
  --color-cooler-than-ever-300: #7cc0fe;
  --color-cooler-than-ever-400: #60a1dc;
  --color-cooler-than-ever-500: #4387c1;
  --color-cooler-than-ever-600: #2a6da4;
  --color-cooler-than-ever-700: #175789;
  --color-cooler-than-ever-800: #084470;
  --color-cooler-than-ever-900: #01355b;
  --color-cooler-than-ever-950: #00213c;
  --color-cotton-ball: #f4f6ff;
  --color-cotton-ball-50: #f4f6ff;
  --color-cotton-ball-100: #ebecf1;
  --color-cotton-ball-200: #d6d8de;
  --color-cotton-ball-300: #bfc1c8;
  --color-cotton-ball-400: #a0a1a9;
  --color-cotton-ball-500: #84868e;
  --color-cotton-ball-600: #6a6b73;
  --color-cotton-ball-700: #53555c;
  --color-cotton-ball-800: #414248;
  --color-cotton-ball-900: #313338;
  --color-cotton-ball-950: #1e1f23;
}