Gum Leaf to Over the Sky Color Palette

About this palette

Gum Leaf to Over the Sky is a 4-color pastel, light palette: #AFCBB6 (Gum Leaf), #FFDAE0 (It’s a Girl!), #FFF6F0 (Seashell), #93DDF5 (Over the Sky). It mixes green, pink, white, blue tones and feels cool overall. The strongest text pairing is #AFCBB6 on #FFF6F0 with a contrast ratio of 1.64:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Gum Leaf	rgb(175, 203, 182)	hsl(135, 21%, 74%)
It’s a Girl!	rgb(255, 218, 224)	hsl(350, 100%, 93%)
Seashell	rgb(255, 246, 240)	hsl(24, 100%, 97%)
Over the Sky	rgb(147, 221, 245)	hsl(195, 83%, 77%)

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

/* Gum Leaf to Over the Sky — https://swatchly.xyz/palette/afcbb6-ffdae0-fff6f0-93ddf5 */
:root {
  --gum-leaf: #afcbb6;
  --it-s-a-girl: #ffdae0;
  --seashell: #fff6f0;
  --over-the-sky: #93ddf5;
}

Tailwind CSS v4

/* Gum Leaf to Over the Sky — https://swatchly.xyz/palette/afcbb6-ffdae0-fff6f0-93ddf5 */
@theme {
  --color-gum-leaf: #afcbb6;
  --color-gum-leaf-50: #ebfbef;
  --color-gum-leaf-100: #e0f2e4;
  --color-gum-leaf-200: #cadfd0;
  --color-gum-leaf-300: #afcbb6;
  --color-gum-leaf-400: #91ab97;
  --color-gum-leaf-500: #758f7b;
  --color-gum-leaf-600: #5b7461;
  --color-gum-leaf-700: #455c4c;
  --color-gum-leaf-800: #34483a;
  --color-gum-leaf-900: #27382b;
  --color-gum-leaf-950: #16231a;
  --color-it-s-a-girl: #ffdae0;
  --color-it-s-a-girl-50: #ffeaed;
  --color-it-s-a-girl-100: #ffdae0;
  --color-it-s-a-girl-200: #e6cacf;
  --color-it-s-a-girl-300: #d3b4b9;
  --color-it-s-a-girl-400: #b6959a;
  --color-it-s-a-girl-500: #9b7a80;
  --color-it-s-a-girl-600: #806167;
  --color-it-s-a-girl-700: #694d51;
  --color-it-s-a-girl-800: #533b3f;
  --color-it-s-a-girl-900: #412c30;
  --color-it-s-a-girl-950: #291b1d;
  --color-seashell: #fff6f0;
  --color-seashell-50: #fff6f0;
  --color-seashell-100: #f2ece9;
  --color-seashell-200: #ded8d4;
  --color-seashell-300: #c8c1bc;
  --color-seashell-400: #a9a19b;
  --color-seashell-500: #8d857f;
  --color-seashell-600: #726a65;
  --color-seashell-700: #5b544f;
  --color-seashell-800: #47413d;
  --color-seashell-900: #37322e;
  --color-seashell-950: #221e1c;
  --color-over-the-sky: #93ddf5;
  --color-over-the-sky-50: #daf6ff;
  --color-over-the-sky-100: #bfeefe;
  --color-over-the-sky-200: #93ddf5;
  --color-over-the-sky-300: #87c6db;
  --color-over-the-sky-400: #62a8bf;
  --color-over-the-sky-500: #448ea4;
  --color-over-the-sky-600: #2a7489;
  --color-over-the-sky-700: #155d71;
  --color-over-the-sky-800: #044a5b;
  --color-over-the-sky-900: #003947;
  --color-over-the-sky-950: #00242e;
}