Eternal Darkness to Breeze Color Palette

About this palette

Eternal Darkness to Breeze is a 5-color cool, vintage palette: #1F2C41 (Eternal Darkness), #5D4B00 (Very Coffee), #5677B8 (Flood), #C3A965 (Ginger Ale), #BAC8F0 (Breeze). It mixes blue, brown, yellow tones and feels cool overall. The strongest text pairing is #1F2C41 on #BAC8F0 with a contrast ratio of 8.43:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Eternal Darkness	rgb(31, 44, 65)	hsl(217, 35%, 19%)
Very Coffee	rgb(93, 75, 0)	hsl(48, 100%, 18%)
Flood	rgb(86, 119, 184)	hsl(220, 41%, 53%)
Ginger Ale	rgb(195, 169, 101)	hsl(43, 44%, 58%)
Breeze	rgb(186, 200, 240)	hsl(224, 64%, 84%)

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.

Aa8.43:1 Very good#1F2C41 on #BAC8F0
Aa8.43:1 Very good#BAC8F0 on #1F2C41
Aa6.14:1 Good#1F2C41 on #C3A965
Aa6.14:1 Good#C3A965 on #1F2C41
Aa5.10:1 Good#5D4B00 on #BAC8F0
Aa5.10:1 Good#BAC8F0 on #5D4B00
Aa3.72:1 Poor#5D4B00 on #C3A965
Aa3.72:1 Poor#C3A965 on #5D4B00

Color blindness preview

CSS variables

/* Eternal Darkness to Breeze — https://swatchly.xyz/palette/1f2c41-5d4b00-5677b8-c3a965-bac8f0 */
:root {
  --eternal-darkness: #1f2c41;
  --very-coffee: #5d4b00;
  --flood: #5677b8;
  --ginger-ale: #c3a965;
  --breeze: #bac8f0;
}

Tailwind CSS v4

/* Eternal Darkness to Breeze — https://swatchly.xyz/palette/1f2c41-5d4b00-5677b8-c3a965-bac8f0 */
@theme {
  --color-eternal-darkness: #1f2c41;
  --color-eternal-darkness-50: #f0f6ff;
  --color-eternal-darkness-100: #e1ecfd;
  --color-eternal-darkness-200: #ccd8ed;
  --color-eternal-darkness-300: #b3c2d9;
  --color-eternal-darkness-400: #91a1ba;
  --color-eternal-darkness-500: #75849d;
  --color-eternal-darkness-600: #5a6980;
  --color-eternal-darkness-700: #445166;
  --color-eternal-darkness-800: #323d4e;
  --color-eternal-darkness-900: #1f2c41;
  --color-eternal-darkness-950: #141a24;
  --color-very-coffee: #5d4b00;
  --color-very-coffee-50: #fff5d5;
  --color-very-coffee-100: #f7ebc4;
  --color-very-coffee-200: #e4d6a6;
  --color-very-coffee-300: #cebd86;
  --color-very-coffee-400: #ae9c5f;
  --color-very-coffee-500: #927f40;
  --color-very-coffee-600: #756325;
  --color-very-coffee-700: #5d4b00;
  --color-very-coffee-800: #483a06;
  --color-very-coffee-900: #382c01;
  --color-very-coffee-950: #231b00;
  --color-flood: #5677b8;
  --color-flood-50: #f0f5ff;
  --color-flood-100: #e5eeff;
  --color-flood-200: #cbddff;
  --color-flood-300: #abc8ff;
  --color-flood-400: #89aaeb;
  --color-flood-500: #6e90d2;
  --color-flood-600: #5677b8;
  --color-flood-700: #3f5e9a;
  --color-flood-800: #2e487d;
  --color-flood-900: #203664;
  --color-flood-950: #112142;
  --color-ginger-ale: #c3a965;
  --color-ginger-ale-50: #fff8e7;
  --color-ginger-ale-100: #fff0c8;
  --color-ginger-ale-200: #f0ddae;
  --color-ginger-ale-300: #ddc891;
  --color-ginger-ale-400: #c3a965;
  --color-ginger-ale-500: #a58c48;
  --color-ginger-ale-600: #886f2a;
  --color-ginger-ale-700: #6d5713;
  --color-ginger-ale-800: #564201;
  --color-ginger-ale-900: #423200;
  --color-ginger-ale-950: #291e00;
  --color-breeze: #bac8f0;
  --color-breeze-50: #f7f9ff;
  --color-breeze-100: #ebf1ff;
  --color-breeze-200: #d4defa;
  --color-breeze-300: #bac8f0;
  --color-breeze-400: #9aa7cc;
  --color-breeze-500: #7d8aaf;
  --color-breeze-600: #626e92;
  --color-breeze-700: #4c5676;
  --color-breeze-800: #39425e;
  --color-breeze-900: #2a3249;
  --color-breeze-950: #191e2f;
}