Zucchini to Bevelled Glass color palette

004430Zucchini 995637Hello Fall 724723Antique Brass EFEEFFFoundation White 9A93CDEaster Egg 82C8B3Bevelled Glass

Open in generator Export PNG, PDF, ASE…

About this palette

Zucchini to Bevelled Glass is a 6-color palette: #004430 (Zucchini), #995637 (Hello Fall), #724723 (Antique Brass), #EFEEFF (Foundation White), #9A93CD (Easter Egg), #82C8B3 (Bevelled Glass). It mixes turquoise, brown, white, purple tones and feels cool overall. The strongest text pairing is #004430 on #EFEEFF with a contrast ratio of 9.81:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Zucchini	rgb(0, 68, 48)	hsl(162, 100%, 13%)
Hello Fall	rgb(153, 86, 55)	hsl(19, 47%, 41%)
Antique Brass	rgb(114, 71, 35)	hsl(27, 53%, 29%)
Foundation White	rgb(239, 238, 255)	hsl(244, 100%, 97%)
Easter Egg	rgb(154, 147, 205)	hsl(247, 37%, 69%)
Bevelled Glass	rgb(130, 200, 179)	hsl(162, 39%, 65%)

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.

Aa9.81:1 Very good#004430 on #EFEEFF
Aa9.81:1 Very good#EFEEFF on #004430
Aa6.95:1 Good#724723 on #EFEEFF
Aa6.95:1 Good#EFEEFF on #724723
Aa5.81:1 Good#004430 on #82C8B3
Aa5.81:1 Good#82C8B3 on #004430
Aa4.90:1 Good#995637 on #EFEEFF
Aa4.90:1 Good#EFEEFF on #995637

Color blindness preview

CSS variables

/* Zucchini to Bevelled Glass — https://swatchly.xyz/palette/004430-995637-724723-efeeff-9a93cd-82c8b3 */
:root {
  --zucchini: #004430;
  --hello-fall: #995637;
  --antique-brass: #724723;
  --foundation-white: #efeeff;
  --easter-egg: #9a93cd;
  --bevelled-glass: #82c8b3;
}

Tailwind CSS v4

/* Zucchini to Bevelled Glass — https://swatchly.xyz/palette/004430-995637-724723-efeeff-9a93cd-82c8b3 */
@theme {
  --color-zucchini: #004430;
  --color-zucchini-50: #defeef;
  --color-zucchini-100: #d1f5e4;
  --color-zucchini-200: #b8e3d0;
  --color-zucchini-300: #9cceb8;
  --color-zucchini-400: #79b199;
  --color-zucchini-500: #5d967f;
  --color-zucchini-600: #447c66;
  --color-zucchini-700: #306551;
  --color-zucchini-800: #215240;
  --color-zucchini-900: #004430;
  --color-zucchini-950: #0a2a1f;
  --color-hello-fall: #995637;
  --color-hello-fall-50: #fff2ed;
  --color-hello-fall-100: #ffe5d9;
  --color-hello-fall-200: #ffc9b2;
  --color-hello-fall-300: #efaf93;
  --color-hello-fall-400: #d38d6e;
  --color-hello-fall-500: #b67151;
  --color-hello-fall-600: #995637;
  --color-hello-fall-700: #7d4226;
  --color-hello-fall-800: #653118;
  --color-hello-fall-900: #50240f;
  --color-hello-fall-950: #341506;
  --color-antique-brass: #724723;
  --color-antique-brass-50: #fff3e9;
  --color-antique-brass-100: #ffe6d3;
  --color-antique-brass-200: #f5ceb2;
  --color-antique-brass-300: #e1b696;
  --color-antique-brass-400: #c49571;
  --color-antique-brass-500: #a77954;
  --color-antique-brass-600: #8a5e3b;
  --color-antique-brass-700: #724723;
  --color-antique-brass-800: #59371b;
  --color-antique-brass-900: #462911;
  --color-antique-brass-950: #2d1807;
  --color-foundation-white: #efeeff;
  --color-foundation-white-50: #f9f8ff;
  --color-foundation-white-100: #efeeff;
  --color-foundation-white-200: #dbdae6;
  --color-foundation-white-300: #c3c2d0;
  --color-foundation-white-400: #a3a2b1;
  --color-foundation-white-500: #878695;
  --color-foundation-white-600: #6c6b79;
  --color-foundation-white-700: #545461;
  --color-foundation-white-800: #42414c;
  --color-foundation-white-900: #32323b;
  --color-foundation-white-950: #1f1e25;
  --color-easter-egg: #9a93cd;
  --color-easter-egg-50: #f2f1ff;
  --color-easter-egg-100: #e7e5ff;
  --color-easter-egg-200: #d2cdfc;
  --color-easter-egg-300: #bab4e9;
  --color-easter-egg-400: #9a93cd;
  --color-easter-egg-500: #8079b1;
  --color-easter-egg-600: #676095;
  --color-easter-egg-700: #524b7b;
  --color-easter-egg-800: #403a63;
  --color-easter-egg-900: #322c4f;
  --color-easter-egg-950: #1f1b35;
  --color-bevelled-glass: #82c8b3;
  --color-bevelled-glass-50: #d3fbed;
  --color-bevelled-glass-100: #c3f0e2;
  --color-bevelled-glass-200: #a7ddcc;
  --color-bevelled-glass-300: #82c8b3;
  --color-bevelled-glass-400: #66a996;
  --color-bevelled-glass-500: #4a8f7c;
  --color-bevelled-glass-600: #317664;
  --color-bevelled-glass-700: #1e5f4f;
  --color-bevelled-glass-800: #104c3e;
  --color-bevelled-glass-900: #073c30;
  --color-bevelled-glass-950: #02261d;
}