Café au Lait to Cold Brew Coffee color palette

AA7E55Café au Lait 3E4825Palm Leaf F2FAFFCotton Ball DCC0FFNeon Boneyard 7A5939Cold Brew Coffee

About this palette

Café au Lait to Cold Brew Coffee is a 5-color muted, earthy, vintage palette: #AA7E55 (Café au Lait), #3E4825 (Palm Leaf), #F2FAFF (Cotton Ball), #DCC0FF (Neon Boneyard), #7A5939 (Cold Brew Coffee). It mixes orange, green, white, purple, brown tones and feels balanced overall. The strongest text pairing is #3E4825 on #F2FAFF with a contrast ratio of 9.22:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Café au Lait	rgb(170, 126, 85)	hsl(29, 33%, 50%)
Palm Leaf	rgb(62, 72, 37)	hsl(77, 32%, 21%)
Cotton Ball	rgb(242, 250, 255)	hsl(203, 100%, 97%)
Neon Boneyard	rgb(220, 192, 255)	hsl(267, 100%, 88%)
Cold Brew Coffee	rgb(122, 89, 57)	hsl(30, 36%, 35%)

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.22:1 Very good#3E4825 on #F2FAFF
Aa9.22:1 Very good#F2FAFF on #3E4825
Aa6.04:1 Good#3E4825 on #DCC0FF
Aa6.04:1 Good#DCC0FF on #3E4825
Aa6.00:1 Good#F2FAFF on #7A5939
Aa6.00:1 Good#7A5939 on #F2FAFF
Aa3.93:1 Poor#DCC0FF on #7A5939
Aa3.93:1 Poor#7A5939 on #DCC0FF

Color blindness preview

CSS variables

/* Café au Lait to Cold Brew Coffee — https://swatchly.xyz/palette/aa7e55-3e4825-f2faff-dcc0ff-7a5939 */
:root {
  --caf-au-lait: #aa7e55;
  --palm-leaf: #3e4825;
  --cotton-ball: #f2faff;
  --neon-boneyard: #dcc0ff;
  --cold-brew-coffee: #7a5939;
}

Tailwind CSS v4

/* Café au Lait to Cold Brew Coffee — https://swatchly.xyz/palette/aa7e55-3e4825-f2faff-dcc0ff-7a5939 */
@theme {
  --color-caf-au-lait: #aa7e55;
  --color-caf-au-lait-50: #fff3e9;
  --color-caf-au-lait-100: #ffe7d2;
  --color-caf-au-lait-200: #f5d1b2;
  --color-caf-au-lait-300: #e2ba96;
  --color-caf-au-lait-400: #c59a72;
  --color-caf-au-lait-500: #aa7e55;
  --color-caf-au-lait-600: #8d633c;
  --color-caf-au-lait-700: #734d28;
  --color-caf-au-lait-800: #5c3b1a;
  --color-caf-au-lait-900: #482c10;
  --color-caf-au-lait-950: #2e1a06;
  --color-palm-leaf: #3e4825;
  --color-palm-leaf-50: #f1f9e2;
  --color-palm-leaf-100: #e7efd6;
  --color-palm-leaf-200: #d2dcbe;
  --color-palm-leaf-300: #bbc7a5;
  --color-palm-leaf-400: #9ca882;
  --color-palm-leaf-500: #818c67;
  --color-palm-leaf-600: #67724e;
  --color-palm-leaf-700: #515b3a;
  --color-palm-leaf-800: #3e4825;
  --color-palm-leaf-900: #30371e;
  --color-palm-leaf-950: #1d2210;
  --color-cotton-ball: #f2faff;
  --color-cotton-ball-50: #f2faff;
  --color-cotton-ball-100: #eaeff2;
  --color-cotton-ball-200: #d5dbde;
  --color-cotton-ball-300: #bdc4c8;
  --color-cotton-ball-400: #9da4a8;
  --color-cotton-ball-500: #81888c;
  --color-cotton-ball-600: #666d71;
  --color-cotton-ball-700: #50565a;
  --color-cotton-ball-800: #3e4347;
  --color-cotton-ball-900: #2f3436;
  --color-cotton-ball-950: #1d2022;
  --color-neon-boneyard: #dcc0ff;
  --color-neon-boneyard-50: #f3ebff;
  --color-neon-boneyard-100: #ebdcff;
  --color-neon-boneyard-200: #dcc0ff;
  --color-neon-boneyard-300: #c5ade4;
  --color-neon-boneyard-400: #a88ec8;
  --color-neon-boneyard-500: #8f74ae;
  --color-neon-boneyard-600: #755b92;
  --color-neon-boneyard-700: #5f4779;
  --color-neon-boneyard-800: #4c3763;
  --color-neon-boneyard-900: #3b294e;
  --color-neon-boneyard-950: #251833;
  --color-cold-brew-coffee: #7a5939;
  --color-cold-brew-coffee-50: #fff3e8;
  --color-cold-brew-coffee-100: #fde4ce;
  --color-cold-brew-coffee-200: #ebcdb3;
  --color-cold-brew-coffee-300: #d5b496;
  --color-cold-brew-coffee-400: #b59271;
  --color-cold-brew-coffee-500: #977554;
  --color-cold-brew-coffee-600: #7a5939;
  --color-cold-brew-coffee-700: #62462a;
  --color-cold-brew-coffee-800: #4e361e;
  --color-cold-brew-coffee-900: #3e2915;
  --color-cold-brew-coffee-950: #27190a;
}