Caponata to Water Nymph Color Palette

About this palette

Caponata to Water Nymph is a 5-color cool palette: #7B3317 (Caponata), #627000 (Topiary Green), #0092A7 (Oasis), #A090CF (Fleur-De-Lis), #77D8E4 (Water Nymph). It mixes brown, green, turquoise, purple tones and feels cool overall. The strongest text pairing is #7B3317 on #77D8E4 with a contrast ratio of 5.47:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Caponata	rgb(123, 51, 23)	hsl(17, 68%, 29%)
Topiary Green	rgb(98, 112, 0)	hsl(68, 100%, 22%)
Oasis	rgb(0, 146, 167)	hsl(188, 100%, 33%)
Fleur-De-Lis	rgb(160, 144, 207)	hsl(255, 40%, 69%)
Water Nymph	rgb(119, 216, 228)	hsl(187, 67%, 68%)

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.

Aa5.47:1 Good#7B3317 on #77D8E4
Aa5.47:1 Good#77D8E4 on #7B3317
Aa3.32:1 Poor#627000 on #77D8E4
Aa3.32:1 Poor#77D8E4 on #627000
Aa3.17:1 Poor#7B3317 on #A090CF
Aa3.17:1 Poor#A090CF on #7B3317

Color blindness preview

CSS variables

/* Caponata to Water Nymph — https://swatchly.xyz/palette/7b3317-627000-0092a7-a090cf-77d8e4 */
:root {
  --caponata: #7b3317;
  --topiary-green: #627000;
  --oasis: #0092a7;
  --fleur-de-lis: #a090cf;
  --water-nymph: #77d8e4;
}

Tailwind CSS v4

/* Caponata to Water Nymph — https://swatchly.xyz/palette/7b3317-627000-0092a7-a090cf-77d8e4 */
@theme {
  --color-caponata: #7b3317;
  --color-caponata-50: #fff2ed;
  --color-caponata-100: #ffe5dc;
  --color-caponata-200: #ffc7b3;
  --color-caponata-300: #f2a98f;
  --color-caponata-400: #d48569;
  --color-caponata-500: #b5684c;
  --color-caponata-600: #954d32;
  --color-caponata-700: #7b3317;
  --color-caponata-800: #5f2814;
  --color-caponata-900: #4b1d0c;
  --color-caponata-950: #311005;
  --color-topiary-green: #627000;
  --color-topiary-green-50: #f1fcca;
  --color-topiary-green-100: #e5f2b9;
  --color-topiary-green-200: #d0df9b;
  --color-topiary-green-300: #b8c87a;
  --color-topiary-green-400: #98a84f;
  --color-topiary-green-500: #7c8c2d;
  --color-topiary-green-600: #627000;
  --color-topiary-green-700: #4d5900;
  --color-topiary-green-800: #3c4500;
  --color-topiary-green-900: #2e3500;
  --color-topiary-green-950: #1c2100;
  --color-oasis: #0092a7;
  --color-oasis-50: #e1faff;
  --color-oasis-100: #c1f4ff;
  --color-oasis-200: #96e4f4;
  --color-oasis-300: #72cee1;
  --color-oasis-400: #40aec3;
  --color-oasis-500: #0092a7;
  --color-oasis-600: #007687;
  --color-oasis-700: #005d6c;
  --color-oasis-800: #004955;
  --color-oasis-900: #003942;
  --color-oasis-950: #00242a;
  --color-fleur-de-lis: #a090cf;
  --color-fleur-de-lis-50: #f4f1ff;
  --color-fleur-de-lis-100: #e9e4ff;
  --color-fleur-de-lis-200: #d6cbfe;
  --color-fleur-de-lis-300: #c0b2eb;
  --color-fleur-de-lis-400: #a090cf;
  --color-fleur-de-lis-500: #8676b3;
  --color-fleur-de-lis-600: #6c5d96;
  --color-fleur-de-lis-700: #57487c;
  --color-fleur-de-lis-800: #443765;
  --color-fleur-de-lis-900: #352a51;
  --color-fleur-de-lis-950: #211935;
  --color-water-nymph: #77d8e4;
  --color-water-nymph-50: #e8fcff;
  --color-water-nymph-100: #caf9ff;
  --color-water-nymph-200: #a8e9f2;
  --color-water-nymph-300: #77d8e4;
  --color-water-nymph-400: #5bb6c1;
  --color-water-nymph-500: #3399a5;
  --color-water-nymph-600: #017d88;
  --color-water-nymph-700: #00636c;
  --color-water-nymph-800: #004d54;
  --color-water-nymph-900: #003b40;
  --color-water-nymph-950: #002529;
}