diff --git a/components/core/Avatar/Avatar.tsx b/components/core/Avatar/Avatar.tsx
index 9dca68e46..7dd3bc5bd 100644
--- a/components/core/Avatar/Avatar.tsx
+++ b/components/core/Avatar/Avatar.tsx
@@ -1,27 +1,12 @@
 import cn from 'classnames'
-import { FC } from 'react'
-import { random } from 'lodash'
-import { useState } from 'react'
+import { FC, useState } from 'react'
+import { getRandomPairOfColors } from '@lib/colors'
+
 interface Props {
   className?: string
   children?: any
 }
 
-function getRandomPairOfColors() {
-  const colors = ['#37B679', '#DA3C3C', '#3291FF', '#7928CA', '#79FFE1']
-  const getRandomIdx = () => random(0, colors.length - 1)
-  let idx = getRandomIdx()
-  let idx2 = getRandomIdx()
-
-  // Has to be a different color
-  while (idx2 === idx) {
-    idx2 = getRandomIdx()
-  }
-
-  // Returns a pair of colors
-  return [colors[idx], colors[idx2]]
-}
-
 const Avatar: FC<Props> = ({}) => {
   const [bg] = useState(getRandomPairOfColors)
 
@@ -32,8 +17,7 @@ const Avatar: FC<Props> = ({}) => {
         backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
       }}
     >
-      {/* Add an image - We're generating a gradient as placeholder 
-      <img></img> */}
+      {/* Add an image - We're generating a gradient as placeholder  <img></img> */}
     </div>
   )
 }
diff --git a/lib/colors.ts b/lib/colors.ts
new file mode 100644
index 000000000..2d4ca14cc
--- /dev/null
+++ b/lib/colors.ts
@@ -0,0 +1,16 @@
+import { random } from 'lodash'
+
+export function getRandomPairOfColors() {
+  const colors = ['#37B679', '#DA3C3C', '#3291FF', '#7928CA', '#79FFE1']
+  const getRandomIdx = () => random(0, colors.length - 1)
+  let idx = getRandomIdx()
+  let idx2 = getRandomIdx()
+
+  // Has to be a different color
+  while (idx2 === idx) {
+    idx2 = getRandomIdx()
+  }
+
+  // Returns a pair of colors
+  return [colors[idx], colors[idx2]]
+}