Bethlehem Superstar to Petrol Slumber color palette

E9EDD9Bethlehem Superstar 96BCD1Gentle Sky 7B728FFlying Carpet 70594ABaby Bear 28373FPetrol Slumber

About this palette

Bethlehem Superstar to Petrol Slumber is a 5-color muted, gradient palette: #E9EDD9 (Bethlehem Superstar), #96BCD1 (Gentle Sky), #7B728F (Flying Carpet), #70594A (Baby Bear), #28373F (Petrol Slumber). It mixes white, blue, purple, brown, gray tones and feels cool overall. The strongest text pairing is #E9EDD9 on #28373F with a contrast ratio of 10.29:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bethlehem Superstar	rgb(233, 237, 217)	hsl(72, 36%, 89%)
Gentle Sky	rgb(150, 188, 209)	hsl(201, 39%, 70%)
Flying Carpet	rgb(123, 114, 143)	hsl(259, 11%, 50%)
Baby Bear	rgb(112, 89, 74)	hsl(24, 20%, 36%)
Petrol Slumber	rgb(40, 55, 63)	hsl(201, 22%, 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.

Aa10.29:1 Very good#E9EDD9 on #28373F
Aa10.29:1 Very good#28373F on #E9EDD9
Aa6.09:1 Good#96BCD1 on #28373F
Aa6.09:1 Good#28373F on #96BCD1
Aa5.47:1 Good#E9EDD9 on #70594A
Aa5.47:1 Good#70594A on #E9EDD9
Aa3.78:1 Poor#E9EDD9 on #7B728F
Aa3.78:1 Poor#7B728F on #E9EDD9

Color blindness preview

CSS variables

/* Bethlehem Superstar to Petrol Slumber — https://swatchly.xyz/palette/e9edd9-96bcd1-7b728f-70594a-28373f */
:root {
  --bethlehem-superstar: #e9edd9;
  --gentle-sky: #96bcd1;
  --flying-carpet: #7b728f;
  --baby-bear: #70594a;
  --petrol-slumber: #28373f;
}

Tailwind CSS v4

/* Bethlehem Superstar to Petrol Slumber — https://swatchly.xyz/palette/e9edd9-96bcd1-7b728f-70594a-28373f */
@theme {
  --color-bethlehem-superstar: #e9edd9;
  --color-bethlehem-superstar-50: #f4f6eb;
  --color-bethlehem-superstar-100: #e9edd9;
  --color-bethlehem-superstar-200: #d6d9ca;
  --color-bethlehem-superstar-300: #bfc3b2;
  --color-bethlehem-superstar-400: #a0a391;
  --color-bethlehem-superstar-500: #858876;
  --color-bethlehem-superstar-600: #6b6e5d;
  --color-bethlehem-superstar-700: #545748;
  --color-bethlehem-superstar-800: #414436;
  --color-bethlehem-superstar-900: #323429;
  --color-bethlehem-superstar-950: #1f2018;
  --color-gentle-sky: #96bcd1;
  --color-gentle-sky-50: #def3ff;
  --color-gentle-sky-100: #cee8f7;
  --color-gentle-sky-200: #b5d3e4;
  --color-gentle-sky-300: #96bcd1;
  --color-gentle-sky-400: #7a9eb2;
  --color-gentle-sky-500: #618599;
  --color-gentle-sky-600: #496c7f;
  --color-gentle-sky-700: #375767;
  --color-gentle-sky-800: #294554;
  --color-gentle-sky-900: #1e3643;
  --color-gentle-sky-950: #10222b;
  --color-flying-carpet: #7b728f;
  --color-flying-carpet-50: #f6f3ff;
  --color-flying-carpet-100: #f0eafe;
  --color-flying-carpet-200: #ded8ef;
  --color-flying-carpet-300: #cac3dd;
  --color-flying-carpet-400: #ada4c1;
  --color-flying-carpet-500: #948ba8;
  --color-flying-carpet-600: #7b728f;
  --color-flying-carpet-700: #625a74;
  --color-flying-carpet-800: #4c455c;
  --color-flying-carpet-900: #3a3448;
  --color-flying-carpet-950: #24202e;
  --color-baby-bear: #70594a;
  --color-baby-bear-50: #fff2ea;
  --color-baby-bear-100: #f8e7dd;
  --color-baby-bear-200: #e9d5c8;
  --color-baby-bear-300: #d6bfb1;
  --color-baby-bear-400: #b9a192;
  --color-baby-bear-500: #a08777;
  --color-baby-bear-600: #866e5f;
  --color-baby-bear-700: #70594a;
  --color-baby-bear-800: #584538;
  --color-baby-bear-900: #45342a;
  --color-baby-bear-950: #2c2018;
  --color-petrol-slumber: #28373f;
  --color-petrol-slumber-50: #edf7fd;
  --color-petrol-slumber-100: #e2edf4;
  --color-petrol-slumber-200: #ccdae1;
  --color-petrol-slumber-300: #b4c4cc;
  --color-petrol-slumber-400: #94a5ae;
  --color-petrol-slumber-500: #798a93;
  --color-petrol-slumber-600: #5f7078;
  --color-petrol-slumber-700: #4a5961;
  --color-petrol-slumber-800: #39464d;
  --color-petrol-slumber-900: #28373f;
  --color-petrol-slumber-950: #1a2226;
}