Bluedgeons to Young Night Color Palette

About this palette

Bluedgeons to Young Night is a 5-color muted, cool palette: #2D4D69 (Bluedgeons), #EFCBE0 (LA Vibes), #5A7364 (Cactus), #819D8E (Mother Earth), #282119 (Young Night). It mixes blue, pink, green, gray tones and feels cool overall. The strongest text pairing is #EFCBE0 on #282119 with a contrast ratio of 10.81:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bluedgeons	rgb(45, 77, 105)	hsl(208, 40%, 29%)
LA Vibes	rgb(239, 203, 224)	hsl(325, 53%, 87%)
Cactus	rgb(90, 115, 100)	hsl(144, 12%, 40%)
Mother Earth	rgb(129, 157, 142)	hsl(148, 13%, 56%)
Young Night	rgb(40, 33, 25)	hsl(32, 23%, 13%)

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.81:1 Very good#EFCBE0 on #282119
Aa10.81:1 Very good#282119 on #EFCBE0
Aa6.01:1 Good#2D4D69 on #EFCBE0
Aa6.01:1 Good#EFCBE0 on #2D4D69
Aa5.41:1 Good#819D8E on #282119
Aa5.41:1 Good#282119 on #819D8E
Aa3.51:1 Poor#EFCBE0 on #5A7364
Aa3.51:1 Poor#5A7364 on #EFCBE0

Color blindness preview

CSS variables

/* Bluedgeons to Young Night — https://swatchly.xyz/palette/2d4d69-efcbe0-5a7364-819d8e-282119 */
:root {
  --bluedgeons: #2d4d69;
  --la-vibes: #efcbe0;
  --cactus: #5a7364;
  --mother-earth: #819d8e;
  --young-night: #282119;
}

Tailwind CSS v4

/* Bluedgeons to Young Night — https://swatchly.xyz/palette/2d4d69-efcbe0-5a7364-819d8e-282119 */
@theme {
  --color-bluedgeons: #2d4d69;
  --color-bluedgeons-50: #edf6ff;
  --color-bluedgeons-100: #dbeeff;
  --color-bluedgeons-200: #c0dbf4;
  --color-bluedgeons-300: #a8c6e2;
  --color-bluedgeons-400: #87a9c7;
  --color-bluedgeons-500: #6c8ead;
  --color-bluedgeons-600: #547593;
  --color-bluedgeons-700: #405f7b;
  --color-bluedgeons-800: #2d4d69;
  --color-bluedgeons-900: #243b50;
  --color-bluedgeons-950: #142535;
  --color-la-vibes: #efcbe0;
  --color-la-vibes-50: #fff0f8;
  --color-la-vibes-100: #fae3f0;
  --color-la-vibes-200: #efcbe0;
  --color-la-vibes-300: #d5b6c8;
  --color-la-vibes-400: #b796a9;
  --color-la-vibes-500: #9b7b8e;
  --color-la-vibes-600: #806173;
  --color-la-vibes-700: #674b5c;
  --color-la-vibes-800: #523a48;
  --color-la-vibes-900: #402c38;
  --color-la-vibes-950: #291a23;
  --color-cactus: #5a7364;
  --color-cactus-50: #eafaf0;
  --color-cactus-100: #dff0e5;
  --color-cactus-200: #c9ded1;
  --color-cactus-300: #b1c8b9;
  --color-cactus-400: #90a999;
  --color-cactus-500: #748e7e;
  --color-cactus-600: #5a7364;
  --color-cactus-700: #455c4e;
  --color-cactus-800: #34483c;
  --color-cactus-900: #27372e;
  --color-cactus-950: #17231c;
  --color-mother-earth: #819d8e;
  --color-mother-earth-50: #e4f6ec;
  --color-mother-earth-100: #d7eadf;
  --color-mother-earth-200: #bed5c9;
  --color-mother-earth-300: #a4beb0;
  --color-mother-earth-400: #819d8e;
  --color-mother-earth-500: #688475;
  --color-mother-earth-600: #516b5e;
  --color-mother-earth-700: #3f564a;
  --color-mother-earth-800: #30443a;
  --color-mother-earth-900: #24362d;
  --color-mother-earth-950: #16231c;
  --color-young-night: #282119;
  --color-young-night-50: #f9f4ee;
  --color-young-night-100: #f0eae3;
  --color-young-night-200: #ddd6ce;
  --color-young-night-300: #c7bfb6;
  --color-young-night-400: #a9a096;
  --color-young-night-500: #8e857b;
  --color-young-night-600: #746c62;
  --color-young-night-700: #5d564d;
  --color-young-night-800: #4a433c;
  --color-young-night-900: #3a352e;
  --color-young-night-950: #282119;
}