Frost Fairy to Kimono Color Palette

About this palette

Frost Fairy to Kimono is a 5-color cool palette: #B2D4FF (Frost Fairy), #21285C (Spacescape), #604C77 (Royal Robe), #5EA9EE (Cerulean), #7387BD (Kimono). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #B2D4FF on #21285C with a contrast ratio of 9.03:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Frost Fairy	rgb(178, 212, 255)	hsl(214, 100%, 85%)
Spacescape	rgb(33, 40, 92)	hsl(233, 47%, 25%)
Royal Robe	rgb(96, 76, 119)	hsl(268, 22%, 38%)
Cerulean	rgb(94, 169, 238)	hsl(209, 81%, 65%)
Kimono	rgb(115, 135, 189)	hsl(224, 36%, 60%)

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.

Aa9.03:1 Very good#B2D4FF on #21285C
Aa9.03:1 Very good#21285C on #B2D4FF
Aa5.51:1 Good#21285C on #5EA9EE
Aa5.51:1 Good#5EA9EE on #21285C
Aa4.92:1 Good#B2D4FF on #604C77
Aa4.92:1 Good#604C77 on #B2D4FF
Aa3.89:1 Poor#21285C on #7387BD
Aa3.89:1 Poor#7387BD on #21285C

Color blindness preview

CSS variables

/* Frost Fairy to Kimono — https://swatchly.xyz/palette/b2d4ff-21285c-604c77-5ea9ee-7387bd */
:root {
  --frost-fairy: #b2d4ff;
  --spacescape: #21285c;
  --royal-robe: #604c77;
  --cerulean: #5ea9ee;
  --kimono: #7387bd;
}

Tailwind CSS v4

/* Frost Fairy to Kimono — https://swatchly.xyz/palette/b2d4ff-21285c-604c77-5ea9ee-7387bd */
@theme {
  --color-frost-fairy: #b2d4ff;
  --color-frost-fairy-50: #e7f2ff;
  --color-frost-fairy-100: #d5e8ff;
  --color-frost-fairy-200: #b2d4ff;
  --color-frost-fairy-300: #a1bee3;
  --color-frost-fairy-400: #81a0c7;
  --color-frost-fairy-500: #6685ad;
  --color-frost-fairy-600: #4e6c91;
  --color-frost-fairy-700: #3b5678;
  --color-frost-fairy-800: #2c4461;
  --color-frost-fairy-900: #20344d;
  --color-frost-fairy-950: #112032;
  --color-spacescape: #21285c;
  --color-spacescape-50: #f2f5ff;
  --color-spacescape-100: #e5eaff;
  --color-spacescape-200: #cbd6ff;
  --color-spacescape-300: #b0bef5;
  --color-spacescape-400: #8f9dd9;
  --color-spacescape-500: #7380bc;
  --color-spacescape-600: #59659d;
  --color-spacescape-700: #444e80;
  --color-spacescape-800: #323b66;
  --color-spacescape-900: #21285c;
  --color-spacescape-950: #151933;
  --color-royal-robe: #604c77;
  --color-royal-robe-50: #f8f2ff;
  --color-royal-robe-100: #f1e6ff;
  --color-royal-robe-200: #e0cff5;
  --color-royal-robe-300: #cab8e2;
  --color-royal-robe-400: #ac98c6;
  --color-royal-robe-500: #917caa;
  --color-royal-robe-600: #77628e;
  --color-royal-robe-700: #604c77;
  --color-royal-robe-800: #4b3b5e;
  --color-royal-robe-900: #3a2c4a;
  --color-royal-robe-950: #241a30;
  --color-cerulean: #5ea9ee;
  --color-cerulean-50: #eff7ff;
  --color-cerulean-100: #deeeff;
  --color-cerulean-200: #baddff;
  --color-cerulean-300: #8fc8ff;
  --color-cerulean-400: #5ea9ee;
  --color-cerulean-500: #418ccf;
  --color-cerulean-600: #2471b1;
  --color-cerulean-700: #0b5993;
  --color-cerulean-800: #004577;
  --color-cerulean-900: #00355d;
  --color-cerulean-950: #00203c;
  --color-kimono: #7387bd;
  --color-kimono-50: #f2f6ff;
  --color-kimono-100: #e4ecff;
  --color-kimono-200: #c9d8ff;
  --color-kimono-300: #afc2f2;
  --color-kimono-400: #8ea2d8;
  --color-kimono-500: #7387bd;
  --color-kimono-600: #596c9f;
  --color-kimono-700: #445583;
  --color-kimono-800: #33416a;
  --color-kimono-900: #263254;
  --color-kimono-950: #161e37;
}