Terrestrial to Storm Color Palette

About this palette

Terrestrial to Storm is a 5-color dark, cool palette: #276961 (Terrestrial), #164C93 (Dancing Sea), #281148 (Silent Orbit), #1C3C45 (Sunken Harbour), #06043F (Storm). It mixes turquoise, blue, purple tones and feels cool overall. The strongest text pairing is #276961 on #06043F with a contrast ratio of 2.99:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Terrestrial	rgb(39, 105, 97)	hsl(173, 46%, 28%)
Dancing Sea	rgb(22, 76, 147)	hsl(214, 74%, 33%)
Silent Orbit	rgb(40, 17, 72)	hsl(265, 62%, 17%)
Sunken Harbour	rgb(28, 60, 69)	hsl(193, 42%, 19%)
Storm	rgb(6, 4, 63)	hsl(242, 88%, 13%)

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.

Color blindness preview

CSS variables

/* Terrestrial to Storm — https://swatchly.xyz/palette/276961-164c93-281148-1c3c45-06043f */
:root {
  --terrestrial: #276961;
  --dancing-sea: #164c93;
  --silent-orbit: #281148;
  --sunken-harbour: #1c3c45;
  --storm: #06043f;
}

Tailwind CSS v4

/* Terrestrial to Storm — https://swatchly.xyz/palette/276961-164c93-281148-1c3c45-06043f */
@theme {
  --color-terrestrial: #276961;
  --color-terrestrial-50: #dbfef8;
  --color-terrestrial-100: #cdf5ee;
  --color-terrestrial-200: #b5e4dd;
  --color-terrestrial-300: #9ad0c8;
  --color-terrestrial-400: #76b3aa;
  --color-terrestrial-500: #599990;
  --color-terrestrial-600: #3f7f77;
  --color-terrestrial-700: #276961;
  --color-terrestrial-800: #1a534c;
  --color-terrestrial-900: #0e403a;
  --color-terrestrial-950: #052925;
  --color-dancing-sea: #164c93;
  --color-dancing-sea-50: #eff6ff;
  --color-dancing-sea-100: #dfecff;
  --color-dancing-sea-200: #bdd8ff;
  --color-dancing-sea-300: #94c0ff;
  --color-dancing-sea-400: #699fea;
  --color-dancing-sea-500: #4b81cd;
  --color-dancing-sea-600: #3265ac;
  --color-dancing-sea-700: #164c93;
  --color-dancing-sea-800: #123b72;
  --color-dancing-sea-900: #0a2d5b;
  --color-dancing-sea-950: #041b3c;
  --color-silent-orbit: #281148;
  --color-silent-orbit-50: #f6f3ff;
  --color-silent-orbit-100: #ede7ff;
  --color-silent-orbit-200: #dccfff;
  --color-silent-orbit-300: #c7b6f0;
  --color-silent-orbit-400: #a895d4;
  --color-silent-orbit-500: #8e79b9;
  --color-silent-orbit-600: #73609c;
  --color-silent-orbit-700: #5d4a82;
  --color-silent-orbit-800: #493969;
  --color-silent-orbit-900: #392b55;
  --color-silent-orbit-950: #281148;
  --color-sunken-harbour: #1c3c45;
  --color-sunken-harbour-50: #e6f9ff;
  --color-sunken-harbour-100: #daf0f7;
  --color-sunken-harbour-200: #c2dde5;
  --color-sunken-harbour-300: #a9c7d0;
  --color-sunken-harbour-400: #88a9b3;
  --color-sunken-harbour-500: #6c8e98;
  --color-sunken-harbour-600: #54747e;
  --color-sunken-harbour-700: #405e67;
  --color-sunken-harbour-800: #304b53;
  --color-sunken-harbour-900: #1c3c45;
  --color-sunken-harbour-950: #14252a;
  --color-storm: #06043f;
  --color-storm-50: #f1f5ff;
  --color-storm-100: #e4ebff;
  --color-storm-200: #c9d6ff;
  --color-storm-300: #abbefc;
  --color-storm-400: #8a9ee1;
  --color-storm-500: #6b7fc3;
  --color-storm-600: #5062a1;
  --color-storm-700: #3a4980;
  --color-storm-800: #283462;
  --color-storm-900: #1a2347;
  --color-storm-950: #06043f;
}