Start generating

Cerulean Skies to Baltic color palette

8ACCCACerulean Skies8EEAE4Bath Water00494BTropical Forest008188Teal176064Beau Vert209EA5Baltic
Open in generator Export PNG, PDF, ASE…

About this palette

Cerulean Skies to Baltic is a 6-color cool, monochromatic palette: #8ACCCA (Cerulean Skies), #8EEAE4 (Bath Water), #00494B (Tropical Forest), #008188 (Teal), #176064 (Beau Vert), #209EA5 (Baltic). It mixes turquoise tones and feels cool overall. The strongest text pairing is #8EEAE4 on #00494B with a contrast ratio of 7.32:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Cerulean Skiesrgb(138, 204, 202)hsl(178, 39%, 67%)
Bath Waterrgb(142, 234, 228)hsl(176, 69%, 74%)
Tropical Forestrgb(0, 73, 75)hsl(182, 100%, 15%)
Tealrgb(0, 129, 136)hsl(183, 100%, 27%)
Beau Vertrgb(23, 96, 100)hsl(183, 63%, 24%)
Balticrgb(32, 158, 165)hsl(183, 68%, 39%)

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.

  • Aa7.32:1 Very good#8EEAE4 on #00494B
  • Aa7.32:1 Very good#00494B on #8EEAE4
  • Aa5.63:1 Good#8ACCCA on #00494B
  • Aa5.63:1 Good#00494B on #8ACCCA
  • Aa5.20:1 Good#8EEAE4 on #176064
  • Aa5.20:1 Good#176064 on #8EEAE4
  • Aa4.00:1 Poor#8ACCCA on #176064
  • Aa4.00:1 Poor#176064 on #8ACCCA

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Cerulean Skies to Baltic — https://swatchly.xyz/palette/8accca-8eeae4-00494b-008188-176064-209ea5 */
:root {
  --cerulean-skies: #8accca;
  --bath-water: #8eeae4;
  --tropical-forest: #00494b;
  --teal: #008188;
  --beau-vert: #176064;
  --baltic: #209ea5;
}

Tailwind CSS v4

/* Cerulean Skies to Baltic — https://swatchly.xyz/palette/8accca-8eeae4-00494b-008188-176064-209ea5 */
@theme {
  --color-cerulean-skies: #8accca;
  --color-cerulean-skies-50: #d8fcfb;
  --color-cerulean-skies-100: #caf3f1;
  --color-cerulean-skies-200: #afe0de;
  --color-cerulean-skies-300: #8accca;
  --color-cerulean-skies-400: #6eacaa;
  --color-cerulean-skies-500: #509190;
  --color-cerulean-skies-600: #367675;
  --color-cerulean-skies-700: #225f5e;
  --color-cerulean-skies-800: #144b4a;
  --color-cerulean-skies-900: #0a3b3a;
  --color-cerulean-skies-950: #032524;
  --color-bath-water: #8eeae4;
  --color-bath-water-50: #d3fffb;
  --color-bath-water-100: #c1f7f3;
  --color-bath-water-200: #8eeae4;
  --color-bath-water-300: #84d1cb;
  --color-bath-water-400: #5ab2ad;
  --color-bath-water-500: #379792;
  --color-bath-water-600: #137b77;
  --color-bath-water-700: #00635f;
  --color-bath-water-800: #004d4a;
  --color-bath-water-900: #003c39;
  --color-bath-water-950: #002524;
  --color-tropical-forest: #00494b;
  --color-tropical-forest-50: #dcfdfd;
  --color-tropical-forest-100: #cef4f4;
  --color-tropical-forest-200: #b5e1e2;
  --color-tropical-forest-300: #98cbcd;
  --color-tropical-forest-400: #72acae;
  --color-tropical-forest-500: #549092;
  --color-tropical-forest-600: #3a7476;
  --color-tropical-forest-700: #265c5e;
  --color-tropical-forest-800: #00494b;
  --color-tropical-forest-900: #0d3738;
  --color-tropical-forest-950: #052223;
  --color-teal: #008188;
  --color-teal-50: #dbfdff;
  --color-teal-100: #c0f8fc;
  --color-teal-200: #a4e8ec;
  --color-teal-300: #84d4d9;
  --color-teal-400: #59b6bd;
  --color-teal-500: #349ca2;
  --color-teal-600: #008188;
  --color-teal-700: #00666c;
  --color-teal-800: #005055;
  --color-teal-900: #003e41;
  --color-teal-950: #002729;
  --color-beau-vert: #176064;
  --color-beau-vert-50: #dafdff;
  --color-beau-vert-100: #cbf4f7;
  --color-beau-vert-200: #b1e2e5;
  --color-beau-vert-300: #94cdd0;
  --color-beau-vert-400: #6eaeb2;
  --color-beau-vert-500: #4f9296;
  --color-beau-vert-600: #35777b;
  --color-beau-vert-700: #176064;
  --color-beau-vert-800: #114b4e;
  --color-beau-vert-900: #073a3d;
  --color-beau-vert-950: #022426;
  --color-baltic: #209ea5;
  --color-baltic-50: #defdff;
  --color-baltic-100: #bdfafe;
  --color-baltic-200: #9feaee;
  --color-baltic-300: #7ed6db;
  --color-baltic-400: #4fb9bf;
  --color-baltic-500: #209ea5;
  --color-baltic-600: #008086;
  --color-baltic-700: #00666b;
  --color-baltic-800: #004f53;
  --color-baltic-900: #003d40;
  --color-baltic-950: #002628;
}

Similar palettes