Midnight Pines to Pastel Blue color palette

262000Midnight Pines 005866Abyssal Waters 007583Waterworld E77F7AJinza Safflower A7C2FFPastel Blue

About this palette

Midnight Pines to Pastel Blue is a 5-color cool, vintage palette: #262000 (Midnight Pines), #005866 (Abyssal Waters), #007583 (Waterworld), #E77F7A (Jinza Safflower), #A7C2FF (Pastel Blue). It mixes brown, turquoise, red, blue tones and feels cool overall. The strongest text pairing is #262000 on #A7C2FF with a contrast ratio of 9.16:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Pines	rgb(38, 32, 0)	hsl(51, 100%, 7%)
Abyssal Waters	rgb(0, 88, 102)	hsl(188, 100%, 20%)
Waterworld	rgb(0, 117, 131)	hsl(186, 100%, 26%)
Jinza Safflower	rgb(231, 127, 122)	hsl(3, 69%, 69%)
Pastel Blue	rgb(167, 194, 255)	hsl(222, 100%, 83%)

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.16:1 Very good#262000 on #A7C2FF
Aa9.16:1 Very good#A7C2FF on #262000
Aa5.98:1 Good#262000 on #E77F7A
Aa5.98:1 Good#E77F7A on #262000
Aa4.56:1 Good#005866 on #A7C2FF
Aa4.56:1 Good#A7C2FF on #005866
Aa3.05:1 Poor#007583 on #A7C2FF
Aa3.05:1 Poor#A7C2FF on #007583

Color blindness preview

CSS variables

/* Midnight Pines to Pastel Blue — https://swatchly.xyz/palette/262000-005866-007583-e77f7a-a7c2ff */
:root {
  --midnight-pines: #262000;
  --abyssal-waters: #005866;
  --waterworld: #007583;
  --jinza-safflower: #e77f7a;
  --pastel-blue: #a7c2ff;
}

Tailwind CSS v4

/* Midnight Pines to Pastel Blue — https://swatchly.xyz/palette/262000-005866-007583-e77f7a-a7c2ff */
@theme {
  --color-midnight-pines: #262000;
  --color-midnight-pines-50: #f9f6e1;
  --color-midnight-pines-100: #f0ecd5;
  --color-midnight-pines-200: #ddd8bd;
  --color-midnight-pines-300: #c7c2a2;
  --color-midnight-pines-400: #a9a380;
  --color-midnight-pines-500: #8e8764;
  --color-midnight-pines-600: #736d4b;
  --color-midnight-pines-700: #5c5638;
  --color-midnight-pines-800: #484328;
  --color-midnight-pines-900: #38341d;
  --color-midnight-pines-950: #262000;
  --color-abyssal-waters: #005866;
  --color-abyssal-waters-50: #e4faff;
  --color-abyssal-waters-100: #c9f4fe;
  --color-abyssal-waters-200: #ade0ec;
  --color-abyssal-waters-300: #8dc9d7;
  --color-abyssal-waters-400: #66a9b8;
  --color-abyssal-waters-500: #468d9b;
  --color-abyssal-waters-600: #2a707e;
  --color-abyssal-waters-700: #005866;
  --color-abyssal-waters-800: #06444f;
  --color-abyssal-waters-900: #01353e;
  --color-abyssal-waters-950: #002127;
  --color-waterworld: #007583;
  --color-waterworld-50: #e1fbff;
  --color-waterworld-100: #c0f5ff;
  --color-waterworld-200: #a2e3ee;
  --color-waterworld-300: #81cdd9;
  --color-waterworld-400: #56adbb;
  --color-waterworld-500: #32919f;
  --color-waterworld-600: #007583;
  --color-waterworld-700: #005d68;
  --color-waterworld-800: #004952;
  --color-waterworld-900: #003840;
  --color-waterworld-950: #002328;
  --color-jinza-safflower: #e77f7a;
  --color-jinza-safflower-50: #fff2f0;
  --color-jinza-safflower-100: #ffe4e2;
  --color-jinza-safflower-200: #ffc8c4;
  --color-jinza-safflower-300: #ffa59f;
  --color-jinza-safflower-400: #e77f7a;
  --color-jinza-safflower-500: #c86360;
  --color-jinza-safflower-600: #a94947;
  --color-jinza-safflower-700: #8c3434;
  --color-jinza-safflower-800: #712525;
  --color-jinza-safflower-900: #5a191a;
  --color-jinza-safflower-950: #3b0c0d;
  --color-pastel-blue: #a7c2ff;
  --color-pastel-blue-50: #f2f6ff;
  --color-pastel-blue-100: #e4edff;
  --color-pastel-blue-200: #c8d9ff;
  --color-pastel-blue-300: #a7c2ff;
  --color-pastel-blue-400: #89a2db;
  --color-pastel-blue-500: #6d86bf;
  --color-pastel-blue-600: #546ba1;
  --color-pastel-blue-700: #3f5485;
  --color-pastel-blue-800: #2f416c;
  --color-pastel-blue-900: #223155;
  --color-pastel-blue-950: #131e38;
}