Baby Pink to Elite Teal Color Palette

About this palette

Baby Pink to Elite Teal is a 5-color cool palette: #FFB3C9 (Baby Pink), #AB97D9 (Violet Velvet), #638E36 (Hidden Paradise), #586103 (Forestial Outpost), #003936 (Elite Teal). It mixes pink, purple, green, turquoise tones and feels cool overall. The strongest text pairing is #FFB3C9 on #003936 with a contrast ratio of 7.66:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Baby Pink	rgb(255, 179, 201)	hsl(343, 100%, 85%)
Violet Velvet	rgb(171, 151, 217)	hsl(258, 46%, 72%)
Hidden Paradise	rgb(99, 142, 54)	hsl(89, 45%, 38%)
Forestial Outpost	rgb(88, 97, 3)	hsl(66, 94%, 20%)
Elite Teal	rgb(0, 57, 54)	hsl(177, 100%, 11%)

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.

Aa7.66:1 Very good#FFB3C9 on #003936
Aa7.66:1 Very good#003936 on #FFB3C9
Aa4.98:1 Good#AB97D9 on #003936
Aa4.98:1 Good#003936 on #AB97D9
Aa4.01:1 Poor#FFB3C9 on #586103
Aa4.01:1 Poor#586103 on #FFB3C9
Aa3.33:1 Poor#638E36 on #003936
Aa3.33:1 Poor#003936 on #638E36

Color blindness preview

CSS variables

/* Baby Pink to Elite Teal — https://swatchly.xyz/palette/ffb3c9-ab97d9-638e36-586103-003936 */
:root {
  --baby-pink: #ffb3c9;
  --violet-velvet: #ab97d9;
  --hidden-paradise: #638e36;
  --forestial-outpost: #586103;
  --elite-teal: #003936;
}

Tailwind CSS v4

/* Baby Pink to Elite Teal — https://swatchly.xyz/palette/ffb3c9-ab97d9-638e36-586103-003936 */
@theme {
  --color-baby-pink: #ffb3c9;
  --color-baby-pink-50: #fff9fb;
  --color-baby-pink-100: #ffeef2;
  --color-baby-pink-200: #ffd4df;
  --color-baby-pink-300: #ffb3c9;
  --color-baby-pink-400: #d894a8;
  --color-baby-pink-500: #bb758a;
  --color-baby-pink-600: #9c596e;
  --color-baby-pink-700: #7f4256;
  --color-baby-pink-800: #653042;
  --color-baby-pink-900: #4e2231;
  --color-baby-pink-950: #33131e;
  --color-violet-velvet: #ab97d9;
  --color-violet-velvet-50: #f7f4ff;
  --color-violet-velvet-100: #efe9ff;
  --color-violet-velvet-200: #ded1ff;
  --color-violet-velvet-300: #c9b8f2;
  --color-violet-velvet-400: #ab97d9;
  --color-violet-velvet-500: #8f7bbb;
  --color-violet-velvet-600: #74619d;
  --color-violet-velvet-700: #5d4a82;
  --color-violet-velvet-800: #493869;
  --color-violet-velvet-900: #382a53;
  --color-violet-velvet-950: #231936;
  --color-hidden-paradise: #638e36;
  --color-hidden-paradise-50: #e3fecd;
  --color-hidden-paradise-100: #d5f4bc;
  --color-hidden-paradise-200: #bde19e;
  --color-hidden-paradise-300: #a2cb7e;
  --color-hidden-paradise-400: #7fab56;
  --color-hidden-paradise-500: #638e36;
  --color-hidden-paradise-600: #4b741c;
  --color-hidden-paradise-700: #395d06;
  --color-hidden-paradise-800: #2b4900;
  --color-hidden-paradise-900: #203900;
  --color-hidden-paradise-950: #132400;
  --color-forestial-outpost: #586103;
  --color-forestial-outpost-50: #f3fbcf;
  --color-forestial-outpost-100: #e8f1c0;
  --color-forestial-outpost-200: #d5dfa5;
  --color-forestial-outpost-300: #c0cb87;
  --color-forestial-outpost-400: #a1ac61;
  --color-forestial-outpost-500: #879242;
  --color-forestial-outpost-600: #6d7726;
  --color-forestial-outpost-700: #586103;
  --color-forestial-outpost-800: #454c00;
  --color-forestial-outpost-900: #343a00;
  --color-forestial-outpost-950: #202400;
  --color-elite-teal: #003936;
  --color-elite-teal-50: #e0fcf9;
  --color-elite-teal-100: #d3f3f0;
  --color-elite-teal-200: #bbe0dd;
  --color-elite-teal-300: #a0cbc7;
  --color-elite-teal-400: #7caca7;
  --color-elite-teal-500: #5e908c;
  --color-elite-teal-600: #447571;
  --color-elite-teal-700: #305d59;
  --color-elite-teal-800: #214845;
  --color-elite-teal-900: #003936;
  --color-elite-teal-950: #0a2220;
}