Botanical Night to Fiji Sands color palette

233B32Botanical Night 5C6855Italian Basil 818B73Majestic Evergreen ABAB90Quiet Thicket CFCBABFiji Sands

Open in generator Export PNG, PDF, ASE…

About this palette

Botanical Night to Fiji Sands is a 5-color muted, earthy, gradient palette: #233B32 (Botanical Night), #5C6855 (Italian Basil), #818B73 (Majestic Evergreen), #ABAB90 (Quiet Thicket), #CFCBAB (Fiji Sands). It mixes gray, green, yellow tones and feels warm overall. The strongest text pairing is #233B32 on #CFCBAB with a contrast ratio of 7.33:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Botanical Night	rgb(35, 59, 50)	hsl(158, 26%, 18%)
Italian Basil	rgb(92, 104, 85)	hsl(98, 10%, 37%)
Majestic Evergreen	rgb(129, 139, 115)	hsl(85, 9%, 50%)
Quiet Thicket	rgb(171, 171, 144)	hsl(60, 14%, 62%)
Fiji Sands	rgb(207, 203, 171)	hsl(53, 27%, 74%)

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.

Aa7.33:1 Very good#233B32 on #CFCBAB
Aa7.33:1 Very good#CFCBAB on #233B32
Aa5.14:1 Good#233B32 on #ABAB90
Aa5.14:1 Good#ABAB90 on #233B32
Aa3.58:1 Poor#5C6855 on #CFCBAB
Aa3.58:1 Poor#CFCBAB on #5C6855
Aa3.37:1 Poor#233B32 on #818B73
Aa3.37:1 Poor#818B73 on #233B32

Color blindness preview

CSS variables

/* Botanical Night to Fiji Sands — https://swatchly.xyz/palette/233b32-5c6855-818b73-abab90-cfcbab */
:root {
  --botanical-night: #233b32;
  --italian-basil: #5c6855;
  --majestic-evergreen: #818b73;
  --quiet-thicket: #abab90;
  --fiji-sands: #cfcbab;
}

Tailwind CSS v4

/* Botanical Night to Fiji Sands — https://swatchly.xyz/palette/233b32-5c6855-818b73-abab90-cfcbab */
@theme {
  --color-botanical-night: #233b32;
  --color-botanical-night-50: #eaf9f3;
  --color-botanical-night-100: #def0e9;
  --color-botanical-night-200: #c8ddd4;
  --color-botanical-night-300: #b0c7bd;
  --color-botanical-night-400: #8fa99e;
  --color-botanical-night-500: #748e83;
  --color-botanical-night-600: #5a746a;
  --color-botanical-night-700: #465d54;
  --color-botanical-night-800: #354a42;
  --color-botanical-night-900: #233b32;
  --color-botanical-night-950: #18241f;
  --color-italian-basil: #5c6855;
  --color-italian-basil-50: #f0f8ec;
  --color-italian-basil-100: #e4eddf;
  --color-italian-basil-200: #ced8c8;
  --color-italian-basil-300: #b5c1ae;
  --color-italian-basil-400: #94a08c;
  --color-italian-basil-500: #778470;
  --color-italian-basil-600: #5c6855;
  --color-italian-basil-700: #485342;
  --color-italian-basil-800: #384132;
  --color-italian-basil-900: #2a3226;
  --color-italian-basil-950: #1a1f16;
  --color-majestic-evergreen: #818b73;
  --color-majestic-evergreen-50: #f2f8e9;
  --color-majestic-evergreen-100: #e7eede;
  --color-majestic-evergreen-200: #d3dbc8;
  --color-majestic-evergreen-300: #bcc5b0;
  --color-majestic-evergreen-400: #9ca68f;
  --color-majestic-evergreen-500: #818b73;
  --color-majestic-evergreen-600: #677059;
  --color-majestic-evergreen-700: #515945;
  --color-majestic-evergreen-800: #3e4634;
  --color-majestic-evergreen-900: #2f3626;
  --color-majestic-evergreen-950: #1d2116;
  --color-quiet-thicket: #abab90;
  --color-quiet-thicket-50: #f9f9ea;
  --color-quiet-thicket-100: #f0f0e0;
  --color-quiet-thicket-200: #dedeca;
  --color-quiet-thicket-300: #c9c9b2;
  --color-quiet-thicket-400: #abab90;
  --color-quiet-thicket-500: #8e8e74;
  --color-quiet-thicket-600: #727259;
  --color-quiet-thicket-700: #5a5a43;
  --color-quiet-thicket-800: #464632;
  --color-quiet-thicket-900: #353524;
  --color-quiet-thicket-950: #202014;
  --color-fiji-sands: #cfcbab;
  --color-fiji-sands-50: #fcfaea;
  --color-fiji-sands-100: #f4f2df;
  --color-fiji-sands-200: #e3e0c9;
  --color-fiji-sands-300: #cfcbab;
  --color-fiji-sands-400: #adaa8d;
  --color-fiji-sands-500: #918d6f;
  --color-fiji-sands-600: #757154;
  --color-fiji-sands-700: #5c593e;
  --color-fiji-sands-800: #47442d;
  --color-fiji-sands-900: #363320;
  --color-fiji-sands-950: #222012;
}