Over the Sky to Ivory Tower color palette

9ED1EAOver the Sky FFC1C2Piglet BDE6FFBreaking the Ice C9E9BDFrozen Forest FFF2F2Ivory Tower

About this palette

Over the Sky to Ivory Tower is a 5-color pastel, light, cool palette: #9ED1EA (Over the Sky), #FFC1C2 (Piglet), #BDE6FF (Breaking the Ice), #C9E9BD (Frozen Forest), #FFF2F2 (Ivory Tower). It mixes blue, pink, green, white tones and feels cool overall. The strongest text pairing is #9ED1EA on #FFF2F2 with a contrast ratio of 1.51:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Over the Sky	rgb(158, 209, 234)	hsl(200, 64%, 77%)
Piglet	rgb(255, 193, 194)	hsl(359, 100%, 88%)
Breaking the Ice	rgb(189, 230, 255)	hsl(203, 100%, 87%)
Frozen Forest	rgb(201, 233, 189)	hsl(104, 50%, 83%)
Ivory Tower	rgb(255, 242, 242)	hsl(0, 100%, 97%)

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 Ivory Tower — https://swatchly.xyz/palette/9ed1ea-ffc1c2-bde6ff-c9e9bd-fff2f2 */
:root {
  --over-the-sky: #9ed1ea;
  --piglet: #ffc1c2;
  --breaking-the-ice: #bde6ff;
  --frozen-forest: #c9e9bd;
  --ivory-tower: #fff2f2;
}

Tailwind CSS v4

/* Over the Sky to Ivory Tower — https://swatchly.xyz/palette/9ed1ea-ffc1c2-bde6ff-c9e9bd-fff2f2 */
@theme {
  --color-over-the-sky: #9ed1ea;
  --color-over-the-sky-50: #f2fbff;
  --color-over-the-sky-100: #dff4ff;
  --color-over-the-sky-200: #c1e4f6;
  --color-over-the-sky-300: #9ed1ea;
  --color-over-the-sky-400: #80afc6;
  --color-over-the-sky-500: #6293aa;
  --color-over-the-sky-600: #46768d;
  --color-over-the-sky-700: #315e72;
  --color-over-the-sky-800: #21495a;
  --color-over-the-sky-900: #163746;
  --color-over-the-sky-950: #0a222d;
  --color-piglet: #ffc1c2;
  --color-piglet-50: #ffeded;
  --color-piglet-100: #ffdfdf;
  --color-piglet-200: #ffc1c2;
  --color-piglet-300: #e3aeaf;
  --color-piglet-400: #c68e8f;
  --color-piglet-500: #ab7374;
  --color-piglet-600: #8f5a5b;
  --color-piglet-700: #754547;
  --color-piglet-800: #5e3536;
  --color-piglet-900: #4a2729;
  --color-piglet-950: #301718;
  --color-breaking-the-ice: #bde6ff;
  --color-breaking-the-ice-50: #f6fbff;
  --color-breaking-the-ice-100: #e4f5ff;
  --color-breaking-the-ice-200: #bde6ff;
  --color-breaking-the-ice-300: #accde1;
  --color-breaking-the-ice-400: #87acc3;
  --color-breaking-the-ice-500: #6990a6;
  --color-breaking-the-ice-600: #4e7389;
  --color-breaking-the-ice-700: #395b6f;
  --color-breaking-the-ice-800: #294657;
  --color-breaking-the-ice-900: #1d3645;
  --color-breaking-the-ice-950: #0f222c;
  --color-frozen-forest: #c9e9bd;
  --color-frozen-forest-50: #f0ffea;
  --color-frozen-forest-100: #e4f7dd;
  --color-frozen-forest-200: #c9e9bd;
  --color-frozen-forest-300: #b5cfab;
  --color-frozen-forest-400: #93af88;
  --color-frozen-forest-500: #76936b;
  --color-frozen-forest-600: #5b7750;
  --color-frozen-forest-700: #455e3b;
  --color-frozen-forest-800: #34492b;
  --color-frozen-forest-900: #26391f;
  --color-frozen-forest-950: #162411;
  --color-ivory-tower: #fff2f2;
  --color-ivory-tower-50: #fff2f2;
  --color-ivory-tower-100: #f1e9e9;
  --color-ivory-tower-200: #dfd5d5;
  --color-ivory-tower-300: #c9bebe;
  --color-ivory-tower-400: #aa9e9e;
  --color-ivory-tower-500: #8f8383;
  --color-ivory-tower-600: #746969;
  --color-ivory-tower-700: #5c5253;
  --color-ivory-tower-800: #484040;
  --color-ivory-tower-900: #383131;
  --color-ivory-tower-950: #231e1e;
}