Yucca to Sunken Harbour Color Palette

About this palette

Yucca to Sunken Harbour is a 5-color muted, cool palette: #6F9A8C (Yucca), #C8ECE0 (Caribbean), #4C6244 (Muddy Olive), #9EB5A2 (Copper Patina), #1C4048 (Sunken Harbour). It mixes turquoise, green tones and feels cool overall. The strongest text pairing is #C8ECE0 on #1C4048 with a contrast ratio of 8.81:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Yucca	rgb(111, 154, 140)	hsl(160, 18%, 52%)
Caribbean	rgb(200, 236, 224)	hsl(160, 49%, 85%)
Muddy Olive	rgb(76, 98, 68)	hsl(104, 18%, 33%)
Copper Patina	rgb(158, 181, 162)	hsl(130, 13%, 66%)
Sunken Harbour	rgb(28, 64, 72)	hsl(191, 44%, 20%)

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.81:1 Very good#C8ECE0 on #1C4048
Aa8.81:1 Very good#1C4048 on #C8ECE0
Aa5.27:1 Good#C8ECE0 on #4C6244
Aa5.27:1 Good#4C6244 on #C8ECE0
Aa5.11:1 Good#9EB5A2 on #1C4048
Aa5.11:1 Good#1C4048 on #9EB5A2
Aa3.56:1 Poor#6F9A8C on #1C4048
Aa3.56:1 Poor#1C4048 on #6F9A8C

Color blindness preview

CSS variables

/* Yucca to Sunken Harbour — https://swatchly.xyz/palette/6f9a8c-c8ece0-4c6244-9eb5a2-1c4048 */
:root {
  --yucca: #6f9a8c;
  --caribbean: #c8ece0;
  --muddy-olive: #4c6244;
  --copper-patina: #9eb5a2;
  --sunken-harbour: #1c4048;
}

Tailwind CSS v4

/* Yucca to Sunken Harbour — https://swatchly.xyz/palette/6f9a8c-c8ece0-4c6244-9eb5a2-1c4048 */
@theme {
  --color-yucca: #6f9a8c;
  --color-yucca-50: #e5fdf5;
  --color-yucca-100: #dbf6ec;
  --color-yucca-200: #c5e5da;
  --color-yucca-300: #acd1c4;
  --color-yucca-400: #8bb4a6;
  --color-yucca-500: #6f9a8c;
  --color-yucca-600: #537d70;
  --color-yucca-700: #3d6458;
  --color-yucca-800: #2c4e44;
  --color-yucca-900: #1f3c33;
  --color-yucca-950: #10251f;
  --color-caribbean: #c8ece0;
  --color-caribbean-50: #def4ec;
  --color-caribbean-100: #c8ece0;
  --color-caribbean-200: #bcd8ce;
  --color-caribbean-300: #a5c3b9;
  --color-caribbean-400: #85a69b;
  --color-caribbean-500: #6b8c81;
  --color-caribbean-600: #537268;
  --color-caribbean-700: #3f5c53;
  --color-caribbean-800: #2f4941;
  --color-caribbean-900: #223831;
  --color-caribbean-950: #13231e;
  --color-muddy-olive: #4c6244;
  --color-muddy-olive-50: #ecfae7;
  --color-muddy-olive-100: #e1f1db;
  --color-muddy-olive-200: #ccdfc6;
  --color-muddy-olive-300: #b5caae;
  --color-muddy-olive-400: #95ad8d;
  --color-muddy-olive-500: #7b9272;
  --color-muddy-olive-600: #627859;
  --color-muddy-olive-700: #4c6244;
  --color-muddy-olive-800: #3b4d34;
  --color-muddy-olive-900: #2c3b26;
  --color-muddy-olive-950: #1a2516;
  --color-copper-patina: #9eb5a2;
  --color-copper-patina-50: #f1fdf3;
  --color-copper-patina-100: #e8f6eb;
  --color-copper-patina-200: #d5e5d8;
  --color-copper-patina-300: #bfd1c2;
  --color-copper-patina-400: #9eb5a2;
  --color-copper-patina-500: #819785;
  --color-copper-patina-600: #657a68;
  --color-copper-patina-700: #4d6151;
  --color-copper-patina-800: #3a4b3d;
  --color-copper-patina-900: #2a392d;
  --color-copper-patina-950: #18221a;
  --color-sunken-harbour: #1c4048;
  --color-sunken-harbour-50: #e4faff;
  --color-sunken-harbour-100: #d8f0f6;
  --color-sunken-harbour-200: #c1dde5;
  --color-sunken-harbour-300: #a7c8d0;
  --color-sunken-harbour-400: #86aab3;
  --color-sunken-harbour-500: #6b9099;
  --color-sunken-harbour-600: #53777f;
  --color-sunken-harbour-700: #3f6169;
  --color-sunken-harbour-800: #304e55;
  --color-sunken-harbour-900: #1c4048;
  --color-sunken-harbour-950: #14282d;
}