Midnight Dreams to Bordeaux color palette

0B223AMidnight Dreams 489CFFSky Dancer 578400Avocado FFDEE1Pink Pleasure ADD26EJuicy Lime 7D042DBordeaux

Open in generator Export PNG, PDF, ASE…

About this palette

Midnight Dreams to Bordeaux is a 6-color cool palette: #0B223A (Midnight Dreams), #489CFF (Sky Dancer), #578400 (Avocado), #FFDEE1 (Pink Pleasure), #ADD26E (Juicy Lime), #7D042D (Bordeaux). It mixes blue, green, pink, red tones and feels cool overall. The strongest text pairing is #0B223A on #FFDEE1 with a contrast ratio of 12.87:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Dreams	rgb(11, 34, 58)	hsl(211, 68%, 14%)
Sky Dancer	rgb(72, 156, 255)	hsl(212, 100%, 64%)
Avocado	rgb(87, 132, 0)	hsl(80, 100%, 26%)
Pink Pleasure	rgb(255, 222, 225)	hsl(355, 100%, 94%)
Juicy Lime	rgb(173, 210, 110)	hsl(82, 53%, 63%)
Bordeaux	rgb(125, 4, 45)	hsl(340, 94%, 25%)

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.87:1 Super#0B223A on #FFDEE1
Aa12.87:1 Super#FFDEE1 on #0B223A
Aa9.37:1 Very good#0B223A on #ADD26E
Aa9.37:1 Very good#ADD26E on #0B223A
Aa8.71:1 Very good#FFDEE1 on #7D042D
Aa8.71:1 Very good#7D042D on #FFDEE1
Aa6.34:1 Good#ADD26E on #7D042D
Aa6.34:1 Good#7D042D on #ADD26E

Color blindness preview

CSS variables

/* Midnight Dreams to Bordeaux — https://swatchly.xyz/palette/0b223a-489cff-578400-ffdee1-add26e-7d042d */
:root {
  --midnight-dreams: #0b223a;
  --sky-dancer: #489cff;
  --avocado: #578400;
  --pink-pleasure: #ffdee1;
  --juicy-lime: #add26e;
  --bordeaux: #7d042d;
}

Tailwind CSS v4

/* Midnight Dreams to Bordeaux — https://swatchly.xyz/palette/0b223a-489cff-578400-ffdee1-add26e-7d042d */
@theme {
  --color-midnight-dreams: #0b223a;
  --color-midnight-dreams-50: #eef6ff;
  --color-midnight-dreams-100: #ddedff;
  --color-midnight-dreams-200: #c5daf2;
  --color-midnight-dreams-300: #acc4df;
  --color-midnight-dreams-400: #8aa4c2;
  --color-midnight-dreams-500: #6f89a7;
  --color-midnight-dreams-600: #566f8b;
  --color-midnight-dreams-700: #425872;
  --color-midnight-dreams-800: #31455c;
  --color-midnight-dreams-900: #253649;
  --color-midnight-dreams-950: #0b223a;
  --color-sky-dancer: #489cff;
  --color-sky-dancer-50: #ebf4ff;
  --color-sky-dancer-100: #d8e9ff;
  --color-sky-dancer-200: #b5d6ff;
  --color-sky-dancer-300: #8bbeff;
  --color-sky-dancer-400: #489cff;
  --color-sky-dancer-500: #2a81e1;
  --color-sky-dancer-600: #0666c2;
  --color-sky-dancer-700: #00519e;
  --color-sky-dancer-800: #003f7e;
  --color-sky-dancer-900: #003164;
  --color-sky-dancer-950: #001f43;
  --color-avocado: #578400;
  --color-avocado-50: #e7ffcf;
  --color-avocado-100: #d9fab9;
  --color-avocado-200: #c4e99d;
  --color-avocado-300: #acd67d;
  --color-avocado-400: #8bb953;
  --color-avocado-500: #709e2f;
  --color-avocado-600: #578400;
  --color-avocado-700: #446900;
  --color-avocado-800: #345200;
  --color-avocado-900: #273f00;
  --color-avocado-950: #172700;
  --color-pink-pleasure: #ffdee1;
  --color-pink-pleasure-50: #ffedee;
  --color-pink-pleasure-100: #ffdee1;
  --color-pink-pleasure-200: #e6cdd0;
  --color-pink-pleasure-300: #d2b7b9;
  --color-pink-pleasure-400: #b5979a;
  --color-pink-pleasure-500: #9a7c7f;
  --color-pink-pleasure-600: #7f6366;
  --color-pink-pleasure-700: #674e50;
  --color-pink-pleasure-800: #513c3e;
  --color-pink-pleasure-900: #402d2f;
  --color-pink-pleasure-950: #281b1d;
  --color-juicy-lime: #add26e;
  --color-juicy-lime-50: #eaffcd;
  --color-juicy-lime-100: #dff7bb;
  --color-juicy-lime-200: #c9e59e;
  --color-juicy-lime-300: #add26e;
  --color-juicy-lime-400: #8fb153;
  --color-juicy-lime-500: #73952f;
  --color-juicy-lime-600: #5a7909;
  --color-juicy-lime-700: #466000;
  --color-juicy-lime-800: #364b00;
  --color-juicy-lime-900: #283a00;
  --color-juicy-lime-950: #182400;
  --color-bordeaux: #7d042d;
  --color-bordeaux-50: #fff1f2;
  --color-bordeaux-100: #ffe3e6;
  --color-bordeaux-200: #ffc7cc;
  --color-bordeaux-300: #ffa3ae;
  --color-bordeaux-400: #eb788a;
  --color-bordeaux-500: #ce5a6f;
  --color-bordeaux-600: #af3f55;
  --color-bordeaux-700: #902a41;
  --color-bordeaux-800: #7d042d;
  --color-bordeaux-900: #5d1024;
  --color-bordeaux-950: #3d0614;
}