Clover to Curry Bubbles Color Palette

About this palette

Clover to Curry Bubbles is a 5-color vibrant, cool palette: #268D00 (Clover), #009E89 (Paolo Veronese Green), #CB7F00 (Copious Caramel), #A090FF (Perrywinkle), #F4BA00 (Curry Bubbles). It mixes green, turquoise, orange, purple, yellow tones and feels cool overall. The strongest text pairing is #268D00 on #F4BA00 with a contrast ratio of 2.43:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Clover	rgb(38, 141, 0)	hsl(104, 100%, 28%)
Paolo Veronese Green	rgb(0, 158, 137)	hsl(172, 100%, 31%)
Copious Caramel	rgb(203, 127, 0)	hsl(38, 100%, 40%)
Perrywinkle	rgb(160, 144, 255)	hsl(249, 100%, 78%)
Curry Bubbles	rgb(244, 186, 0)	hsl(46, 100%, 48%)

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.

Color blindness preview

CSS variables

/* Clover to Curry Bubbles — https://swatchly.xyz/palette/268d00-009e89-cb7f00-a090ff-f4ba00 */
:root {
  --clover: #268d00;
  --paolo-veronese-green: #009e89;
  --copious-caramel: #cb7f00;
  --perrywinkle: #a090ff;
  --curry-bubbles: #f4ba00;
}

Tailwind CSS v4

/* Clover to Curry Bubbles — https://swatchly.xyz/palette/268d00-009e89-cb7f00-a090ff-f4ba00 */
@theme {
  --color-clover: #268d00;
  --color-clover-50: #e2ffdc;
  --color-clover-100: #c7ffbc;
  --color-clover-200: #abf19d;
  --color-clover-300: #8ede7e;
  --color-clover-400: #66c253;
  --color-clover-500: #46a72f;
  --color-clover-600: #268d00;
  --color-clover-700: #1c7000;
  --color-clover-800: #145800;
  --color-clover-900: #0d4300;
  --color-clover-950: #052b00;
  --color-paolo-veronese-green: #009e89;
  --color-paolo-veronese-green-50: #dafff6;
  --color-paolo-veronese-green-100: #b9fcec;
  --color-paolo-veronese-green-200: #99ebd9;
  --color-paolo-veronese-green-300: #76d7c3;
  --color-paolo-veronese-green-400: #43b9a4;
  --color-paolo-veronese-green-500: #009e89;
  --color-paolo-veronese-green-600: #007f6e;
  --color-paolo-veronese-green-700: #006557;
  --color-paolo-veronese-green-800: #004f44;
  --color-paolo-veronese-green-900: #003d34;
  --color-paolo-veronese-green-950: #002620;
  --color-copious-caramel: #cb7f00;
  --color-copious-caramel-50: #fff6ec;
  --color-copious-caramel-100: #ffecd9;
  --color-copious-caramel-200: #ffd6aa;
  --color-copious-caramel-300: #fcbb72;
  --color-copious-caramel-400: #e39b41;
  --color-copious-caramel-500: #cb7f00;
  --color-copious-caramel-600: #a46600;
  --color-copious-caramel-700: #825000;
  --color-copious-caramel-800: #663d00;
  --color-copious-caramel-900: #4e2e00;
  --color-copious-caramel-950: #311b00;
  --color-perrywinkle: #a090ff;
  --color-perrywinkle-50: #f5f4ff;
  --color-perrywinkle-100: #eae9ff;
  --color-perrywinkle-200: #d6d3ff;
  --color-perrywinkle-300: #bfb8ff;
  --color-perrywinkle-400: #a090ff;
  --color-perrywinkle-500: #8574e0;
  --color-perrywinkle-600: #6b58c0;
  --color-perrywinkle-700: #5542a1;
  --color-perrywinkle-800: #433184;
  --color-perrywinkle-900: #33236a;
  --color-perrywinkle-950: #1f1447;
  --color-curry-bubbles: #f4ba00;
  --color-curry-bubbles-50: #fff6e2;
  --color-curry-bubbles-100: #ffebc1;
  --color-curry-bubbles-200: #fed477;
  --color-curry-bubbles-300: #f4ba00;
  --color-curry-bubbles-400: #cd9c00;
  --color-curry-bubbles-500: #aa8100;
  --color-curry-bubbles-600: #896700;
  --color-curry-bubbles-700: #6d5100;
  --color-curry-bubbles-800: #553f00;
  --color-curry-bubbles-900: #423000;
  --color-curry-bubbles-950: #2a1d00;
}