Blizzard Blue to Bruised Plum Color Palette

About this palette

Blizzard Blue to Bruised Plum is a 4-color vintage palette: #A3E4EE (Blizzard Blue), #6CA9AA (Turquoise Fantasies), #743E26 (Stone Age Queen), #321B28 (Bruised Plum). It mixes turquoise, brown, red tones and feels balanced overall. The strongest text pairing is #A3E4EE on #321B28 with a contrast ratio of 11.25:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blizzard Blue	rgb(163, 228, 238)	hsl(188, 69%, 79%)
Turquoise Fantasies	rgb(108, 169, 170)	hsl(181, 27%, 55%)
Stone Age Queen	rgb(116, 62, 38)	hsl(18, 51%, 30%)
Bruised Plum	rgb(50, 27, 40)	hsl(326, 30%, 15%)

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.

Aa11.25:1 Very good#A3E4EE on #321B28
Aa11.25:1 Very good#321B28 on #A3E4EE
Aa6.05:1 Good#A3E4EE on #743E26
Aa6.05:1 Good#743E26 on #A3E4EE
Aa5.97:1 Good#6CA9AA on #321B28
Aa5.97:1 Good#321B28 on #6CA9AA
Aa3.21:1 Poor#6CA9AA on #743E26
Aa3.21:1 Poor#743E26 on #6CA9AA

Color blindness preview

CSS variables

/* Blizzard Blue to Bruised Plum — https://swatchly.xyz/palette/a3e4ee-6ca9aa-743e26-321b28 */
:root {
  --blizzard-blue: #a3e4ee;
  --turquoise-fantasies: #6ca9aa;
  --stone-age-queen: #743e26;
  --bruised-plum: #321b28;
}

Tailwind CSS v4

/* Blizzard Blue to Bruised Plum — https://swatchly.xyz/palette/a3e4ee-6ca9aa-743e26-321b28 */
@theme {
  --color-blizzard-blue: #a3e4ee;
  --color-blizzard-blue-50: #e0fbff;
  --color-blizzard-blue-100: #ccf3f9;
  --color-blizzard-blue-200: #a3e4ee;
  --color-blizzard-blue-300: #95cbd4;
  --color-blizzard-blue-400: #70adb6;
  --color-blizzard-blue-500: #52919b;
  --color-blizzard-blue-600: #38767f;
  --color-blizzard-blue-700: #245f67;
  --color-blizzard-blue-800: #154b52;
  --color-blizzard-blue-900: #0a3a40;
  --color-blizzard-blue-950: #032429;
  --color-turquoise-fantasies: #6ca9aa;
  --color-turquoise-fantasies-50: #d9fbfc;
  --color-turquoise-fantasies-100: #cbf1f2;
  --color-turquoise-fantasies-200: #b0dedf;
  --color-turquoise-fantasies-300: #93c8c9;
  --color-turquoise-fantasies-400: #6ca9aa;
  --color-turquoise-fantasies-500: #518e8f;
  --color-turquoise-fantasies-600: #387475;
  --color-turquoise-fantasies-700: #255d5e;
  --color-turquoise-fantasies-800: #17494b;
  --color-turquoise-fantasies-900: #0e393a;
  --color-turquoise-fantasies-950: #052425;
  --color-stone-age-queen: #743e26;
  --color-stone-age-queen-50: #fff2ed;
  --color-stone-age-queen-100: #ffe5da;
  --color-stone-age-queen-200: #fbcab5;
  --color-stone-age-queen-300: #e7b099;
  --color-stone-age-queen-400: #c98e74;
  --color-stone-age-queen-500: #ac7158;
  --color-stone-age-queen-600: #8d563e;
  --color-stone-age-queen-700: #743e26;
  --color-stone-age-queen-800: #5a301e;
  --color-stone-age-queen-900: #472414;
  --color-stone-age-queen-950: #2e1509;
  --color-bruised-plum: #321b28;
  --color-bruised-plum-50: #fff0f8;
  --color-bruised-plum-100: #f9e5ef;
  --color-bruised-plum-200: #e8d0dc;
  --color-bruised-plum-300: #d3b8c6;
  --color-bruised-plum-400: #b598a7;
  --color-bruised-plum-500: #9a7d8d;
  --color-bruised-plum-600: #806473;
  --color-bruised-plum-700: #684f5d;
  --color-bruised-plum-800: #543e4a;
  --color-bruised-plum-900: #43303a;
  --color-bruised-plum-950: #321b28;
}