Deep Lagoon to Cotton Boll Color Palette

About this palette

Deep Lagoon to Cotton Boll is a 5-color warm, vintage palette: #14596B (Deep Lagoon), #BC7E31 (Cut the Mustard), #F8A2AA (Ballet Slippers), #A84B51 (Cherry on Top), #DFF4FF (Cotton Boll). It mixes blue, orange, pink, red, white tones and feels warm overall. The strongest text pairing is #14596B on #DFF4FF with a contrast ratio of 6.93:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Deep Lagoon	rgb(20, 89, 107)	hsl(192, 69%, 25%)
Cut the Mustard	rgb(188, 126, 49)	hsl(33, 59%, 46%)
Ballet Slippers	rgb(248, 162, 170)	hsl(354, 86%, 80%)
Cherry on Top	rgb(168, 75, 81)	hsl(356, 38%, 48%)
Cotton Boll	rgb(223, 244, 255)	hsl(201, 100%, 94%)

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.

Aa6.93:1 Good#14596B on #DFF4FF
Aa6.93:1 Good#DFF4FF on #14596B
Aa4.89:1 Good#A84B51 on #DFF4FF
Aa4.89:1 Good#DFF4FF on #A84B51
Aa4.02:1 Poor#14596B on #F8A2AA
Aa4.02:1 Poor#F8A2AA on #14596B
Aa3.00:1 Poor#BC7E31 on #DFF4FF
Aa3.00:1 Poor#DFF4FF on #BC7E31

Color blindness preview

CSS variables

/* Deep Lagoon to Cotton Boll — https://swatchly.xyz/palette/14596b-bc7e31-f8a2aa-a84b51-dff4ff */
:root {
  --deep-lagoon: #14596b;
  --cut-the-mustard: #bc7e31;
  --ballet-slippers: #f8a2aa;
  --cherry-on-top: #a84b51;
  --cotton-boll: #dff4ff;
}

Tailwind CSS v4

/* Deep Lagoon to Cotton Boll — https://swatchly.xyz/palette/14596b-bc7e31-f8a2aa-a84b51-dff4ff */
@theme {
  --color-deep-lagoon: #14596b;
  --color-deep-lagoon-50: #e7f9ff;
  --color-deep-lagoon-100: #cdf3ff;
  --color-deep-lagoon-200: #b0dfef;
  --color-deep-lagoon-300: #93c9da;
  --color-deep-lagoon-400: #6ca9bc;
  --color-deep-lagoon-500: #4e8da0;
  --color-deep-lagoon-600: #337183;
  --color-deep-lagoon-700: #14596b;
  --color-deep-lagoon-800: #114553;
  --color-deep-lagoon-900: #083641;
  --color-deep-lagoon-950: #03212a;
  --color-cut-the-mustard: #bc7e31;
  --color-cut-the-mustard-50: #fff4ea;
  --color-cut-the-mustard-100: #ffead4;
  --color-cut-the-mustard-200: #ffd2a2;
  --color-cut-the-mustard-300: #f1ba7e;
  --color-cut-the-mustard-400: #d69a55;
  --color-cut-the-mustard-500: #bc7e31;
  --color-cut-the-mustard-600: #9d6208;
  --color-cut-the-mustard-700: #7e4d00;
  --color-cut-the-mustard-800: #633b00;
  --color-cut-the-mustard-900: #4c2c00;
  --color-cut-the-mustard-950: #311a00;
  --color-ballet-slippers: #f8a2aa;
  --color-ballet-slippers-50: #ffeff0;
  --color-ballet-slippers-100: #ffe0e2;
  --color-ballet-slippers-200: #ffc2c7;
  --color-ballet-slippers-300: #f8a2aa;
  --color-ballet-slippers-400: #d5858c;
  --color-ballet-slippers-500: #b96972;
  --color-ballet-slippers-600: #9b5059;
  --color-ballet-slippers-700: #803c45;
  --color-ballet-slippers-800: #682c34;
  --color-ballet-slippers-900: #532027;
  --color-ballet-slippers-950: #361117;
  --color-cherry-on-top: #a84b51;
  --color-cherry-on-top-50: #fff1f1;
  --color-cherry-on-top-100: #ffe4e4;
  --color-cherry-on-top-200: #ffc8c8;
  --color-cherry-on-top-300: #fea6a8;
  --color-cherry-on-top-400: #e28386;
  --color-cherry-on-top-500: #c6666a;
  --color-cherry-on-top-600: #a84b51;
  --color-cherry-on-top-700: #8a373d;
  --color-cherry-on-top-800: #70272d;
  --color-cherry-on-top-900: #591b21;
  --color-cherry-on-top-950: #3a0e12;
  --color-cotton-boll: #dff4ff;
  --color-cotton-boll-50: #dff4ff;
  --color-cotton-boll-100: #dce9f1;
  --color-cotton-boll-200: #c8d7df;
  --color-cotton-boll-300: #b0c2cb;
  --color-cotton-boll-400: #90a3ad;
  --color-cotton-boll-500: #768993;
  --color-cotton-boll-600: #5d6f78;
  --color-cotton-boll-700: #485861;
  --color-cotton-boll-800: #36454c;
  --color-cotton-boll-900: #29353b;
  --color-cotton-boll-950: #182125;
}