diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index dbec94774..ed7eedf6a 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -2288,36 +2288,44 @@ span[role="img"].avatar.s50  {
 }
 
 .avatar-color-0 {
-  background-color: #880000;
-  color: #FFFFFF;
-}
+  background-color: #dc2626; /* fallback for browsers without oklch support */
+  background-color: oklch(57.7% 0.245 27.325); /* red-600 from Tailwind */
+  color: #ffffff;
+} 
 .avatar-color-1 {
-  background-color: #ff0000;
-  color: #000000;
+  background-color: #f97316;
+  background-color: oklch(70.5% 0.213 47.604); /* orange-500 */
+  color: #ffffff;
 }
 .avatar-color-2 {
-  background-color: #00ff00;
+  background-color: #facc15;
+  background-color: oklch(85.2% 0.199 91.936); /* yellow-400 */
   color: #000000;
 }
 .avatar-color-3 {
-  background-color: #008800;
-  color: #FFFFFF;
+  background-color: #16a34a;
+  background-color: oklch(62.7% 0.194 149.214); /* green-600 */
+  color: #ffffff;
 }
 .avatar-color-4 {
-  background-color: #0000ff;
-  color: #FFFFFF;
+  background-color: #06b6d4;
+  background-color: oklch(71.5% 0.143 215.221); /* cyan-500 */
+  color: #000000;
 }
 .avatar-color-5 {
-  background-color: #000088;
-  color: #FFFFFF;
+  background-color: #2563eb;
+  background-color: oklch(54.6% 0.245 262.881); /* blue-600 */
+  color: #ffffff;
 }
 .avatar-color-6 {
-  background-color: #ff8800;
-  color: #000000;
+  background-color: #9333ea;
+  background-color: oklch(55.8% 0.288 302.321); /* purple-600 */
+  color: #ffffff;
 }
 .avatar-color-7 {
-  background-color: #ff0088;
-  color: #000000;
+  background-color: #db2777;
+  background-color: oklch(59.2% 0.249 0.584); /* pink-600 */
+  color: #ffffff;
 }
 
 /* Reaction styles */