Kelp Forest to Shivering Green color palette

428B00Kelp Forest 00916AViridian E16C0024 Carrot 48B84BIntoxicate 9BADFFWidowmaker 00DF7EShivering Green

Open in generator Export PNG, PDF, ASE…

About this palette

Kelp Forest to Shivering Green is a 6-color vibrant, cool palette: #428B00 (Kelp Forest), #00916A (Viridian), #E16C00 (24 Carrot), #48B84B (Intoxicate), #9BADFF (Widowmaker), #00DF7E (Shivering Green). It mixes green, turquoise, orange, blue tones and feels cool overall. The strongest text pairing is #428B00 on #00DF7E with a contrast ratio of 2.41:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Kelp Forest	rgb(66, 139, 0)	hsl(92, 100%, 27%)
Viridian	rgb(0, 145, 106)	hsl(164, 100%, 28%)
24 Carrot	rgb(225, 108, 0)	hsl(29, 100%, 44%)
Intoxicate	rgb(72, 184, 75)	hsl(122, 44%, 50%)
Widowmaker	rgb(155, 173, 255)	hsl(229, 100%, 80%)
Shivering Green	rgb(0, 223, 126)	hsl(154, 100%, 44%)

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 Shivering Green — https://swatchly.xyz/palette/428b00-00916a-e16c00-48b84b-9badff-00df7e */
:root {
  --kelp-forest: #428b00;
  --viridian: #00916a;
  --c-24-carrot: #e16c00;
  --intoxicate: #48b84b;
  --widowmaker: #9badff;
  --shivering-green: #00df7e;
}

Tailwind CSS v4

/* Kelp Forest to Shivering Green — https://swatchly.xyz/palette/428b00-00916a-e16c00-48b84b-9badff-00df7e */
@theme {
  --color-kelp-forest: #428b00;
  --color-kelp-forest-50: #e4ffd8;
  --color-kelp-forest-100: #cffeb9;
  --color-kelp-forest-200: #b7ee9d;
  --color-kelp-forest-300: #9ddb7e;
  --color-kelp-forest-400: #79bf53;
  --color-kelp-forest-500: #5ca52f;
  --color-kelp-forest-600: #428b00;
  --color-kelp-forest-700: #336f00;
  --color-kelp-forest-800: #265600;
  --color-kelp-forest-900: #1c4200;
  --color-kelp-forest-950: #0f2a00;
  --color-viridian: #00916a;
  --color-viridian-50: #d3ffeb;
  --color-viridian-100: #b5f8db;
  --color-viridian-200: #94e5c3;
  --color-viridian-300: #6fcfa9;
  --color-viridian-400: #3eaf87;
  --color-viridian-500: #00916a;
  --color-viridian-600: #007555;
  --color-viridian-700: #005d43;
  --color-viridian-800: #004a34;
  --color-viridian-900: #003a28;
  --color-viridian-950: #002518;
  --color-c-24-carrot: #e16c00;
  --color-c-24-carrot-50: #fff5f0;
  --color-c-24-carrot-100: #ffebe0;
  --color-c-24-carrot-200: #ffd4bb;
  --color-c-24-carrot-300: #ffb78c;
  --color-c-24-carrot-400: #f98a40;
  --color-c-24-carrot-500: #e16c00;
  --color-c-24-carrot-600: #b65600;
  --color-c-24-carrot-700: #914300;
  --color-c-24-carrot-800: #723300;
  --color-c-24-carrot-900: #582600;
  --color-c-24-carrot-950: #381500;
  --color-intoxicate: #48b84b;
  --color-intoxicate-50: #dbffda;
  --color-intoxicate-100: #bafdb8;
  --color-intoxicate-200: #9bec99;
  --color-intoxicate-300: #79d678;
  --color-intoxicate-400: #48b84b;
  --color-intoxicate-500: #269c2e;
  --color-intoxicate-600: #008014;
  --color-intoxicate-700: #00660e;
  --color-intoxicate-800: #005009;
  --color-intoxicate-900: #003f05;
  --color-intoxicate-950: #002802;
  --color-widowmaker: #9badff;
  --color-widowmaker-50: #e8edff;
  --color-widowmaker-100: #d8e0ff;
  --color-widowmaker-200: #bbc9ff;
  --color-widowmaker-300: #9badff;
  --color-widowmaker-400: #8090de;
  --color-widowmaker-500: #6877c4;
  --color-widowmaker-600: #515ea7;
  --color-widowmaker-700: #3f4a8c;
  --color-widowmaker-800: #313a74;
  --color-widowmaker-900: #262d5f;
  --color-widowmaker-950: #161b3f;
  --color-shivering-green: #00df7e;
  --color-shivering-green-50: #d4ffe0;
  --color-shivering-green-100: #a7ffc4;
  --color-shivering-green-200: #77f0a5;
  --color-shivering-green-300: #00df7e;
  --color-shivering-green-400: #00bb69;
  --color-shivering-green-500: #009c57;
  --color-shivering-green-600: #007e45;
  --color-shivering-green-700: #006536;
  --color-shivering-green-800: #005029;
  --color-shivering-green-900: #003e1f;
  --color-shivering-green-950: #002711;
}