Autumn Crocodile to Primavera color palette

4A7339Autumn Crocodile 5C321BCount Chocula FFDDC5Coral Kiss D8A0EDLilac 618BAETreasure Map Waters 73A884Primavera

Open in generator Export PNG, PDF, ASE…

About this palette

Autumn Crocodile to Primavera is a 6-color cool, earthy palette: #4A7339 (Autumn Crocodile), #5C321B (Count Chocula), #FFDDC5 (Coral Kiss), #D8A0ED (Lilac), #618BAE (Treasure Map Waters), #73A884 (Primavera). It mixes green, brown, orange, purple, blue tones and feels cool overall. The strongest text pairing is #5C321B on #FFDDC5 with a contrast ratio of 8.51:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Autumn Crocodile	rgb(74, 115, 57)	hsl(102, 34%, 34%)
Count Chocula	rgb(92, 50, 27)	hsl(21, 55%, 23%)
Coral Kiss	rgb(255, 221, 197)	hsl(25, 100%, 89%)
Lilac	rgb(216, 160, 237)	hsl(284, 68%, 78%)
Treasure Map Waters	rgb(97, 139, 174)	hsl(207, 32%, 53%)
Primavera	rgb(115, 168, 132)	hsl(139, 23%, 55%)

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.51:1 Very good#5C321B on #FFDDC5
Aa8.51:1 Very good#FFDDC5 on #5C321B
Aa5.28:1 Good#5C321B on #D8A0ED
Aa5.28:1 Good#D8A0ED on #5C321B
Aa4.31:1 Poor#4A7339 on #FFDDC5
Aa4.31:1 Poor#FFDDC5 on #4A7339
Aa3.98:1 Poor#5C321B on #73A884
Aa3.98:1 Poor#73A884 on #5C321B

Color blindness preview

CSS variables

/* Autumn Crocodile to Primavera — https://swatchly.xyz/palette/4a7339-5c321b-ffddc5-d8a0ed-618bae-73a884 */
:root {
  --autumn-crocodile: #4a7339;
  --count-chocula: #5c321b;
  --coral-kiss: #ffddc5;
  --lilac: #d8a0ed;
  --treasure-map-waters: #618bae;
  --primavera: #73a884;
}

Tailwind CSS v4

/* Autumn Crocodile to Primavera — https://swatchly.xyz/palette/4a7339-5c321b-ffddc5-d8a0ed-618bae-73a884 */
@theme {
  --color-autumn-crocodile: #4a7339;
  --color-autumn-crocodile-50: #e5fedb;
  --color-autumn-crocodile-100: #d7f4cc;
  --color-autumn-crocodile-200: #bfe1b2;
  --color-autumn-crocodile-300: #a4cb95;
  --color-autumn-crocodile-400: #81ab71;
  --color-autumn-crocodile-500: #658f54;
  --color-autumn-crocodile-600: #4a7339;
  --color-autumn-crocodile-700: #385c29;
  --color-autumn-crocodile-800: #29481b;
  --color-autumn-crocodile-900: #1e3812;
  --color-autumn-crocodile-950: #102308;
  --color-count-chocula: #5c321b;
  --color-count-chocula-50: #fff2ec;
  --color-count-chocula-100: #ffe5d8;
  --color-count-chocula-200: #f5ceba;
  --color-count-chocula-300: #e2b59f;
  --color-count-chocula-400: #c4947b;
  --color-count-chocula-500: #a7775f;
  --color-count-chocula-600: #8a5d46;
  --color-count-chocula-700: #6f4732;
  --color-count-chocula-800: #5c321b;
  --color-count-chocula-900: #442818;
  --color-count-chocula-950: #2c170c;
  --color-coral-kiss: #ffddc5;
  --color-coral-kiss-50: #ffebde;
  --color-coral-kiss-100: #ffddc5;
  --color-coral-kiss-200: #e6ccba;
  --color-coral-kiss-300: #d3b6a2;
  --color-coral-kiss-400: #b69782;
  --color-coral-kiss-500: #9c7d67;
  --color-coral-kiss-600: #81644f;
  --color-coral-kiss-700: #694f3c;
  --color-coral-kiss-800: #543d2c;
  --color-coral-kiss-900: #412e20;
  --color-coral-kiss-950: #2a1c12;
  --color-lilac: #d8a0ed;
  --color-lilac-50: #f9ebff;
  --color-lilac-100: #f5dbff;
  --color-lilac-200: #eabefb;
  --color-lilac-300: #d8a0ed;
  --color-lilac-400: #b883cc;
  --color-lilac-500: #9e69b1;
  --color-lilac-600: #835095;
  --color-lilac-700: #6b3d7c;
  --color-lilac-800: #562d65;
  --color-lilac-900: #452151;
  --color-lilac-950: #2c1335;
  --color-treasure-map-waters: #618bae;
  --color-treasure-map-waters-50: #edf7ff;
  --color-treasure-map-waters-100: #dbeeff;
  --color-treasure-map-waters-200: #bbdcf8;
  --color-treasure-map-waters-300: #a1c6e6;
  --color-treasure-map-waters-400: #7da7c9;
  --color-treasure-map-waters-500: #618bae;
  --color-treasure-map-waters-600: #487091;
  --color-treasure-map-waters-700: #345977;
  --color-treasure-map-waters-800: #254660;
  --color-treasure-map-waters-900: #1a354c;
  --color-treasure-map-waters-950: #0d2131;
  --color-primavera: #73a884;
  --color-primavera-50: #dcfce5;
  --color-primavera-100: #cef1d8;
  --color-primavera-200: #b4dec0;
  --color-primavera-300: #98c7a7;
  --color-primavera-400: #73a884;
  --color-primavera-500: #598e6b;
  --color-primavera-600: #427453;
  --color-primavera-700: #2f5d40;
  --color-primavera-800: #214a30;
  --color-primavera-900: #173a24;
  --color-primavera-950: #0c2515;
}