Widowmaker to Blueberry color palette

ABADFFWidowmaker 0088A4Corfu Waters 9B381FSpill the Beans 00A9C8Gummy Dolphins F0F0A0Pale Canary 493990Blueberry

Open in generator Export PNG, PDF, ASE…

About this palette

Widowmaker to Blueberry is a 6-color cool palette: #ABADFF (Widowmaker), #0088A4 (Corfu Waters), #9B381F (Spill the Beans), #00A9C8 (Gummy Dolphins), #F0F0A0 (Pale Canary), #493990 (Blueberry). It mixes purple, blue, red, yellow tones and feels cool overall. The strongest text pairing is #F0F0A0 on #493990 with a contrast ratio of 7.78:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Widowmaker	rgb(171, 173, 255)	hsl(239, 100%, 84%)
Corfu Waters	rgb(0, 136, 164)	hsl(190, 100%, 32%)
Spill the Beans	rgb(155, 56, 31)	hsl(12, 67%, 36%)
Gummy Dolphins	rgb(0, 169, 200)	hsl(189, 100%, 39%)
Pale Canary	rgb(240, 240, 160)	hsl(60, 73%, 78%)
Blueberry	rgb(73, 57, 144)	hsl(251, 43%, 39%)

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.

Aa7.78:1 Very good#F0F0A0 on #493990
Aa7.78:1 Very good#493990 on #F0F0A0
Aa5.93:1 Good#9B381F on #F0F0A0
Aa5.93:1 Good#F0F0A0 on #9B381F
Aa4.47:1 Poor#ABADFF on #493990
Aa4.47:1 Poor#493990 on #ABADFF
Aa3.49:1 Poor#0088A4 on #F0F0A0
Aa3.49:1 Poor#F0F0A0 on #0088A4

Color blindness preview

CSS variables

/* Widowmaker to Blueberry — https://swatchly.xyz/palette/abadff-0088a4-9b381f-00a9c8-f0f0a0-493990 */
:root {
  --widowmaker: #abadff;
  --corfu-waters: #0088a4;
  --spill-the-beans: #9b381f;
  --gummy-dolphins: #00a9c8;
  --pale-canary: #f0f0a0;
  --blueberry: #493990;
}

Tailwind CSS v4

/* Widowmaker to Blueberry — https://swatchly.xyz/palette/abadff-0088a4-9b381f-00a9c8-f0f0a0-493990 */
@theme {
  --color-widowmaker: #abadff;
  --color-widowmaker-50: #edeeff;
  --color-widowmaker-100: #dfe1ff;
  --color-widowmaker-200: #c6c9ff;
  --color-widowmaker-300: #abadff;
  --color-widowmaker-400: #8e90dd;
  --color-widowmaker-500: #7676c3;
  --color-widowmaker-600: #5e5da6;
  --color-widowmaker-700: #4a498b;
  --color-widowmaker-800: #3a3872;
  --color-widowmaker-900: #2d2b5d;
  --color-widowmaker-950: #1b1a3d;
  --color-corfu-waters: #0088a4;
  --color-corfu-waters-50: #e0f8ff;
  --color-corfu-waters-100: #c0f0ff;
  --color-corfu-waters-200: #92def5;
  --color-corfu-waters-300: #6dc7e1;
  --color-corfu-waters-400: #3ca6c2;
  --color-corfu-waters-500: #0088a4;
  --color-corfu-waters-600: #006e85;
  --color-corfu-waters-700: #00576a;
  --color-corfu-waters-800: #004554;
  --color-corfu-waters-900: #003642;
  --color-corfu-waters-950: #00222b;
  --color-spill-the-beans: #9b381f;
  --color-spill-the-beans-50: #fff2ee;
  --color-spill-the-beans-100: #ffe4dd;
  --color-spill-the-beans-200: #ffcbbe;
  --color-spill-the-beans-300: #ffac96;
  --color-spill-the-beans-400: #eb866c;
  --color-spill-the-beans-500: #d1694f;
  --color-spill-the-beans-600: #b44f36;
  --color-spill-the-beans-700: #9b381f;
  --color-spill-the-beans-800: #7c2914;
  --color-spill-the-beans-900: #631c09;
  --color-spill-the-beans-950: #420e02;
  --color-gummy-dolphins: #00a9c8;
  --color-gummy-dolphins-50: #dcf7ff;
  --color-gummy-dolphins-100: #bbf0ff;
  --color-gummy-dolphins-200: #84e0f9;
  --color-gummy-dolphins-300: #5ac9e5;
  --color-gummy-dolphins-400: #00a9c8;
  --color-gummy-dolphins-500: #008da7;
  --color-gummy-dolphins-600: #007287;
  --color-gummy-dolphins-700: #005b6d;
  --color-gummy-dolphins-800: #004856;
  --color-gummy-dolphins-900: #003844;
  --color-gummy-dolphins-950: #00242d;
  --color-pale-canary: #f0f0a0;
  --color-pale-canary-50: #f7f8cd;
  --color-pale-canary-100: #f0f0a0;
  --color-pale-canary-200: #dbdba2;
  --color-pale-canary-300: #c5c583;
  --color-pale-canary-400: #a6a65c;
  --color-pale-canary-500: #8c8a3c;
  --color-pale-canary-600: #717020;
  --color-pale-canary-700: #5a5909;
  --color-pale-canary-800: #474500;
  --color-pale-canary-900: #363500;
  --color-pale-canary-950: #222100;
  --color-blueberry: #493990;
  --color-blueberry-50: #f4f4ff;
  --color-blueberry-100: #e9e9ff;
  --color-blueberry-200: #d4d2ff;
  --color-blueberry-300: #beb9ff;
  --color-blueberry-400: #a097f2;
  --color-blueberry-500: #877cd9;
  --color-blueberry-600: #6e62bd;
  --color-blueberry-700: #5a4da1;
  --color-blueberry-800: #493990;
  --color-blueberry-900: #382d6e;
  --color-blueberry-950: #231b4b;
}