Antiguan to Marshland color palette

C2DCDAAntiguan A0C4C8Continental Waters 71A19DEmerald Oasis 42626AMediterranea 364639Deep Forest 212F26Marshland

Open in generator Export PNG, PDF, ASE…

About this palette

Antiguan to Marshland is a 6-color muted palette: #C2DCDA (Antiguan), #A0C4C8 (Continental Waters), #71A19D (Emerald Oasis), #42626A (Mediterranea), #364639 (Deep Forest), #212F26 (Marshland). It mixes gray, turquoise, blue tones and feels cool overall. The strongest text pairing is #C2DCDA on #212F26 with a contrast ratio of 9.70:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Antiguan	rgb(194, 220, 218)	hsl(175, 27%, 81%)
Continental Waters	rgb(160, 196, 200)	hsl(186, 27%, 71%)
Emerald Oasis	rgb(113, 161, 157)	hsl(175, 20%, 54%)
Mediterranea	rgb(66, 98, 106)	hsl(192, 23%, 34%)
Deep Forest	rgb(54, 70, 57)	hsl(131, 13%, 24%)
Marshland	rgb(33, 47, 38)	hsl(141, 18%, 16%)

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.

Aa9.70:1 Very good#C2DCDA on #212F26
Aa9.70:1 Very good#212F26 on #C2DCDA
Aa7.49:1 Very good#A0C4C8 on #212F26
Aa7.49:1 Very good#212F26 on #A0C4C8
Aa6.95:1 Good#C2DCDA on #364639
Aa6.95:1 Good#364639 on #C2DCDA
Aa5.37:1 Good#A0C4C8 on #364639
Aa5.37:1 Good#364639 on #A0C4C8

Color blindness preview

CSS variables

/* Antiguan to Marshland — https://swatchly.xyz/palette/c2dcda-a0c4c8-71a19d-42626a-364639-212f26 */
:root {
  --antiguan: #c2dcda;
  --continental-waters: #a0c4c8;
  --emerald-oasis: #71a19d;
  --mediterranea: #42626a;
  --deep-forest: #364639;
  --marshland: #212f26;
}

Tailwind CSS v4

/* Antiguan to Marshland — https://swatchly.xyz/palette/c2dcda-a0c4c8-71a19d-42626a-364639-212f26 */
@theme {
  --color-antiguan: #c2dcda;
  --color-antiguan-50: #e9f8f6;
  --color-antiguan-100: #ddeeec;
  --color-antiguan-200: #c2dcda;
  --color-antiguan-300: #afc5c3;
  --color-antiguan-400: #8ea6a4;
  --color-antiguan-500: #738b89;
  --color-antiguan-600: #5a716f;
  --color-antiguan-700: #455a58;
  --color-antiguan-800: #344745;
  --color-antiguan-900: #273635;
  --color-antiguan-950: #172221;
  --color-continental-waters: #a0c4c8;
  --color-continental-waters-50: #e3f7fa;
  --color-continental-waters-100: #d6edf0;
  --color-continental-waters-200: #bedadd;
  --color-continental-waters-300: #a0c4c8;
  --color-continental-waters-400: #83a5a9;
  --color-continental-waters-500: #688a8e;
  --color-continental-waters-600: #507074;
  --color-continental-waters-700: #3c5a5d;
  --color-continental-waters-800: #2c474a;
  --color-continental-waters-900: #21373a;
  --color-continental-waters-950: #122224;
  --color-emerald-oasis: #71a19d;
  --color-emerald-oasis-50: #dcf8f5;
  --color-emerald-oasis-100: #cdedea;
  --color-emerald-oasis-200: #b2d9d5;
  --color-emerald-oasis-300: #96c1bd;
  --color-emerald-oasis-400: #71a19d;
  --color-emerald-oasis-500: #588784;
  --color-emerald-oasis-600: #416e6b;
  --color-emerald-oasis-700: #2f5956;
  --color-emerald-oasis-800: #224644;
  --color-emerald-oasis-900: #183835;
  --color-emerald-oasis-950: #0c2422;
  --color-mediterranea: #42626a;
  --color-mediterranea-50: #e6f9fe;
  --color-mediterranea-100: #daf0f5;
  --color-mediterranea-200: #c4dee5;
  --color-mediterranea-300: #acc9d1;
  --color-mediterranea-400: #8bacb4;
  --color-mediterranea-500: #70929a;
  --color-mediterranea-600: #587880;
  --color-mediterranea-700: #42626a;
  --color-mediterranea-800: #324d53;
  --color-mediterranea-900: #243b41;
  --color-mediterranea-950: #142529;
  --color-deep-forest: #364639;
  --color-deep-forest-50: #eef8ef;
  --color-deep-forest-100: #e3efe5;
  --color-deep-forest-200: #cedcd0;
  --color-deep-forest-300: #b6c6b8;
  --color-deep-forest-400: #95a698;
  --color-deep-forest-500: #798b7c;
  --color-deep-forest-600: #5f7062;
  --color-deep-forest-700: #4a594c;
  --color-deep-forest-800: #364639;
  --color-deep-forest-900: #2a352c;
  --color-deep-forest-950: #19211a;
  --color-marshland: #212f26;
  --color-marshland-50: #eef8f1;
  --color-marshland-100: #e3eee7;
  --color-marshland-200: #cedbd2;
  --color-marshland-300: #b6c5bb;
  --color-marshland-400: #94a59a;
  --color-marshland-500: #78887d;
  --color-marshland-600: #5d6c62;
  --color-marshland-700: #46544b;
  --color-marshland-800: #333f37;
  --color-marshland-900: #212f26;
  --color-marshland-950: #151b17;
}