Opal to Sunken Ship Color Palette

About this palette

Opal to Sunken Ship is a 5-color cool, gradient palette: #AFE3E7 (Opal), #33BAE5 (Blue Bikini), #496BA4 (Starstruck), #005255 (Cape Verde), #0B262B (Sunken Ship). It mixes turquoise, blue, gray tones and feels cool overall. The strongest text pairing is #AFE3E7 on #0B262B with a contrast ratio of 11.28:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Opal	rgb(175, 227, 231)	hsl(184, 54%, 80%)
Blue Bikini	rgb(51, 186, 229)	hsl(194, 77%, 55%)
Starstruck	rgb(73, 107, 164)	hsl(218, 38%, 46%)
Cape Verde	rgb(0, 82, 85)	hsl(182, 100%, 17%)
Sunken Ship	rgb(11, 38, 43)	hsl(189, 59%, 11%)

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.28:1 Very good#AFE3E7 on #0B262B
Aa11.28:1 Very good#0B262B on #AFE3E7
Aa7.01:1 Very good#33BAE5 on #0B262B
Aa7.01:1 Very good#0B262B on #33BAE5
Aa6.40:1 Good#AFE3E7 on #005255
Aa6.40:1 Good#005255 on #AFE3E7
Aa3.98:1 Poor#33BAE5 on #005255
Aa3.98:1 Poor#005255 on #33BAE5

Color blindness preview

CSS variables

/* Opal to Sunken Ship — https://swatchly.xyz/palette/afe3e7-33bae5-496ba4-005255-0b262b */
:root {
  --opal: #afe3e7;
  --blue-bikini: #33bae5;
  --starstruck: #496ba4;
  --cape-verde: #005255;
  --sunken-ship: #0b262b;
}

Tailwind CSS v4

/* Opal to Sunken Ship — https://swatchly.xyz/palette/afe3e7-33bae5-496ba4-005255-0b262b */
@theme {
  --color-opal: #afe3e7;
  --color-opal-50: #e0fcfe;
  --color-opal-100: #d3f3f5;
  --color-opal-200: #afe3e7;
  --color-opal-300: #9fcbce;
  --color-opal-400: #7cacaf;
  --color-opal-500: #5f9094;
  --color-opal-600: #457579;
  --color-opal-700: #315e61;
  --color-opal-800: #224a4d;
  --color-opal-900: #17393b;
  --color-opal-950: #0b2425;
  --color-blue-bikini: #33bae5;
  --color-blue-bikini-50: #effaff;
  --color-blue-bikini-100: #dbf5ff;
  --color-blue-bikini-200: #ade8ff;
  --color-blue-bikini-300: #76d7fb;
  --color-blue-bikini-400: #33bae5;
  --color-blue-bikini-500: #009bc4;
  --color-blue-bikini-600: #007d9e;
  --color-blue-bikini-700: #00637d;
  --color-blue-bikini-800: #004d62;
  --color-blue-bikini-900: #003a4b;
  --color-blue-bikini-950: #00242f;
  --color-starstruck: #496ba4;
  --color-starstruck-50: #f0f5ff;
  --color-starstruck-100: #e0ecff;
  --color-starstruck-200: #c1d9ff;
  --color-starstruck-300: #a1c2f8;
  --color-starstruck-400: #7fa2dc;
  --color-starstruck-500: #6386c1;
  --color-starstruck-600: #496ba4;
  --color-starstruck-700: #365487;
  --color-starstruck-800: #27416e;
  --color-starstruck-900: #1c3257;
  --color-starstruck-950: #0f1e39;
  --color-cape-verde: #005255;
  --color-cape-verde-50: #d9fdff;
  --color-cape-verde-100: #ccf4f6;
  --color-cape-verde-200: #b2e2e4;
  --color-cape-verde-300: #96ced0;
  --color-cape-verde-400: #71b0b3;
  --color-cape-verde-500: #549698;
  --color-cape-verde-600: #397b7e;
  --color-cape-verde-700: #256467;
  --color-cape-verde-800: #005255;
  --color-cape-verde-900: #0a3f41;
  --color-cape-verde-950: #03282a;
  --color-sunken-ship: #0b262b;
  --color-sunken-ship-50: #e8f9fc;
  --color-sunken-ship-100: #dceff3;
  --color-sunken-ship-200: #c6dce1;
  --color-sunken-ship-300: #adc6cc;
  --color-sunken-ship-400: #8ba7ad;
  --color-sunken-ship-500: #708c92;
  --color-sunken-ship-600: #577278;
  --color-sunken-ship-700: #425c61;
  --color-sunken-ship-800: #32494d;
  --color-sunken-ship-900: #26393d;
  --color-sunken-ship-950: #0b262b;
}