Embarrassed Frog to Fish Boy Color Palette

About this palette

Embarrassed Frog to Fish Boy is a 5-color vibrant, warm palette: #A05F00 (Embarrassed Frog), #E13D83 (Mystic Magenta), #00ADAA (Teal Me No Lies), #FF8C1D (Mango Madness), #00D7DB (Fish Boy). It mixes brown, pink, turquoise, orange tones and feels warm overall. The strongest text pairing is #A05F00 on #00D7DB with a contrast ratio of 2.84:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Embarrassed Frog	rgb(160, 95, 0)	hsl(36, 100%, 31%)
Mystic Magenta	rgb(225, 61, 131)	hsl(334, 73%, 56%)
Teal Me No Lies	rgb(0, 173, 170)	hsl(179, 100%, 34%)
Mango Madness	rgb(255, 140, 29)	hsl(29, 100%, 56%)
Fish Boy	rgb(0, 215, 219)	hsl(181, 100%, 43%)

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

/* Embarrassed Frog to Fish Boy — https://swatchly.xyz/palette/a05f00-e13d83-00adaa-ff8c1d-00d7db */
:root {
  --embarrassed-frog: #a05f00;
  --mystic-magenta: #e13d83;
  --teal-me-no-lies: #00adaa;
  --mango-madness: #ff8c1d;
  --fish-boy: #00d7db;
}

Tailwind CSS v4

/* Embarrassed Frog to Fish Boy — https://swatchly.xyz/palette/a05f00-e13d83-00adaa-ff8c1d-00d7db */
@theme {
  --color-embarrassed-frog: #a05f00;
  --color-embarrassed-frog-50: #fff3e7;
  --color-embarrassed-frog-100: #ffe7d2;
  --color-embarrassed-frog-200: #ffcfa1;
  --color-embarrassed-frog-300: #f2b67a;
  --color-embarrassed-frog-400: #d79550;
  --color-embarrassed-frog-500: #bc792d;
  --color-embarrassed-frog-600: #a05f00;
  --color-embarrassed-frog-700: #804b00;
  --color-embarrassed-frog-800: #653a00;
  --color-embarrassed-frog-900: #4e2c00;
  --color-embarrassed-frog-950: #321a00;
  --color-mystic-magenta: #e13d83;
  --color-mystic-magenta-50: #fff1f5;
  --color-mystic-magenta-100: #ffe3eb;
  --color-mystic-magenta-200: #ffc5d6;
  --color-mystic-magenta-300: #ffa1bf;
  --color-mystic-magenta-400: #fe619e;
  --color-mystic-magenta-500: #e13d83;
  --color-mystic-magenta-600: #c01869;
  --color-mystic-magenta-700: #9d0053;
  --color-mystic-magenta-800: #7c0040;
  --color-mystic-magenta-900: #620031;
  --color-mystic-magenta-950: #40001e;
  --color-teal-me-no-lies: #00adaa;
  --color-teal-me-no-lies-50: #c3fffc;
  --color-teal-me-no-lies-100: #a9f6f3;
  --color-teal-me-no-lies-200: #84e3e0;
  --color-teal-me-no-lies-300: #5bcdc9;
  --color-teal-me-no-lies-400: #00adaa;
  --color-teal-me-no-lies-500: #00908e;
  --color-teal-me-no-lies-600: #007573;
  --color-teal-me-no-lies-700: #005d5b;
  --color-teal-me-no-lies-800: #004a48;
  --color-teal-me-no-lies-900: #003a39;
  --color-teal-me-no-lies-950: #002524;
  --color-mango-madness: #ff8c1d;
  --color-mango-madness-50: #fff8f4;
  --color-mango-madness-100: #ffeee3;
  --color-mango-madness-200: #ffd8bc;
  --color-mango-madness-300: #ffbb8a;
  --color-mango-madness-400: #ff8c1d;
  --color-mango-madness-500: #d77200;
  --color-mango-madness-600: #ad5b00;
  --color-mango-madness-700: #8a4700;
  --color-mango-madness-800: #6b3600;
  --color-mango-madness-900: #522800;
  --color-mango-madness-950: #341600;
  --color-fish-boy: #00d7db;
  --color-fish-boy-50: #ccfeff;
  --color-fish-boy-100: #a1fbfc;
  --color-fish-boy-200: #79e9eb;
  --color-fish-boy-300: #00d7db;
  --color-fish-boy-400: #00b4b8;
  --color-fish-boy-500: #009699;
  --color-fish-boy-600: #00797c;
  --color-fish-boy-700: #006163;
  --color-fish-boy-800: #004c4e;
  --color-fish-boy-900: #003b3c;
  --color-fish-boy-950: #002526;
}