Pine Scented Lagoon to Matt Pink Color Palette

About this palette

Pine Scented Lagoon to Matt Pink is a 5-color cool, vintage palette: #007067 (Pine Scented Lagoon), #384178 (Evening Magic), #B6B46F (Motherland), #00A1A7 (Baltic), #FFB4C0 (Matt Pink). It mixes turquoise, blue, yellow, pink tones and feels cool overall. The strongest text pairing is #384178 on #FFB4C0 with a contrast ratio of 5.71:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pine Scented Lagoon	rgb(0, 112, 103)	hsl(175, 100%, 22%)
Evening Magic	rgb(56, 65, 120)	hsl(232, 36%, 35%)
Motherland	rgb(182, 180, 111)	hsl(58, 33%, 57%)
Baltic	rgb(0, 161, 167)	hsl(182, 100%, 33%)
Matt Pink	rgb(255, 180, 192)	hsl(350, 100%, 85%)

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.

Aa5.71:1 Good#384178 on #FFB4C0
Aa5.71:1 Good#FFB4C0 on #384178
Aa4.44:1 Poor#384178 on #B6B46F
Aa4.44:1 Poor#B6B46F on #384178
Aa3.57:1 Poor#007067 on #FFB4C0
Aa3.57:1 Poor#FFB4C0 on #007067
Aa3.03:1 Poor#384178 on #00A1A7
Aa3.03:1 Poor#00A1A7 on #384178

Color blindness preview

CSS variables

/* Pine Scented Lagoon to Matt Pink — https://swatchly.xyz/palette/007067-384178-b6b46f-00a1a7-ffb4c0 */
:root {
  --pine-scented-lagoon: #007067;
  --evening-magic: #384178;
  --motherland: #b6b46f;
  --baltic: #00a1a7;
  --matt-pink: #ffb4c0;
}

Tailwind CSS v4

/* Pine Scented Lagoon to Matt Pink — https://swatchly.xyz/palette/007067-384178-b6b46f-00a1a7-ffb4c0 */
@theme {
  --color-pine-scented-lagoon: #007067;
  --color-pine-scented-lagoon-50: #d7fff9;
  --color-pine-scented-lagoon-100: #c1f6ee;
  --color-pine-scented-lagoon-200: #a2e2d9;
  --color-pine-scented-lagoon-300: #80cbc1;
  --color-pine-scented-lagoon-400: #55aaa0;
  --color-pine-scented-lagoon-500: #328d83;
  --color-pine-scented-lagoon-600: #007067;
  --color-pine-scented-lagoon-700: #005952;
  --color-pine-scented-lagoon-800: #004640;
  --color-pine-scented-lagoon-900: #003631;
  --color-pine-scented-lagoon-950: #00221f;
  --color-evening-magic: #384178;
  --color-evening-magic-50: #f2f5ff;
  --color-evening-magic-100: #e5eaff;
  --color-evening-magic-200: #cbd5ff;
  --color-evening-magic-300: #b2bff6;
  --color-evening-magic-400: #929fdb;
  --color-evening-magic-500: #7784c1;
  --color-evening-magic-600: #5f6aa4;
  --color-evening-magic-700: #4a548a;
  --color-evening-magic-800: #384178;
  --color-evening-magic-900: #2b325b;
  --color-evening-magic-950: #1a1f3c;
  --color-motherland: #b6b46f;
  --color-motherland-50: #fdfdda;
  --color-motherland-100: #f6f6cf;
  --color-motherland-200: #e6e5b6;
  --color-motherland-300: #d2d19a;
  --color-motherland-400: #b6b46f;
  --color-motherland-500: #989652;
  --color-motherland-600: #7b7834;
  --color-motherland-700: #615f1d;
  --color-motherland-800: #4b490c;
  --color-motherland-900: #393702;
  --color-motherland-950: #222100;
  --color-baltic: #00a1a7;
  --color-baltic-50: #defeff;
  --color-baltic-100: #bafcff;
  --color-baltic-200: #9becef;
  --color-baltic-300: #79d8dd;
  --color-baltic-400: #46bbc1;
  --color-baltic-500: #00a1a7;
  --color-baltic-600: #008287;
  --color-baltic-700: #00676b;
  --color-baltic-800: #005053;
  --color-baltic-900: #003d40;
  --color-baltic-950: #002628;
  --color-matt-pink: #ffb4c0;
  --color-matt-pink-50: #fff9fa;
  --color-matt-pink-100: #ffeef0;
  --color-matt-pink-200: #ffd4da;
  --color-matt-pink-300: #ffb4c0;
  --color-matt-pink-400: #d895a0;
  --color-matt-pink-500: #bb7682;
  --color-matt-pink-600: #9c5a66;
  --color-matt-pink-700: #7f434f;
  --color-matt-pink-800: #65313c;
  --color-matt-pink-900: #4e232c;
  --color-matt-pink-950: #33141a;
}