Crocodile Style to Rapeseed color palette

837425Crocodile Style 342D10Secret Passage E2C77BWaffle Cone 665500Ayahuasca Vine BB9E23Rapeseed

About this palette

Crocodile Style to Rapeseed is a 5-color warm, earthy, vintage, monochromatic palette: #837425 (Crocodile Style), #342D10 (Secret Passage), #E2C77B (Waffle Cone), #665500 (Ayahuasca Vine), #BB9E23 (Rapeseed). It mixes yellow, brown tones and feels warm overall. The strongest text pairing is #342D10 on #E2C77B with a contrast ratio of 8.30:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Crocodile Style	rgb(131, 116, 37)	hsl(50, 56%, 33%)
Secret Passage	rgb(52, 45, 16)	hsl(48, 53%, 13%)
Waffle Cone	rgb(226, 199, 123)	hsl(44, 64%, 68%)
Ayahuasca Vine	rgb(102, 85, 0)	hsl(50, 100%, 20%)
Rapeseed	rgb(187, 158, 35)	hsl(49, 68%, 44%)

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.

Aa8.30:1 Very good#342D10 on #E2C77B
Aa8.30:1 Very good#E2C77B on #342D10
Aa5.25:1 Good#342D10 on #BB9E23
Aa5.25:1 Good#BB9E23 on #342D10
Aa4.43:1 Poor#E2C77B on #665500
Aa4.43:1 Poor#665500 on #E2C77B

Color blindness preview

CSS variables

/* Crocodile Style to Rapeseed — https://swatchly.xyz/palette/837425-342d10-e2c77b-665500-bb9e23 */
:root {
  --crocodile-style: #837425;
  --secret-passage: #342d10;
  --waffle-cone: #e2c77b;
  --ayahuasca-vine: #665500;
  --rapeseed: #bb9e23;
}

Tailwind CSS v4

/* Crocodile Style to Rapeseed — https://swatchly.xyz/palette/837425-342d10-e2c77b-665500-bb9e23 */
@theme {
  --color-crocodile-style: #837425;
  --color-crocodile-style-50: #fef6cd;
  --color-crocodile-style-100: #f7eec0;
  --color-crocodile-style-200: #e6dca5;
  --color-crocodile-style-300: #d3c788;
  --color-crocodile-style-400: #b6a861;
  --color-crocodile-style-500: #9d8e42;
  --color-crocodile-style-600: #837425;
  --color-crocodile-style-700: #6a5c0b;
  --color-crocodile-style-800: #534700;
  --color-crocodile-style-900: #403600;
  --color-crocodile-style-950: #282100;
  --color-secret-passage: #342d10;
  --color-secret-passage-50: #faf5e3;
  --color-secret-passage-100: #f1ecd7;
  --color-secret-passage-200: #ded8bf;
  --color-secret-passage-300: #c8c1a5;
  --color-secret-passage-400: #a8a182;
  --color-secret-passage-500: #8c8465;
  --color-secret-passage-600: #70694b;
  --color-secret-passage-700: #585137;
  --color-secret-passage-800: #433e27;
  --color-secret-passage-900: #342d10;
  --color-secret-passage-950: #1e1b0e;
  --color-waffle-cone: #e2c77b;
  --color-waffle-cone-50: #fff9e9;
  --color-waffle-cone-100: #fff0c7;
  --color-waffle-cone-200: #f0ddaa;
  --color-waffle-cone-300: #e2c77b;
  --color-waffle-cone-400: #bfa660;
  --color-waffle-cone-500: #a2893d;
  --color-waffle-cone-600: #856d1d;
  --color-waffle-cone-700: #6c5500;
  --color-waffle-cone-800: #534100;
  --color-waffle-cone-900: #403100;
  --color-waffle-cone-950: #281e00;
  --color-ayahuasca-vine: #665500;
  --color-ayahuasca-vine-50: #fff6d0;
  --color-ayahuasca-vine-100: #f7ecc0;
  --color-ayahuasca-vine-200: #e5d8a4;
  --color-ayahuasca-vine-300: #d1c186;
  --color-ayahuasca-vine-400: #b3a25f;
  --color-ayahuasca-vine-500: #988640;
  --color-ayahuasca-vine-600: #7d6c25;
  --color-ayahuasca-vine-700: #665500;
  --color-ayahuasca-vine-800: #504200;
  --color-ayahuasca-vine-900: #3e3300;
  --color-ayahuasca-vine-950: #271f00;
  --color-rapeseed: #bb9e23;
  --color-rapeseed-50: #fff5d0;
  --color-rapeseed-100: #fceaaa;
  --color-rapeseed-200: #ebd688;
  --color-rapeseed-300: #d7bf62;
  --color-rapeseed-400: #bb9e23;
  --color-rapeseed-500: #9d8300;
  --color-rapeseed-600: #7f6900;
  --color-rapeseed-700: #655300;
  --color-rapeseed-800: #4f4100;
  --color-rapeseed-900: #3d3200;
  --color-rapeseed-950: #271f00;
}