Green Not Found to Fish Boy Color Palette

About this palette

Green Not Found to Fish Boy is a 5-color cool palette: #424200 (Green Not Found), #006E77 (Teal With It), #D25E60 (Happy Hearts), #C092F7 (Dream Vapour), #43DDDC (Fish Boy). It mixes brown, turquoise, red, purple tones and feels cool overall. The strongest text pairing is #424200 on #43DDDC with a contrast ratio of 6.27:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Green Not Found	rgb(66, 66, 0)	hsl(60, 100%, 13%)
Teal With It	rgb(0, 110, 119)	hsl(185, 100%, 23%)
Happy Hearts	rgb(210, 94, 96)	hsl(359, 56%, 60%)
Dream Vapour	rgb(192, 146, 247)	hsl(267, 86%, 77%)
Fish Boy	rgb(67, 221, 220)	hsl(180, 69%, 56%)

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.

Aa6.27:1 Good#424200 on #43DDDC
Aa6.27:1 Good#43DDDC on #424200
Aa4.32:1 Poor#424200 on #C092F7
Aa4.32:1 Poor#C092F7 on #424200
Aa3.61:1 Poor#006E77 on #43DDDC
Aa3.61:1 Poor#43DDDC on #006E77

Color blindness preview

CSS variables

/* Green Not Found to Fish Boy — https://swatchly.xyz/palette/424200-006e77-d25e60-c092f7-43dddc */
:root {
  --green-not-found: #424200;
  --teal-with-it: #006e77;
  --happy-hearts: #d25e60;
  --dream-vapour: #c092f7;
  --fish-boy: #43dddc;
}

Tailwind CSS v4

/* Green Not Found to Fish Boy — https://swatchly.xyz/palette/424200-006e77-d25e60-c092f7-43dddc */
@theme {
  --color-green-not-found: #424200;
  --color-green-not-found-50: #f6f8d7;
  --color-green-not-found-100: #edefc9;
  --color-green-not-found-200: #d9dbaf;
  --color-green-not-found-300: #c3c591;
  --color-green-not-found-400: #a3a56c;
  --color-green-not-found-500: #87894e;
  --color-green-not-found-600: #6c6d35;
  --color-green-not-found-700: #555621;
  --color-green-not-found-800: #424200;
  --color-green-not-found-900: #32320b;
  --color-green-not-found-950: #1f1f04;
  --color-teal-with-it: #006e77;
  --color-teal-with-it-50: #defcff;
  --color-teal-with-it-100: #c0f4fa;
  --color-teal-with-it-200: #a1e0e7;
  --color-teal-with-it-300: #80c9d1;
  --color-teal-with-it-400: #55a8b1;
  --color-teal-with-it-500: #328b94;
  --color-teal-with-it-600: #006e77;
  --color-teal-with-it-700: #00575f;
  --color-teal-with-it-800: #00444a;
  --color-teal-with-it-900: #00353a;
  --color-teal-with-it-950: #002125;
  --color-happy-hearts: #d25e60;
  --color-happy-hearts-50: #fff2f1;
  --color-happy-hearts-100: #ffe5e3;
  --color-happy-hearts-200: #ffc9c7;
  --color-happy-hearts-300: #ffa7a5;
  --color-happy-hearts-400: #ee7c7c;
  --color-happy-hearts-500: #d25e60;
  --color-happy-hearts-600: #b24347;
  --color-happy-hearts-700: #932d33;
  --color-happy-hearts-800: #781d24;
  --color-happy-hearts-900: #5f1219;
  --color-happy-hearts-950: #3f070c;
  --color-dream-vapour: #c092f7;
  --color-dream-vapour-50: #faf7ff;
  --color-dream-vapour-100: #f4edff;
  --color-dream-vapour-200: #e7d6ff;
  --color-dream-vapour-300: #d7baff;
  --color-dream-vapour-400: #c092f7;
  --color-dream-vapour-500: #a275d6;
  --color-dream-vapour-600: #8558b7;
  --color-dream-vapour-700: #6b4198;
  --color-dream-vapour-800: #552e7b;
  --color-dream-vapour-900: #412061;
  --color-dream-vapour-950: #28113f;
  --color-fish-boy: #43dddc;
  --color-fish-boy-50: #dcfffe;
  --color-fish-boy-100: #b1fefc;
  --color-fish-boy-200: #8eedec;
  --color-fish-boy-300: #43dddc;
  --color-fish-boy-400: #19bbba;
  --color-fish-boy-500: #009c9b;
  --color-fish-boy-600: #007d7d;
  --color-fish-boy-700: #006363;
  --color-fish-boy-800: #004d4d;
  --color-fish-boy-900: #003b3b;
  --color-fish-boy-950: #002525;
}