Coffee Adept to Wasabi color palette

7D5400Coffee Adept 698351Kale BF9755Amaretto Sour 38375AMediaeval Blue DAD7FFIcy Plains ADD47BWasabi

Open in generator Export PNG, PDF, ASE…

About this palette

Coffee Adept to Wasabi is a 6-color cool, earthy palette: #7D5400 (Coffee Adept), #698351 (Kale), #BF9755 (Amaretto Sour), #38375A (Mediaeval Blue), #DAD7FF (Icy Plains), #ADD47B (Wasabi). It mixes brown, green, yellow, purple tones and feels cool overall. The strongest text pairing is #38375A on #DAD7FF with a contrast ratio of 8.13:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Coffee Adept	rgb(125, 84, 0)	hsl(40, 100%, 25%)
Kale	rgb(105, 131, 81)	hsl(91, 24%, 42%)
Amaretto Sour	rgb(191, 151, 85)	hsl(37, 45%, 54%)
Mediaeval Blue	rgb(56, 55, 90)	hsl(242, 24%, 28%)
Icy Plains	rgb(218, 215, 255)	hsl(244, 100%, 92%)
Wasabi	rgb(173, 212, 123)	hsl(86, 51%, 66%)

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.

Aa8.13:1 Very good#38375A on #DAD7FF
Aa8.13:1 Very good#DAD7FF on #38375A
Aa6.70:1 Good#38375A on #ADD47B
Aa6.70:1 Good#ADD47B on #38375A
Aa4.82:1 Good#7D5400 on #DAD7FF
Aa4.82:1 Good#DAD7FF on #7D5400
Aa4.17:1 Poor#BF9755 on #38375A
Aa4.17:1 Poor#38375A on #BF9755

Color blindness preview

CSS variables

/* Coffee Adept to Wasabi — https://swatchly.xyz/palette/7d5400-698351-bf9755-38375a-dad7ff-add47b */
:root {
  --coffee-adept: #7d5400;
  --kale: #698351;
  --amaretto-sour: #bf9755;
  --mediaeval-blue: #38375a;
  --icy-plains: #dad7ff;
  --wasabi: #add47b;
}

Tailwind CSS v4

/* Coffee Adept to Wasabi — https://swatchly.xyz/palette/7d5400-698351-bf9755-38375a-dad7ff-add47b */
@theme {
  --color-coffee-adept: #7d5400;
  --color-coffee-adept-50: #fff3e3;
  --color-coffee-adept-100: #ffe7c6;
  --color-coffee-adept-200: #f5d3a3;
  --color-coffee-adept-300: #e4bd86;
  --color-coffee-adept-400: #c89e5f;
  --color-coffee-adept-500: #ae8340;
  --color-coffee-adept-600: #946a24;
  --color-coffee-adept-700: #7d5400;
  --color-coffee-adept-800: #624100;
  --color-coffee-adept-900: #4c3200;
  --color-coffee-adept-950: #311e00;
  --color-kale: #698351;
  --color-kale-50: #e8f9db;
  --color-kale-100: #dbeecb;
  --color-kale-200: #c3d9b0;
  --color-kale-300: #a8c192;
  --color-kale-400: #86a06e;
  --color-kale-500: #698351;
  --color-kale-600: #526a3b;
  --color-kale-700: #40552b;
  --color-kale-800: #31431e;
  --color-kale-900: #253515;
  --color-kale-950: #16220b;
  --color-amaretto-sour: #bf9755;
  --color-amaretto-sour-50: #fff2df;
  --color-amaretto-sour-100: #ffe6be;
  --color-amaretto-sour-200: #f0d09f;
  --color-amaretto-sour-300: #dcb880;
  --color-amaretto-sour-400: #bf9755;
  --color-amaretto-sour-500: #a37c3a;
  --color-amaretto-sour-600: #87621f;
  --color-amaretto-sour-700: #6e4d07;
  --color-amaretto-sour-800: #583b00;
  --color-amaretto-sour-900: #442d00;
  --color-amaretto-sour-950: #2c1c00;
  --color-mediaeval-blue: #38375a;
  --color-mediaeval-blue-50: #f4f4ff;
  --color-mediaeval-blue-100: #e8e9ff;
  --color-mediaeval-blue-200: #d3d4f5;
  --color-mediaeval-blue-300: #bbbce1;
  --color-mediaeval-blue-400: #9a9bc2;
  --color-mediaeval-blue-500: #7e7ea6;
  --color-mediaeval-blue-600: #636388;
  --color-mediaeval-blue-700: #4c4b6c;
  --color-mediaeval-blue-800: #38375a;
  --color-mediaeval-blue-900: #2b2b42;
  --color-mediaeval-blue-950: #19192a;
  --color-icy-plains: #dad7ff;
  --color-icy-plains-50: #f8f7ff;
  --color-icy-plains-100: #eeedff;
  --color-icy-plains-200: #dad7ff;
  --color-icy-plains-300: #c3c1e1;
  --color-icy-plains-400: #a3a0c4;
  --color-icy-plains-500: #8783a8;
  --color-icy-plains-600: #6c688b;
  --color-icy-plains-700: #555171;
  --color-icy-plains-800: #413e5a;
  --color-icy-plains-900: #322f46;
  --color-icy-plains-950: #1f1d2d;
  --color-wasabi: #add47b;
  --color-wasabi-50: #ecffd7;
  --color-wasabi-100: #dff8c3;
  --color-wasabi-200: #c9e7a7;
  --color-wasabi-300: #add47b;
  --color-wasabi-400: #8fb25f;
  --color-wasabi-500: #72963f;
  --color-wasabi-600: #587a21;
  --color-wasabi-700: #436208;
  --color-wasabi-800: #334c00;
  --color-wasabi-900: #263a00;
  --color-wasabi-950: #162400;
}