Funky Frog to Siren Color Palette

About this palette

Funky Frog to Siren is a 5-color cool palette: #98BF35 (Funky Frog), #EDE7FF (Holographic Lavender), #008E8A (Dark Cyan), #25123A (Midnight Monarch), #6B2A3C (Siren). It mixes green, white, turquoise, purple, red tones and feels cool overall. The strongest text pairing is #EDE7FF on #25123A with a contrast ratio of 14.25:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Funky Frog	rgb(152, 191, 53)	hsl(77, 57%, 48%)
Holographic Lavender	rgb(237, 231, 255)	hsl(255, 100%, 95%)
Dark Cyan	rgb(0, 142, 138)	hsl(178, 100%, 28%)
Midnight Monarch	rgb(37, 18, 58)	hsl(268, 53%, 15%)
Siren	rgb(107, 42, 60)	hsl(343, 44%, 29%)

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.

Aa14.25:1 Super#EDE7FF on #25123A
Aa14.25:1 Super#25123A on #EDE7FF
Aa8.64:1 Very good#EDE7FF on #6B2A3C
Aa8.64:1 Very good#6B2A3C on #EDE7FF
Aa8.02:1 Very good#98BF35 on #25123A
Aa8.02:1 Very good#25123A on #98BF35
Aa4.87:1 Good#98BF35 on #6B2A3C
Aa4.87:1 Good#6B2A3C on #98BF35

Color blindness preview

CSS variables

/* Funky Frog to Siren — https://swatchly.xyz/palette/98bf35-ede7ff-008e8a-25123a-6b2a3c */
:root {
  --funky-frog: #98bf35;
  --holographic-lavender: #ede7ff;
  --dark-cyan: #008e8a;
  --midnight-monarch: #25123a;
  --siren: #6b2a3c;
}

Tailwind CSS v4

/* Funky Frog to Siren — https://swatchly.xyz/palette/98bf35-ede7ff-008e8a-25123a-6b2a3c */
@theme {
  --color-funky-frog: #98bf35;
  --color-funky-frog-50: #f3ffe1;
  --color-funky-frog-100: #e4feb7;
  --color-funky-frog-200: #d0ee98;
  --color-funky-frog-300: #b9db76;
  --color-funky-frog-400: #98bf35;
  --color-funky-frog-500: #7ba000;
  --color-funky-frog-600: #638000;
  --color-funky-frog-700: #4d6500;
  --color-funky-frog-800: #3b4e00;
  --color-funky-frog-900: #2c3b00;
  --color-funky-frog-950: #192400;
  --color-holographic-lavender: #ede7ff;
  --color-holographic-lavender-50: #f6f3ff;
  --color-holographic-lavender-100: #ede7ff;
  --color-holographic-lavender-200: #d9d4e6;
  --color-holographic-lavender-300: #c2bdd1;
  --color-holographic-lavender-400: #a39eb3;
  --color-holographic-lavender-500: #888298;
  --color-holographic-lavender-600: #6d687d;
  --color-holographic-lavender-700: #575264;
  --color-holographic-lavender-800: #443f4f;
  --color-holographic-lavender-900: #34303e;
  --color-holographic-lavender-950: #201d27;
  --color-dark-cyan: #008e8a;
  --color-dark-cyan-50: #ccfffc;
  --color-dark-cyan-100: #b5f6f2;
  --color-dark-cyan-200: #94e2de;
  --color-dark-cyan-300: #6fccc7;
  --color-dark-cyan-400: #3eaca7;
  --color-dark-cyan-500: #008e8a;
  --color-dark-cyan-600: #00726f;
  --color-dark-cyan-700: #005b58;
  --color-dark-cyan-800: #004846;
  --color-dark-cyan-900: #003836;
  --color-dark-cyan-950: #002422;
  --color-midnight-monarch: #25123a;
  --color-midnight-monarch-50: #f7f3ff;
  --color-midnight-monarch-100: #f0e6ff;
  --color-midnight-monarch-200: #decff7;
  --color-midnight-monarch-300: #c9b7e4;
  --color-midnight-monarch-400: #aa97c7;
  --color-midnight-monarch-500: #8f7bab;
  --color-midnight-monarch-600: #74618f;
  --color-midnight-monarch-700: #5c4b74;
  --color-midnight-monarch-800: #48395c;
  --color-midnight-monarch-900: #372a48;
  --color-midnight-monarch-950: #25123a;
  --color-siren: #6b2a3c;
  --color-siren-50: #fff1f4;
  --color-siren-100: #ffe3e8;
  --color-siren-200: #ffc6d1;
  --color-siren-300: #efacba;
  --color-siren-400: #d28a9a;
  --color-siren-500: #b76e7e;
  --color-siren-600: #995465;
  --color-siren-700: #7e3f4f;
  --color-siren-800: #6b2a3c;
  --color-siren-900: #50222e;
  --color-siren-950: #34131c;
}