Permafrost to Eternal Darkness color palette

ABEBF3Permafrost EEA45BShrimp Cocktail 008C9EWaikiki 87451FChocolate Covered 1D2C46Eternal Darkness

About this palette

Permafrost to Eternal Darkness is a 5-color cool, vintage palette: #ABEBF3 (Permafrost), #EEA45B (Shrimp Cocktail), #008C9E (Waikiki), #87451F (Chocolate Covered), #1D2C46 (Eternal Darkness). It mixes turquoise, orange, brown, blue tones and feels cool overall. The strongest text pairing is #ABEBF3 on #1D2C46 with a contrast ratio of 10.60:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Permafrost	rgb(171, 235, 243)	hsl(187, 75%, 81%)
Shrimp Cocktail	rgb(238, 164, 91)	hsl(30, 81%, 65%)
Waikiki	rgb(0, 140, 158)	hsl(187, 100%, 31%)
Chocolate Covered	rgb(135, 69, 31)	hsl(22, 63%, 33%)
Eternal Darkness	rgb(29, 44, 70)	hsl(218, 41%, 19%)

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.

Aa10.60:1 Very good#ABEBF3 on #1D2C46
Aa10.60:1 Very good#1D2C46 on #ABEBF3
Aa6.73:1 Good#EEA45B on #1D2C46
Aa6.73:1 Good#1D2C46 on #EEA45B
Aa5.48:1 Good#ABEBF3 on #87451F
Aa5.48:1 Good#87451F on #ABEBF3
Aa3.49:1 Poor#008C9E on #1D2C46
Aa3.49:1 Poor#1D2C46 on #008C9E

Color blindness preview

CSS variables

/* Permafrost to Eternal Darkness — https://swatchly.xyz/palette/abebf3-eea45b-008c9e-87451f-1d2c46 */
:root {
  --permafrost: #abebf3;
  --shrimp-cocktail: #eea45b;
  --waikiki: #008c9e;
  --chocolate-covered: #87451f;
  --eternal-darkness: #1d2c46;
}

Tailwind CSS v4

/* Permafrost to Eternal Darkness — https://swatchly.xyz/palette/abebf3-eea45b-008c9e-87451f-1d2c46 */
@theme {
  --color-permafrost: #abebf3;
  --color-permafrost-50: #edfdff;
  --color-permafrost-100: #d4f9fd;
  --color-permafrost-200: #abebf3;
  --color-permafrost-300: #9dd1d7;
  --color-permafrost-400: #76b1b8;
  --color-permafrost-500: #57959c;
  --color-permafrost-600: #3b7880;
  --color-permafrost-700: #266067;
  --color-permafrost-800: #164b50;
  --color-permafrost-900: #0c3a3f;
  --color-permafrost-950: #042428;
  --color-shrimp-cocktail: #eea45b;
  --color-shrimp-cocktail-50: #ffecdb;
  --color-shrimp-cocktail-100: #ffddbe;
  --color-shrimp-cocktail-200: #fdc189;
  --color-shrimp-cocktail-300: #eea45b;
  --color-shrimp-cocktail-400: #cd873f;
  --color-shrimp-cocktail-500: #b26d1c;
  --color-shrimp-cocktail-600: #945600;
  --color-shrimp-cocktail-700: #774400;
  --color-shrimp-cocktail-800: #5f3500;
  --color-shrimp-cocktail-900: #4c2900;
  --color-shrimp-cocktail-950: #311800;
  --color-waikiki: #008c9e;
  --color-waikiki-50: #ddf9ff;
  --color-waikiki-100: #b7f4ff;
  --color-waikiki-200: #93e1ef;
  --color-waikiki-300: #6fcada;
  --color-waikiki-400: #3da9bb;
  --color-waikiki-500: #008c9e;
  --color-waikiki-600: #007180;
  --color-waikiki-700: #005a66;
  --color-waikiki-800: #004751;
  --color-waikiki-900: #00373f;
  --color-waikiki-950: #002329;
  --color-chocolate-covered: #87451f;
  --color-chocolate-covered-50: #fff2ec;
  --color-chocolate-covered-100: #ffe5d8;
  --color-chocolate-covered-200: #ffccb2;
  --color-chocolate-covered-300: #f2b291;
  --color-chocolate-covered-400: #d7916d;
  --color-chocolate-covered-500: #bc7550;
  --color-chocolate-covered-600: #9f5c37;
  --color-chocolate-covered-700: #87451f;
  --color-chocolate-covered-800: #6b3515;
  --color-chocolate-covered-900: #55270b;
  --color-chocolate-covered-950: #381603;
  --color-eternal-darkness: #1d2c46;
  --color-eternal-darkness-50: #f0f5ff;
  --color-eternal-darkness-100: #e1ecff;
  --color-eternal-darkness-200: #c9d8f2;
  --color-eternal-darkness-300: #b1c2de;
  --color-eternal-darkness-400: #8fa1c0;
  --color-eternal-darkness-500: #7284a3;
  --color-eternal-darkness-600: #576986;
  --color-eternal-darkness-700: #42516b;
  --color-eternal-darkness-800: #303d53;
  --color-eternal-darkness-900: #1d2c46;
  --color-eternal-darkness-950: #131a27;
}