Starless Night to Creamy color palette

3B4958Starless Night 6A523ABison 6C7D93Infinity and Beyond BBA98DCoffee Diva B4C6D9Cloudy Valley F0E7DACreamy

Open in generator Export PNG, PDF, ASE…

About this palette

Starless Night to Creamy is a 6-color muted, gradient palette: #3B4958 (Starless Night), #6A523A (Bison), #6C7D93 (Infinity and Beyond), #BBA98D (Coffee Diva), #B4C6D9 (Cloudy Valley), #F0E7DA (Creamy). It mixes gray, brown, blue, yellow, white tones and feels warm overall. The strongest text pairing is #3B4958 on #F0E7DA with a contrast ratio of 7.52:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Starless Night	rgb(59, 73, 88)	hsl(211, 20%, 29%)
Bison	rgb(106, 82, 58)	hsl(30, 29%, 32%)
Infinity and Beyond	rgb(108, 125, 147)	hsl(214, 15%, 50%)
Coffee Diva	rgb(187, 169, 141)	hsl(37, 25%, 64%)
Cloudy Valley	rgb(180, 198, 217)	hsl(211, 33%, 78%)
Creamy	rgb(240, 231, 218)	hsl(35, 42%, 90%)

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.

Aa7.52:1 Very good#3B4958 on #F0E7DA
Aa7.52:1 Very good#F0E7DA on #3B4958
Aa5.95:1 Good#6A523A on #F0E7DA
Aa5.95:1 Good#F0E7DA on #6A523A
Aa5.27:1 Good#3B4958 on #B4C6D9
Aa5.27:1 Good#B4C6D9 on #3B4958
Aa4.17:1 Poor#6A523A on #B4C6D9
Aa4.17:1 Poor#B4C6D9 on #6A523A

Color blindness preview

CSS variables

/* Starless Night to Creamy — https://swatchly.xyz/palette/3b4958-6a523a-6c7d93-bba98d-b4c6d9-f0e7da */
:root {
  --starless-night: #3b4958;
  --bison: #6a523a;
  --infinity-and-beyond: #6c7d93;
  --coffee-diva: #bba98d;
  --cloudy-valley: #b4c6d9;
  --creamy: #f0e7da;
}

Tailwind CSS v4

/* Starless Night to Creamy — https://swatchly.xyz/palette/3b4958-6a523a-6c7d93-bba98d-b4c6d9-f0e7da */
@theme {
  --color-starless-night: #3b4958;
  --color-starless-night-50: #eef6ff;
  --color-starless-night-100: #e2ecf8;
  --color-starless-night-200: #cdd9e7;
  --color-starless-night-300: #b6c4d3;
  --color-starless-night-400: #96a5b6;
  --color-starless-night-500: #7b8b9c;
  --color-starless-night-600: #627181;
  --color-starless-night-700: #4e5b6a;
  --color-starless-night-800: #3b4958;
  --color-starless-night-900: #2e3843;
  --color-starless-night-950: #1c232b;
  --color-bison: #6a523a;
  --color-bison-50: #fff3e7;
  --color-bison-100: #fae8d7;
  --color-bison-200: #e9d4c0;
  --color-bison-300: #d5bda6;
  --color-bison-400: #b79d84;
  --color-bison-500: #9c8269;
  --color-bison-600: #816850;
  --color-bison-700: #6a523a;
  --color-bison-800: #53402c;
  --color-bison-900: #413020;
  --color-bison-950: #291d11;
  --color-infinity-and-beyond: #6c7d93;
  --color-infinity-and-beyond-50: #ecf4ff;
  --color-infinity-and-beyond-100: #dce8f8;
  --color-infinity-and-beyond-200: #c5d3e6;
  --color-infinity-and-beyond-300: #abbbd0;
  --color-infinity-and-beyond-400: #899ab0;
  --color-infinity-and-beyond-500: #6c7d93;
  --color-infinity-and-beyond-600: #556579;
  --color-infinity-and-beyond-700: #425062;
  --color-infinity-and-beyond-800: #323f4e;
  --color-infinity-and-beyond-900: #26313e;
  --color-infinity-and-beyond-950: #171e28;
  --color-coffee-diva: #bba98d;
  --color-coffee-diva-50: #fff8ed;
  --color-coffee-diva-100: #faefde;
  --color-coffee-diva-200: #eaddc8;
  --color-coffee-diva-300: #d7c7b0;
  --color-coffee-diva-400: #bba98d;
  --color-coffee-diva-500: #9d8c71;
  --color-coffee-diva-600: #806f55;
  --color-coffee-diva-700: #67573f;
  --color-coffee-diva-800: #50432e;
  --color-coffee-diva-900: #3d3221;
  --color-coffee-diva-950: #261e11;
  --color-cloudy-valley: #b4c6d9;
  --color-cloudy-valley-50: #f0f7ff;
  --color-cloudy-valley-100: #e3effa;
  --color-cloudy-valley-200: #cedcea;
  --color-cloudy-valley-300: #b4c6d9;
  --color-cloudy-valley-400: #95a6b7;
  --color-cloudy-valley-500: #798a9c;
  --color-cloudy-valley-600: #5f6f80;
  --color-cloudy-valley-700: #495867;
  --color-cloudy-valley-800: #384451;
  --color-cloudy-valley-900: #29343f;
  --color-cloudy-valley-950: #182028;
  --color-creamy: #f0e7da;
  --color-creamy-50: #f7f2eb;
  --color-creamy-100: #f0e7da;
  --color-creamy-200: #dbd4ca;
  --color-creamy-300: #c5beb3;
  --color-creamy-400: #a79f93;
  --color-creamy-500: #8c8478;
  --color-creamy-600: #726a5f;
  --color-creamy-700: #5b544a;
  --color-creamy-800: #474139;
  --color-creamy-900: #37322b;
  --color-creamy-950: #221f19;
}