Fish Boy to Minotaur Hide Color Palette

About this palette

Fish Boy to Minotaur Hide is a 5-color warm palette: #00E4E3 (Fish Boy), #00AAB9 (True Sky Blue), #D52C29 (Angry Tomato), #842E3D (Blood Oath), #4C1116 (Minotaur Hide). It mixes turquoise, red, brown tones and feels warm overall. The strongest text pairing is #00E4E3 on #4C1116 with a contrast ratio of 9.44:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fish Boy	rgb(0, 228, 227)	hsl(180, 100%, 45%)
True Sky Blue	rgb(0, 170, 185)	hsl(185, 100%, 36%)
Angry Tomato	rgb(213, 44, 41)	hsl(1, 68%, 50%)
Blood Oath	rgb(132, 46, 61)	hsl(350, 48%, 35%)
Minotaur Hide	rgb(76, 17, 22)	hsl(355, 63%, 18%)

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.

Aa9.44:1 Very good#00E4E3 on #4C1116
Aa9.44:1 Very good#4C1116 on #00E4E3
Aa5.41:1 Good#00E4E3 on #842E3D
Aa5.41:1 Good#842E3D on #00E4E3
Aa5.33:1 Good#00AAB9 on #4C1116
Aa5.33:1 Good#4C1116 on #00AAB9
Aa3.13:1 Poor#00E4E3 on #D52C29
Aa3.13:1 Poor#D52C29 on #00E4E3

Color blindness preview

CSS variables

/* Fish Boy to Minotaur Hide — https://swatchly.xyz/palette/00e4e3-00aab9-d52c29-842e3d-4c1116 */
:root {
  --fish-boy: #00e4e3;
  --true-sky-blue: #00aab9;
  --angry-tomato: #d52c29;
  --blood-oath: #842e3d;
  --minotaur-hide: #4c1116;
}

Tailwind CSS v4

/* Fish Boy to Minotaur Hide — https://swatchly.xyz/palette/00e4e3-00aab9-d52c29-842e3d-4c1116 */
@theme {
  --color-fish-boy: #00e4e3;
  --color-fish-boy-50: #e5fffe;
  --color-fish-boy-100: #bbfffd;
  --color-fish-boy-200: #86f3f1;
  --color-fish-boy-300: #00e4e3;
  --color-fish-boy-400: #00bfbe;
  --color-fish-boy-500: #009f9e;
  --color-fish-boy-600: #007f7f;
  --color-fish-boy-700: #006564;
  --color-fish-boy-800: #004e4e;
  --color-fish-boy-900: #003b3b;
  --color-fish-boy-950: #002525;
  --color-true-sky-blue: #00aab9;
  --color-true-sky-blue-50: #d2faff;
  --color-true-sky-blue-100: #a8f4fe;
  --color-true-sky-blue-200: #84e1ed;
  --color-true-sky-blue-300: #5acad8;
  --color-true-sky-blue-400: #00aab9;
  --color-true-sky-blue-500: #008e9b;
  --color-true-sky-blue-600: #00737d;
  --color-true-sky-blue-700: #005c64;
  --color-true-sky-blue-800: #00484f;
  --color-true-sky-blue-900: #00393f;
  --color-true-sky-blue-950: #002529;
  --color-angry-tomato: #d52c29;
  --color-angry-tomato-50: #fff2f0;
  --color-angry-tomato-100: #ffe7e4;
  --color-angry-tomato-200: #ffcec8;
  --color-angry-tomato-300: #ffb0a5;
  --color-angry-tomato-400: #ff7c6f;
  --color-angry-tomato-500: #f34e44;
  --color-angry-tomato-600: #d52c29;
  --color-angry-tomato-700: #b30310;
  --color-angry-tomato-800: #8e0009;
  --color-angry-tomato-900: #6f0005;
  --color-angry-tomato-950: #480002;
  --color-blood-oath: #842e3d;
  --color-blood-oath-50: #fff1f2;
  --color-blood-oath-100: #ffe3e5;
  --color-blood-oath-200: #ffc5ca;
  --color-blood-oath-300: #f9a3ac;
  --color-blood-oath-400: #dc808a;
  --color-blood-oath-500: #be626e;
  --color-blood-oath-600: #9e4854;
  --color-blood-oath-700: #842e3d;
  --color-blood-oath-800: #67242f;
  --color-blood-oath-900: #521923;
  --color-blood-oath-950: #350d14;
  --color-minotaur-hide: #4c1116;
  --color-minotaur-hide-50: #fff1f1;
  --color-minotaur-hide-100: #ffe4e3;
  --color-minotaur-hide-200: #ffc8c6;
  --color-minotaur-hide-300: #eeaead;
  --color-minotaur-hide-400: #cf8a89;
  --color-minotaur-hide-500: #b16c6c;
  --color-minotaur-hide-600: #915151;
  --color-minotaur-hide-700: #743b3c;
  --color-minotaur-hide-800: #592a2b;
  --color-minotaur-hide-900: #4c1116;
  --color-minotaur-hide-950: #290f0f;
}