Secret Passage to Seine and Sensibility color palette

About this palette

Secret Passage to Seine and Sensibility is a 5-color muted, warm, earthy, vintage, gradient palette: #342D16 (Secret Passage), #595332 (Olive Bark), #7B7344 (Greek Oregano), #A29B7E (Mohalla), #CBC5AE (Seine and Sensibility). It mixes brown, yellow, gray tones and feels warm overall. The strongest text pairing is #342D16 on #CBC5AE with a contrast ratio of 7.92:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Secret Passagergb(52, 45, 22)hsl(46, 41%, 15%)
Olive Barkrgb(89, 83, 50)hsl(51, 28%, 27%)
Greek Oreganorgb(123, 115, 68)hsl(51, 29%, 37%)
Mohallargb(162, 155, 126)hsl(48, 16%, 56%)
Seine and Sensibilityrgb(203, 197, 174)hsl(48, 22%, 74%)

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.

  • Aa7.92:1 Very good#342D16 on #CBC5AE
  • Aa7.92:1 Very good#CBC5AE on #342D16
  • Aa4.91:1 Good#342D16 on #A29B7E
  • Aa4.91:1 Good#A29B7E on #342D16
  • Aa4.48:1 Poor#595332 on #CBC5AE
  • Aa4.48:1 Poor#CBC5AE on #595332

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Secret Passage to Seine and Sensibility — https://swatchly.xyz/palette/342d16-595332-7b7344-a29b7e-cbc5ae */
:root {
  --secret-passage: #342d16;
  --olive-bark: #595332;
  --greek-oregano: #7b7344;
  --mohalla: #a29b7e;
  --seine-and-sensibility: #cbc5ae;
}

Tailwind CSS v4

/* Secret Passage to Seine and Sensibility — https://swatchly.xyz/palette/342d16-595332-7b7344-a29b7e-cbc5ae */
@theme {
  --color-secret-passage: #342d16;
  --color-secret-passage-50: #faf5e6;
  --color-secret-passage-100: #f0ebda;
  --color-secret-passage-200: #ded7c3;
  --color-secret-passage-300: #c8c1aa;
  --color-secret-passage-400: #a8a087;
  --color-secret-passage-500: #8c846a;
  --color-secret-passage-600: #706950;
  --color-secret-passage-700: #58513b;
  --color-secret-passage-800: #433d2b;
  --color-secret-passage-900: #342d16;
  --color-secret-passage-950: #1e1b10;
  --color-olive-bark: #595332;
  --color-olive-bark-50: #f9f6e1;
  --color-olive-bark-100: #f0ecd5;
  --color-olive-bark-200: #ddd8bc;
  --color-olive-bark-300: #c6c1a1;
  --color-olive-bark-400: #a7a17f;
  --color-olive-bark-500: #8b8562;
  --color-olive-bark-600: #706a49;
  --color-olive-bark-700: #595332;
  --color-olive-bark-800: #454126;
  --color-olive-bark-900: #35311b;
  --color-olive-bark-950: #211e0e;
  --color-greek-oregano: #7b7344;
  --color-greek-oregano-50: #fbf6db;
  --color-greek-oregano-100: #f2eecf;
  --color-greek-oregano-200: #e1dbb7;
  --color-greek-oregano-300: #ccc69c;
  --color-greek-oregano-400: #afa779;
  --color-greek-oregano-500: #958d5d;
  --color-greek-oregano-600: #7b7344;
  --color-greek-oregano-700: #625b30;
  --color-greek-oregano-800: #4d4720;
  --color-greek-oregano-900: #3c3615;
  --color-greek-oregano-950: #252109;
  --color-mohalla: #a29b7e;
  --color-mohalla-50: #f7f3e1;
  --color-mohalla-100: #ece8d4;
  --color-mohalla-200: #d9d3bc;
  --color-mohalla-300: #c2bba1;
  --color-mohalla-400: #a29b7e;
  --color-mohalla-500: #888165;
  --color-mohalla-600: #6e684d;
  --color-mohalla-700: #58523a;
  --color-mohalla-800: #46412b;
  --color-mohalla-900: #363220;
  --color-mohalla-950: #231f12;
  --color-seine-and-sensibility: #cbc5ae;
  --color-seine-and-sensibility-50: #fbf7eb;
  --color-seine-and-sensibility-100: #f2eee0;
  --color-seine-and-sensibility-200: #dfdbca;
  --color-seine-and-sensibility-300: #cbc5ae;
  --color-seine-and-sensibility-400: #aaa590;
  --color-seine-and-sensibility-500: #8e8973;
  --color-seine-and-sensibility-600: #736e59;
  --color-seine-and-sensibility-700: #5b5644;
  --color-seine-and-sensibility-800: #474333;
  --color-seine-and-sensibility-900: #373325;
  --color-seine-and-sensibility-950: #221f15;
}

Similar palettes