Cream Puff to Midnight Pines Color Palette

About this palette

Cream Puff to Midnight Pines is a 4-color muted, cool palette: #FEBEA4 (Cream Puff), #AB8FAE (Metal Petal), #305968 (Night Shift), #17220B (Midnight Pines). It mixes orange, pink, blue, green tones and feels cool overall. The strongest text pairing is #FEBEA4 on #17220B with a contrast ratio of 10.33:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cream Puff	rgb(254, 190, 164)	hsl(17, 98%, 82%)
Metal Petal	rgb(171, 143, 174)	hsl(294, 16%, 62%)
Night Shift	rgb(48, 89, 104)	hsl(196, 37%, 30%)
Midnight Pines	rgb(23, 34, 11)	hsl(89, 51%, 9%)

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.

Aa10.33:1 Very good#FEBEA4 on #17220B
Aa10.33:1 Very good#17220B on #FEBEA4
Aa5.73:1 Good#AB8FAE on #17220B
Aa5.73:1 Good#17220B on #AB8FAE
Aa4.76:1 Good#FEBEA4 on #305968
Aa4.76:1 Good#305968 on #FEBEA4

Color blindness preview

CSS variables

/* Cream Puff to Midnight Pines — https://swatchly.xyz/palette/febea4-ab8fae-305968-17220b */
:root {
  --cream-puff: #febea4;
  --metal-petal: #ab8fae;
  --night-shift: #305968;
  --midnight-pines: #17220b;
}

Tailwind CSS v4

/* Cream Puff to Midnight Pines — https://swatchly.xyz/palette/febea4-ab8fae-305968-17220b */
@theme {
  --color-cream-puff: #febea4;
  --color-cream-puff-50: #ffeae2;
  --color-cream-puff-100: #ffdbcd;
  --color-cream-puff-200: #febea4;
  --color-cream-puff-300: #e3ab95;
  --color-cream-puff-400: #c78c74;
  --color-cream-puff-500: #ac725a;
  --color-cream-puff-600: #905943;
  --color-cream-puff-700: #774531;
  --color-cream-puff-800: #613523;
  --color-cream-puff-900: #4c2818;
  --color-cream-puff-950: #31170c;
  --color-metal-petal: #ab8fae;
  --color-metal-petal-50: #fdecff;
  --color-metal-petal-100: #f3e0f5;
  --color-metal-petal-200: #e0c9e3;
  --color-metal-petal-300: #cab1cd;
  --color-metal-petal-400: #ab8fae;
  --color-metal-petal-500: #907593;
  --color-metal-petal-600: #765d79;
  --color-metal-petal-700: #604962;
  --color-metal-petal-800: #4c384e;
  --color-metal-petal-900: #3c2b3e;
  --color-metal-petal-950: #271a28;
  --color-night-shift: #305968;
  --color-night-shift-50: #e8f8ff;
  --color-night-shift-100: #d5f0fb;
  --color-night-shift-200: #bdddea;
  --color-night-shift-300: #a2c7d5;
  --color-night-shift-400: #7ea7b7;
  --color-night-shift-500: #618b9c;
  --color-night-shift-600: #48707f;
  --color-night-shift-700: #305968;
  --color-night-shift-800: #254551;
  --color-night-shift-900: #1a3540;
  --color-night-shift-950: #0d2128;
  --color-midnight-pines: #17220b;
  --color-midnight-pines-50: #f0f9e8;
  --color-midnight-pines-100: #e5efdd;
  --color-midnight-pines-200: #d0dcc6;
  --color-midnight-pines-300: #b9c6ad;
  --color-midnight-pines-400: #99a78c;
  --color-midnight-pines-500: #7d8c70;
  --color-midnight-pines-600: #637157;
  --color-midnight-pines-700: #4d5942;
  --color-midnight-pines-800: #3b4531;
  --color-midnight-pines-900: #2c3524;
  --color-midnight-pines-950: #17220b;
}