Kelp Forest to Drip Coffee Color Palette

About this palette

Kelp Forest to Drip Coffee is a 4-color cool palette: #3B8600 (Kelp Forest), #B3E3FF (Frozen Landscape), #D092F1 (Dream Vapour), #773000 (Drip Coffee). It mixes green, blue, purple, brown tones and feels cool overall. The strongest text pairing is #B3E3FF on #773000 with a contrast ratio of 6.95:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Kelp Forest	rgb(59, 134, 0)	hsl(94, 100%, 26%)
Frozen Landscape	rgb(179, 227, 255)	hsl(202, 100%, 85%)
Dream Vapour	rgb(208, 146, 241)	hsl(279, 77%, 76%)
Drip Coffee	rgb(119, 48, 0)	hsl(24, 100%, 23%)

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.

Aa6.95:1 Good#B3E3FF on #773000
Aa6.95:1 Good#773000 on #B3E3FF
Aa4.11:1 Poor#D092F1 on #773000
Aa4.11:1 Poor#773000 on #D092F1
Aa3.34:1 Poor#3B8600 on #B3E3FF
Aa3.34:1 Poor#B3E3FF on #3B8600

Color blindness preview

CSS variables

/* Kelp Forest to Drip Coffee — https://swatchly.xyz/palette/3b8600-b3e3ff-d092f1-773000 */
:root {
  --kelp-forest: #3b8600;
  --frozen-landscape: #b3e3ff;
  --dream-vapour: #d092f1;
  --drip-coffee: #773000;
}

Tailwind CSS v4

/* Kelp Forest to Drip Coffee — https://swatchly.xyz/palette/3b8600-b3e3ff-d092f1-773000 */
@theme {
  --color-kelp-forest: #3b8600;
  --color-kelp-forest-50: #e3ffd9;
  --color-kelp-forest-100: #cdfdb9;
  --color-kelp-forest-200: #b4ed9c;
  --color-kelp-forest-300: #98d97d;
  --color-kelp-forest-400: #73bc52;
  --color-kelp-forest-500: #56a12f;
  --color-kelp-forest-600: #3b8600;
  --color-kelp-forest-700: #2d6b00;
  --color-kelp-forest-800: #225300;
  --color-kelp-forest-900: #184000;
  --color-kelp-forest-950: #0d2800;
  --color-frozen-landscape: #b3e3ff;
  --color-frozen-landscape-50: #f0f9ff;
  --color-frozen-landscape-100: #ddf2ff;
  --color-frozen-landscape-200: #b3e3ff;
  --color-frozen-landscape-300: #a3cae1;
  --color-frozen-landscape-400: #7fabc4;
  --color-frozen-landscape-500: #618fa8;
  --color-frozen-landscape-600: #47738c;
  --color-frozen-landscape-700: #335b71;
  --color-frozen-landscape-800: #23475a;
  --color-frozen-landscape-900: #183747;
  --color-frozen-landscape-950: #0c222e;
  --color-dream-vapour: #d092f1;
  --color-dream-vapour-50: #fcf8ff;
  --color-dream-vapour-100: #f9eeff;
  --color-dream-vapour-200: #f0d6ff;
  --color-dream-vapour-300: #e6b8ff;
  --color-dream-vapour-400: #d092f1;
  --color-dream-vapour-500: #b074d0;
  --color-dream-vapour-600: #9257b0;
  --color-dream-vapour-700: #763f92;
  --color-dream-vapour-800: #5e2c75;
  --color-dream-vapour-900: #481e5c;
  --color-dream-vapour-950: #2d0f3b;
  --color-drip-coffee: #773000;
  --color-drip-coffee-50: #fff2ec;
  --color-drip-coffee-100: #ffe5d9;
  --color-drip-coffee-200: #ffcab1;
  --color-drip-coffee-300: #f6af8d;
  --color-drip-coffee-400: #db8e69;
  --color-drip-coffee-500: #c0734c;
  --color-drip-coffee-600: #a45933;
  --color-drip-coffee-700: #894520;
  --color-drip-coffee-800: #773000;
  --color-drip-coffee-900: #5b2607;
  --color-drip-coffee-950: #3c1602;
}