Over the Sky to Foundation White color palette

9BD8EBOver the Sky E3BCD6Blackberry Yoghurt BEDFA6Basil Smash A9F9F2Pale King’s Blue FBD6D3Ballet ECEFFFFoundation White

Open in generator Export PNG, PDF, ASE…

About this palette

Over the Sky to Foundation White is a 6-color pastel, light palette: #9BD8EB (Over the Sky), #E3BCD6 (Blackberry Yoghurt), #BEDFA6 (Basil Smash), #A9F9F2 (Pale King’s Blue), #FBD6D3 (Ballet), #ECEFFF (Foundation White). It mixes blue, pink, green, turquoise, white tones and feels cool overall. The strongest text pairing is #E3BCD6 on #ECEFFF with a contrast ratio of 1.48:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Over the Sky	rgb(155, 216, 235)	hsl(194, 67%, 76%)
Blackberry Yoghurt	rgb(227, 188, 214)	hsl(320, 41%, 81%)
Basil Smash	rgb(190, 223, 166)	hsl(95, 47%, 76%)
Pale King’s Blue	rgb(169, 249, 242)	hsl(175, 87%, 82%)
Ballet	rgb(251, 214, 211)	hsl(5, 83%, 91%)
Foundation White	rgb(236, 239, 255)	hsl(231, 100%, 96%)

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.

Color blindness preview

CSS variables

/* Over the Sky to Foundation White — https://swatchly.xyz/palette/9bd8eb-e3bcd6-bedfa6-a9f9f2-fbd6d3-ecefff */
:root {
  --over-the-sky: #9bd8eb;
  --blackberry-yoghurt: #e3bcd6;
  --basil-smash: #bedfa6;
  --pale-king-s-blue: #a9f9f2;
  --ballet: #fbd6d3;
  --foundation-white: #ecefff;
}

Tailwind CSS v4

/* Over the Sky to Foundation White — https://swatchly.xyz/palette/9bd8eb-e3bcd6-bedfa6-a9f9f2-fbd6d3-ecefff */
@theme {
  --color-over-the-sky: #9bd8eb;
  --color-over-the-sky-50: #d4f4ff;
  --color-over-the-sky-100: #c2eaf7;
  --color-over-the-sky-200: #9bd8eb;
  --color-over-the-sky-300: #8dc2d3;
  --color-over-the-sky-400: #6ba5b7;
  --color-over-the-sky-500: #508b9d;
  --color-over-the-sky-600: #387283;
  --color-over-the-sky-700: #255c6b;
  --color-over-the-sky-800: #184957;
  --color-over-the-sky-900: #0e3944;
  --color-over-the-sky-950: #05232c;
  --color-blackberry-yoghurt: #e3bcd6;
  --color-blackberry-yoghurt-50: #fff7fc;
  --color-blackberry-yoghurt-100: #ffeaf8;
  --color-blackberry-yoghurt-200: #f1d5e8;
  --color-blackberry-yoghurt-300: #e3bcd6;
  --color-blackberry-yoghurt-400: #c09cb4;
  --color-blackberry-yoghurt-500: #a37f97;
  --color-blackberry-yoghurt-600: #86637b;
  --color-blackberry-yoghurt-700: #6b4c62;
  --color-blackberry-yoghurt-800: #553a4c;
  --color-blackberry-yoghurt-900: #412a3a;
  --color-blackberry-yoghurt-950: #291924;
  --color-basil-smash: #bedfa6;
  --color-basil-smash-50: #e6f9d8;
  --color-basil-smash-100: #daefca;
  --color-basil-smash-200: #bedfa6;
  --color-basil-smash-300: #abc897;
  --color-basil-smash-400: #8baa75;
  --color-basil-smash-500: #718f5a;
  --color-basil-smash-600: #587441;
  --color-basil-smash-700: #445e2f;
  --color-basil-smash-800: #344a21;
  --color-basil-smash-900: #263916;
  --color-basil-smash-950: #16240a;
  --color-pale-king-s-blue: #a9f9f2;
  --color-pale-king-s-blue-50: #d1fcf8;
  --color-pale-king-s-blue-100: #a9f9f2;
  --color-pale-king-s-blue-200: #a7e2dc;
  --color-pale-king-s-blue-300: #8acdc7;
  --color-pale-king-s-blue-400: #64afa9;
  --color-pale-king-s-blue-500: #45948f;
  --color-pale-king-s-blue-600: #287a74;
  --color-pale-king-s-blue-700: #11625d;
  --color-pale-king-s-blue-800: #004d49;
  --color-pale-king-s-blue-900: #003c39;
  --color-pale-king-s-blue-950: #002523;
  --color-ballet: #fbd6d3;
  --color-ballet-50: #fff9f9;
  --color-ballet-100: #ffeeec;
  --color-ballet-200: #fbd6d3;
  --color-ballet-300: #dec0bd;
  --color-ballet-400: #bf9e9b;
  --color-ballet-500: #a2817e;
  --color-ballet-600: #856563;
  --color-ballet-700: #6b4e4c;
  --color-ballet-800: #543b39;
  --color-ballet-900: #412d2b;
  --color-ballet-950: #2a1b1a;
  --color-foundation-white: #ecefff;
  --color-foundation-white-50: #f7f9ff;
  --color-foundation-white-100: #ecefff;
  --color-foundation-white-200: #d9dbe6;
  --color-foundation-white-300: #c1c3d0;
  --color-foundation-white-400: #a0a3b1;
  --color-foundation-white-500: #848795;
  --color-foundation-white-600: #696c79;
  --color-foundation-white-700: #525461;
  --color-foundation-white-800: #40424c;
  --color-foundation-white-900: #31323b;
  --color-foundation-white-950: #1e1f25;
}