Wakame Green to Morocco Color Palette

About this palette

Wakame Green to Morocco is a 5-color warm, vintage palette: #006469 (Wakame Green), #0A3034 (Elite Teal), #FFDEE0 (Pink Pleasure), #FFAFAB (Peach Bud), #B7736F (Morocco). It mixes turquoise, pink, red tones and feels warm overall. The strongest text pairing is #0A3034 on #FFDEE0 with a contrast ratio of 11.30:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wakame Green	rgb(0, 100, 105)	hsl(183, 100%, 21%)
Elite Teal	rgb(10, 48, 52)	hsl(186, 68%, 12%)
Pink Pleasure	rgb(255, 222, 224)	hsl(356, 100%, 94%)
Peach Bud	rgb(255, 175, 171)	hsl(3, 100%, 84%)
Morocco	rgb(183, 115, 111)	hsl(3, 33%, 58%)

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.

Aa11.30:1 Very good#0A3034 on #FFDEE0
Aa11.30:1 Very good#FFDEE0 on #0A3034
Aa8.06:1 Very good#0A3034 on #FFAFAB
Aa8.06:1 Very good#FFAFAB on #0A3034
Aa5.54:1 Good#006469 on #FFDEE0
Aa5.54:1 Good#FFDEE0 on #006469
Aa3.96:1 Poor#006469 on #FFAFAB
Aa3.96:1 Poor#FFAFAB on #006469

Color blindness preview

CSS variables

/* Wakame Green to Morocco — https://swatchly.xyz/palette/006469-0a3034-ffdee0-ffafab-b7736f */
:root {
  --wakame-green: #006469;
  --elite-teal: #0a3034;
  --pink-pleasure: #ffdee0;
  --peach-bud: #ffafab;
  --morocco: #b7736f;
}

Tailwind CSS v4

/* Wakame Green to Morocco — https://swatchly.xyz/palette/006469-0a3034-ffdee0-ffafab-b7736f */
@theme {
  --color-wakame-green: #006469;
  --color-wakame-green-50: #dafdff;
  --color-wakame-green-100: #c7f6f8;
  --color-wakame-green-200: #ace4e7;
  --color-wakame-green-300: #8ecfd3;
  --color-wakame-green-400: #67b1b6;
  --color-wakame-green-500: #47969b;
  --color-wakame-green-600: #2a7b80;
  --color-wakame-green-700: #006469;
  --color-wakame-green-800: #004e52;
  --color-wakame-green-900: #003c40;
  --color-wakame-green-950: #002628;
  --color-elite-teal: #0a3034;
  --color-elite-teal-50: #e4fafd;
  --color-elite-teal-100: #d8f1f3;
  --color-elite-teal-200: #c1dee1;
  --color-elite-teal-300: #a7c8cc;
  --color-elite-teal-400: #83a7ac;
  --color-elite-teal-500: #658a8f;
  --color-elite-teal-600: #4a6e72;
  --color-elite-teal-700: #355559;
  --color-elite-teal-800: #254043;
  --color-elite-teal-900: #0a3034;
  --color-elite-teal-950: #0c1b1d;
  --color-pink-pleasure: #ffdee0;
  --color-pink-pleasure-50: #ffedee;
  --color-pink-pleasure-100: #ffdee0;
  --color-pink-pleasure-200: #e6cdcf;
  --color-pink-pleasure-300: #d2b7b8;
  --color-pink-pleasure-400: #b59799;
  --color-pink-pleasure-500: #9a7c7e;
  --color-pink-pleasure-600: #7f6365;
  --color-pink-pleasure-700: #674e50;
  --color-pink-pleasure-800: #523c3d;
  --color-pink-pleasure-900: #402d2f;
  --color-pink-pleasure-950: #281b1c;
  --color-peach-bud: #ffafab;
  --color-peach-bud-50: #fff6f5;
  --color-peach-bud-100: #ffeae8;
  --color-peach-bud-200: #ffd0cd;
  --color-peach-bud-300: #ffafab;
  --color-peach-bud-400: #d9908d;
  --color-peach-bud-500: #bd7370;
  --color-peach-bud-600: #9e5755;
  --color-peach-bud-700: #814140;
  --color-peach-bud-800: #67302f;
  --color-peach-bud-900: #512222;
  --color-peach-bud-950: #351313;
  --color-morocco: #b7736f;
  --color-morocco-50: #fff2f1;
  --color-morocco-100: #ffe5e3;
  --color-morocco-200: #ffcac5;
  --color-morocco-300: #efb0ac;
  --color-morocco-400: #d28f8a;
  --color-morocco-500: #b7736f;
  --color-morocco-600: #995955;
  --color-morocco-700: #7d4341;
  --color-morocco-800: #653230;
  --color-morocco-900: #502523;
  --color-morocco-950: #341514;
}