Midnight Pines to Muddy Yellow color palette

1F2300Midnight Pines 7D2A7AHello Darkness My Old Friend E5EBFFCotton Boll 7585C3Orbital B8B000Muddy Yellow

Open in generator Export PNG, PDF, ASE…

About this palette

Midnight Pines to Muddy Yellow is a 5-color cool palette: #1F2300 (Midnight Pines), #7D2A7A (Hello Darkness My Old Friend), #E5EBFF (Cotton Boll), #7585C3 (Orbital), #B8B000 (Muddy Yellow). It mixes green, purple, white, blue, yellow tones and feels cool overall. The strongest text pairing is #1F2300 on #E5EBFF with a contrast ratio of 13.60:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Pines	rgb(31, 35, 0)	hsl(67, 100%, 7%)
Hello Darkness My Old Friend	rgb(125, 42, 122)	hsl(302, 50%, 33%)
Cotton Boll	rgb(229, 235, 255)	hsl(226, 100%, 95%)
Orbital	rgb(117, 133, 195)	hsl(228, 39%, 61%)
Muddy Yellow	rgb(184, 176, 0)	hsl(57, 100%, 36%)

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.

Aa13.60:1 Super#1F2300 on #E5EBFF
Aa13.60:1 Super#E5EBFF on #1F2300
Aa7.12:1 Very good#1F2300 on #B8B000
Aa7.12:1 Very good#B8B000 on #1F2300
Aa7.11:1 Very good#7D2A7A on #E5EBFF
Aa7.11:1 Very good#E5EBFF on #7D2A7A
Aa4.54:1 Good#1F2300 on #7585C3
Aa4.54:1 Good#7585C3 on #1F2300

Color blindness preview

CSS variables

/* Midnight Pines to Muddy Yellow — https://swatchly.xyz/palette/1f2300-7d2a7a-e5ebff-7585c3-b8b000 */
:root {
  --midnight-pines: #1f2300;
  --hello-darkness-my-old-friend: #7d2a7a;
  --cotton-boll: #e5ebff;
  --orbital: #7585c3;
  --muddy-yellow: #b8b000;
}

Tailwind CSS v4

/* Midnight Pines to Muddy Yellow — https://swatchly.xyz/palette/1f2300-7d2a7a-e5ebff-7585c3-b8b000 */
@theme {
  --color-midnight-pines: #1f2300;
  --color-midnight-pines-50: #f4f8e1;
  --color-midnight-pines-100: #eaeed5;
  --color-midnight-pines-200: #d6dbbd;
  --color-midnight-pines-300: #bfc5a3;
  --color-midnight-pines-400: #9fa680;
  --color-midnight-pines-500: #848b64;
  --color-midnight-pines-600: #6a704b;
  --color-midnight-pines-700: #545a38;
  --color-midnight-pines-800: #424629;
  --color-midnight-pines-900: #32361d;
  --color-midnight-pines-950: #1f2300;
  --color-hello-darkness-my-old-friend: #7d2a7a;
  --color-hello-darkness-my-old-friend-50: #fff0fd;
  --color-hello-darkness-my-old-friend-100: #ffe0fc;
  --color-hello-darkness-my-old-friend-200: #ffbefa;
  --color-hello-darkness-my-old-friend-300: #eea1e9;
  --color-hello-darkness-my-old-friend-400: #d17ccc;
  --color-hello-darkness-my-old-friend-500: #b45fb0;
  --color-hello-darkness-my-old-friend-600: #964492;
  --color-hello-darkness-my-old-friend-700: #7d2a7a;
  --color-hello-darkness-my-old-friend-800: #622060;
  --color-hello-darkness-my-old-friend-900: #4d164c;
  --color-hello-darkness-my-old-friend-950: #320a31;
  --color-cotton-boll: #e5ebff;
  --color-cotton-boll-50: #f2f5ff;
  --color-cotton-boll-100: #e5ebff;
  --color-cotton-boll-200: #d3d7e6;
  --color-cotton-boll-300: #bcc1d1;
  --color-cotton-boll-400: #9ca1b3;
  --color-cotton-boll-500: #808698;
  --color-cotton-boll-600: #666b7c;
  --color-cotton-boll-700: #505564;
  --color-cotton-boll-800: #3e424f;
  --color-cotton-boll-900: #2f323e;
  --color-cotton-boll-950: #1d1f27;
  --color-orbital: #7585c3;
  --color-orbital-50: #f2f5ff;
  --color-orbital-100: #e6ecff;
  --color-orbital-200: #ccd7ff;
  --color-orbital-300: #b1c0f8;
  --color-orbital-400: #90a0de;
  --color-orbital-500: #7585c3;
  --color-orbital-600: #5b6aa5;
  --color-orbital-700: #465388;
  --color-orbital-800: #35406f;
  --color-orbital-900: #273058;
  --color-orbital-950: #171d3a;
  --color-muddy-yellow: #b8b000;
  --color-muddy-yellow-50: #fffdbc;
  --color-muddy-yellow-100: #f7f5ac;
  --color-muddy-yellow-200: #e7e38a;
  --color-muddy-yellow-300: #d3ce64;
  --color-muddy-yellow-400: #b8b000;
  --color-muddy-yellow-500: #999200;
  --color-muddy-yellow-600: #7b7500;
  --color-muddy-yellow-700: #615c00;
  --color-muddy-yellow-800: #4b4700;
  --color-muddy-yellow-900: #393600;
  --color-muddy-yellow-950: #222000;
}