Turquoise Pearl to Abyssal Waters color palette

8CF0DFTurquoise Pearl 02212BMidnight Dreams 00BEB3Super Rare Jade 4D76AESail On 005868Abyssal Waters

Open in generator Export PNG, PDF, ASE…

About this palette

Turquoise Pearl to Abyssal Waters is a 5-color cool palette: #8CF0DF (Turquoise Pearl), #02212B (Midnight Dreams), #00BEB3 (Super Rare Jade), #4D76AE (Sail On), #005868 (Abyssal Waters). It mixes turquoise, blue tones and feels cool overall. The strongest text pairing is #8CF0DF on #02212B with a contrast ratio of 12.47:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Turquoise Pearl	rgb(140, 240, 223)	hsl(170, 77%, 75%)
Midnight Dreams	rgb(2, 33, 43)	hsl(195, 91%, 9%)
Super Rare Jade	rgb(0, 190, 179)	hsl(177, 100%, 37%)
Sail On	rgb(77, 118, 174)	hsl(215, 39%, 49%)
Abyssal Waters	rgb(0, 88, 104)	hsl(189, 100%, 20%)

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.

Aa12.47:1 Super#8CF0DF on #02212B
Aa12.47:1 Super#02212B on #8CF0DF
Aa7.18:1 Very good#02212B on #00BEB3
Aa7.18:1 Very good#00BEB3 on #02212B
Aa6.03:1 Good#8CF0DF on #005868
Aa6.03:1 Good#005868 on #8CF0DF
Aa3.60:1 Poor#02212B on #4D76AE
Aa3.60:1 Poor#4D76AE on #02212B

Color blindness preview

CSS variables

/* Turquoise Pearl to Abyssal Waters — https://swatchly.xyz/palette/8cf0df-02212b-00beb3-4d76ae-005868 */
:root {
  --turquoise-pearl: #8cf0df;
  --midnight-dreams: #02212b;
  --super-rare-jade: #00beb3;
  --sail-on: #4d76ae;
  --abyssal-waters: #005868;
}

Tailwind CSS v4

/* Turquoise Pearl to Abyssal Waters — https://swatchly.xyz/palette/8cf0df-02212b-00beb3-4d76ae-005868 */
@theme {
  --color-turquoise-pearl: #8cf0df;
  --color-turquoise-pearl-50: #e0fff9;
  --color-turquoise-pearl-100: #c3fbf0;
  --color-turquoise-pearl-200: #8cf0df;
  --color-turquoise-pearl-300: #84d5c7;
  --color-turquoise-pearl-400: #57b7a7;
  --color-turquoise-pearl-500: #309b8c;
  --color-turquoise-pearl-600: #007e71;
  --color-turquoise-pearl-700: #006459;
  --color-turquoise-pearl-800: #004e45;
  --color-turquoise-pearl-900: #003c35;
  --color-turquoise-pearl-950: #002621;
  --color-midnight-dreams: #02212b;
  --color-midnight-dreams-50: #e8f8ff;
  --color-midnight-dreams-100: #daeff8;
  --color-midnight-dreams-200: #c3dce6;
  --color-midnight-dreams-300: #aac6d2;
  --color-midnight-dreams-400: #88a7b4;
  --color-midnight-dreams-500: #6b8c98;
  --color-midnight-dreams-600: #52707c;
  --color-midnight-dreams-700: #3d5963;
  --color-midnight-dreams-800: #2c454e;
  --color-midnight-dreams-900: #20343c;
  --color-midnight-dreams-950: #02212b;
  --color-super-rare-jade: #00beb3;
  --color-super-rare-jade-50: #dcfffb;
  --color-super-rare-jade-100: #b2fef6;
  --color-super-rare-jade-200: #8feee5;
  --color-super-rare-jade-300: #68dad0;
  --color-super-rare-jade-400: #00beb3;
  --color-super-rare-jade-500: #009e95;
  --color-super-rare-jade-600: #007f78;
  --color-super-rare-jade-700: #00655f;
  --color-super-rare-jade-800: #004f4a;
  --color-super-rare-jade-900: #003c38;
  --color-super-rare-jade-950: #002623;
  --color-sail-on: #4d76ae;
  --color-sail-on-50: #eff6ff;
  --color-sail-on-100: #e2eeff;
  --color-sail-on-200: #c4ddff;
  --color-sail-on-300: #a3c8fb;
  --color-sail-on-400: #81aae2;
  --color-sail-on-500: #6690c9;
  --color-sail-on-600: #4d76ae;
  --color-sail-on-700: #385d90;
  --color-sail-on-800: #274875;
  --color-sail-on-900: #1b375d;
  --color-sail-on-950: #0d223d;
  --color-abyssal-waters: #005868;
  --color-abyssal-waters-50: #e5f9ff;
  --color-abyssal-waters-100: #c9f4ff;
  --color-abyssal-waters-200: #ace0ee;
  --color-abyssal-waters-300: #8dc9d9;
  --color-abyssal-waters-400: #66a9ba;
  --color-abyssal-waters-500: #468c9d;
  --color-abyssal-waters-600: #2a7080;
  --color-abyssal-waters-700: #005868;
  --color-abyssal-waters-800: #064451;
  --color-abyssal-waters-900: #01353f;
  --color-abyssal-waters-950: #002128;
}