diff --git a/client/misc/util.js b/client/misc/util.js
index 8e5e123e..a5bde482 100644
--- a/client/misc/util.js
+++ b/client/misc/util.js
@@ -10,7 +10,7 @@ const checkLocalStorage = () => {
   }
 };
 export const localStorageEnabled = checkLocalStorage();
-export const downloadCanvas = color => {
+const downloadCanvas = color => {
   const HEIGHT = 420;
   const WIDTH = 340;
   const MARGIN = 13;
@@ -74,6 +74,17 @@ export const downloadCanvas = color => {
   return url;
 };
 
+export const download = (title, colors) => {
+  const downloadUrl = downloadCanvas(colors);
+  const aElem = document.createElement('a');
+  aElem.href = downloadUrl;
+  aElem.download = title;
+  aElem.click();
+  if (aElem.parentNode) {
+    aElem.parentNode.removeChild(aElem);
+  }
+};
+
 export const customEventPolyFill = () => {
   if (typeof window.CustomEvent === 'function') return false; // If not IE
   function CustomEvent(event, params0) {
@@ -96,3 +107,29 @@ export const customEventPolyFill = () => {
   window.CustomEvent = CustomEvent;
   return false;
 };
+
+export const share = type => {
+  // eslint-disable-next-line no-prototype-builtins
+  if (!window.hasOwnProperty('encodeURIComponent')) {
+    return;
+  }
+  const windowSize = 'left=350,top=250,width=500,height=300';
+  const subject = window.encodeURIComponent('Check this ColorPK Palette');
+  const pageLink = window.encodeURIComponent(window.location.href);
+
+  let url = null;
+  switch (type) {
+    case 'twitter':
+      url = `https://twitter.com/intent/tweet?url=${pageLink}&text=${subject}`;
+      break;
+    case 'facebook':
+      url = `https://www.facebook.com/sharer/sharer.php?u=${pageLink}&quote=${subject}`;
+      break;
+    case 'email':
+      url = `mailto:?subject=${subject}&body=${pageLink}`;
+      break;
+    default:
+      return;
+  }
+  window.open(url, '', windowSize);
+};
diff --git a/client/sagas/color.js b/client/sagas/color.js
index 4abd762d..8fa541d1 100644
--- a/client/sagas/color.js
+++ b/client/sagas/color.js
@@ -1,7 +1,7 @@
 import get from 'lodash.get';
 import { call, put, fork, takeLatest } from 'redux-saga/effects';
 import { createAction } from 'redux-actions';
-import { downloadCanvas } from '../misc/util.js';
+import { download as downloadUtil, share as shareUtil } from '../misc/util.js';
 import likeManager from '../services/likeManager';
 import requester from '../services/requester';
 
@@ -32,40 +32,11 @@ const createql = `mutation($val: CreateColorInputType!) {
 `;
 
 function download(action) {
-  const downloadUrl = downloadCanvas(action.payload.color);
-  const aElem = document.createElement('a');
-  aElem.href = downloadUrl;
-  aElem.download = `colorpk_${action.payload.id}.png`;
-  aElem.click();
-  if (aElem.parentNode) {
-    aElem.parentNode.removeChild(aElem);
-  }
+  downloadUtil(`colorpk_${action.payload.id}.png`, action.payload.color);
 }
 
 function share({ payload }) {
-  // eslint-disable-next-line no-prototype-builtins
-  if (!window.hasOwnProperty('encodeURIComponent')) {
-    return;
-  }
-  const windowSize = 'left=350,top=250,width=500,height=300';
-  const subject = window.encodeURIComponent('Check this ColorPK Palette');
-  const pageLink = window.encodeURIComponent(window.location.href);
-
-  let url = null;
-  switch (payload) {
-    case 'twitter':
-      url = `https://twitter.com/intent/tweet?url=${pageLink}&text=${subject}`;
-      break;
-    case 'facebook':
-      url = `https://www.facebook.com/sharer/sharer.php?u=${pageLink}&quote=${subject}`;
-      break;
-    case 'email':
-      url = `mailto:?subject=${subject}&body=${pageLink}`;
-      break;
-    default:
-      return;
-  }
-  window.open(url, '', windowSize);
+  shareUtil(payload);
 }
 
 function* getUserColor(action) {