Crisps to Secret Passage Color Palette

About this palette

Crisps to Secret Passage is a 5-color cool palette: #E4BE6A (Crisps), #5752A3 (Ultrapurple Merge), #8172FF (Orchid), #DCFFE3 (Candied Snow), #3A2B00 (Secret Passage). It mixes yellow, purple, white, brown tones and feels cool overall. The strongest text pairing is #DCFFE3 on #3A2B00 with a contrast ratio of 12.75:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Crisps	rgb(228, 190, 106)	hsl(41, 69%, 65%)
Ultrapurple Merge	rgb(87, 82, 163)	hsl(244, 33%, 48%)
Orchid	rgb(129, 114, 255)	hsl(246, 100%, 72%)
Candied Snow	rgb(220, 255, 227)	hsl(132, 100%, 93%)
Secret Passage	rgb(58, 43, 0)	hsl(44, 100%, 11%)

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.

Aa12.75:1 Super#DCFFE3 on #3A2B00
Aa12.75:1 Super#3A2B00 on #DCFFE3
Aa7.78:1 Very good#E4BE6A on #3A2B00
Aa7.78:1 Very good#3A2B00 on #E4BE6A
Aa6.19:1 Good#5752A3 on #DCFFE3
Aa6.19:1 Good#DCFFE3 on #5752A3
Aa3.79:1 Poor#8172FF on #3A2B00
Aa3.79:1 Poor#3A2B00 on #8172FF

Color blindness preview

CSS variables

/* Crisps to Secret Passage — https://swatchly.xyz/palette/e4be6a-5752a3-8172ff-dcffe3-3a2b00 */
:root {
  --crisps: #e4be6a;
  --ultrapurple-merge: #5752a3;
  --orchid: #8172ff;
  --candied-snow: #dcffe3;
  --secret-passage: #3a2b00;
}

Tailwind CSS v4

/* Crisps to Secret Passage — https://swatchly.xyz/palette/e4be6a-5752a3-8172ff-dcffe3-3a2b00 */
@theme {
  --color-crisps: #e4be6a;
  --color-crisps-50: #fff5e2;
  --color-crisps-100: #ffebc0;
  --color-crisps-200: #f2d69b;
  --color-crisps-300: #e4be6a;
  --color-crisps-400: #c29e4f;
  --color-crisps-500: #a6822a;
  --color-crisps-600: #896700;
  --color-crisps-700: #6d5100;
  --color-crisps-800: #553f00;
  --color-crisps-900: #423000;
  --color-crisps-950: #2a1d00;
  --color-ultrapurple-merge: #5752a3;
  --color-ultrapurple-merge-50: #f3f4ff;
  --color-ultrapurple-merge-100: #e8e9ff;
  --color-ultrapurple-merge-200: #d4d5ff;
  --color-ultrapurple-merge-300: #bcbdff;
  --color-ultrapurple-merge-400: #9d9cf0;
  --color-ultrapurple-merge-500: #8481d7;
  --color-ultrapurple-merge-600: #6b68bb;
  --color-ultrapurple-merge-700: #5752a3;
  --color-ultrapurple-merge-800: #443f83;
  --color-ultrapurple-merge-900: #332f69;
  --color-ultrapurple-merge-950: #201c47;
  --color-orchid: #8172ff;
  --color-orchid-50: #f5f5ff;
  --color-orchid-100: #eaebff;
  --color-orchid-200: #d5d6ff;
  --color-orchid-300: #bdbdff;
  --color-orchid-400: #9c97ff;
  --color-orchid-500: #8172ff;
  --color-orchid-600: #6855dd;
  --color-orchid-700: #523dbc;
  --color-orchid-800: #402a9b;
  --color-orchid-900: #311c7d;
  --color-orchid-950: #1e0e54;
  --color-candied-snow: #dcffe3;
  --color-candied-snow-50: #dcffe3;
  --color-candied-snow-100: #dcf1e0;
  --color-candied-snow-200: #c5dfca;
  --color-candied-snow-300: #adc9b2;
  --color-candied-snow-400: #8bab92;
  --color-candied-snow-500: #708f76;
  --color-candied-snow-600: #56755d;
  --color-candied-snow-700: #415d48;
  --color-candied-snow-800: #314937;
  --color-candied-snow-900: #243929;
  --color-candied-snow-950: #142318;
  --color-secret-passage: #3a2b00;
  --color-secret-passage-50: #fff4dc;
  --color-secret-passage-100: #f6eacf;
  --color-secret-passage-200: #e4d6b6;
  --color-secret-passage-300: #cfc09b;
  --color-secret-passage-400: #b09f76;
  --color-secret-passage-500: #938259;
  --color-secret-passage-600: #776740;
  --color-secret-passage-700: #5e502c;
  --color-secret-passage-800: #483c1d;
  --color-secret-passage-900: #3a2b00;
  --color-secret-passage-950: #211a08;
}