Kelp Forest to Golden Harvest Color Palette

About this palette

Kelp Forest to Golden Harvest is a 5-color vibrant, cool, neon palette: #3D8200 (Kelp Forest), #009758 (Militant Vegan), #FF3015 (Boiling Magma), #D776E0 (Pink Orchid), #CECB00 (Golden Harvest). It mixes green, red, pink, yellow tones and feels cool overall. The strongest text pairing is #3D8200 on #CECB00 with a contrast ratio of 2.77:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Kelp Forest	rgb(61, 130, 0)	hsl(92, 100%, 25%)
Militant Vegan	rgb(0, 151, 88)	hsl(155, 100%, 30%)
Boiling Magma	rgb(255, 48, 21)	hsl(7, 100%, 54%)
Pink Orchid	rgb(215, 118, 224)	hsl(295, 63%, 67%)
Golden Harvest	rgb(206, 203, 0)	hsl(59, 100%, 40%)

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

/* Kelp Forest to Golden Harvest — https://swatchly.xyz/palette/3d8200-009758-ff3015-d776e0-cecb00 */
:root {
  --kelp-forest: #3d8200;
  --militant-vegan: #009758;
  --boiling-magma: #ff3015;
  --pink-orchid: #d776e0;
  --golden-harvest: #cecb00;
}

Tailwind CSS v4

/* Kelp Forest to Golden Harvest — https://swatchly.xyz/palette/3d8200-009758-ff3015-d776e0-cecb00 */
@theme {
  --color-kelp-forest: #3d8200;
  --color-kelp-forest-50: #e4ffd8;
  --color-kelp-forest-100: #cefcb9;
  --color-kelp-forest-200: #b5eb9c;
  --color-kelp-forest-300: #99d77c;
  --color-kelp-forest-400: #75b951;
  --color-kelp-forest-500: #589d2e;
  --color-kelp-forest-600: #3d8200;
  --color-kelp-forest-700: #2f6700;
  --color-kelp-forest-800: #235100;
  --color-kelp-forest-900: #1a3e00;
  --color-kelp-forest-950: #0d2700;
  --color-militant-vegan: #009758;
  --color-militant-vegan-50: #d8ffe5;
  --color-militant-vegan-100: #b6fbcf;
  --color-militant-vegan-200: #95e9b5;
  --color-militant-vegan-300: #71d499;
  --color-militant-vegan-400: #3fb475;
  --color-militant-vegan-500: #009758;
  --color-militant-vegan-600: #007a46;
  --color-militant-vegan-700: #006137;
  --color-militant-vegan-800: #004c2a;
  --color-militant-vegan-900: #003c1f;
  --color-militant-vegan-950: #002612;
  --color-boiling-magma: #ff3015;
  --color-boiling-magma-50: #fff4f1;
  --color-boiling-magma-100: #ffe8e3;
  --color-boiling-magma-200: #ffcec5;
  --color-boiling-magma-300: #ffafa0;
  --color-boiling-magma-400: #ff7a65;
  --color-boiling-magma-500: #ff3015;
  --color-boiling-magma-600: #d21a00;
  --color-boiling-magma-700: #a81300;
  --color-boiling-magma-800: #850c00;
  --color-boiling-magma-900: #680700;
  --color-boiling-magma-950: #430300;
  --color-pink-orchid: #d776e0;
  --color-pink-orchid-50: #fef0ff;
  --color-pink-orchid-100: #fde1ff;
  --color-pink-orchid-200: #fbc1ff;
  --color-pink-orchid-300: #f19ef9;
  --color-pink-orchid-400: #d776e0;
  --color-pink-orchid-500: #b95ac2;
  --color-pink-orchid-600: #9b3ea4;
  --color-pink-orchid-700: #7f2988;
  --color-pink-orchid-800: #67196e;
  --color-pink-orchid-900: #510e58;
  --color-pink-orchid-950: #35053a;
  --color-golden-harvest: #cecb00;
  --color-golden-harvest-50: #fbfcb1;
  --color-golden-harvest-100: #f3f39d;
  --color-golden-harvest-200: #e1e077;
  --color-golden-harvest-300: #cecb00;
  --color-golden-harvest-400: #acaa00;
  --color-golden-harvest-500: #8f8d00;
  --color-golden-harvest-600: #737100;
  --color-golden-harvest-700: #5b5a00;
  --color-golden-harvest-800: #474600;
  --color-golden-harvest-900: #363500;
  --color-golden-harvest-950: #222100;
}