Anger to Fish Boy color palette
About this palette
Anger to Fish Boy is a 6-color vibrant, warm, neon palette: #E00053 (Anger), #D06600 (Cinnamon), #FE3B91 (Unicorn Dust), #F86600 (Safety Orange), #96B1FF (Widowmaker), #00D9E6 (Fish Boy). It mixes red, orange, pink, blue, turquoise tones and feels warm overall. The strongest text pairing is #E00053 on #00D9E6 with a contrast ratio of 2.81:1, and 0 of its 15 color pairs pass WCAG AA for normal text.
Color codes
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Anger | rgb(224, 0, 83) | hsl(338, 100%, 44%) | |
| Cinnamon | rgb(208, 102, 0) | hsl(29, 100%, 41%) | |
| Unicorn Dust | rgb(254, 59, 145) | hsl(334, 99%, 61%) | |
| Safety Orange | rgb(248, 102, 0) | hsl(25, 100%, 49%) | |
| Widowmaker | rgb(150, 177, 255) | hsl(225, 100%, 79%) | |
| Fish Boy | rgb(0, 217, 230) | hsl(183, 100%, 45%) |
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
- Protanopia
- Deuteranopia
- Tritanopia
- Achromatopsia
- Dog vision
CSS variables
/* Anger to Fish Boy — https://swatchly.xyz/palette/e00053-d06600-fe3b91-f86600-96b1ff-00d9e6 */
:root {
--anger: #e00053;
--cinnamon: #d06600;
--unicorn-dust: #fe3b91;
--safety-orange: #f86600;
--widowmaker: #96b1ff;
--fish-boy: #00d9e6;
}
Tailwind CSS v4
/* Anger to Fish Boy — https://swatchly.xyz/palette/e00053-d06600-fe3b91-f86600-96b1ff-00d9e6 */
@theme {
--color-anger: #e00053;
--color-anger-50: #ffeeef;
--color-anger-100: #ffdddf;
--color-anger-200: #ffbcc3;
--color-anger-300: #ff94a1;
--color-anger-400: #ff4871;
--color-anger-500: #e00053;
--color-anger-600: #b60042;
--color-anger-700: #930033;
--color-anger-800: #750027;
--color-anger-900: #5e001e;
--color-anger-950: #3f0011;
--color-cinnamon: #d06600;
--color-cinnamon-50: #fff3ec;
--color-cinnamon-100: #ffe6d8;
--color-cinnamon-200: #ffccae;
--color-cinnamon-300: #ffac78;
--color-cinnamon-400: #ec843b;
--color-cinnamon-500: #d06600;
--color-cinnamon-600: #a85100;
--color-cinnamon-700: #874000;
--color-cinnamon-800: #6a3100;
--color-cinnamon-900: #532400;
--color-cinnamon-950: #361500;
--color-unicorn-dust: #fe3b91;
--color-unicorn-dust-50: #ffebf0;
--color-unicorn-dust-100: #ffd9e4;
--color-unicorn-dust-200: #ffb8cd;
--color-unicorn-dust-300: #ff8eb4;
--color-unicorn-dust-400: #fe3b91;
--color-unicorn-dust-500: #df0878;
--color-unicorn-dust-600: #b70061;
--color-unicorn-dust-700: #93004d;
--color-unicorn-dust-800: #76003c;
--color-unicorn-dust-900: #5f002f;
--color-unicorn-dust-950: #40001e;
--color-safety-orange: #f86600;
--color-safety-orange-50: #ffeee7;
--color-safety-orange-100: #ffdfd2;
--color-safety-orange-200: #ffc2a8;
--color-safety-orange-300: #ff9e73;
--color-safety-orange-400: #f86600;
--color-safety-orange-500: #d05400;
--color-safety-orange-600: #a94300;
--color-safety-orange-700: #883400;
--color-safety-orange-800: #6c2800;
--color-safety-orange-900: #561e00;
--color-safety-orange-950: #391100;
--color-widowmaker: #96b1ff;
--color-widowmaker-50: #e8eeff;
--color-widowmaker-100: #d7e2ff;
--color-widowmaker-200: #b9ccff;
--color-widowmaker-300: #96b1ff;
--color-widowmaker-400: #7b94de;
--color-widowmaker-500: #627ac4;
--color-widowmaker-600: #4c61a7;
--color-widowmaker-700: #3a4d8c;
--color-widowmaker-800: #2c3c73;
--color-widowmaker-900: #212f5e;
--color-widowmaker-950: #131c3e;
--color-fish-boy: #00d9e6;
--color-fish-boy-50: #dafcff;
--color-fish-boy-100: #b2f9ff;
--color-fish-boy-200: #7cebf4;
--color-fish-boy-300: #00d9e6;
--color-fish-boy-400: #00b6c1;
--color-fish-boy-500: #0098a1;
--color-fish-boy-600: #007a82;
--color-fish-boy-700: #006167;
--color-fish-boy-800: #004c51;
--color-fish-boy-900: #003b3f;
--color-fish-boy-950: #002528;
}
Similar palettes
- 00B3C3E89F00CC0068C97000A857CBBAB1FFAquarius to Purple Illusion
- 00DFB9FF5C5E8A7EFF0096A0B95700A0A4FFAquamarine to Widowmaker
- A05F00E13D8300ADAAFF8C1D00D7DBEmbarrassed Frog to Fish Boy
- C60092DB3F9F00A9A6FF763E85BFFFVibrant Velvet to Cooler Than Ever
- 85CEFFCE1E4A00C774FE3900A97A00Clear Sky to Bronze
- FF878C00809100CAFAD36C009D4BEFFF512CTulip to Smashing Pumpkins
- EF007CFF33F400E6C66786FFCD4500Fatty Fuchsia to Mellow Mango
- B75800636AF0FF5C6300B2F885BEFFBloodhound to Cooler Than Ever