Coffee Adept to Deadly Depths Color Palette

About this palette

Coffee Adept to Deadly Depths is a 4-color vintage palette: #755200 (Coffee Adept), #00B1D8 (Aquarius), #FFE9C5 (Chess Ivory), #18143F (Deadly Depths). It mixes brown, blue, white, purple tones and feels balanced overall. The strongest text pairing is #FFE9C5 on #18143F with a contrast ratio of 14.63:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Coffee Adept	rgb(117, 82, 0)	hsl(42, 100%, 23%)
Aquarius	rgb(0, 177, 216)	hsl(191, 100%, 42%)
Chess Ivory	rgb(255, 233, 197)	hsl(37, 100%, 89%)
Deadly Depths	rgb(24, 20, 63)	hsl(246, 52%, 16%)

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.

Aa14.63:1 Super#FFE9C5 on #18143F
Aa14.63:1 Super#18143F on #FFE9C5
Aa6.84:1 Good#00B1D8 on #18143F
Aa6.84:1 Good#18143F on #00B1D8
Aa5.98:1 Good#755200 on #FFE9C5
Aa5.98:1 Good#FFE9C5 on #755200

Color blindness preview

CSS variables

/* Coffee Adept to Deadly Depths — https://swatchly.xyz/palette/755200-00b1d8-ffe9c5-18143f */
:root {
  --coffee-adept: #755200;
  --aquarius: #00b1d8;
  --chess-ivory: #ffe9c5;
  --deadly-depths: #18143f;
}

Tailwind CSS v4

/* Coffee Adept to Deadly Depths — https://swatchly.xyz/palette/755200-00b1d8-ffe9c5-18143f */
@theme {
  --color-coffee-adept: #755200;
  --color-coffee-adept-50: #fff4e1;
  --color-coffee-adept-100: #ffe8c2;
  --color-coffee-adept-200: #f1d4a4;
  --color-coffee-adept-300: #debd86;
  --color-coffee-adept-400: #c29d5f;
  --color-coffee-adept-500: #a78240;
  --color-coffee-adept-600: #8c6824;
  --color-coffee-adept-700: #755200;
  --color-coffee-adept-800: #5c4000;
  --color-coffee-adept-900: #473100;
  --color-coffee-adept-950: #2e1e00;
  --color-aquarius: #00b1d8;
  --color-aquarius-50: #e5f8ff;
  --color-aquarius-100: #cbf2ff;
  --color-aquarius-200: #93e4ff;
  --color-aquarius-300: #61d0f2;
  --color-aquarius-400: #00b1d8;
  --color-aquarius-500: #0093b4;
  --color-aquarius-600: #007792;
  --color-aquarius-700: #005e74;
  --color-aquarius-800: #004a5c;
  --color-aquarius-900: #003948;
  --color-aquarius-950: #00242e;
  --color-chess-ivory: #ffe9c5;
  --color-chess-ivory-50: #fff4e3;
  --color-chess-ivory-100: #ffe9c5;
  --color-chess-ivory-200: #e6d6bc;
  --color-chess-ivory-300: #d1bfa1;
  --color-chess-ivory-400: #b39f7f;
  --color-chess-ivory-500: #978362;
  --color-chess-ivory-600: #7c6949;
  --color-chess-ivory-700: #645236;
  --color-chess-ivory-800: #4f4026;
  --color-chess-ivory-900: #3d311b;
  --color-chess-ivory-950: #271e0e;
  --color-deadly-depths: #18143f;
  --color-deadly-depths-50: #f3f4ff;
  --color-deadly-depths-100: #e8e9ff;
  --color-deadly-depths-200: #d1d3fe;
  --color-deadly-depths-300: #b9bcec;
  --color-deadly-depths-400: #9a9cd0;
  --color-deadly-depths-500: #7e80b4;
  --color-deadly-depths-600: #636596;
  --color-deadly-depths-700: #4d4e7a;
  --color-deadly-depths-800: #3b3b61;
  --color-deadly-depths-900: #2c2c4c;
  --color-deadly-depths-950: #18143f;
}