Midnight Pines to Veiling Waterfalls color palette

1C2710Midnight Pines 484D2DJungle King 4C7BA7Into the Blue DA9AA6Blush Bomb D0EBFFVeiling Waterfalls

Open in generator Export PNG, PDF, ASE…

About this palette

Midnight Pines to Veiling Waterfalls is a 5-color muted, cool palette: #1C2710 (Midnight Pines), #484D2D (Jungle King), #4C7BA7 (Into the Blue), #DA9AA6 (Blush Bomb), #D0EBFF (Veiling Waterfalls). It mixes green, blue, pink tones and feels cool overall. The strongest text pairing is #1C2710 on #D0EBFF with a contrast ratio of 12.63:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Pines	rgb(28, 39, 16)	hsl(89, 42%, 11%)
Jungle King	rgb(72, 77, 45)	hsl(69, 26%, 24%)
Into the Blue	rgb(76, 123, 167)	hsl(209, 37%, 48%)
Blush Bomb	rgb(218, 154, 166)	hsl(349, 46%, 73%)
Veiling Waterfalls	rgb(208, 235, 255)	hsl(206, 100%, 91%)

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.

Aa12.63:1 Super#1C2710 on #D0EBFF
Aa12.63:1 Super#D0EBFF on #1C2710
Aa7.16:1 Very good#484D2D on #D0EBFF
Aa7.16:1 Very good#D0EBFF on #484D2D
Aa6.80:1 Good#1C2710 on #DA9AA6
Aa6.80:1 Good#DA9AA6 on #1C2710
Aa3.85:1 Poor#484D2D on #DA9AA6
Aa3.85:1 Poor#DA9AA6 on #484D2D

Color blindness preview

CSS variables

/* Midnight Pines to Veiling Waterfalls — https://swatchly.xyz/palette/1c2710-484d2d-4c7ba7-da9aa6-d0ebff */
:root {
  --midnight-pines: #1c2710;
  --jungle-king: #484d2d;
  --into-the-blue: #4c7ba7;
  --blush-bomb: #da9aa6;
  --veiling-waterfalls: #d0ebff;
}

Tailwind CSS v4

/* Midnight Pines to Veiling Waterfalls — https://swatchly.xyz/palette/1c2710-484d2d-4c7ba7-da9aa6-d0ebff */
@theme {
  --color-midnight-pines: #1c2710;
  --color-midnight-pines-50: #f0f9e8;
  --color-midnight-pines-100: #e5efdd;
  --color-midnight-pines-200: #d1dcc6;
  --color-midnight-pines-300: #b9c6ad;
  --color-midnight-pines-400: #99a78c;
  --color-midnight-pines-500: #7e8c71;
  --color-midnight-pines-600: #657259;
  --color-midnight-pines-700: #505c45;
  --color-midnight-pines-800: #3f4934;
  --color-midnight-pines-900: #313a28;
  --color-midnight-pines-950: #1c2710;
  --color-jungle-king: #484d2d;
  --color-jungle-king-50: #f4f8e3;
  --color-jungle-king-100: #eaeed7;
  --color-jungle-king-200: #d6dbc0;
  --color-jungle-king-300: #c0c6a7;
  --color-jungle-king-400: #a2a887;
  --color-jungle-king-500: #888e6c;
  --color-jungle-king-600: #6f7554;
  --color-jungle-king-700: #5a5f40;
  --color-jungle-king-800: #484d2d;
  --color-jungle-king-900: #373b23;
  --color-jungle-king-950: #232514;
  --color-into-the-blue: #4c7ba7;
  --color-into-the-blue-50: #eef6ff;
  --color-into-the-blue-100: #e0efff;
  --color-into-the-blue-200: #c0e0ff;
  --color-into-the-blue-300: #a3ccf3;
  --color-into-the-blue-400: #81aeda;
  --color-into-the-blue-500: #6594c1;
  --color-into-the-blue-600: #4c7ba7;
  --color-into-the-blue-700: #36628a;
  --color-into-the-blue-800: #254c70;
  --color-into-the-blue-900: #183a58;
  --color-into-the-blue-950: #0b243a;
  --color-blush-bomb: #da9aa6;
  --color-blush-bomb-50: #fff8f9;
  --color-blush-bomb-100: #ffedf0;
  --color-blush-bomb-200: #ffd4db;
  --color-blush-bomb-300: #f1bcc5;
  --color-blush-bomb-400: #da9aa6;
  --color-blush-bomb-500: #ba7d89;
  --color-blush-bomb-600: #9b606c;
  --color-blush-bomb-700: #7e4954;
  --color-blush-bomb-800: #643640;
  --color-blush-bomb-900: #4e272f;
  --color-blush-bomb-950: #31161c;
  --color-veiling-waterfalls: #d0ebff;
  --color-veiling-waterfalls-50: #e5f4ff;
  --color-veiling-waterfalls-100: #d0ebff;
  --color-veiling-waterfalls-200: #c3d7e6;
  --color-veiling-waterfalls-300: #abc2d2;
  --color-veiling-waterfalls-400: #8ba3b5;
  --color-veiling-waterfalls-500: #70889b;
  --color-veiling-waterfalls-600: #576f80;
  --color-veiling-waterfalls-700: #435868;
  --color-veiling-waterfalls-800: #324552;
  --color-veiling-waterfalls-900: #253540;
  --color-veiling-waterfalls-950: #152129;
}