Start generating

Secret Passage to Pastel Brown color palette

322611Secret Passage9FC6D1AirborneDEDDF9Puffy Cloud8C8FB0Silverfish005768Abyssal Waters7D6D50Pastel Brown
Open in generator Export PNG, PDF, ASE…

About this palette

Secret Passage to Pastel Brown is a 6-color muted, cool palette: #322611 (Secret Passage), #9FC6D1 (Airborne), #DEDDF9 (Puffy Cloud), #8C8FB0 (Silverfish), #005768 (Abyssal Waters), #7D6D50 (Pastel Brown). It mixes brown, blue, purple tones and feels cool overall. The strongest text pairing is #322611 on #DEDDF9 with a contrast ratio of 11.13:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Secret Passagergb(50, 38, 17)hsl(38, 49%, 13%)
Airbornergb(159, 198, 209)hsl(193, 35%, 72%)
Puffy Cloudrgb(222, 221, 249)hsl(242, 70%, 92%)
Silverfishrgb(140, 143, 176)hsl(235, 19%, 62%)
Abyssal Watersrgb(0, 87, 104)hsl(190, 100%, 20%)
Pastel Brownrgb(125, 109, 80)hsl(39, 22%, 40%)

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.

  • Aa11.13:1 Very good#322611 on #DEDDF9
  • Aa11.13:1 Very good#DEDDF9 on #322611
  • Aa8.07:1 Very good#322611 on #9FC6D1
  • Aa8.07:1 Very good#9FC6D1 on #322611
  • Aa6.17:1 Good#DEDDF9 on #005768
  • Aa6.17:1 Good#005768 on #DEDDF9
  • Aa4.69:1 Good#322611 on #8C8FB0
  • Aa4.69:1 Good#8C8FB0 on #322611

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Secret Passage to Pastel Brown — https://swatchly.xyz/palette/322611-9fc6d1-deddf9-8c8fb0-005768-7d6d50 */
:root {
  --secret-passage: #322611;
  --airborne: #9fc6d1;
  --puffy-cloud: #deddf9;
  --silverfish: #8c8fb0;
  --abyssal-waters: #005768;
  --pastel-brown: #7d6d50;
}

Tailwind CSS v4

/* Secret Passage to Pastel Brown — https://swatchly.xyz/palette/322611-9fc6d1-deddf9-8c8fb0-005768-7d6d50 */
@theme {
  --color-secret-passage: #322611;
  --color-secret-passage-50: #fdf4e6;
  --color-secret-passage-100: #f4eada;
  --color-secret-passage-200: #e1d6c3;
  --color-secret-passage-300: #ccbfaa;
  --color-secret-passage-400: #ae9f88;
  --color-secret-passage-500: #94866e;
  --color-secret-passage-600: #7b6d57;
  --color-secret-passage-700: #655843;
  --color-secret-passage-800: #534734;
  --color-secret-passage-900: #433929;
  --color-secret-passage-950: #322611;
  --color-airborne: #9fc6d1;
  --color-airborne-50: #e2f8ff;
  --color-airborne-100: #d6eff6;
  --color-airborne-200: #bedbe4;
  --color-airborne-300: #9fc6d1;
  --color-airborne-400: #82a7b1;
  --color-airborne-500: #668c96;
  --color-airborne-600: #4d717b;
  --color-airborne-700: #3a5a63;
  --color-airborne-800: #2a474f;
  --color-airborne-900: #1e373e;
  --color-airborne-950: #102227;
  --color-puffy-cloud: #deddf9;
  --color-puffy-cloud-50: #fbfbff;
  --color-puffy-cloud-100: #f1f1ff;
  --color-puffy-cloud-200: #deddf9;
  --color-puffy-cloud-300: #c6c5dc;
  --color-puffy-cloud-400: #a5a4bd;
  --color-puffy-cloud-500: #8887a1;
  --color-puffy-cloud-600: #6d6b84;
  --color-puffy-cloud-700: #55546a;
  --color-puffy-cloud-800: #414053;
  --color-puffy-cloud-900: #323141;
  --color-puffy-cloud-950: #1e1e29;
  --color-silverfish: #8c8fb0;
  --color-silverfish-50: #f6f7ff;
  --color-silverfish-100: #eceeff;
  --color-silverfish-200: #d9dcf5;
  --color-silverfish-300: #c4c7e4;
  --color-silverfish-400: #a6a9c9;
  --color-silverfish-500: #8c8fb0;
  --color-silverfish-600: #707292;
  --color-silverfish-700: #575a77;
  --color-silverfish-800: #43455e;
  --color-silverfish-900: #323449;
  --color-silverfish-950: #1e1f2e;
  --color-abyssal-waters: #005768;
  --color-abyssal-waters-50: #e5f9ff;
  --color-abyssal-waters-100: #cbf3ff;
  --color-abyssal-waters-200: #ace0ee;
  --color-abyssal-waters-300: #8dc9d9;
  --color-abyssal-waters-400: #66a9bb;
  --color-abyssal-waters-500: #468c9e;
  --color-abyssal-waters-600: #2a6f80;
  --color-abyssal-waters-700: #005768;
  --color-abyssal-waters-800: #074451;
  --color-abyssal-waters-900: #01343f;
  --color-abyssal-waters-950: #002028;
  --color-pastel-brown: #7d6d50;
  --color-pastel-brown-50: #fef4e2;
  --color-pastel-brown-100: #f6ead7;
  --color-pastel-brown-200: #e4d7c0;
  --color-pastel-brown-300: #d0c1a6;
  --color-pastel-brown-400: #b2a285;
  --color-pastel-brown-500: #978769;
  --color-pastel-brown-600: #7d6d50;
  --color-pastel-brown-700: #64563c;
  --color-pastel-brown-800: #4f432c;
  --color-pastel-brown-900: #3d331f;
  --color-pastel-brown-950: #271f11;
}

Similar palettes