Nature to Black Market Color Palette

About this palette

Nature to Black Market is a 5-color cool palette: #B7D7B1 (Nature), #80BC83 (Frog Pond), #B24C3E (Crimson Boy), #30487E (Nautical), #1B2241 (Black Market). It mixes green, red, blue tones and feels cool overall. The strongest text pairing is #B7D7B1 on #1B2241 with a contrast ratio of 9.89:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nature	rgb(183, 215, 177)	hsl(111, 32%, 77%)
Frog Pond	rgb(128, 188, 131)	hsl(123, 31%, 62%)
Crimson Boy	rgb(178, 76, 62)	hsl(7, 48%, 47%)
Nautical	rgb(48, 72, 126)	hsl(222, 45%, 34%)
Black Market	rgb(27, 34, 65)	hsl(229, 41%, 18%)

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.

Aa9.89:1 Very good#B7D7B1 on #1B2241
Aa9.89:1 Very good#1B2241 on #B7D7B1
Aa6.98:1 Good#80BC83 on #1B2241
Aa6.98:1 Good#1B2241 on #80BC83
Aa5.68:1 Good#B7D7B1 on #30487E
Aa5.68:1 Good#30487E on #B7D7B1
Aa4.01:1 Poor#80BC83 on #30487E
Aa4.01:1 Poor#30487E on #80BC83

Color blindness preview

CSS variables

/* Nature to Black Market — https://swatchly.xyz/palette/b7d7b1-80bc83-b24c3e-30487e-1b2241 */
:root {
  --nature: #b7d7b1;
  --frog-pond: #80bc83;
  --crimson-boy: #b24c3e;
  --nautical: #30487e;
  --black-market: #1b2241;
}

Tailwind CSS v4

/* Nature to Black Market — https://swatchly.xyz/palette/b7d7b1-80bc83-b24c3e-30487e-1b2241 */
@theme {
  --color-nature: #b7d7b1;
  --color-nature-50: #e1f4dd;
  --color-nature-100: #d3e9cf;
  --color-nature-200: #b7d7b1;
  --color-nature-300: #a5c1a0;
  --color-nature-400: #86a481;
  --color-nature-500: #6d8b68;
  --color-nature-600: #557150;
  --color-nature-700: #425c3e;
  --color-nature-800: #33492f;
  --color-nature-900: #263922;
  --color-nature-950: #162313;
  --color-frog-pond: #80bc83;
  --color-frog-pond-50: #ebffeb;
  --color-frog-pond-100: #d8fbd8;
  --color-frog-pond-200: #c0ebc1;
  --color-frog-pond-300: #a6d8a8;
  --color-frog-pond-400: #80bc83;
  --color-frog-pond-500: #649e67;
  --color-frog-pond-600: #48814c;
  --color-frog-pond-700: #326736;
  --color-frog-pond-800: #215126;
  --color-frog-pond-900: #153e1a;
  --color-frog-pond-950: #09260d;
  --color-crimson-boy: #b24c3e;
  --color-crimson-boy-50: #fff2ef;
  --color-crimson-boy-100: #ffe5e1;
  --color-crimson-boy-200: #ffcbc2;
  --color-crimson-boy-300: #ffaa9c;
  --color-crimson-boy-400: #eb8474;
  --color-crimson-boy-500: #cf6757;
  --color-crimson-boy-600: #b24c3e;
  --color-crimson-boy-700: #93362a;
  --color-crimson-boy-800: #77251c;
  --color-crimson-boy-900: #5f1911;
  --color-crimson-boy-950: #3f0c07;
  --color-nautical: #30487e;
  --color-nautical-50: #f0f5ff;
  --color-nautical-100: #e2ebff;
  --color-nautical-200: #c5d8ff;
  --color-nautical-300: #a9c2f8;
  --color-nautical-400: #88a4de;
  --color-nautical-500: #6e8ac5;
  --color-nautical-600: #5670a9;
  --color-nautical-700: #425b8f;
  --color-nautical-800: #30487e;
  --color-nautical-900: #253860;
  --color-nautical-950: #152341;
  --color-black-market: #1b2241;
  --color-black-market-50: #f2f5ff;
  --color-black-market-100: #e4ebff;
  --color-black-market-200: #cdd6f5;
  --color-black-market-300: #b5c0e2;
  --color-black-market-400: #95a0c6;
  --color-black-market-500: #7b86ab;
  --color-black-market-600: #626c90;
  --color-black-market-700: #4e5778;
  --color-black-market-800: #3d4562;
  --color-black-market-900: #2f364f;
  --color-black-market-950: #1b2241;
}