diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index dbec94774..b409c82fa 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -2288,36 +2288,36 @@ span[role="img"].avatar.s50  {
 }
 
 .avatar-color-0 {
-  background-color: #880000;
-  color: #FFFFFF;
+  background-color: #dc2626; /* red-600 from Tailwind CSS */
+  color: #ffffff;
 }
 .avatar-color-1 {
-  background-color: #ff0000;
-  color: #000000;
+  background-color: #f97316; /* orange-500 */
+  color: #ffffff;
 }
 .avatar-color-2 {
-  background-color: #00ff00;
+  background-color: #facc15; /* yellow-400 */
   color: #000000;
 }
 .avatar-color-3 {
-  background-color: #008800;
-  color: #FFFFFF;
+  background-color: #16a34a; /* green-600 */
+  color: #ffffff;
 }
 .avatar-color-4 {
-  background-color: #0000ff;
-  color: #FFFFFF;
+  background-color: #06b6d4; /* cyan-500 */
+  color: #000000;
 }
 .avatar-color-5 {
-  background-color: #000088;
-  color: #FFFFFF;
+  background-color: #2563eb; /* blue-600 */
+  color: #ffffff;
 }
 .avatar-color-6 {
-  background-color: #ff8800;
-  color: #000000;
+  background-color: #9333ea; /* purple-600 */
+  color: #ffffff;
 }
 .avatar-color-7 {
-  background-color: #ff0088;
-  color: #000000;
+  background-color: #db2777; /* pink-600 */
+  color: #ffffff;
 }
 
 /* Reaction styles */