Persicus to Coco Muck color palette

FFB599Persicus 6C824BBeyond the Pines 6CC1DESkydive 6FA962Ferntastic 563C64Long Passionate Night 9C4D27Coco Muck

Open in generator Export PNG, PDF, ASE…

About this palette

Persicus to Coco Muck is a 6-color cool, earthy palette: #FFB599 (Persicus), #6C824B (Beyond the Pines), #6CC1DE (Skydive), #6FA962 (Ferntastic), #563C64 (Long Passionate Night), #9C4D27 (Coco Muck). It mixes orange, green, blue, purple, brown tones and feels cool overall. The strongest text pairing is #FFB599 on #563C64 with a contrast ratio of 5.54:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Persicus	rgb(255, 181, 153)	hsl(16, 100%, 80%)
Beyond the Pines	rgb(108, 130, 75)	hsl(84, 27%, 40%)
Skydive	rgb(108, 193, 222)	hsl(195, 63%, 65%)
Ferntastic	rgb(111, 169, 98)	hsl(109, 29%, 52%)
Long Passionate Night	rgb(86, 60, 100)	hsl(279, 25%, 31%)
Coco Muck	rgb(156, 77, 39)	hsl(19, 60%, 38%)

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.

Aa5.54:1 Good#FFB599 on #563C64
Aa5.54:1 Good#563C64 on #FFB599
Aa4.64:1 Good#6CC1DE on #563C64
Aa4.64:1 Good#563C64 on #6CC1DE
Aa3.52:1 Poor#FFB599 on #9C4D27
Aa3.52:1 Poor#9C4D27 on #FFB599
Aa3.38:1 Poor#6FA962 on #563C64
Aa3.38:1 Poor#563C64 on #6FA962

Color blindness preview

CSS variables

/* Persicus to Coco Muck — https://swatchly.xyz/palette/ffb599-6c824b-6cc1de-6fa962-563c64-9c4d27 */
:root {
  --persicus: #ffb599;
  --beyond-the-pines: #6c824b;
  --skydive: #6cc1de;
  --ferntastic: #6fa962;
  --long-passionate-night: #563c64;
  --coco-muck: #9c4d27;
}

Tailwind CSS v4

/* Persicus to Coco Muck — https://swatchly.xyz/palette/ffb599-6c824b-6cc1de-6fa962-563c64-9c4d27 */
@theme {
  --color-persicus: #ffb599;
  --color-persicus-50: #fff8f5;
  --color-persicus-100: #ffece6;
  --color-persicus-200: #ffd4c3;
  --color-persicus-300: #ffb599;
  --color-persicus-400: #d9967c;
  --color-persicus-500: #bc785d;
  --color-persicus-600: #9d5c43;
  --color-persicus-700: #80452e;
  --color-persicus-800: #67331f;
  --color-persicus-900: #502514;
  --color-persicus-950: #341509;
  --color-beyond-the-pines: #6c824b;
  --color-beyond-the-pines-50: #eaf9d7;
  --color-beyond-the-pines-100: #ddedc7;
  --color-beyond-the-pines-200: #c5d9ab;
  --color-beyond-the-pines-300: #abc18d;
  --color-beyond-the-pines-400: #89a068;
  --color-beyond-the-pines-500: #6c824b;
  --color-beyond-the-pines-600: #556936;
  --color-beyond-the-pines-700: #425425;
  --color-beyond-the-pines-800: #334319;
  --color-beyond-the-pines-900: #273411;
  --color-beyond-the-pines-950: #182108;
  --color-skydive: #6cc1de;
  --color-skydive-50: #d6f4ff;
  --color-skydive-100: #b7ecff;
  --color-skydive-200: #96d8ef;
  --color-skydive-300: #6cc1de;
  --color-skydive-400: #50a3bf;
  --color-skydive-500: #318aa5;
  --color-skydive-600: #12718b;
  --color-skydive-700: #005b71;
  --color-skydive-800: #00485b;
  --color-skydive-900: #003949;
  --color-skydive-950: #00242e;
  --color-ferntastic: #6fa962;
  --color-ferntastic-50: #dafdd2;
  --color-ferntastic-100: #cbf3c2;
  --color-ferntastic-200: #b1e0a6;
  --color-ferntastic-300: #94c989;
  --color-ferntastic-400: #6fa962;
  --color-ferntastic-500: #568f49;
  --color-ferntastic-600: #3f7532;
  --color-ferntastic-700: #2d5e21;
  --color-ferntastic-800: #1f4b15;
  --color-ferntastic-900: #163b0c;
  --color-ferntastic-950: #0b2605;
  --color-long-passionate-night: #563c64;
  --color-long-passionate-night-50: #faf1ff;
  --color-long-passionate-night-100: #f5e4ff;
  --color-long-passionate-night-200: #e4cef1;
  --color-long-passionate-night-300: #d0b7df;
  --color-long-passionate-night-400: #b397c3;
  --color-long-passionate-night-500: #997da9;
  --color-long-passionate-night-600: #7f648e;
  --color-long-passionate-night-700: #684f76;
  --color-long-passionate-night-800: #563c64;
  --color-long-passionate-night-900: #422f4c;
  --color-long-passionate-night-950: #2a1c32;
  --color-coco-muck: #9c4d27;
  --color-coco-muck-50: #fff2ed;
  --color-coco-muck-100: #ffe4d8;
  --color-coco-muck-200: #ffc7af;
  --color-coco-muck-300: #f5a987;
  --color-coco-muck-400: #d88661;
  --color-coco-muck-500: #bb6943;
  --color-coco-muck-600: #9c4d27;
  --color-coco-muck-700: #7f3a17;
  --color-coco-muck-800: #672b0b;
  --color-coco-muck-900: #521f04;
  --color-coco-muck-950: #361101;
}