Into the Night to Clear Sky color palette

0A3844Into the Night 0F6152Philodendron 008596Cruising A7E0D1Menthol Kiss 7496BAKing Neptune 85C9FDClear Sky

Open in generator Export PNG, PDF, ASE…

About this palette

Into the Night to Clear Sky is a 6-color cool palette: #0A3844 (Into the Night), #0F6152 (Philodendron), #008596 (Cruising), #A7E0D1 (Menthol Kiss), #7496BA (King Neptune), #85C9FD (Clear Sky). It mixes blue, turquoise tones and feels cool overall. The strongest text pairing is #0A3844 on #A7E0D1 with a contrast ratio of 8.56:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Into the Night	rgb(10, 56, 68)	hsl(192, 74%, 15%)
Philodendron	rgb(15, 97, 82)	hsl(169, 73%, 22%)
Cruising	rgb(0, 133, 150)	hsl(187, 100%, 29%)
Menthol Kiss	rgb(167, 224, 209)	hsl(164, 48%, 77%)
King Neptune	rgb(116, 150, 186)	hsl(211, 34%, 59%)
Clear Sky	rgb(133, 201, 253)	hsl(206, 97%, 76%)

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.56:1 Very good#0A3844 on #A7E0D1
Aa8.56:1 Very good#A7E0D1 on #0A3844
Aa7.08:1 Very good#0A3844 on #85C9FD
Aa7.08:1 Very good#85C9FD on #0A3844
Aa4.99:1 Good#0F6152 on #A7E0D1
Aa4.99:1 Good#A7E0D1 on #0F6152
Aa4.13:1 Poor#0F6152 on #85C9FD
Aa4.13:1 Poor#85C9FD on #0F6152

Color blindness preview

CSS variables

/* Into the Night to Clear Sky — https://swatchly.xyz/palette/0a3844-0f6152-008596-a7e0d1-7496ba-85c9fd */
:root {
  --into-the-night: #0a3844;
  --philodendron: #0f6152;
  --cruising: #008596;
  --menthol-kiss: #a7e0d1;
  --king-neptune: #7496ba;
  --clear-sky: #85c9fd;
}

Tailwind CSS v4

/* Into the Night to Clear Sky — https://swatchly.xyz/palette/0a3844-0f6152-008596-a7e0d1-7496ba-85c9fd */
@theme {
  --color-into-the-night: #0a3844;
  --color-into-the-night-50: #e6f9ff;
  --color-into-the-night-100: #d5f1fa;
  --color-into-the-night-200: #bddee9;
  --color-into-the-night-300: #a2c8d5;
  --color-into-the-night-400: #7fa9b7;
  --color-into-the-night-500: #628e9b;
  --color-into-the-night-600: #497380;
  --color-into-the-night-700: #355b67;
  --color-into-the-night-800: #254751;
  --color-into-the-night-900: #0a3844;
  --color-into-the-night-950: #0d2228;
  --color-philodendron: #0f6152;
  --color-philodendron-50: #d9fff4;
  --color-philodendron-100: #caf6ea;
  --color-philodendron-200: #afe4d6;
  --color-philodendron-300: #92cfbf;
  --color-philodendron-400: #6bb09f;
  --color-philodendron-500: #4c9483;
  --color-philodendron-600: #317869;
  --color-philodendron-700: #0f6152;
  --color-philodendron-800: #0c4c40;
  --color-philodendron-900: #033b31;
  --color-philodendron-950: #00251e;
  --color-cruising: #008596;
  --color-cruising-50: #e2faff;
  --color-cruising-100: #caf6ff;
  --color-cruising-200: #a4e9f5;
  --color-cruising-300: #85d5e4;
  --color-cruising-400: #5ab9c9;
  --color-cruising-500: #349fb0;
  --color-cruising-600: #008596;
  --color-cruising-700: #006a77;
  --color-cruising-800: #00525e;
  --color-cruising-900: #003f48;
  --color-cruising-950: #00272e;
  --color-menthol-kiss: #a7e0d1;
  --color-menthol-kiss-50: #dafaf1;
  --color-menthol-kiss-100: #ccf0e6;
  --color-menthol-kiss-200: #a7e0d1;
  --color-menthol-kiss-300: #98c8bc;
  --color-menthol-kiss-400: #75ab9d;
  --color-menthol-kiss-500: #599083;
  --color-menthol-kiss-600: #417669;
  --color-menthol-kiss-700: #2e5f54;
  --color-menthol-kiss-800: #1f4b42;
  --color-menthol-kiss-900: #143a32;
  --color-menthol-kiss-950: #09251f;
  --color-king-neptune: #7496ba;
  --color-king-neptune-50: #f2f8ff;
  --color-king-neptune-100: #e5f1ff;
  --color-king-neptune-200: #c8e1fd;
  --color-king-neptune-300: #b0cdec;
  --color-king-neptune-400: #8fb0d2;
  --color-king-neptune-500: #7496ba;
  --color-king-neptune-600: #58799b;
  --color-king-neptune-700: #41607f;
  --color-king-neptune-800: #2f4a66;
  --color-king-neptune-900: #21384f;
  --color-king-neptune-950: #122233;
  --color-clear-sky: #85c9fd;
  --color-clear-sky-50: #edf7ff;
  --color-clear-sky-100: #daeeff;
  --color-clear-sky-200: #b3ddff;
  --color-clear-sky-300: #85c9fd;
  --color-clear-sky-400: #69a9d9;
  --color-clear-sky-500: #4a8dbe;
  --color-clear-sky-600: #2f72a0;
  --color-clear-sky-700: #1a5a85;
  --color-clear-sky-800: #0a466b;
  --color-clear-sky-900: #023655;
  --color-clear-sky-950: #002238;
}