Basil Smash to Waterworld Color Palette

About this palette

Basil Smash to Waterworld is a 4-color cool palette: #C5DCA3 (Basil Smash), #C38673 (Whisky), #23152C (Dark Prom Queen), #007386 (Waterworld). It mixes green, red, purple, turquoise tones and feels cool overall. The strongest text pairing is #C5DCA3 on #23152C with a contrast ratio of 11.64:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Basil Smash	rgb(197, 220, 163)	hsl(84, 45%, 75%)
Whisky	rgb(195, 134, 115)	hsl(14, 40%, 61%)
Dark Prom Queen	rgb(35, 21, 44)	hsl(277, 35%, 13%)
Waterworld	rgb(0, 115, 134)	hsl(189, 100%, 26%)

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.

Aa11.64:1 Very good#C5DCA3 on #23152C
Aa11.64:1 Very good#23152C on #C5DCA3
Aa5.74:1 Good#C38673 on #23152C
Aa5.74:1 Good#23152C on #C38673
Aa3.72:1 Poor#C5DCA3 on #007386
Aa3.72:1 Poor#007386 on #C5DCA3
Aa3.12:1 Poor#23152C on #007386
Aa3.12:1 Poor#007386 on #23152C

Color blindness preview

CSS variables

/* Basil Smash to Waterworld — https://swatchly.xyz/palette/c5dca3-c38673-23152c-007386 */
:root {
  --basil-smash: #c5dca3;
  --whisky: #c38673;
  --dark-prom-queen: #23152c;
  --waterworld: #007386;
}

Tailwind CSS v4

/* Basil Smash to Waterworld — https://swatchly.xyz/palette/c5dca3-c38673-23152c-007386 */
@theme {
  --color-basil-smash: #c5dca3;
  --color-basil-smash-50: #eaf8d7;
  --color-basil-smash-100: #deedc8;
  --color-basil-smash-200: #c5dca3;
  --color-basil-smash-300: #b1c594;
  --color-basil-smash-400: #92a772;
  --color-basil-smash-500: #788c57;
  --color-basil-smash-600: #5f723f;
  --color-basil-smash-700: #4a5c2d;
  --color-basil-smash-800: #3a491f;
  --color-basil-smash-900: #2b3814;
  --color-basil-smash-950: #1a2309;
  --color-whisky: #c38673;
  --color-whisky-50: #ffede7;
  --color-whisky-100: #ffddd3;
  --color-whisky-200: #f6c3b3;
  --color-whisky-300: #e1a997;
  --color-whisky-400: #c38673;
  --color-whisky-500: #a86d5b;
  --color-whisky-600: #8c5544;
  --color-whisky-700: #734232;
  --color-whisky-800: #5d3225;
  --color-whisky-900: #4b261b;
  --color-whisky-950: #32170e;
  --color-dark-prom-queen: #23152c;
  --color-dark-prom-queen-50: #f9f2ff;
  --color-dark-prom-queen-100: #f1e6fa;
  --color-dark-prom-queen-200: #dfd1e9;
  --color-dark-prom-queen-300: #c9bad5;
  --color-dark-prom-queen-400: #ab9ab7;
  --color-dark-prom-queen-500: #8f7e9b;
  --color-dark-prom-queen-600: #73637e;
  --color-dark-prom-queen-700: #5b4d65;
  --color-dark-prom-queen-800: #473a4f;
  --color-dark-prom-queen-900: #352b3d;
  --color-dark-prom-queen-950: #23152c;
  --color-waterworld: #007386;
  --color-waterworld-50: #e4faff;
  --color-waterworld-100: #c5f4ff;
  --color-waterworld-200: #a2e2f1;
  --color-waterworld-300: #81cbdd;
  --color-waterworld-400: #56acbf;
  --color-waterworld-500: #328fa3;
  --color-waterworld-600: #007386;
  --color-waterworld-700: #005b6b;
  --color-waterworld-800: #004754;
  --color-waterworld-900: #003741;
  --color-waterworld-950: #00232a;
}