Cold Press Coffee to Coral Kiss color palette

6C2B01Cold Press Coffee 8E3D00Espresso Martini 9A6747Argan Oil E68957Toasted Husk EFB8A2Plushy Pink FFDFCCCoral Kiss

Open in generator Export PNG, PDF, ASE…

About this palette

Cold Press Coffee to Coral Kiss is a 6-color warm, earthy, vintage, monochromatic, gradient palette: #6C2B01 (Cold Press Coffee), #8E3D00 (Espresso Martini), #9A6747 (Argan Oil), #E68957 (Toasted Husk), #EFB8A2 (Plushy Pink), #FFDFCC (Coral Kiss). It mixes brown, orange tones and feels warm overall. The strongest text pairing is #6C2B01 on #FFDFCC with a contrast ratio of 8.41:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cold Press Coffee	rgb(108, 43, 1)	hsl(24, 98%, 21%)
Espresso Martini	rgb(142, 61, 0)	hsl(26, 100%, 28%)
Argan Oil	rgb(154, 103, 71)	hsl(23, 37%, 44%)
Toasted Husk	rgb(230, 137, 87)	hsl(21, 74%, 62%)
Plushy Pink	rgb(239, 184, 162)	hsl(17, 71%, 79%)
Coral Kiss	rgb(255, 223, 204)	hsl(22, 100%, 90%)

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.41:1 Very good#6C2B01 on #FFDFCC
Aa8.41:1 Very good#FFDFCC on #6C2B01
Aa6.07:1 Good#6C2B01 on #EFB8A2
Aa6.07:1 Good#EFB8A2 on #6C2B01
Aa5.92:1 Good#8E3D00 on #FFDFCC
Aa5.92:1 Good#FFDFCC on #8E3D00
Aa4.28:1 Poor#8E3D00 on #EFB8A2
Aa4.28:1 Poor#EFB8A2 on #8E3D00

Color blindness preview

CSS variables

/* Cold Press Coffee to Coral Kiss — https://swatchly.xyz/palette/6c2b01-8e3d00-9a6747-e68957-efb8a2-ffdfcc */
:root {
  --cold-press-coffee: #6c2b01;
  --espresso-martini: #8e3d00;
  --argan-oil: #9a6747;
  --toasted-husk: #e68957;
  --plushy-pink: #efb8a2;
  --coral-kiss: #ffdfcc;
}

Tailwind CSS v4

/* Cold Press Coffee to Coral Kiss — https://swatchly.xyz/palette/6c2b01-8e3d00-9a6747-e68957-efb8a2-ffdfcc */
@theme {
  --color-cold-press-coffee: #6c2b01;
  --color-cold-press-coffee-50: #fff2ec;
  --color-cold-press-coffee-100: #ffe5d9;
  --color-cold-press-coffee-200: #ffcab2;
  --color-cold-press-coffee-300: #f2af90;
  --color-cold-press-coffee-400: #d58d6b;
  --color-cold-press-coffee-500: #b9714d;
  --color-cold-press-coffee-600: #9b5634;
  --color-cold-press-coffee-700: #7f4121;
  --color-cold-press-coffee-800: #6c2b01;
  --color-cold-press-coffee-900: #51230a;
  --color-cold-press-coffee-950: #341403;
  --color-espresso-martini: #8e3d00;
  --color-espresso-martini-50: #fff2ec;
  --color-espresso-martini-100: #ffe5d8;
  --color-espresso-martini-200: #ffcbb1;
  --color-espresso-martini-300: #fbad85;
  --color-espresso-martini-400: #e08b5e;
  --color-espresso-martini-500: #c46f3f;
  --color-espresso-martini-600: #a75424;
  --color-espresso-martini-700: #8e3d00;
  --color-espresso-martini-800: #702f00;
  --color-espresso-martini-900: #582300;
  --color-espresso-martini-950: #391400;
  --color-argan-oil: #9a6747;
  --color-argan-oil-50: #fff2eb;
  --color-argan-oil-100: #ffe8da;
  --color-argan-oil-200: #fbd1b8;
  --color-argan-oil-300: #eaba9e;
  --color-argan-oil-400: #cf9b7b;
  --color-argan-oil-500: #b58060;
  --color-argan-oil-600: #9a6747;
  --color-argan-oil-700: #7e5032;
  --color-argan-oil-800: #653c22;
  --color-argan-oil-900: #4f2d16;
  --color-argan-oil-950: #331a0a;
  --color-toasted-husk: #e68957;
  --color-toasted-husk-50: #fff3ee;
  --color-toasted-husk-100: #ffe7db;
  --color-toasted-husk-200: #ffcdb4;
  --color-toasted-husk-300: #fead83;
  --color-toasted-husk-400: #e68957;
  --color-toasted-husk-500: #c76d3b;
  --color-toasted-husk-600: #a8521d;
  --color-toasted-husk-700: #8a3c03;
  --color-toasted-husk-800: #6e2d00;
  --color-toasted-husk-900: #552200;
  --color-toasted-husk-950: #371300;
  --color-plushy-pink: #efb8a2;
  --color-plushy-pink-50: #fff6f2;
  --color-plushy-pink-100: #ffeae1;
  --color-plushy-pink-200: #fad2c2;
  --color-plushy-pink-300: #efb8a2;
  --color-plushy-pink-400: #cb9984;
  --color-plushy-pink-500: #af7c67;
  --color-plushy-pink-600: #91614d;
  --color-plushy-pink-700: #764a39;
  --color-plushy-pink-800: #5e3829;
  --color-plushy-pink-900: #49291c;
  --color-plushy-pink-950: #2f180f;
  --color-coral-kiss: #ffdfcc;
  --color-coral-kiss-50: #ffede2;
  --color-coral-kiss-100: #ffdfcc;
  --color-coral-kiss-200: #e6cec0;
  --color-coral-kiss-300: #d2b8a8;
  --color-coral-kiss-400: #b59987;
  --color-coral-kiss-500: #9b7e6d;
  --color-coral-kiss-600: #806554;
  --color-coral-kiss-700: #684f40;
  --color-coral-kiss-800: #523d30;
  --color-coral-kiss-900: #402e23;
  --color-coral-kiss-950: #291c14;
}