Start generating

Baltic to Elite Teal color palette

27A0A5Baltic8D5912Grizzly73A8F1Fennel Flower643B42Hot ChocolateB3DBFFDroplet003130Elite Teal
Open in generator Export PNG, PDF, ASE…

About this palette

Baltic to Elite Teal is a 6-color cool palette: #27A0A5 (Baltic), #8D5912 (Grizzly), #73A8F1 (Fennel Flower), #643B42 (Hot Chocolate), #B3DBFF (Droplet), #003130 (Elite Teal). It mixes turquoise, brown, blue tones and feels cool overall. The strongest text pairing is #B3DBFF on #003130 with a contrast ratio of 9.78:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Balticrgb(39, 160, 165)hsl(182, 62%, 40%)
Grizzlyrgb(141, 89, 18)hsl(35, 77%, 31%)
Fennel Flowerrgb(115, 168, 241)hsl(215, 82%, 70%)
Hot Chocolatergb(100, 59, 66)hsl(350, 26%, 31%)
Dropletrgb(179, 219, 255)hsl(208, 100%, 85%)
Elite Tealrgb(0, 49, 48)hsl(179, 100%, 10%)

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.78:1 Very good#B3DBFF on #003130
  • Aa9.78:1 Very good#003130 on #B3DBFF
  • Aa6.45:1 Good#643B42 on #B3DBFF
  • Aa6.45:1 Good#B3DBFF on #643B42
  • Aa5.80:1 Good#73A8F1 on #003130
  • Aa5.80:1 Good#003130 on #73A8F1
  • Aa4.49:1 Poor#27A0A5 on #003130
  • Aa4.49:1 Poor#003130 on #27A0A5

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Baltic to Elite Teal — https://swatchly.xyz/palette/27a0a5-8d5912-73a8f1-643b42-b3dbff-003130 */
:root {
  --baltic: #27a0a5;
  --grizzly: #8d5912;
  --fennel-flower: #73a8f1;
  --hot-chocolate: #643b42;
  --droplet: #b3dbff;
  --elite-teal: #003130;
}

Tailwind CSS v4

/* Baltic to Elite Teal — https://swatchly.xyz/palette/27a0a5-8d5912-73a8f1-643b42-b3dbff-003130 */
@theme {
  --color-baltic: #27a0a5;
  --color-baltic-50: #defeff;
  --color-baltic-100: #bffbfd;
  --color-baltic-200: #a2ebee;
  --color-baltic-300: #81d7db;
  --color-baltic-400: #53babf;
  --color-baltic-500: #27a0a5;
  --color-baltic-600: #008287;
  --color-baltic-700: #00676b;
  --color-baltic-800: #005053;
  --color-baltic-900: #003d40;
  --color-baltic-950: #002628;
  --color-grizzly: #8d5912;
  --color-grizzly-50: #fff3e7;
  --color-grizzly-100: #ffe5cb;
  --color-grizzly-200: #f9cc9d;
  --color-grizzly-300: #e5b37d;
  --color-grizzly-400: #c79154;
  --color-grizzly-500: #aa7434;
  --color-grizzly-600: #8d5912;
  --color-grizzly-700: #724500;
  --color-grizzly-800: #5a3500;
  --color-grizzly-900: #472900;
  --color-grizzly-950: #2d1800;
  --color-fennel-flower: #73a8f1;
  --color-fennel-flower-50: #f2f7ff;
  --color-fennel-flower-100: #e3efff;
  --color-fennel-flower-200: #c4ddff;
  --color-fennel-flower-300: #9fc7ff;
  --color-fennel-flower-400: #73a8f1;
  --color-fennel-flower-500: #588bd2;
  --color-fennel-flower-600: #3d6fb3;
  --color-fennel-flower-700: #295795;
  --color-fennel-flower-800: #1a4379;
  --color-fennel-flower-900: #103360;
  --color-fennel-flower-950: #061f3f;
  --color-hot-chocolate: #643b42;
  --color-hot-chocolate-50: #fff1f3;
  --color-hot-chocolate-100: #ffe3e7;
  --color-hot-chocolate-200: #f2ccd1;
  --color-hot-chocolate-300: #e0b6bb;
  --color-hot-chocolate-400: #c4969d;
  --color-hot-chocolate-500: #aa7b82;
  --color-hot-chocolate-600: #8f6269;
  --color-hot-chocolate-700: #764e54;
  --color-hot-chocolate-800: #643b42;
  --color-hot-chocolate-900: #4c2e33;
  --color-hot-chocolate-950: #321c1f;
  --color-droplet: #b3dbff;
  --color-droplet-50: #ebf5ff;
  --color-droplet-100: #d9edff;
  --color-droplet-200: #b3dbff;
  --color-droplet-300: #a2c4e2;
  --color-droplet-400: #80a5c6;
  --color-droplet-500: #648aab;
  --color-droplet-600: #4b6f8f;
  --color-droplet-700: #385875;
  --color-droplet-800: #28455e;
  --color-droplet-900: #1d354a;
  --color-droplet-950: #0f2130;
  --color-elite-teal: #003130;
  --color-elite-teal-50: #e2fbfa;
  --color-elite-teal-100: #d5f2f0;
  --color-elite-teal-200: #bddfde;
  --color-elite-teal-300: #a3cac8;
  --color-elite-teal-400: #7ea9a7;
  --color-elite-teal-500: #608c8a;
  --color-elite-teal-600: #456f6e;
  --color-elite-teal-700: #305655;
  --color-elite-teal-800: #204140;
  --color-elite-teal-900: #003130;
  --color-elite-teal-950: #0a1c1b;
}

Similar palettes