Abyssal Waters to Celadon color palette

005460Abyssal Waters 38C6AFTurquoise 11311FPitch-Black Forests 3F847BEmerald Whispers A1E4B6Celadon

About this palette

Abyssal Waters to Celadon is a 5-color cool palette: #005460 (Abyssal Waters), #38C6AF (Turquoise), #11311F (Pitch-Black Forests), #3F847B (Emerald Whispers), #A1E4B6 (Celadon). It mixes turquoise, green tones and feels cool overall. The strongest text pairing is #11311F on #A1E4B6 with a contrast ratio of 9.64:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Abyssal Waters	rgb(0, 84, 96)	hsl(188, 100%, 19%)
Turquoise	rgb(56, 198, 175)	hsl(170, 56%, 50%)
Pitch-Black Forests	rgb(17, 49, 31)	hsl(146, 48%, 13%)
Emerald Whispers	rgb(63, 132, 123)	hsl(172, 35%, 38%)
Celadon	rgb(161, 228, 182)	hsl(139, 55%, 76%)

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.64:1 Very good#11311F on #A1E4B6
Aa9.64:1 Very good#A1E4B6 on #11311F
Aa6.65:1 Good#38C6AF on #11311F
Aa6.65:1 Good#11311F on #38C6AF
Aa5.86:1 Good#005460 on #A1E4B6
Aa5.86:1 Good#A1E4B6 on #005460
Aa4.05:1 Poor#005460 on #38C6AF
Aa4.05:1 Poor#38C6AF on #005460

Color blindness preview

CSS variables

/* Abyssal Waters to Celadon — https://swatchly.xyz/palette/005460-38c6af-11311f-3f847b-a1e4b6 */
:root {
  --abyssal-waters: #005460;
  --turquoise: #38c6af;
  --pitch-black-forests: #11311f;
  --emerald-whispers: #3f847b;
  --celadon: #a1e4b6;
}

Tailwind CSS v4

/* Abyssal Waters to Celadon — https://swatchly.xyz/palette/005460-38c6af-11311f-3f847b-a1e4b6 */
@theme {
  --color-abyssal-waters: #005460;
  --color-abyssal-waters-50: #e3faff;
  --color-abyssal-waters-100: #cbf4fc;
  --color-abyssal-waters-200: #b0e1eb;
  --color-abyssal-waters-300: #95ced9;
  --color-abyssal-waters-400: #70b0bd;
  --color-abyssal-waters-500: #5396a3;
  --color-abyssal-waters-600: #397c89;
  --color-abyssal-waters-700: #256672;
  --color-abyssal-waters-800: #005460;
  --color-abyssal-waters-900: #094149;
  --color-abyssal-waters-950: #012930;
  --color-turquoise: #38c6af;
  --color-turquoise-50: #e9fffa;
  --color-turquoise-100: #c7fff2;
  --color-turquoise-200: #9ff3e1;
  --color-turquoise-300: #7ce0cc;
  --color-turquoise-400: #38c6af;
  --color-turquoise-500: #00a791;
  --color-turquoise-600: #008674;
  --color-turquoise-700: #006a5c;
  --color-turquoise-800: #005247;
  --color-turquoise-900: #003e35;
  --color-turquoise-950: #002620;
  --color-pitch-black-forests: #11311f;
  --color-pitch-black-forests-50: #e7fbee;
  --color-pitch-black-forests-100: #dbf2e3;
  --color-pitch-black-forests-200: #c5dfcd;
  --color-pitch-black-forests-300: #abcab6;
  --color-pitch-black-forests-400: #87a993;
  --color-pitch-black-forests-500: #6a8c76;
  --color-pitch-black-forests-600: #4f6f5b;
  --color-pitch-black-forests-700: #3a5644;
  --color-pitch-black-forests-800: #294132;
  --color-pitch-black-forests-900: #11311f;
  --color-pitch-black-forests-950: #0e1c13;
  --color-emerald-whispers: #3f847b;
  --color-emerald-whispers-50: #d9fef8;
  --color-emerald-whispers-100: #cef7f0;
  --color-emerald-whispers-200: #b6e7df;
  --color-emerald-whispers-300: #9cd4cb;
  --color-emerald-whispers-400: #77b7ae;
  --color-emerald-whispers-500: #5a9e94;
  --color-emerald-whispers-600: #3f847b;
  --color-emerald-whispers-700: #286a62;
  --color-emerald-whispers-800: #16544d;
  --color-emerald-whispers-900: #09413b;
  --color-emerald-whispers-950: #022924;
  --color-celadon: #a1e4b6;
  --color-celadon-50: #d6fce1;
  --color-celadon-100: #c8f3d4;
  --color-celadon-200: #a1e4b6;
  --color-celadon-300: #93cca4;
  --color-celadon-400: #70ae84;
  --color-celadon-500: #53946a;
  --color-celadon-600: #3a7951;
  --color-celadon-700: #27623e;
  --color-celadon-800: #194e2f;
  --color-celadon-900: #0e3d22;
  --color-celadon-950: #052613;
}