Sea Lion to Crashing Waves Color Palette

About this palette

Sea Lion to Crashing Waves is a 5-color muted palette: #7B889C (Sea Lion), #2E424F (Dark & Stormy), #78B3C3 (Glacier), #C5E4E5 (Swimming), #3C6D86 (Crashing Waves). It mixes gray, blue tones and feels cool overall. The strongest text pairing is #2E424F on #C5E4E5 with a contrast ratio of 7.77:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sea Lion	rgb(123, 136, 156)	hsl(216, 14%, 55%)
Dark & Stormy	rgb(46, 66, 79)	hsl(204, 26%, 25%)
Glacier	rgb(120, 179, 195)	hsl(193, 38%, 62%)
Swimming	rgb(197, 228, 229)	hsl(182, 38%, 84%)
Crashing Waves	rgb(60, 109, 134)	hsl(200, 38%, 38%)

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.77:1 Very good#2E424F on #C5E4E5
Aa7.77:1 Very good#C5E4E5 on #2E424F
Aa4.50:1 Poor#2E424F on #78B3C3
Aa4.50:1 Poor#78B3C3 on #2E424F
Aa4.19:1 Poor#C5E4E5 on #3C6D86
Aa4.19:1 Poor#3C6D86 on #C5E4E5

Color blindness preview

CSS variables

/* Sea Lion to Crashing Waves — https://swatchly.xyz/palette/7b889c-2e424f-78b3c3-c5e4e5-3c6d86 */
:root {
  --sea-lion: #7b889c;
  --dark-stormy: #2e424f;
  --glacier: #78b3c3;
  --swimming: #c5e4e5;
  --crashing-waves: #3c6d86;
}

Tailwind CSS v4

/* Sea Lion to Crashing Waves — https://swatchly.xyz/palette/7b889c-2e424f-78b3c3-c5e4e5-3c6d86 */
@theme {
  --color-sea-lion: #7b889c;
  --color-sea-lion-50: #f0f6ff;
  --color-sea-lion-100: #e3ecfa;
  --color-sea-lion-200: #ced9e9;
  --color-sea-lion-300: #b7c2d5;
  --color-sea-lion-400: #96a3b7;
  --color-sea-lion-500: #7b889c;
  --color-sea-lion-600: #616d80;
  --color-sea-lion-700: #4b5768;
  --color-sea-lion-800: #3a4352;
  --color-sea-lion-900: #2b3440;
  --color-sea-lion-950: #1a2029;
  --color-dark-stormy: #2e424f;
  --color-dark-stormy-50: #ebf7ff;
  --color-dark-stormy-100: #dfeef8;
  --color-dark-stormy-200: #c9dae6;
  --color-dark-stormy-300: #b0c4d1;
  --color-dark-stormy-400: #8ea4b2;
  --color-dark-stormy-500: #728897;
  --color-dark-stormy-600: #586d7b;
  --color-dark-stormy-700: #435562;
  --color-dark-stormy-800: #2e424f;
  --color-dark-stormy-900: #25323b;
  --color-dark-stormy-950: #151f25;
  --color-glacier: #78b3c3;
  --color-glacier-50: #ecfbff;
  --color-glacier-100: #d4f6ff;
  --color-glacier-200: #bbe5f0;
  --color-glacier-300: #a0d0de;
  --color-glacier-400: #78b3c3;
  --color-glacier-500: #5c96a5;
  --color-glacier-600: #407988;
  --color-glacier-700: #2a616e;
  --color-glacier-800: #1b4c57;
  --color-glacier-900: #0f3a44;
  --color-glacier-950: #05242b;
  --color-swimming: #c5e4e5;
  --color-swimming-50: #ecfdfd;
  --color-swimming-100: #e2f4f5;
  --color-swimming-200: #c5e4e5;
  --color-swimming-300: #b2cbcc;
  --color-swimming-400: #8fabac;
  --color-swimming-500: #728f90;
  --color-swimming-600: #587374;
  --color-swimming-700: #425b5c;
  --color-swimming-800: #314748;
  --color-swimming-900: #243737;
  --color-swimming-950: #152223;
  --color-crashing-waves: #3c6d86;
  --color-crashing-waves-50: #eaf8ff;
  --color-crashing-waves-100: #d3efff;
  --color-crashing-waves-200: #b6dcf1;
  --color-crashing-waves-300: #99c5dd;
  --color-crashing-waves-400: #75a5bf;
  --color-crashing-waves-500: #5789a3;
  --color-crashing-waves-600: #3c6d86;
  --color-crashing-waves-700: #2b576c;
  --color-crashing-waves-800: #1d4457;
  --color-crashing-waves-900: #133445;
  --color-crashing-waves-950: #09212c;
}