diff --git a/package.json b/package.json
index 25efc6a0..c90b7a39 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@amplitude/analytics-browser": "^2.3.0",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
+    "@sopt-makers/colors": "^2.2.0",
     "@types/qs": "6.9.7",
     "axios": "^0.27.2",
     "classcat": "^5.0.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e00276ae..c514ab3c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,6 +9,7 @@ specifiers:
   '@emotion/babel-plugin': ^11.10.0
   '@emotion/react': ^11.9.0
   '@emotion/styled': ^11.8.1
+  '@sopt-makers/colors': ^2.2.0
   '@svgr/webpack': ^6.5.0
   '@testing-library/dom': ^8.13.0
   '@testing-library/jest-dom': ^5.16.4
@@ -71,6 +72,7 @@ dependencies:
   '@amplitude/analytics-browser': 2.3.0
   '@emotion/react': 11.11.1_z2b3xs64x2tj5h6d73q25pmyxa
   '@emotion/styled': 11.11.0_lrlg252sqoeehi74frojlg57f4
+  '@sopt-makers/colors': 2.2.0
   '@types/qs': 6.9.7
   axios: 0.27.2
   classcat: 5.0.4
@@ -2081,6 +2083,10 @@ packages:
       '@sinonjs/commons': 1.8.6
     dev: true
 
+  /@sopt-makers/colors/2.2.0:
+    resolution: {integrity: sha512-L91wbWPxuLc5qTR+UJ1N69WzYqv35Z+jR5Yo3DhZHhzKFUwUrp9xOMVQd1ezS0RJKBXS60MsouMf3s2jA4ukug==}
+    dev: false
+
   /@svgr/babel-plugin-add-jsx-attribute/6.5.1_@babel+core@7.22.11:
     resolution: {integrity: sha512-9PYGcXrAxitycIjRmZB+Q0JaN07GZIWaTBIGQzfaZv+qr1n8X1XUEJ5rZ/vx6OVD9RRYlrNnXWExQXcmZeD/BQ==}
     engines: {node: '>=10'}
diff --git a/src/components/Footer/OriginFooter/style.ts b/src/components/Footer/OriginFooter/style.ts
index 4f01c0b1..68447727 100644
--- a/src/components/Footer/OriginFooter/style.ts
+++ b/src/components/Footer/OriginFooter/style.ts
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { colors } from '@src/lib/styles/colors';
+import { colors } from '@sopt-makers/colors';
 
 export const Root = styled.footer`
   width: 100%;
diff --git a/src/components/Header/Mobile/HeaderMenu.style.ts b/src/components/Header/Mobile/HeaderMenu.style.ts
index bc80576c..1a8798a9 100644
--- a/src/components/Header/Mobile/HeaderMenu.style.ts
+++ b/src/components/Header/Mobile/HeaderMenu.style.ts
@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import Link from 'next/link';
 import { css } from '@emotion/react';
 import { FadeIn, FadeInDown, FadeOut, FadeOutUp } from '@src/lib/styles/animation';
-import { colors } from '@src/lib/styles/colors';
 
 type MenuType = 'idle' | 'open' | 'close';
 
diff --git a/src/components/common/RoundButton/RoundButton.style.tsx b/src/components/common/RoundButton/RoundButton.style.tsx
index 3f25c23d..78dca264 100644
--- a/src/components/common/RoundButton/RoundButton.style.tsx
+++ b/src/components/common/RoundButton/RoundButton.style.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { colors } from '@src/lib/styles/colors';
+import { colors } from '@sopt-makers/colors';
 
 interface StyleProps {
   isReverse?: boolean;
@@ -14,7 +14,7 @@ export const Root = styled.button<StyleProps>`
   border-radius: 99px;
   background: ${colors.gray10};
 
-  color: ${colors.gray900};
+  color: ${colors.gray950};
   font-size: 24px;
   font-weight: 600;
   line-height: 150%; /* 36px */
diff --git a/src/lib/styles/colors.ts b/src/lib/styles/colors.ts
deleted file mode 100644
index 56cd3fc4..00000000
--- a/src/lib/styles/colors.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-export const colors = {
-  white: '#FFFFFF',
-  black: '#000000',
-
-  gray10: '#FCFCFC',
-  gray30: '#F0F0F0',
-  gray50: '#E4E4E5',
-  gray100: '#C3C3C6',
-  gray200: '#9D9DA4',
-  gray300: '#808087',
-  gray400: '#66666D',
-  gray500: '#515159',
-  gray600: '#3F3F47',
-  gray700: '#2E2E35',
-  gray800: '#202025',
-  gray900: '#0F0F12',
-
-  blue50: '#C8E1FF',
-  blue100: '#8FC0FF',
-  blue200: '#619EFF',
-  blue300: '#4485FF',
-  blue400: '#346FFA',
-  blue500: '#2C53DF',
-  blue600: '#2649B3',
-  blue700: '#253B8C',
-  blue800: '#23306A',
-  blue900: '#20274D',
-
-  red50: '#FFD1D3',
-  red100: '#FFA8AD',
-  red200: '#FE818B',
-  red300: '#FA616D',
-  red400: '#F04251',
-  red500: '#CA2F3D',
-  red600: '#9E2733',
-  red700: '#7A242D',
-  red800: '#562025',
-  red900: '#3C2020',
-
-  green50: '#CCFFEC',
-  green100: '#82F6CB',
-  green200: '#4EE4AD',
-  green300: '#26CF91',
-  green400: '#16BF81',
-  green500: '#13A06C',
-  green600: '#138A5E',
-  green700: '#136D4C',
-  green800: '#13533C',
-  green900: '#15372B',
-
-  yellow50: '#FFF4D4',
-  yellow100: '#FFE9B2',
-  yellow200: '#FFDE8A',
-  yellow300: '#FFCD59',
-  yellow400: '#FFC234',
-  yellow500: '#FFB326',
-  yellow600: '#EBA01E',
-  yellow700: '#B57B1D',
-  yellow800: '#72531E',
-  yellow900: '#3D301A',
-
-  orange50: '#FFECE5',
-  orange100: '#FFCEBD',
-  orange200: '#FFA480',
-  orange300: '#FF834A',
-  orange400: '#F77234',
-  orange500: '#D4591C',
-  orange600: '#AD4E17',
-  orange700: '#853D11',
-  orange800: '#5C2B0C',
-  orange900: '#422109',
-
-  attention: '#FFC234',
-  error: '#F04251',
-  background: '#0F0F12',
-  secondary: '#F77234',
-  success: '#346FFA',
-  information: '#16BF81',
-};
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index cddaba92..74e72c06 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import { useRouter } from 'next/router';
 import { Header } from '@src/components';
 import RoundButton from '@src/components/common/RoundButton';
-import { colors } from '@src/lib/styles/colors';
 
 function Wrong() {
   const router = useRouter();
diff --git a/src/views/ReviewPage/components/Description/index.tsx b/src/views/ReviewPage/components/Description/index.tsx
index dd68dfa4..cf1faa63 100644
--- a/src/views/ReviewPage/components/Description/index.tsx
+++ b/src/views/ReviewPage/components/Description/index.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { colors } from '@src/lib/styles/colors';
+import { colors } from '@sopt-makers/colors';
 
 const Description = () => {
   return <Title>SOPT 회원들의 활동 후기</Title>;
diff --git a/src/views/RulesPage/components/CollapseLi/CollapseLi.style.tsx b/src/views/RulesPage/components/CollapseLi/CollapseLi.style.tsx
index 51eb76cd..f1d6dea8 100644
--- a/src/views/RulesPage/components/CollapseLi/CollapseLi.style.tsx
+++ b/src/views/RulesPage/components/CollapseLi/CollapseLi.style.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import { css } from '@emotion/react';
 import { ArrowDownAnimation, ArrowUpAnimation } from '@src/lib/styles/animation';
-import { colors } from '@src/lib/styles/colors';
 
 interface ButtonStyleProps {
   isOpened: boolean;
diff --git a/src/views/SopticlePage/components/Description/index.tsx b/src/views/SopticlePage/components/Description/index.tsx
index 440d9e24..90f11e68 100644
--- a/src/views/SopticlePage/components/Description/index.tsx
+++ b/src/views/SopticlePage/components/Description/index.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { colors } from '@src/lib/styles/colors';
+import { colors } from '@sopt-makers/colors';
 
 const Description = () => {
   return <Title>솝티클</Title>;