Peachy Milk to Freefall Color Palette

About this palette

Peachy Milk to Freefall is a 5-color muted palette: #F1E0D8 (Peachy Milk), #1E3136 (Elite Teal), #887A52 (Verdant Leaf), #CCAD9E (Frappé), #555569 (Freefall). It mixes gray, yellow, orange tones and feels warm overall. The strongest text pairing is #F1E0D8 on #1E3136 with a contrast ratio of 10.59:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Peachy Milk	rgb(241, 224, 216)	hsl(19, 47%, 90%)
Elite Teal	rgb(30, 49, 54)	hsl(192, 29%, 16%)
Verdant Leaf	rgb(136, 122, 82)	hsl(44, 25%, 43%)
Frappé	rgb(204, 173, 158)	hsl(20, 31%, 71%)
Freefall	rgb(85, 85, 105)	hsl(240, 11%, 37%)

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.59:1 Very good#F1E0D8 on #1E3136
Aa10.59:1 Very good#1E3136 on #F1E0D8
Aa6.49:1 Good#1E3136 on #CCAD9E
Aa6.49:1 Good#CCAD9E on #1E3136
Aa5.67:1 Good#F1E0D8 on #555569
Aa5.67:1 Good#555569 on #F1E0D8
Aa3.47:1 Poor#CCAD9E on #555569
Aa3.47:1 Poor#555569 on #CCAD9E

Color blindness preview

CSS variables

/* Peachy Milk to Freefall — https://swatchly.xyz/palette/f1e0d8-1e3136-887a52-ccad9e-555569 */
:root {
  --peachy-milk: #f1e0d8;
  --elite-teal: #1e3136;
  --verdant-leaf: #887a52;
  --frapp: #ccad9e;
  --freefall: #555569;
}

Tailwind CSS v4

/* Peachy Milk to Freefall — https://swatchly.xyz/palette/f1e0d8-1e3136-887a52-ccad9e-555569 */
@theme {
  --color-peachy-milk: #f1e0d8;
  --color-peachy-milk-50: #f7ede8;
  --color-peachy-milk-100: #f1e0d8;
  --color-peachy-milk-200: #dbcfc8;
  --color-peachy-milk-300: #c7b9b2;
  --color-peachy-milk-400: #aa9b93;
  --color-peachy-milk-500: #908079;
  --color-peachy-milk-600: #766760;
  --color-peachy-milk-700: #5f524c;
  --color-peachy-milk-800: #4b403a;
  --color-peachy-milk-900: #3a302c;
  --color-peachy-milk-950: #241e1a;
  --color-elite-teal: #1e3136;
  --color-elite-teal-50: #ebf8fb;
  --color-elite-teal-100: #e0eef2;
  --color-elite-teal-200: #cadbe0;
  --color-elite-teal-300: #b2c5ca;
  --color-elite-teal-400: #90a5ab;
  --color-elite-teal-500: #73888e;
  --color-elite-teal-600: #596d72;
  --color-elite-teal-700: #43555a;
  --color-elite-teal-800: #314145;
  --color-elite-teal-900: #1e3136;
  --color-elite-teal-950: #141d1f;
  --color-verdant-leaf: #887a52;
  --color-verdant-leaf-50: #fbf3da;
  --color-verdant-leaf-100: #f0e7cb;
  --color-verdant-leaf-200: #dcd1b0;
  --color-verdant-leaf-300: #c5b893;
  --color-verdant-leaf-400: #a5976f;
  --color-verdant-leaf-500: #887a52;
  --color-verdant-leaf-600: #6f623c;
  --color-verdant-leaf-700: #594d2b;
  --color-verdant-leaf-800: #473c1e;
  --color-verdant-leaf-900: #382f15;
  --color-verdant-leaf-950: #241d0a;
  --color-frapp: #ccad9e;
  --color-frapp-50: #feeae1;
  --color-frapp-100: #f3ddd3;
  --color-frapp-200: #e0c7bb;
  --color-frapp-300: #ccad9e;
  --color-frapp-400: #ae9082;
  --color-frapp-500: #947769;
  --color-frapp-600: #7a5f52;
  --color-frapp-700: #644b40;
  --color-frapp-800: #503b31;
  --color-frapp-900: #402e25;
  --color-frapp-950: #291c15;
  --color-freefall: #555569;
  --color-freefall-50: #f4f4ff;
  --color-freefall-100: #e9eaf9;
  --color-freefall-200: #d6d6e8;
  --color-freefall-300: #bfc0d3;
  --color-freefall-400: #a0a0b6;
  --color-freefall-500: #85859b;
  --color-freefall-600: #6b6b80;
  --color-freefall-700: #555569;
  --color-freefall-800: #424252;
  --color-freefall-900: #323240;
  --color-freefall-950: #1f1f29;
}