Deep Sea Diver to Bubbles Color Palette

About this palette

Deep Sea Diver to Bubbles is a 5-color muted, cool, monochromatic, gradient palette: #29575C (Deep Sea Diver), #2B8285 (Jade Jewel), #5BA8B0 (Seaside), #A5DFE6 (Opal), #E9FDFF (Bubbles). It mixes turquoise, white tones and feels cool overall. The strongest text pairing is #29575C on #E9FDFF with a contrast ratio of 7.64:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Deep Sea Diver	rgb(41, 87, 92)	hsl(186, 38%, 26%)
Jade Jewel	rgb(43, 130, 133)	hsl(182, 51%, 35%)
Seaside	rgb(91, 168, 176)	hsl(186, 35%, 52%)
Opal	rgb(165, 223, 230)	hsl(186, 57%, 77%)
Bubbles	rgb(233, 253, 255)	hsl(185, 100%, 96%)

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.64:1 Very good#29575C on #E9FDFF
Aa7.64:1 Very good#E9FDFF on #29575C
Aa5.47:1 Good#29575C on #A5DFE6
Aa5.47:1 Good#A5DFE6 on #29575C
Aa4.31:1 Poor#2B8285 on #E9FDFF
Aa4.31:1 Poor#E9FDFF on #2B8285
Aa3.09:1 Poor#2B8285 on #A5DFE6
Aa3.09:1 Poor#A5DFE6 on #2B8285

Color blindness preview

CSS variables

/* Deep Sea Diver to Bubbles — https://swatchly.xyz/palette/29575c-2b8285-5ba8b0-a5dfe6-e9fdff */
:root {
  --deep-sea-diver: #29575c;
  --jade-jewel: #2b8285;
  --seaside: #5ba8b0;
  --opal: #a5dfe6;
  --bubbles: #e9fdff;
}

Tailwind CSS v4

/* Deep Sea Diver to Bubbles — https://swatchly.xyz/palette/29575c-2b8285-5ba8b0-a5dfe6-e9fdff */
@theme {
  --color-deep-sea-diver: #29575c;
  --color-deep-sea-diver-50: #e1fbfe;
  --color-deep-sea-diver-100: #d4f2f5;
  --color-deep-sea-diver-200: #badee2;
  --color-deep-sea-diver-300: #9ec7cc;
  --color-deep-sea-diver-400: #7aa7ac;
  --color-deep-sea-diver-500: #5c8b90;
  --color-deep-sea-diver-600: #426f74;
  --color-deep-sea-diver-700: #29575c;
  --color-deep-sea-diver-800: #204447;
  --color-deep-sea-diver-900: #163437;
  --color-deep-sea-diver-950: #0b2023;
  --color-jade-jewel: #2b8285;
  --color-jade-jewel-50: #d7feff;
  --color-jade-jewel-100: #c7f7f9;
  --color-jade-jewel-200: #ade7e9;
  --color-jade-jewel-300: #90d3d5;
  --color-jade-jewel-400: #69b6b9;
  --color-jade-jewel-500: #499c9f;
  --color-jade-jewel-600: #2b8285;
  --color-jade-jewel-700: #0f686b;
  --color-jade-jewel-800: #005255;
  --color-jade-jewel-900: #003f41;
  --color-jade-jewel-950: #002729;
  --color-seaside: #5ba8b0;
  --color-seaside-50: #d4fbff;
  --color-seaside-100: #c1f1f7;
  --color-seaside-200: #a4dee4;
  --color-seaside-300: #85c8cf;
  --color-seaside-400: #5ba8b0;
  --color-seaside-500: #3f8d95;
  --color-seaside-600: #25737b;
  --color-seaside-700: #0e5d64;
  --color-seaside-800: #004a50;
  --color-seaside-900: #00393e;
  --color-seaside-950: #002528;
  --color-opal: #a5dfe6;
  --color-opal-50: #d9f9fd;
  --color-opal-100: #cbeff4;
  --color-opal-200: #a5dfe6;
  --color-opal-300: #96c7cd;
  --color-opal-400: #73a9b0;
  --color-opal-500: #578f95;
  --color-opal-600: #3e747b;
  --color-opal-700: #2b5e63;
  --color-opal-800: #1c4a4f;
  --color-opal-900: #12393e;
  --color-opal-950: #072427;
  --color-bubbles: #e9fdff;
  --color-bubbles-50: #e9fdff;
  --color-bubbles-100: #e5f1f2;
  --color-bubbles-200: #cfddde;
  --color-bubbles-300: #b6c6c8;
  --color-bubbles-400: #95a6a8;
  --color-bubbles-500: #798b8c;
  --color-bubbles-600: #5e7071;
  --color-bubbles-700: #49595a;
  --color-bubbles-800: #384547;
  --color-bubbles-900: #2a3536;
  --color-bubbles-950: #192122;
}