Capers to Very Coffee Color Palette

About this palette

Capers to Very Coffee is a 5-color warm, earthy, vintage palette: #8D7842 (Capers), #211A05 (Noir Mystique), #88ACF8 (Kitten’s Eye), #F5F8FF (Ghost White), #5B451D (Very Coffee). It mixes yellow, brown, blue, white tones and feels warm overall. The strongest text pairing is #211A05 on #F5F8FF with a contrast ratio of 16.26:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Capers	rgb(141, 120, 66)	hsl(43, 36%, 41%)
Noir Mystique	rgb(33, 26, 5)	hsl(45, 74%, 7%)
Kitten’s Eye	rgb(136, 172, 248)	hsl(221, 89%, 75%)
Ghost White	rgb(245, 248, 255)	hsl(222, 100%, 98%)
Very Coffee	rgb(91, 69, 29)	hsl(39, 52%, 24%)

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.

Aa16.26:1 Super#211A05 on #F5F8FF
Aa16.26:1 Super#F5F8FF on #211A05
Aa8.54:1 Very good#F5F8FF on #5B451D
Aa8.54:1 Very good#5B451D on #F5F8FF
Aa7.66:1 Very good#211A05 on #88ACF8
Aa7.66:1 Very good#88ACF8 on #211A05
Aa4.03:1 Poor#8D7842 on #F5F8FF
Aa4.03:1 Poor#F5F8FF on #8D7842

Color blindness preview

CSS variables

/* Capers to Very Coffee — https://swatchly.xyz/palette/8d7842-211a05-88acf8-f5f8ff-5b451d */
:root {
  --capers: #8d7842;
  --noir-mystique: #211a05;
  --kitten-s-eye: #88acf8;
  --ghost-white: #f5f8ff;
  --very-coffee: #5b451d;
}

Tailwind CSS v4

/* Capers to Very Coffee — https://swatchly.xyz/palette/8d7842-211a05-88acf8-f5f8ff-5b451d */
@theme {
  --color-capers: #8d7842;
  --color-capers-50: #fff2d2;
  --color-capers-100: #f4e6c2;
  --color-capers-200: #e1d0a5;
  --color-capers-300: #cab786;
  --color-capers-400: #aa9560;
  --color-capers-500: #8d7842;
  --color-capers-600: #74602c;
  --color-capers-700: #5d4c1c;
  --color-capers-800: #4a3b10;
  --color-capers-900: #3b2e08;
  --color-capers-950: #261c03;
  --color-noir-mystique: #211a05;
  --color-noir-mystique-50: #faf5e6;
  --color-noir-mystique-100: #f1ebdb;
  --color-noir-mystique-200: #ded7c4;
  --color-noir-mystique-300: #c8c1ab;
  --color-noir-mystique-400: #a9a189;
  --color-noir-mystique-500: #8d856c;
  --color-noir-mystique-600: #716a52;
  --color-noir-mystique-700: #59523d;
  --color-noir-mystique-800: #453f2d;
  --color-noir-mystique-900: #342e20;
  --color-noir-mystique-950: #211a05;
  --color-kitten-s-eye: #88acf8;
  --color-kitten-s-eye-50: #f7f9ff;
  --color-kitten-s-eye-100: #ebf2ff;
  --color-kitten-s-eye-200: #d1e0ff;
  --color-kitten-s-eye-300: #b2cbff;
  --color-kitten-s-eye-400: #88acf8;
  --color-kitten-s-eye-500: #6c8ed7;
  --color-kitten-s-eye-600: #5071b7;
  --color-kitten-s-eye-700: #3b5898;
  --color-kitten-s-eye-800: #2a437b;
  --color-kitten-s-eye-900: #1d3261;
  --color-kitten-s-eye-950: #0f1d3f;
  --color-ghost-white: #f5f8ff;
  --color-ghost-white-50: #f5f8ff;
  --color-ghost-white-100: #ecedf2;
  --color-ghost-white-200: #d7d9de;
  --color-ghost-white-300: #c0c2c8;
  --color-ghost-white-400: #a0a2a8;
  --color-ghost-white-500: #84868d;
  --color-ghost-white-600: #696c72;
  --color-ghost-white-700: #53555b;
  --color-ghost-white-800: #404247;
  --color-ghost-white-900: #313337;
  --color-ghost-white-950: #1e1f22;
  --color-very-coffee: #5b451d;
  --color-very-coffee-50: #fff4e1;
  --color-very-coffee-100: #f9e9ce;
  --color-very-coffee-200: #e8d5b5;
  --color-very-coffee-300: #d5bf9b;
  --color-very-coffee-400: #b8a079;
  --color-very-coffee-500: #9e865d;
  --color-very-coffee-600: #846d45;
  --color-very-coffee-700: #6d5732;
  --color-very-coffee-800: #5b451d;
  --color-very-coffee-900: #463518;
  --color-very-coffee-950: #2d210c;
}