diff --git a/Web/src/views/BudgetView.vue b/Web/src/views/BudgetView.vue
index 45251e8..9838cc4 100644
--- a/Web/src/views/BudgetView.vue
+++ b/Web/src/views/BudgetView.vue
@@ -421,16 +421,42 @@ const getProgressColor = (budget) => {
   
   const ratio = Math.min(Math.max(budget.current / budget.limit, 0), 1)
   
-  // Start color (Blue): #1989fa -> rgb(25, 137, 250)
-  // End color (Red): #ee0a24 -> rgb(238, 10, 36)
-  const startColor = { r: 25, g: 137, b: 250 }
-  const endColor = { r: 238, g: 10, b: 36 }
+  let startColor, midColor, endColor
   
-  const r = Math.round(startColor.r + (endColor.r - startColor.r) * ratio)
-  const g = Math.round(startColor.g + (endColor.g - startColor.g) * ratio)
-  const b = Math.round(startColor.b + (endColor.b - startColor.b) * ratio)
+  if (budget.category === BudgetCategory.Expense) {
+    // 支出: 绿 -> 蓝 -> 红
+    startColor = { r: 82, g: 196, b: 26 }      // 绿
+    midColor = { r: 25, g: 137, b: 250 }       // 蓝
+    endColor = { r: 238, g: 10, b: 36 }        // 红
+  } else if (budget.category === BudgetCategory.Income) {
+    // 收入: 红 -> 蓝 -> 绿
+    startColor = { r: 238, g: 10, b: 36 }      // 红
+    midColor = { r: 25, g: 137, b: 250 }       // 蓝
+    endColor = { r: 82, g: 196, b: 26 }        // 绿
+  } else {
+    // 存款: 红 -> 蓝 -> 绿
+    startColor = { r: 238, g: 10, b: 36 }      // 红
+    midColor = { r: 25, g: 137, b: 250 }       // 蓝
+    endColor = { r: 82, g: 196, b: 26 }        // 绿
+  }
   
-  return `linear-gradient(to right, var(--van-primary-color), rgb(${r}, ${g}, ${b}))`
+  let r, g, b
+  
+  if (ratio < 0.5) {
+    // 从start到mid
+    const t = ratio * 2
+    r = Math.round(startColor.r + (midColor.r - startColor.r) * t)
+    g = Math.round(startColor.g + (midColor.g - startColor.g) * t)
+    b = Math.round(startColor.b + (midColor.b - startColor.b) * t)
+  } else {
+    // 从mid到end
+    const t = (ratio - 0.5) * 2
+    r = Math.round(midColor.r + (endColor.r - midColor.r) * t)
+    g = Math.round(midColor.g + (endColor.g - midColor.g) * t)
+    b = Math.round(midColor.b + (endColor.b - midColor.b) * t)
+  }
+  
+  return `rgb(${r}, ${g}, ${b})`
 }
 
 const showArchiveSummary = async () => {