Baltic to Galaxea Color Palette

About this palette

Baltic to Galaxea is a 5-color cool palette: #009EA2 (Baltic), #FFE8E9 (Porcelain Skin), #005F59 (Mosque), #D8B100 (Gold Tooth), #282C60 (Galaxea). It mixes turquoise, white, yellow, purple tones and feels cool overall. The strongest text pairing is #FFE8E9 on #282C60 with a contrast ratio of 11.10:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Baltic	rgb(0, 158, 162)	hsl(181, 100%, 32%)
Porcelain Skin	rgb(255, 232, 233)	hsl(357, 100%, 95%)
Mosque	rgb(0, 95, 89)	hsl(176, 100%, 19%)
Gold Tooth	rgb(216, 177, 0)	hsl(49, 100%, 42%)
Galaxea	rgb(40, 44, 96)	hsl(236, 41%, 27%)

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.10:1 Very good#FFE8E9 on #282C60
Aa11.10:1 Very good#282C60 on #FFE8E9
Aa6.46:1 Good#FFE8E9 on #005F59
Aa6.46:1 Good#005F59 on #FFE8E9
Aa6.30:1 Good#D8B100 on #282C60
Aa6.30:1 Good#282C60 on #D8B100
Aa3.96:1 Poor#009EA2 on #282C60
Aa3.96:1 Poor#282C60 on #009EA2

Color blindness preview

CSS variables

/* Baltic to Galaxea — https://swatchly.xyz/palette/009ea2-ffe8e9-005f59-d8b100-282c60 */
:root {
  --baltic: #009ea2;
  --porcelain-skin: #ffe8e9;
  --mosque: #005f59;
  --gold-tooth: #d8b100;
  --galaxea: #282c60;
}

Tailwind CSS v4

/* Baltic to Galaxea — https://swatchly.xyz/palette/009ea2-ffe8e9-005f59-d8b100-282c60 */
@theme {
  --color-baltic: #009ea2;
  --color-baltic-50: #dafeff;
  --color-baltic-100: #b9fbfd;
  --color-baltic-200: #9aeaec;
  --color-baltic-300: #77d6d9;
  --color-baltic-400: #44b9bc;
  --color-baltic-500: #009ea2;
  --color-baltic-600: #007f83;
  --color-baltic-700: #006568;
  --color-baltic-800: #004f51;
  --color-baltic-900: #003c3e;
  --color-baltic-950: #002627;
  --color-porcelain-skin: #ffe8e9;
  --color-porcelain-skin-50: #fff5f5;
  --color-porcelain-skin-100: #ffe8e9;
  --color-porcelain-skin-200: #e6d6d6;
  --color-porcelain-skin-300: #d0bebf;
  --color-porcelain-skin-400: #b29d9e;
  --color-porcelain-skin-500: #968182;
  --color-porcelain-skin-600: #7a6768;
  --color-porcelain-skin-700: #625051;
  --color-porcelain-skin-800: #4d3e3f;
  --color-porcelain-skin-900: #3c2f30;
  --color-porcelain-skin-950: #261d1d;
  --color-mosque: #005f59;
  --color-mosque-50: #d7fffa;
  --color-mosque-100: #c9f6f1;
  --color-mosque-200: #ade4dd;
  --color-mosque-300: #8ecec7;
  --color-mosque-400: #67afa7;
  --color-mosque-500: #47938b;
  --color-mosque-600: #2a7770;
  --color-mosque-700: #005f59;
  --color-mosque-800: #044a45;
  --color-mosque-900: #003935;
  --color-mosque-950: #002421;
  --color-gold-tooth: #d8b100;
  --color-gold-tooth-50: #ffefba;
  --color-gold-tooth-100: #fbe28f;
  --color-gold-tooth-200: #eacb66;
  --color-gold-tooth-300: #d8b100;
  --color-gold-tooth-400: #b69400;
  --color-gold-tooth-500: #987c00;
  --color-gold-tooth-600: #7b6400;
  --color-gold-tooth-700: #635000;
  --color-gold-tooth-800: #4f3f00;
  --color-gold-tooth-900: #3e3100;
  --color-gold-tooth-950: #271e00;
  --color-galaxea: #282c60;
  --color-galaxea-50: #f2f4ff;
  --color-galaxea-100: #e6eaff;
  --color-galaxea-200: #cdd5ff;
  --color-galaxea-300: #b3bdf3;
  --color-galaxea-400: #939dd8;
  --color-galaxea-500: #7881bd;
  --color-galaxea-600: #5e679f;
  --color-galaxea-700: #495083;
  --color-galaxea-800: #383e6a;
  --color-galaxea-900: #282c60;
  --color-galaxea-950: #191c37;
}