Verdant Forest to Sunken Harbour color palette

30605BVerdant Forest 8FA7B5Robotic Gods B4DED2Jade Sea 668999Horizon DDFCFFCold Canada 143F48Sunken Harbour

Open in generator Export PNG, PDF, ASE…

About this palette

Verdant Forest to Sunken Harbour is a 6-color muted, cool palette: #30605B (Verdant Forest), #8FA7B5 (Robotic Gods), #B4DED2 (Jade Sea), #668999 (Horizon), #DDFCFF (Cold Canada), #143F48 (Sunken Harbour). It mixes turquoise, gray, blue, white tones and feels cool overall. The strongest text pairing is #DDFCFF on #143F48 with a contrast ratio of 10.60:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Verdant Forest	rgb(48, 96, 91)	hsl(174, 33%, 28%)
Robotic Gods	rgb(143, 167, 181)	hsl(202, 20%, 64%)
Jade Sea	rgb(180, 222, 210)	hsl(163, 39%, 79%)
Horizon	rgb(102, 137, 153)	hsl(199, 20%, 50%)
Cold Canada	rgb(221, 252, 255)	hsl(185, 100%, 93%)
Sunken Harbour	rgb(20, 63, 72)	hsl(190, 57%, 18%)

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.

Aa10.60:1 Very good#DDFCFF on #143F48
Aa10.60:1 Very good#143F48 on #DDFCFF
Aa7.81:1 Very good#B4DED2 on #143F48
Aa7.81:1 Very good#143F48 on #B4DED2
Aa6.59:1 Good#30605B on #DDFCFF
Aa6.59:1 Good#DDFCFF on #30605B
Aa4.85:1 Good#30605B on #B4DED2
Aa4.85:1 Good#B4DED2 on #30605B

Color blindness preview

CSS variables

/* Verdant Forest to Sunken Harbour — https://swatchly.xyz/palette/30605b-8fa7b5-b4ded2-668999-ddfcff-143f48 */
:root {
  --verdant-forest: #30605b;
  --robotic-gods: #8fa7b5;
  --jade-sea: #b4ded2;
  --horizon: #668999;
  --cold-canada: #ddfcff;
  --sunken-harbour: #143f48;
}

Tailwind CSS v4

/* Verdant Forest to Sunken Harbour — https://swatchly.xyz/palette/30605b-8fa7b5-b4ded2-668999-ddfcff-143f48 */
@theme {
  --color-verdant-forest: #30605b;
  --color-verdant-forest-50: #e0fcf8;
  --color-verdant-forest-100: #d4f3ef;
  --color-verdant-forest-200: #bce1dc;
  --color-verdant-forest-300: #a1cbc6;
  --color-verdant-forest-400: #7eada7;
  --color-verdant-forest-500: #61928c;
  --color-verdant-forest-600: #487771;
  --color-verdant-forest-700: #30605b;
  --color-verdant-forest-800: #244b47;
  --color-verdant-forest-900: #193a37;
  --color-verdant-forest-950: #0c2422;
  --color-robotic-gods: #8fa7b5;
  --color-robotic-gods-50: #ecf8ff;
  --color-robotic-gods-100: #dfeff8;
  --color-robotic-gods-200: #c9dce7;
  --color-robotic-gods-300: #b1c6d2;
  --color-robotic-gods-400: #8fa7b5;
  --color-robotic-gods-500: #748b99;
  --color-robotic-gods-600: #5a707d;
  --color-robotic-gods-700: #455965;
  --color-robotic-gods-800: #344650;
  --color-robotic-gods-900: #26353e;
  --color-robotic-gods-950: #162127;
  --color-jade-sea: #b4ded2;
  --color-jade-sea-50: #e1f9f1;
  --color-jade-sea-100: #d4efe7;
  --color-jade-sea-200: #b4ded2;
  --color-jade-sea-300: #a3c7bc;
  --color-jade-sea-400: #82a99e;
  --color-jade-sea-500: #668e83;
  --color-jade-sea-600: #4e7469;
  --color-jade-sea-700: #3a5d54;
  --color-jade-sea-800: #2b4941;
  --color-jade-sea-900: #1e3932;
  --color-jade-sea-950: #10231f;
  --color-horizon: #668999;
  --color-horizon-50: #e8f8ff;
  --color-horizon-100: #d7eef9;
  --color-horizon-200: #bfdbe8;
  --color-horizon-300: #a5c4d3;
  --color-horizon-400: #82a5b5;
  --color-horizon-500: #668999;
  --color-horizon-600: #4d6f7e;
  --color-horizon-700: #3a5866;
  --color-horizon-800: #2a4551;
  --color-horizon-900: #1f3540;
  --color-horizon-950: #112129;
  --color-cold-canada: #ddfcff;
  --color-cold-canada-50: #ddfcff;
  --color-cold-canada-100: #ddeff1;
  --color-cold-canada-200: #c6dcdf;
  --color-cold-canada-300: #adc6c9;
  --color-cold-canada-400: #8ca8aa;
  --color-cold-canada-500: #708c8f;
  --color-cold-canada-600: #567174;
  --color-cold-canada-700: #425a5d;
  --color-cold-canada-800: #314749;
  --color-cold-canada-900: #243738;
  --color-cold-canada-950: #152223;
  --color-sunken-harbour: #143f48;
  --color-sunken-harbour-50: #e4faff;
  --color-sunken-harbour-100: #d5f1f8;
  --color-sunken-harbour-200: #bddee6;
  --color-sunken-harbour-300: #a3c8d1;
  --color-sunken-harbour-400: #81abb5;
  --color-sunken-harbour-500: #66909b;
  --color-sunken-harbour-600: #4d7780;
  --color-sunken-harbour-700: #3a6069;
  --color-sunken-harbour-800: #2b4d55;
  --color-sunken-harbour-900: #143f48;
  --color-sunken-harbour-950: #11272d;
}