Midnight Dreams to Cream Puff color palette

002632Midnight Dreams 712D00Cold Press Coffee 00758EBlue Fjord CE824EBrown Sugar Glaze FFB89CCream Puff

Open in generator Export PNG, PDF, ASE…

About this palette

Midnight Dreams to Cream Puff is a 5-color warm, earthy, vintage palette: #002632 (Midnight Dreams), #712D00 (Cold Press Coffee), #00758E (Blue Fjord), #CE824E (Brown Sugar Glaze), #FFB89C (Cream Puff). It mixes blue, brown, orange tones and feels warm overall. The strongest text pairing is #002632 on #FFB89C with a contrast ratio of 9.51:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Dreams	rgb(0, 38, 50)	hsl(194, 100%, 10%)
Cold Press Coffee	rgb(113, 45, 0)	hsl(24, 100%, 22%)
Blue Fjord	rgb(0, 117, 142)	hsl(191, 100%, 28%)
Brown Sugar Glaze	rgb(206, 130, 78)	hsl(24, 57%, 56%)
Cream Puff	rgb(255, 184, 156)	hsl(17, 100%, 81%)

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.51:1 Very good#002632 on #FFB89C
Aa9.51:1 Very good#FFB89C on #002632
Aa6.06:1 Good#712D00 on #FFB89C
Aa6.06:1 Good#FFB89C on #712D00
Aa5.23:1 Good#002632 on #CE824E
Aa5.23:1 Good#CE824E on #002632
Aa3.33:1 Poor#712D00 on #CE824E
Aa3.33:1 Poor#CE824E on #712D00

Color blindness preview

CSS variables

/* Midnight Dreams to Cream Puff — https://swatchly.xyz/palette/002632-712d00-00758e-ce824e-ffb89c */
:root {
  --midnight-dreams: #002632;
  --cold-press-coffee: #712d00;
  --blue-fjord: #00758e;
  --brown-sugar-glaze: #ce824e;
  --cream-puff: #ffb89c;
}

Tailwind CSS v4

/* Midnight Dreams to Cream Puff — https://swatchly.xyz/palette/002632-712d00-00758e-ce824e-ffb89c */
@theme {
  --color-midnight-dreams: #002632;
  --color-midnight-dreams-50: #e8f8ff;
  --color-midnight-dreams-100: #d8f0fa;
  --color-midnight-dreams-200: #c0dde9;
  --color-midnight-dreams-300: #a6c7d4;
  --color-midnight-dreams-400: #84a8b7;
  --color-midnight-dreams-500: #688d9c;
  --color-midnight-dreams-600: #4f7381;
  --color-midnight-dreams-700: #3b5c69;
  --color-midnight-dreams-800: #2b4954;
  --color-midnight-dreams-900: #203942;
  --color-midnight-dreams-950: #002632;
  --color-cold-press-coffee: #712d00;
  --color-cold-press-coffee-50: #fff2ec;
  --color-cold-press-coffee-100: #ffe5d9;
  --color-cold-press-coffee-200: #ffcab1;
  --color-cold-press-coffee-300: #f4af8e;
  --color-cold-press-coffee-400: #d88e69;
  --color-cold-press-coffee-500: #bc714c;
  --color-cold-press-coffee-600: #9f5833;
  --color-cold-press-coffee-700: #844320;
  --color-cold-press-coffee-800: #712d00;
  --color-cold-press-coffee-900: #552409;
  --color-cold-press-coffee-950: #381503;
  --color-blue-fjord: #00758e;
  --color-blue-fjord-50: #e6f9ff;
  --color-blue-fjord-100: #cbf2ff;
  --color-blue-fjord-200: #a2e2f6;
  --color-blue-fjord-300: #81cce3;
  --color-blue-fjord-400: #56adc6;
  --color-blue-fjord-500: #3291aa;
  --color-blue-fjord-600: #00758e;
  --color-blue-fjord-700: #005d71;
  --color-blue-fjord-800: #004959;
  --color-blue-fjord-900: #003845;
  --color-blue-fjord-950: #00232c;
  --color-brown-sugar-glaze: #ce824e;
  --color-brown-sugar-glaze-50: #ffede3;
  --color-brown-sugar-glaze-100: #ffdeca;
  --color-brown-sugar-glaze-200: #ffc199;
  --color-brown-sugar-glaze-300: #eca678;
  --color-brown-sugar-glaze-400: #ce824e;
  --color-brown-sugar-glaze-500: #b26934;
  --color-brown-sugar-glaze-600: #96511b;
  --color-brown-sugar-glaze-700: #7c3d06;
  --color-brown-sugar-glaze-800: #642f00;
  --color-brown-sugar-glaze-900: #4f2400;
  --color-brown-sugar-glaze-950: #351500;
  --color-cream-puff: #ffb89c;
  --color-cream-puff-50: #fff9f7;
  --color-cream-puff-100: #ffeee8;
  --color-cream-puff-200: #ffd6c6;
  --color-cream-puff-300: #ffb89c;
  --color-cream-puff-400: #d8987f;
  --color-cream-puff-500: #bb7a60;
  --color-cream-puff-600: #9d5e45;
  --color-cream-puff-700: #804730;
  --color-cream-puff-800: #663420;
  --color-cream-puff-900: #4f2615;
  --color-cream-puff-950: #331609;
}