diff --git a/esphome/core/color.h b/esphome/core/color.h
index 4e7733ca85..7596eeb0cf 100644
--- a/esphome/core/color.h
+++ b/esphome/core/color.h
@@ -139,9 +139,19 @@ struct Color {
     return Color(uint8_t((uint16_t(r) * 255U / max_rgb)), uint8_t((uint16_t(g) * 255U / max_rgb)),
                  uint8_t((uint16_t(b) * 255U / max_rgb)), w);
   }
-  Color fade_to_white(uint8_t amnt) { return Color(255, 255, 255, 255) - (*this * amnt); }
-  Color fade_to_black(uint8_t amnt) { return *this * amnt; }
-  Color gradient(const Color &to_color, uint8_t amnt) { return (*this * amnt) + (to_color * (255 - amnt)); }
+
+  Color gradient(const Color &to_color, uint8_t amnt) {
+    Color new_color;
+    float amnt_f = float(amnt) / 255.0f;
+    new_color.r = amnt_f * (to_color.r - (*this).r) + (*this).r;
+    new_color.g = amnt_f * (to_color.g - (*this).g) + (*this).g;
+    new_color.b = amnt_f * (to_color.b - (*this).b) + (*this).b;
+    new_color.w = amnt_f * (to_color.w - (*this).w) + (*this).w;
+    return new_color;
+  }
+  Color fade_to_white(uint8_t amnt) { return (*this).gradient(Color::WHITE, amnt); }
+  Color fade_to_black(uint8_t amnt) { return (*this).gradient(Color::BLACK, amnt); }
+
   Color lighten(uint8_t delta) { return *this + delta; }
   Color darken(uint8_t delta) { return *this - delta; }