Zucchini to Bunny Tail Color Palette

About this palette

Zucchini to Bunny Tail is a 5-color cool, earthy palette: #214927 (Zucchini), #30607D (Nautical Creatures), #46AF6B (Green Mana), #F8A148 (Double Dragon), #FBE6FF (Bunny Tail). It mixes green, blue, orange, white tones and feels cool overall. The strongest text pairing is #214927 on #FBE6FF with a contrast ratio of 8.73:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Zucchini	rgb(33, 73, 39)	hsl(129, 38%, 21%)
Nautical Creatures	rgb(48, 96, 125)	hsl(203, 45%, 34%)
Green Mana	rgb(70, 175, 107)	hsl(141, 43%, 48%)
Double Dragon	rgb(248, 161, 72)	hsl(30, 93%, 63%)
Bunny Tail	rgb(251, 230, 255)	hsl(290, 100%, 95%)

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.73:1 Very good#214927 on #FBE6FF
Aa8.73:1 Very good#FBE6FF on #214927
Aa5.77:1 Good#30607D on #FBE6FF
Aa5.77:1 Good#FBE6FF on #30607D
Aa4.97:1 Good#214927 on #F8A148
Aa4.97:1 Good#F8A148 on #214927
Aa3.72:1 Poor#214927 on #46AF6B
Aa3.72:1 Poor#46AF6B on #214927

Color blindness preview

CSS variables

/* Zucchini to Bunny Tail — https://swatchly.xyz/palette/214927-30607d-46af6b-f8a148-fbe6ff */
:root {
  --zucchini: #214927;
  --nautical-creatures: #30607d;
  --green-mana: #46af6b;
  --double-dragon: #f8a148;
  --bunny-tail: #fbe6ff;
}

Tailwind CSS v4

/* Zucchini to Bunny Tail — https://swatchly.xyz/palette/214927-30607d-46af6b-f8a148-fbe6ff */
@theme {
  --color-zucchini: #214927;
  --color-zucchini-50: #e4fde6;
  --color-zucchini-100: #d8f4da;
  --color-zucchini-200: #c1e2c3;
  --color-zucchini-300: #a6cca9;
  --color-zucchini-400: #83ad87;
  --color-zucchini-500: #66906a;
  --color-zucchini-600: #4c7551;
  --color-zucchini-700: #385c3c;
  --color-zucchini-800: #214927;
  --color-zucchini-900: #1c3720;
  --color-zucchini-950: #0f2212;
  --color-nautical-creatures: #30607d;
  --color-nautical-creatures-50: #ebf7ff;
  --color-nautical-creatures-100: #d8efff;
  --color-nautical-creatures-200: #b9def7;
  --color-nautical-creatures-300: #9fc9e5;
  --color-nautical-creatures-400: #7cabca;
  --color-nautical-creatures-500: #6090af;
  --color-nautical-creatures-600: #477694;
  --color-nautical-creatures-700: #30607d;
  --color-nautical-creatures-800: #234b63;
  --color-nautical-creatures-900: #173a4e;
  --color-nautical-creatures-950: #0b2433;
  --color-green-mana: #46af6b;
  --color-green-mana-50: #d1ffdc;
  --color-green-mana-100: #b7f8c8;
  --color-green-mana-200: #98e5ad;
  --color-green-mana-300: #75cf90;
  --color-green-mana-400: #46af6b;
  --color-green-mana-500: #259452;
  --color-green-mana-600: #007a3d;
  --color-green-mana-700: #00612f;
  --color-green-mana-800: #004d24;
  --color-green-mana-900: #003d1b;
  --color-green-mana-950: #00270f;
  --color-double-dragon: #f8a148;
  --color-double-dragon-50: #ffeddd;
  --color-double-dragon-100: #ffdec1;
  --color-double-dragon-200: #ffc189;
  --color-double-dragon-300: #f8a148;
  --color-double-dragon-400: #d68428;
  --color-double-dragon-500: #b86b00;
  --color-double-dragon-600: #965600;
  --color-double-dragon-700: #784400;
  --color-double-dragon-800: #603500;
  --color-double-dragon-900: #4c2900;
  --color-double-dragon-950: #311800;
  --color-bunny-tail: #fbe6ff;
  --color-bunny-tail-50: #fdf4ff;
  --color-bunny-tail-100: #fbe6ff;
  --color-bunny-tail-200: #e3d4e6;
  --color-bunny-tail-300: #cdbcd0;
  --color-bunny-tail-400: #ae9cb2;
  --color-bunny-tail-500: #928096;
  --color-bunny-tail-600: #77657a;
  --color-bunny-tail-700: #5f4f62;
  --color-bunny-tail-800: #4b3d4d;
  --color-bunny-tail-900: #3a2e3c;
  --color-bunny-tail-950: #241c26;
}