Aqua Obscura to Bermudagrass color palette

006B66Aqua Obscura 008A84Dark Cyan D2F3D8Jade Palace 003441Nordic Noir 6CBE7FBermudagrass

About this palette

Aqua Obscura to Bermudagrass is a 5-color cool palette: #006B66 (Aqua Obscura), #008A84 (Dark Cyan), #D2F3D8 (Jade Palace), #003441 (Nordic Noir), #6CBE7F (Bermudagrass). It mixes turquoise, green, blue tones and feels cool overall. The strongest text pairing is #D2F3D8 on #003441 with a contrast ratio of 11.20:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Aqua Obscura	rgb(0, 107, 102)	hsl(177, 100%, 21%)
Dark Cyan	rgb(0, 138, 132)	hsl(177, 100%, 27%)
Jade Palace	rgb(210, 243, 216)	hsl(131, 58%, 89%)
Nordic Noir	rgb(0, 52, 65)	hsl(192, 100%, 13%)
Bermudagrass	rgb(108, 190, 127)	hsl(134, 39%, 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.20:1 Very good#D2F3D8 on #003441
Aa11.20:1 Very good#003441 on #D2F3D8
Aa5.94:1 Good#003441 on #6CBE7F
Aa5.94:1 Good#6CBE7F on #003441
Aa5.33:1 Good#006B66 on #D2F3D8
Aa5.33:1 Good#D2F3D8 on #006B66
Aa3.53:1 Poor#008A84 on #D2F3D8
Aa3.53:1 Poor#D2F3D8 on #008A84

Color blindness preview

CSS variables

/* Aqua Obscura to Bermudagrass — https://swatchly.xyz/palette/006b66-008a84-d2f3d8-003441-6cbe7f */
:root {
  --aqua-obscura: #006b66;
  --dark-cyan: #008a84;
  --jade-palace: #d2f3d8;
  --nordic-noir: #003441;
  --bermudagrass: #6cbe7f;
}

Tailwind CSS v4

/* Aqua Obscura to Bermudagrass — https://swatchly.xyz/palette/006b66-008a84-d2f3d8-003441-6cbe7f */
@theme {
  --color-aqua-obscura: #006b66;
  --color-aqua-obscura-50: #d6fffb;
  --color-aqua-obscura-100: #c5f7f2;
  --color-aqua-obscura-200: #abe6e1;
  --color-aqua-obscura-300: #8ed3cd;
  --color-aqua-obscura-400: #67b6b0;
  --color-aqua-obscura-500: #479b96;
  --color-aqua-obscura-600: #2a817c;
  --color-aqua-obscura-700: #006b66;
  --color-aqua-obscura-800: #005450;
  --color-aqua-obscura-900: #00413d;
  --color-aqua-obscura-950: #002927;
  --color-dark-cyan: #008a84;
  --color-dark-cyan-50: #d6fffb;
  --color-dark-cyan-100: #c0fbf6;
  --color-dark-cyan-200: #a5ece6;
  --color-dark-cyan-300: #86d9d3;
  --color-dark-cyan-400: #5bbdb6;
  --color-dark-cyan-500: #35a49d;
  --color-dark-cyan-600: #008a84;
  --color-dark-cyan-700: #006e69;
  --color-dark-cyan-800: #005652;
  --color-dark-cyan-900: #00423f;
  --color-dark-cyan-950: #002927;
  --color-jade-palace: #d2f3d8;
  --color-jade-palace-50: #e7f9ea;
  --color-jade-palace-100: #d2f3d8;
  --color-jade-palace-200: #c5ddc9;
  --color-jade-palace-300: #acc8b1;
  --color-jade-palace-400: #8ca991;
  --color-jade-palace-500: #708e76;
  --color-jade-palace-600: #57745d;
  --color-jade-palace-700: #435d48;
  --color-jade-palace-800: #324937;
  --color-jade-palace-900: #253829;
  --color-jade-palace-950: #152318;
  --color-nordic-noir: #003441;
  --color-nordic-noir-50: #e7f9ff;
  --color-nordic-noir-100: #d3f1fb;
  --color-nordic-noir-200: #bbdeea;
  --color-nordic-noir-300: #a0c9d6;
  --color-nordic-noir-400: #7ca9b8;
  --color-nordic-noir-500: #5e8c9b;
  --color-nordic-noir-600: #44707f;
  --color-nordic-noir-700: #305865;
  --color-nordic-noir-800: #20444f;
  --color-nordic-noir-900: #003441;
  --color-nordic-noir-950: #0a1f25;
  --color-bermudagrass: #6cbe7f;
  --color-bermudagrass-50: #e7ffeb;
  --color-bermudagrass-100: #cdfdd6;
  --color-bermudagrass-200: #b4edbe;
  --color-bermudagrass-300: #97daa4;
  --color-bermudagrass-400: #6cbe7f;
  --color-bermudagrass-500: #4fa063;
  --color-bermudagrass-600: #318349;
  --color-bermudagrass-700: #196934;
  --color-bermudagrass-800: #055324;
  --color-bermudagrass-900: #004019;
  --color-bermudagrass-950: #00280c;
}