Mustard to Heavy Heart color palette

C3B700Mustard 006D6CPine Scented Lagoon D4DBFFIcy Plains 009390Green Dynasty 751325Heavy Heart

About this palette

Mustard to Heavy Heart is a 5-color cool palette: #C3B700 (Mustard), #006D6C (Pine Scented Lagoon), #D4DBFF (Icy Plains), #009390 (Green Dynasty), #751325 (Heavy Heart). It mixes yellow, turquoise, purple, red tones and feels cool overall. The strongest text pairing is #D4DBFF on #751325 with a contrast ratio of 8.20:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mustard	rgb(195, 183, 0)	hsl(56, 100%, 38%)
Pine Scented Lagoon	rgb(0, 109, 108)	hsl(179, 100%, 21%)
Icy Plains	rgb(212, 219, 255)	hsl(230, 100%, 92%)
Green Dynasty	rgb(0, 147, 144)	hsl(179, 100%, 29%)
Heavy Heart	rgb(117, 19, 37)	hsl(349, 72%, 27%)

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.

Aa8.20:1 Very good#D4DBFF on #751325
Aa8.20:1 Very good#751325 on #D4DBFF
Aa5.38:1 Good#C3B700 on #751325
Aa5.38:1 Good#751325 on #C3B700
Aa4.52:1 Good#006D6C on #D4DBFF
Aa4.52:1 Good#D4DBFF on #006D6C

Color blindness preview

CSS variables

/* Mustard to Heavy Heart — https://swatchly.xyz/palette/c3b700-006d6c-d4dbff-009390-751325 */
:root {
  --mustard: #c3b700;
  --pine-scented-lagoon: #006d6c;
  --icy-plains: #d4dbff;
  --green-dynasty: #009390;
  --heavy-heart: #751325;
}

Tailwind CSS v4

/* Mustard to Heavy Heart — https://swatchly.xyz/palette/c3b700-006d6c-d4dbff-009390-751325 */
@theme {
  --color-mustard: #c3b700;
  --color-mustard-50: #f7f2a5;
  --color-mustard-100: #ece68d;
  --color-mustard-200: #d8d063;
  --color-mustard-300: #c3b700;
  --color-mustard-400: #a49a00;
  --color-mustard-500: #898000;
  --color-mustard-600: #6f6800;
  --color-mustard-700: #595300;
  --color-mustard-800: #474200;
  --color-mustard-900: #383400;
  --color-mustard-950: #232000;
  --color-pine-scented-lagoon: #006d6c;
  --color-pine-scented-lagoon-50: #d5fffd;
  --color-pine-scented-lagoon-100: #c4f7f5;
  --color-pine-scented-lagoon-200: #abe7e5;
  --color-pine-scented-lagoon-300: #8ed3d1;
  --color-pine-scented-lagoon-400: #67b7b5;
  --color-pine-scented-lagoon-500: #479d9b;
  --color-pine-scented-lagoon-600: #2a8382;
  --color-pine-scented-lagoon-700: #006d6c;
  --color-pine-scented-lagoon-800: #005555;
  --color-pine-scented-lagoon-900: #004241;
  --color-pine-scented-lagoon-950: #002a29;
  --color-icy-plains: #d4dbff;
  --color-icy-plains-50: #f7f9ff;
  --color-icy-plains-100: #ecefff;
  --color-icy-plains-200: #d4dbff;
  --color-icy-plains-300: #bec4e1;
  --color-icy-plains-400: #9da3c3;
  --color-icy-plains-500: #8087a7;
  --color-icy-plains-600: #666b8a;
  --color-icy-plains-700: #4f5470;
  --color-icy-plains-800: #3c4159;
  --color-icy-plains-900: #2e3146;
  --color-icy-plains-950: #1c1e2d;
  --color-green-dynasty: #009390;
  --color-green-dynasty-50: #d0fffc;
  --color-green-dynasty-100: #b6f7f4;
  --color-green-dynasty-200: #96e5e1;
  --color-green-dynasty-300: #71cfcb;
  --color-green-dynasty-400: #3fb0ac;
  --color-green-dynasty-500: #009390;
  --color-green-dynasty-600: #007674;
  --color-green-dynasty-700: #005e5c;
  --color-green-dynasty-800: #004a48;
  --color-green-dynasty-900: #003a38;
  --color-green-dynasty-950: #002423;
  --color-heavy-heart: #751325;
  --color-heavy-heart-50: #fff1f1;
  --color-heavy-heart-100: #ffe4e4;
  --color-heavy-heart-200: #ffc7c8;
  --color-heavy-heart-300: #ffa3a7;
  --color-heavy-heart-400: #e47e84;
  --color-heavy-heart-500: #c66068;
  --color-heavy-heart-600: #a6454e;
  --color-heavy-heart-700: #88313a;
  --color-heavy-heart-800: #751325;
  --color-heavy-heart-900: #57161e;
  --color-heavy-heart-950: #390a11;
}