Night Sky to Sleepless Blue color palette

222E34Night Sky 334B54Nocturne 4D6B78Silent Night 6D9EB0Tranquili Teal 9FB8C5Shallow Sea BEDDEDSleepless Blue

Open in generator Export PNG, PDF, ASE…

About this palette

Night Sky to Sleepless Blue is a 6-color muted, gradient palette: #222E34 (Night Sky), #334B54 (Nocturne), #4D6B78 (Silent Night), #6D9EB0 (Tranquili Teal), #9FB8C5 (Shallow Sea), #BEDDED (Sleepless Blue). It mixes gray, blue tones and feels cool overall. The strongest text pairing is #222E34 on #BEDDED with a contrast ratio of 9.78:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Night Sky	rgb(34, 46, 52)	hsl(200, 21%, 17%)
Nocturne	rgb(51, 75, 84)	hsl(196, 24%, 26%)
Silent Night	rgb(77, 107, 120)	hsl(198, 22%, 39%)
Tranquili Teal	rgb(109, 158, 176)	hsl(196, 30%, 56%)
Shallow Sea	rgb(159, 184, 197)	hsl(201, 25%, 70%)
Sleepless Blue	rgb(190, 221, 237)	hsl(200, 57%, 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.

Aa9.78:1 Very good#222E34 on #BEDDED
Aa9.78:1 Very good#BEDDED on #222E34
Aa6.72:1 Good#222E34 on #9FB8C5
Aa6.72:1 Good#9FB8C5 on #222E34
Aa6.49:1 Good#334B54 on #BEDDED
Aa6.49:1 Good#BEDDED on #334B54
Aa4.75:1 Good#222E34 on #6D9EB0
Aa4.75:1 Good#6D9EB0 on #222E34

Color blindness preview

CSS variables

/* Night Sky to Sleepless Blue — https://swatchly.xyz/palette/222e34-334b54-4d6b78-6d9eb0-9fb8c5-bedded */
:root {
  --night-sky: #222e34;
  --nocturne: #334b54;
  --silent-night: #4d6b78;
  --tranquili-teal: #6d9eb0;
  --shallow-sea: #9fb8c5;
  --sleepless-blue: #bedded;
}

Tailwind CSS v4

/* Night Sky to Sleepless Blue — https://swatchly.xyz/palette/222e34-334b54-4d6b78-6d9eb0-9fb8c5-bedded */
@theme {
  --color-night-sky: #222e34;
  --color-night-sky-50: #eef7fb;
  --color-night-sky-100: #e3edf2;
  --color-night-sky-200: #ced9df;
  --color-night-sky-300: #b6c3ca;
  --color-night-sky-400: #95a3aa;
  --color-night-sky-500: #78868d;
  --color-night-sky-600: #5d6a71;
  --color-night-sky-700: #475258;
  --color-night-sky-800: #343e43;
  --color-night-sky-900: #222e34;
  --color-night-sky-950: #151b1e;
  --color-nocturne: #334b54;
  --color-nocturne-50: #e9f8fe;
  --color-nocturne-100: #ddeff5;
  --color-nocturne-200: #c7dbe3;
  --color-nocturne-300: #afc6cf;
  --color-nocturne-400: #8fa8b2;
  --color-nocturne-500: #748e97;
  --color-nocturne-600: #5b747d;
  --color-nocturne-700: #465d66;
  --color-nocturne-800: #334b54;
  --color-nocturne-900: #283940;
  --color-nocturne-950: #172429;
  --color-silent-night: #4d6b78;
  --color-silent-night-50: #e9f8ff;
  --color-silent-night-100: #d9eef7;
  --color-silent-night-200: #c1dae5;
  --color-silent-night-300: #a7c3cf;
  --color-silent-night-400: #84a3b0;
  --color-silent-night-500: #688694;
  --color-silent-night-600: #4d6b78;
  --color-silent-night-700: #3b5560;
  --color-silent-night-800: #2c434c;
  --color-silent-night-900: #20333c;
  --color-silent-night-950: #122026;
  --color-tranquili-teal: #6d9eb0;
  --color-tranquili-teal-50: #ddf6ff;
  --color-tranquili-teal-100: #caebf8;
  --color-tranquili-teal-200: #afd6e5;
  --color-tranquili-teal-300: #92bfcf;
  --color-tranquili-teal-400: #6d9eb0;
  --color-tranquili-teal-500: #548596;
  --color-tranquili-teal-600: #3e6c7c;
  --color-tranquili-teal-700: #2c5665;
  --color-tranquili-teal-800: #1f4551;
  --color-tranquili-teal-900: #153641;
  --color-tranquili-teal-950: #0b232b;
  --color-shallow-sea: #9fb8c5;
  --color-shallow-sea-50: #e1f1f9;
  --color-shallow-sea-100: #d4e5ee;
  --color-shallow-sea-200: #bbd0da;
  --color-shallow-sea-300: #9fb8c5;
  --color-shallow-sea-400: #839ba7;
  --color-shallow-sea-500: #6a828e;
  --color-shallow-sea-600: #536a75;
  --color-shallow-sea-700: #41555f;
  --color-shallow-sea-800: #32434c;
  --color-shallow-sea-900: #26353d;
  --color-shallow-sea-950: #162127;
  --color-sleepless-blue: #bedded;
  --color-sleepless-blue-50: #eaf8ff;
  --color-sleepless-blue-100: #dbeff9;
  --color-sleepless-blue-200: #bedded;
  --color-sleepless-blue-300: #acc6d3;
  --color-sleepless-blue-400: #8aa6b5;
  --color-sleepless-blue-500: #6e8b9a;
  --color-sleepless-blue-600: #55707e;
  --color-sleepless-blue-700: #405966;
  --color-sleepless-blue-800: #304651;
  --color-sleepless-blue-900: #23363f;
  --color-sleepless-blue-950: #142128;
}