Start generating

Secret Passage to Icy Plains color palette

3A2900Secret Passage3E518AGlimpse of Void9F6600Embarrassed Frog7893D7Blue BayE0B54CVa Va VoomCCE0FFIcy Plains
Open in generator Export PNG, PDF, ASE…

About this palette

Secret Passage to Icy Plains is a 6-color vintage palette: #3A2900 (Secret Passage), #3E518A (Glimpse of Void), #9F6600 (Embarrassed Frog), #7893D7 (Blue Bay), #E0B54C (Va Va Voom), #CCE0FF (Icy Plains). It mixes brown, blue, yellow tones and feels balanced overall. The strongest text pairing is #3A2900 on #CCE0FF with a contrast ratio of 10.47:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Secret Passagergb(58, 41, 0)hsl(42, 100%, 11%)
Glimpse of Voidrgb(62, 81, 138)hsl(225, 38%, 39%)
Embarrassed Frogrgb(159, 102, 0)hsl(38, 100%, 31%)
Blue Bayrgb(120, 147, 215)hsl(223, 54%, 66%)
Va Va Voomrgb(224, 181, 76)hsl(43, 70%, 59%)
Icy Plainsrgb(204, 224, 255)hsl(216, 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.

  • Aa10.47:1 Very good#3A2900 on #CCE0FF
  • Aa10.47:1 Very good#CCE0FF on #3A2900
  • Aa7.27:1 Very good#3A2900 on #E0B54C
  • Aa7.27:1 Very good#E0B54C on #3A2900
  • Aa5.70:1 Good#3E518A on #CCE0FF
  • Aa5.70:1 Good#CCE0FF on #3E518A
  • Aa4.64:1 Good#3A2900 on #7893D7
  • Aa4.64:1 Good#7893D7 on #3A2900

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Secret Passage to Icy Plains — https://swatchly.xyz/palette/3a2900-3e518a-9f6600-7893d7-e0b54c-cce0ff */
:root {
  --secret-passage: #3a2900;
  --glimpse-of-void: #3e518a;
  --embarrassed-frog: #9f6600;
  --blue-bay: #7893d7;
  --va-va-voom: #e0b54c;
  --icy-plains: #cce0ff;
}

Tailwind CSS v4

/* Secret Passage to Icy Plains — https://swatchly.xyz/palette/3a2900-3e518a-9f6600-7893d7-e0b54c-cce0ff */
@theme {
  --color-secret-passage: #3a2900;
  --color-secret-passage-50: #fff4de;
  --color-secret-passage-100: #f7ead0;
  --color-secret-passage-200: #e5d6b7;
  --color-secret-passage-300: #d1bf9c;
  --color-secret-passage-400: #b19e77;
  --color-secret-passage-500: #948159;
  --color-secret-passage-600: #786540;
  --color-secret-passage-700: #5e4e2c;
  --color-secret-passage-800: #483a1d;
  --color-secret-passage-900: #3a2900;
  --color-secret-passage-950: #211908;
  --color-glimpse-of-void: #3e518a;
  --color-glimpse-of-void-50: #f1f5ff;
  --color-glimpse-of-void-100: #e3ebff;
  --color-glimpse-of-void-200: #c7d7ff;
  --color-glimpse-of-void-300: #aabff7;
  --color-glimpse-of-void-400: #899fdc;
  --color-glimpse-of-void-500: #6d83c0;
  --color-glimpse-of-void-600: #5468a2;
  --color-glimpse-of-void-700: #3e518a;
  --color-glimpse-of-void-800: #303f6d;
  --color-glimpse-of-void-900: #233057;
  --color-glimpse-of-void-950: #141d39;
  --color-embarrassed-frog: #9f6600;
  --color-embarrassed-frog-50: #fff3e5;
  --color-embarrassed-frog-100: #ffe9cf;
  --color-embarrassed-frog-200: #ffd29b;
  --color-embarrassed-frog-300: #eebb7c;
  --color-embarrassed-frog-400: #d49b51;
  --color-embarrassed-frog-500: #ba802e;
  --color-embarrassed-frog-600: #9f6600;
  --color-embarrassed-frog-700: #7f5000;
  --color-embarrassed-frog-800: #643e00;
  --color-embarrassed-frog-900: #4d2f00;
  --color-embarrassed-frog-950: #311c00;
  --color-blue-bay: #7893d7;
  --color-blue-bay-50: #ebf1ff;
  --color-blue-bay-100: #d9e5ff;
  --color-blue-bay-200: #baceff;
  --color-blue-bay-300: #9bb5f4;
  --color-blue-bay-400: #7893d7;
  --color-blue-bay-500: #607abc;
  --color-blue-bay-600: #4a619f;
  --color-blue-bay-700: #384d84;
  --color-blue-bay-800: #2a3c6d;
  --color-blue-bay-900: #1f2e58;
  --color-blue-bay-950: #121d3c;
  --color-va-va-voom: #e0b54c;
  --color-va-va-voom-50: #fff1d2;
  --color-va-va-voom-100: #ffe4a9;
  --color-va-va-voom-200: #f0cf84;
  --color-va-va-voom-300: #e0b54c;
  --color-va-va-voom-400: #bf972d;
  --color-va-va-voom-500: #a37c00;
  --color-va-va-voom-600: #846400;
  --color-va-va-voom-700: #6a4f00;
  --color-va-va-voom-800: #533e00;
  --color-va-va-voom-900: #413000;
  --color-va-va-voom-950: #291d00;
  --color-icy-plains: #cce0ff;
  --color-icy-plains-50: #f7faff;
  --color-icy-plains-100: #e9f2ff;
  --color-icy-plains-200: #cce0ff;
  --color-icy-plains-300: #b8c8e1;
  --color-icy-plains-400: #95a7c3;
  --color-icy-plains-500: #788ba7;
  --color-icy-plains-600: #5e6f8a;
  --color-icy-plains-700: #47576f;
  --color-icy-plains-800: #364358;
  --color-icy-plains-900: #283345;
  --color-icy-plains-950: #17202c;
}

Similar palettes