diff --git a/components/swap/SwapTokenChart.tsx b/components/swap/SwapTokenChart.tsx
index 896e7fa3..43552b74 100644
--- a/components/swap/SwapTokenChart.tsx
+++ b/components/swap/SwapTokenChart.tsx
@@ -11,6 +11,7 @@ import {
 } from 'recharts'
 import LineChartIcon from '../icons/LineChartIcon'
 import ContentBox from '../shared/ContentBox'
+import { GREEN, RED } from '../../styles/colors'
 
 dayjs.extend(relativeTime)
 
@@ -241,15 +242,23 @@ const SwapTokenChart: FunctionComponent<SwapTokenChartProps> = ({
                       x2="0"
                       y2="1"
                     >
-                      <stop offset="0%" stopColor="#ffba24" stopOpacity={0.3} />
-                      <stop offset="80%" stopColor="#ffba24" stopOpacity={0} />
+                      <stop
+                        offset="0%"
+                        stopColor={chartChange >= 0 ? GREEN : RED}
+                        stopOpacity={0.15}
+                      />
+                      <stop
+                        offset="99%"
+                        stopColor={chartChange >= 0 ? GREEN : RED}
+                        stopOpacity={0}
+                      />
                     </linearGradient>
                   </defs>
                   <Area
                     isAnimationActive={true}
                     type="monotone"
                     dataKey="price"
-                    stroke="#ffba24"
+                    stroke={chartChange >= 0 ? GREEN : RED}
                     fill="url(#gradientArea)"
                   />
                   <XAxis
diff --git a/styles/colors.ts b/styles/colors.ts
new file mode 100644
index 00000000..544d06fe
--- /dev/null
+++ b/styles/colors.ts
@@ -0,0 +1,3 @@
+export const PRIMARY = '#F2C94C'
+export const GREEN = '#AFD803'
+export const RED = '#F84638'