Pacific Blue to Oceanic Motion color palette

15A8C6Pacific Blue 92DFD4Beach Glass C4EFFCIcy Breeze 043766Lost in Space 458578Emerald Whispers 295C8BOceanic Motion

Open in generator Export PNG, PDF, ASE…

About this palette

Pacific Blue to Oceanic Motion is a 6-color cool palette: #15A8C6 (Pacific Blue), #92DFD4 (Beach Glass), #C4EFFC (Icy Breeze), #043766 (Lost in Space), #458578 (Emerald Whispers), #295C8B (Oceanic Motion). It mixes blue, turquoise tones and feels cool overall. The strongest text pairing is #C4EFFC on #043766 with a contrast ratio of 9.81:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pacific Blue	rgb(21, 168, 198)	hsl(190, 81%, 43%)
Beach Glass	rgb(146, 223, 212)	hsl(171, 55%, 72%)
Icy Breeze	rgb(196, 239, 252)	hsl(194, 90%, 88%)
Lost in Space	rgb(4, 55, 102)	hsl(209, 92%, 21%)
Emerald Whispers	rgb(69, 133, 120)	hsl(168, 32%, 40%)
Oceanic Motion	rgb(41, 92, 139)	hsl(209, 54%, 35%)

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.81:1 Very good#C4EFFC on #043766
Aa9.81:1 Very good#043766 on #C4EFFC
Aa7.87:1 Very good#92DFD4 on #043766
Aa7.87:1 Very good#043766 on #92DFD4
Aa5.70:1 Good#C4EFFC on #295C8B
Aa5.70:1 Good#295C8B on #C4EFFC
Aa4.58:1 Good#92DFD4 on #295C8B
Aa4.58:1 Good#295C8B on #92DFD4

Color blindness preview

CSS variables

/* Pacific Blue to Oceanic Motion — https://swatchly.xyz/palette/15a8c6-92dfd4-c4effc-043766-458578-295c8b */
:root {
  --pacific-blue: #15a8c6;
  --beach-glass: #92dfd4;
  --icy-breeze: #c4effc;
  --lost-in-space: #043766;
  --emerald-whispers: #458578;
  --oceanic-motion: #295c8b;
}

Tailwind CSS v4

/* Pacific Blue to Oceanic Motion — https://swatchly.xyz/palette/15a8c6-92dfd4-c4effc-043766-458578-295c8b */
@theme {
  --color-pacific-blue: #15a8c6;
  --color-pacific-blue-50: #dbf7ff;
  --color-pacific-blue-100: #bbf0ff;
  --color-pacific-blue-200: #86dff7;
  --color-pacific-blue-300: #5ec8e4;
  --color-pacific-blue-400: #15a8c6;
  --color-pacific-blue-500: #008ca7;
  --color-pacific-blue-600: #007187;
  --color-pacific-blue-700: #005b6c;
  --color-pacific-blue-800: #004756;
  --color-pacific-blue-900: #003844;
  --color-pacific-blue-950: #00242d;
  --color-beach-glass: #92dfd4;
  --color-beach-glass-50: #cdf9f2;
  --color-beach-glass-100: #bdefe7;
  --color-beach-glass-200: #92dfd4;
  --color-beach-glass-300: #85c8be;
  --color-beach-glass-400: #61aba1;
  --color-beach-glass-500: #449187;
  --color-beach-glass-600: #2a776e;
  --color-beach-glass-700: #156159;
  --color-beach-glass-800: #054d47;
  --color-beach-glass-900: #003c36;
  --color-beach-glass-950: #002622;
  --color-icy-breeze: #c4effc;
  --color-icy-breeze-50: #def6fe;
  --color-icy-breeze-100: #c4effc;
  --color-icy-breeze-200: #badae4;
  --color-icy-breeze-300: #a1c5d0;
  --color-icy-breeze-400: #7fa7b3;
  --color-icy-breeze-500: #648c98;
  --color-icy-breeze-600: #4b727d;
  --color-icy-breeze-700: #385b66;
  --color-icy-breeze-800: #284851;
  --color-icy-breeze-900: #1d373f;
  --color-icy-breeze-950: #0f2228;
  --color-lost-in-space: #043766;
  --color-lost-in-space-50: #eef6ff;
  --color-lost-in-space-100: #deedff;
  --color-lost-in-space-200: #bbdbff;
  --color-lost-in-space-300: #9bc5f5;
  --color-lost-in-space-400: #77a6db;
  --color-lost-in-space-500: #5b8bc0;
  --color-lost-in-space-600: #4371a3;
  --color-lost-in-space-700: #2f5a89;
  --color-lost-in-space-800: #214770;
  --color-lost-in-space-900: #043766;
  --color-lost-in-space-950: #0a233d;
  --color-emerald-whispers: #458578;
  --color-emerald-whispers-50: #dbfef5;
  --color-emerald-whispers-100: #d1f7ee;
  --color-emerald-whispers-200: #b9e7dc;
  --color-emerald-whispers-300: #9fd4c8;
  --color-emerald-whispers-400: #7cb8aa;
  --color-emerald-whispers-500: #5f9e91;
  --color-emerald-whispers-600: #458578;
  --color-emerald-whispers-700: #2e6b5f;
  --color-emerald-whispers-800: #1c544a;
  --color-emerald-whispers-900: #0f4138;
  --color-emerald-whispers-950: #052923;
  --color-oceanic-motion: #295c8b;
  --color-oceanic-motion-50: #eef6ff;
  --color-oceanic-motion-100: #dcedff;
  --color-oceanic-motion-200: #badcff;
  --color-oceanic-motion-300: #9ac7f4;
  --color-oceanic-motion-400: #76a8da;
  --color-oceanic-motion-500: #5a8dbf;
  --color-oceanic-motion-600: #4173a3;
  --color-oceanic-motion-700: #295c8b;
  --color-oceanic-motion-800: #1e486e;
  --color-oceanic-motion-900: #133758;
  --color-oceanic-motion-950: #08223a;
}