Fish Boy to Puma Color Palette

About this palette

Fish Boy to Puma is a 6-color vibrant palette: #00D5E1 (Fish Boy), #FF63A3 (Fuchsia Fever), #009795 (Java), #49B000 (Kermit Green), #EE7DD7 (Frail Fuchsia), #9D6D00 (Puma). It mixes turquoise, pink, green, yellow tones and feels balanced overall. The strongest text pairing is #00D5E1 on #9D6D00 with a contrast ratio of 2.51:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fish Boy	rgb(0, 213, 225)	hsl(183, 100%, 44%)
Fuchsia Fever	rgb(255, 99, 163)	hsl(335, 100%, 69%)
Java	rgb(0, 151, 149)	hsl(179, 100%, 30%)
Kermit Green	rgb(73, 176, 0)	hsl(95, 100%, 35%)
Frail Fuchsia	rgb(238, 125, 215)	hsl(312, 77%, 71%)
Puma	rgb(157, 109, 0)	hsl(42, 100%, 31%)

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.

Color blindness preview

CSS variables

/* Fish Boy to Puma — https://swatchly.xyz/palette/00d5e1-ff63a3-009795-49b000-ee7dd7-9d6d00 */
:root {
  --fish-boy: #00d5e1;
  --fuchsia-fever: #ff63a3;
  --java: #009795;
  --kermit-green: #49b000;
  --frail-fuchsia: #ee7dd7;
  --puma: #9d6d00;
}

Tailwind CSS v4

/* Fish Boy to Puma — https://swatchly.xyz/palette/00d5e1-ff63a3-009795-49b000-ee7dd7-9d6d00 */
@theme {
  --color-fish-boy: #00d5e1;
  --color-fish-boy-50: #d2fcff;
  --color-fish-boy-100: #a5f9ff;
  --color-fish-boy-200: #77e8f0;
  --color-fish-boy-300: #00d5e1;
  --color-fish-boy-400: #00b3bd;
  --color-fish-boy-500: #00959e;
  --color-fish-boy-600: #00787f;
  --color-fish-boy-700: #006066;
  --color-fish-boy-800: #004c50;
  --color-fish-boy-900: #003b3f;
  --color-fish-boy-950: #002528;
  --color-fuchsia-fever: #ff63a3;
  --color-fuchsia-fever-50: #fff2f6;
  --color-fuchsia-fever-100: #ffe4ec;
  --color-fuchsia-fever-200: #ffc7d9;
  --color-fuchsia-fever-300: #ffa2c2;
  --color-fuchsia-fever-400: #ff63a3;
  --color-fuchsia-fever-500: #de4487;
  --color-fuchsia-fever-600: #bd236d;
  --color-fuchsia-fever-700: #9d0156;
  --color-fuchsia-fever-800: #7c0043;
  --color-fuchsia-fever-900: #610033;
  --color-fuchsia-fever-950: #40001f;
  --color-java: #009795;
  --color-java-50: #d3fffd;
  --color-java-100: #b7f9f6;
  --color-java-200: #97e7e4;
  --color-java-300: #73d2cf;
  --color-java-400: #41b3b1;
  --color-java-500: #009795;
  --color-java-600: #007a78;
  --color-java-700: #00615f;
  --color-java-800: #004c4b;
  --color-java-900: #003b3a;
  --color-java-950: #002524;
  --color-kermit-green: #49b000;
  --color-kermit-green-50: #d5ffc7;
  --color-kermit-green-100: #b7faa0;
  --color-kermit-green-200: #98e77b;
  --color-kermit-green-300: #76d152;
  --color-kermit-green-400: #49b000;
  --color-kermit-green-500: #3c9300;
  --color-kermit-green-600: #2f7700;
  --color-kermit-green-700: #245f00;
  --color-kermit-green-800: #1b4b00;
  --color-kermit-green-900: #133c00;
  --color-kermit-green-950: #0a2700;
  --color-frail-fuchsia: #ee7dd7;
  --color-frail-fuchsia-50: #fff6fc;
  --color-frail-fuchsia-100: #ffeaf9;
  --color-frail-fuchsia-200: #ffcdf2;
  --color-frail-fuchsia-300: #ffa9eb;
  --color-frail-fuchsia-400: #ee7dd7;
  --color-frail-fuchsia-500: #cd5fb8;
  --color-frail-fuchsia-600: #ad4199;
  --color-frail-fuchsia-700: #8e2a7d;
  --color-frail-fuchsia-800: #721864;
  --color-frail-fuchsia-900: #590b4e;
  --color-frail-fuchsia-950: #390331;
  --color-puma: #9d6d00;
  --color-puma-50: #fff3e2;
  --color-puma-100: #ffeacb;
  --color-puma-200: #fbd69c;
  --color-puma-300: #eac07d;
  --color-puma-400: #d0a152;
  --color-puma-500: #b7862f;
  --color-puma-600: #9d6d00;
  --color-puma-700: #7d5600;
  --color-puma-800: #624300;
  --color-puma-900: #4c3200;
  --color-puma-950: #301f00;
}