Start generating

Sea Serpent to Evergreen color palette

00C9CESea SerpentB2D9FCDroplet39A9ADTwilight Meadow003142Nordic Noir2E9077Pool Table005847Evergreen
Open in generator Export PNG, PDF, ASE…

About this palette

Sea Serpent to Evergreen is a 6-color cool palette: #00C9CE (Sea Serpent), #B2D9FC (Droplet), #39A9AD (Twilight Meadow), #003142 (Nordic Noir), #2E9077 (Pool Table), #005847 (Evergreen). It mixes turquoise, blue tones and feels cool overall. The strongest text pairing is #B2D9FC on #003142 with a contrast ratio of 9.37:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Sea Serpentrgb(0, 201, 206)hsl(181, 100%, 40%)
Dropletrgb(178, 217, 252)hsl(208, 93%, 84%)
Twilight Meadowrgb(57, 169, 173)hsl(182, 50%, 45%)
Nordic Noirrgb(0, 49, 66)hsl(195, 100%, 13%)
Pool Tablergb(46, 144, 119)hsl(165, 52%, 37%)
Evergreenrgb(0, 88, 71)hsl(168, 100%, 17%)

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.37:1 Very good#B2D9FC on #003142
  • Aa9.37:1 Very good#003142 on #B2D9FC
  • Aa6.75:1 Good#00C9CE on #003142
  • Aa6.75:1 Good#003142 on #00C9CE
  • Aa5.72:1 Good#B2D9FC on #005847
  • Aa5.72:1 Good#005847 on #B2D9FC
  • Aa4.91:1 Good#39A9AD on #003142
  • Aa4.91:1 Good#003142 on #39A9AD

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Sea Serpent to Evergreen — https://swatchly.xyz/palette/00c9ce-b2d9fc-39a9ad-003142-2e9077-005847 */
:root {
  --sea-serpent: #00c9ce;
  --droplet: #b2d9fc;
  --twilight-meadow: #39a9ad;
  --nordic-noir: #003142;
  --pool-table: #2e9077;
  --evergreen: #005847;
}

Tailwind CSS v4

/* Sea Serpent to Evergreen — https://swatchly.xyz/palette/00c9ce-b2d9fc-39a9ad-003142-2e9077-005847 */
@theme {
  --color-sea-serpent: #00c9ce;
  --color-sea-serpent-50: #edffff;
  --color-sea-serpent-100: #cefeff;
  --color-sea-serpent-200: #99f4f7;
  --color-sea-serpent-300: #73e3e6;
  --color-sea-serpent-400: #00c9ce;
  --color-sea-serpent-500: #00a7ab;
  --color-sea-serpent-600: #008689;
  --color-sea-serpent-700: #006a6c;
  --color-sea-serpent-800: #005154;
  --color-sea-serpent-900: #003d3f;
  --color-sea-serpent-950: #002526;
  --color-droplet: #b2d9fc;
  --color-droplet-50: #e9f4ff;
  --color-droplet-100: #d6ebff;
  --color-droplet-200: #b2d9fc;
  --color-droplet-300: #a1c2e0;
  --color-droplet-400: #80a4c4;
  --color-droplet-500: #6489a9;
  --color-droplet-600: #4c6f8d;
  --color-droplet-700: #385874;
  --color-droplet-800: #29455d;
  --color-droplet-900: #1d354a;
  --color-droplet-950: #102130;
  --color-twilight-meadow: #39a9ad;
  --color-twilight-meadow-50: #c6fdff;
  --color-twilight-meadow-100: #b3f3f5;
  --color-twilight-meadow-200: #91e0e2;
  --color-twilight-meadow-300: #6dc9cc;
  --color-twilight-meadow-400: #39a9ad;
  --color-twilight-meadow-500: #0c8f93;
  --color-twilight-meadow-600: #007477;
  --color-twilight-meadow-700: #005c5f;
  --color-twilight-meadow-800: #00494b;
  --color-twilight-meadow-900: #00393b;
  --color-twilight-meadow-950: #002526;
  --color-nordic-noir: #003142;
  --color-nordic-noir-50: #e9f8ff;
  --color-nordic-noir-100: #d4f0fe;
  --color-nordic-noir-200: #bcdeee;
  --color-nordic-noir-300: #a1c8da;
  --color-nordic-noir-400: #7ca7bb;
  --color-nordic-noir-500: #5e8b9e;
  --color-nordic-noir-600: #446e81;
  --color-nordic-noir-700: #305667;
  --color-nordic-noir-800: #20414f;
  --color-nordic-noir-900: #003142;
  --color-nordic-noir-950: #0a1d25;
  --color-pool-table: #2e9077;
  --color-pool-table-50: #d3fff0;
  --color-pool-table-100: #bef6e3;
  --color-pool-table-200: #9fe3cd;
  --color-pool-table-300: #7ecdb5;
  --color-pool-table-400: #52ad93;
  --color-pool-table-500: #2e9077;
  --color-pool-table-600: #0a765f;
  --color-pool-table-700: #005e4b;
  --color-pool-table-800: #004a3a;
  --color-pool-table-900: #003a2d;
  --color-pool-table-950: #00251c;
  --color-evergreen: #005847;
  --color-evergreen-50: #d9fff3;
  --color-evergreen-100: #cbf6e8;
  --color-evergreen-200: #b1e5d4;
  --color-evergreen-300: #96d1bf;
  --color-evergreen-400: #71b4a1;
  --color-evergreen-500: #549a87;
  --color-evergreen-600: #39816e;
  --color-evergreen-700: #256a59;
  --color-evergreen-800: #005847;
  --color-evergreen-900: #094437;
  --color-evergreen-950: #012c22;
}

Similar palettes