Kiss a Frog to Cotton Ball Color Palette

About this palette

Kiss a Frog to Cotton Ball is a 4-color pastel, light, gradient palette: #C9C07F (Kiss a Frog), #8EE1D2 (Sea Foam), #F9D9AE (Lion’s Roar), #F4F7FF (Cotton Ball). It mixes yellow, turquoise, orange, white tones and feels warm overall. The strongest text pairing is #C9C07F on #F4F7FF with a contrast ratio of 1.73:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Kiss a Frog	rgb(201, 192, 127)	hsl(53, 41%, 64%)
Sea Foam	rgb(142, 225, 210)	hsl(169, 58%, 72%)
Lion’s Roar	rgb(249, 217, 174)	hsl(34, 86%, 83%)
Cotton Ball	rgb(244, 247, 255)	hsl(224, 100%, 98%)

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

/* Kiss a Frog to Cotton Ball — https://swatchly.xyz/palette/c9c07f-8ee1d2-f9d9ae-f4f7ff */
:root {
  --kiss-a-frog: #c9c07f;
  --sea-foam: #8ee1d2;
  --lion-s-roar: #f9d9ae;
  --cotton-ball: #f4f7ff;
}

Tailwind CSS v4

/* Kiss a Frog to Cotton Ball — https://swatchly.xyz/palette/c9c07f-8ee1d2-f9d9ae-f4f7ff */
@theme {
  --color-kiss-a-frog: #c9c07f;
  --color-kiss-a-frog-50: #faf5d1;
  --color-kiss-a-frog-100: #f0ebc2;
  --color-kiss-a-frog-200: #ddd7a6;
  --color-kiss-a-frog-300: #c9c07f;
  --color-kiss-a-frog-400: #aaa163;
  --color-kiss-a-frog-500: #8f8646;
  --color-kiss-a-frog-600: #756c2d;
  --color-kiss-a-frog-700: #5e551a;
  --color-kiss-a-frog-800: #4a430d;
  --color-kiss-a-frog-900: #3a3304;
  --color-kiss-a-frog-950: #242001;
  --color-sea-foam: #8ee1d2;
  --color-sea-foam-50: #ccfbf1;
  --color-sea-foam-100: #bbf0e6;
  --color-sea-foam-200: #8ee1d2;
  --color-sea-foam-300: #82cabd;
  --color-sea-foam-400: #5dad9f;
  --color-sea-foam-500: #3e9385;
  --color-sea-foam-600: #22786c;
  --color-sea-foam-700: #096257;
  --color-sea-foam-800: #004e45;
  --color-sea-foam-900: #003c35;
  --color-sea-foam-950: #002621;
  --color-lion-s-roar: #f9d9ae;
  --color-lion-s-roar-50: #fff9f1;
  --color-lion-s-roar-100: #ffeed9;
  --color-lion-s-roar-200: #f9d9ae;
  --color-lion-s-roar-300: #dcc2a0;
  --color-lion-s-roar-400: #bea17a;
  --color-lion-s-roar-500: #a1845c;
  --color-lion-s-roar-600: #846841;
  --color-lion-s-roar-700: #6a512d;
  --color-lion-s-roar-800: #543e1e;
  --color-lion-s-roar-900: #412f14;
  --color-lion-s-roar-950: #2a1c09;
  --color-cotton-ball: #f4f7ff;
  --color-cotton-ball-50: #f4f7ff;
  --color-cotton-ball-100: #ebedf1;
  --color-cotton-ball-200: #d6d9de;
  --color-cotton-ball-300: #bfc2c8;
  --color-cotton-ball-400: #9fa2a9;
  --color-cotton-ball-500: #84868d;
  --color-cotton-ball-600: #696c72;
  --color-cotton-ball-700: #53555b;
  --color-cotton-ball-800: #404248;
  --color-cotton-ball-900: #313337;
  --color-cotton-ball-950: #1e1f22;
}