Falafel to Secret Passage color palette

A27628Falafel D7E8C8Breath of Celery 97B3F1Wondrous Wisteria 5D4666Haunted Candelabra 452E00Secret Passage

Open in generator Export PNG, PDF, ASE…

About this palette

Falafel to Secret Passage is a 5-color cool, earthy, vintage palette: #A27628 (Falafel), #D7E8C8 (Breath of Celery), #97B3F1 (Wondrous Wisteria), #5D4666 (Haunted Candelabra), #452E00 (Secret Passage). It mixes yellow, green, blue, purple, brown tones and feels cool overall. The strongest text pairing is #D7E8C8 on #452E00 with a contrast ratio of 9.90:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Falafel	rgb(162, 118, 40)	hsl(38, 60%, 40%)
Breath of Celery	rgb(215, 232, 200)	hsl(92, 41%, 85%)
Wondrous Wisteria	rgb(151, 179, 241)	hsl(221, 76%, 77%)
Haunted Candelabra	rgb(93, 70, 102)	hsl(283, 19%, 34%)
Secret Passage	rgb(69, 46, 0)	hsl(40, 100%, 14%)

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.

Aa9.90:1 Very good#D7E8C8 on #452E00
Aa9.90:1 Very good#452E00 on #D7E8C8
Aa6.42:1 Good#D7E8C8 on #5D4666
Aa6.42:1 Good#5D4666 on #D7E8C8
Aa6.10:1 Good#97B3F1 on #452E00
Aa6.10:1 Good#452E00 on #97B3F1
Aa3.96:1 Poor#97B3F1 on #5D4666
Aa3.96:1 Poor#5D4666 on #97B3F1

Color blindness preview

CSS variables

/* Falafel to Secret Passage — https://swatchly.xyz/palette/a27628-d7e8c8-97b3f1-5d4666-452e00 */
:root {
  --falafel: #a27628;
  --breath-of-celery: #d7e8c8;
  --wondrous-wisteria: #97b3f1;
  --haunted-candelabra: #5d4666;
  --secret-passage: #452e00;
}

Tailwind CSS v4

/* Falafel to Secret Passage — https://swatchly.xyz/palette/a27628-d7e8c8-97b3f1-5d4666-452e00 */
@theme {
  --color-falafel: #a27628;
  --color-falafel-50: #fff2de;
  --color-falafel-100: #ffe4bd;
  --color-falafel-200: #f2ce96;
  --color-falafel-300: #ddb575;
  --color-falafel-400: #bf934b;
  --color-falafel-500: #a27628;
  --color-falafel-600: #875d05;
  --color-falafel-700: #6c4900;
  --color-falafel-800: #553900;
  --color-falafel-900: #432c00;
  --color-falafel-950: #2b1b00;
  --color-breath-of-celery: #d7e8c8;
  --color-breath-of-celery-50: #f7fff0;
  --color-breath-of-celery-100: #eef7e5;
  --color-breath-of-celery-200: #d7e8c8;
  --color-breath-of-celery-300: #c1ceb5;
  --color-breath-of-celery-400: #9eae91;
  --color-breath-of-celery-500: #819173;
  --color-breath-of-celery-600: #667458;
  --color-breath-of-celery-700: #4f5c42;
  --color-breath-of-celery-800: #3b4731;
  --color-breath-of-celery-900: #2d3624;
  --color-breath-of-celery-950: #1b2214;
  --color-wondrous-wisteria: #97b3f1;
  --color-wondrous-wisteria-50: #e7eeff;
  --color-wondrous-wisteria-100: #d5e2ff;
  --color-wondrous-wisteria-200: #b5ccff;
  --color-wondrous-wisteria-300: #97b3f1;
  --color-wondrous-wisteria-400: #7b96d1;
  --color-wondrous-wisteria-500: #637cb7;
  --color-wondrous-wisteria-600: #4c649b;
  --color-wondrous-wisteria-700: #3a5081;
  --color-wondrous-wisteria-800: #2c3f6a;
  --color-wondrous-wisteria-900: #213156;
  --color-wondrous-wisteria-950: #131e39;
  --color-haunted-candelabra: #5d4666;
  --color-haunted-candelabra-50: #fbf1ff;
  --color-haunted-candelabra-100: #f5e4fc;
  --color-haunted-candelabra-200: #e2ceea;
  --color-haunted-candelabra-300: #ccb5d5;
  --color-haunted-candelabra-400: #ad94b7;
  --color-haunted-candelabra-500: #91789b;
  --color-haunted-candelabra-600: #755d7e;
  --color-haunted-candelabra-700: #5d4666;
  --color-haunted-candelabra-800: #48364f;
  --color-haunted-candelabra-900: #38293e;
  --color-haunted-candelabra-950: #231827;
  --color-secret-passage: #452e00;
  --color-secret-passage-50: #fff4e2;
  --color-secret-passage-100: #fae9cd;
  --color-secret-passage-200: #e9d4b4;
  --color-secret-passage-300: #d5bd98;
  --color-secret-passage-400: #b79d74;
  --color-secret-passage-500: #9c8258;
  --color-secret-passage-600: #81673f;
  --color-secret-passage-700: #68512c;
  --color-secret-passage-800: #533f1d;
  --color-secret-passage-900: #452e00;
  --color-secret-passage-950: #291d08;
}