diff --git a/package.json b/package.json
index c11ef8dc..a6b4f511 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "next": "14.2.3",
     "next-international": "^1.2.4",
     "react": "^18",
+    "react-colorful": "^5.6.1",
     "react-datepicker": "^7.3.0",
     "react-dom": "^18",
     "react-responsive-modal": "^6.4.2",
diff --git a/src/components/Playground.jsx b/src/components/Playground.jsx
index e1043d2b..609062f7 100644
--- a/src/components/Playground.jsx
+++ b/src/components/Playground.jsx
@@ -1,6 +1,8 @@
 'use client'
 
+import { useState } from 'react'
 import { Button, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from '@nextui-org/react'
+import ColorPicker from './common/color-picker/ColorPicker'
 
 import { useAxios } from '@/hooks/useAxios'
 import { useMessage } from '@/hooks/useMessage'
@@ -15,6 +17,8 @@ export default function Playground() {
   const testVar = process.env.NEXT_PUBLIC_TEST
   const { getMessage } = useMessage()
 
+  const [color, setColor] = useState('#ff0000')
+
   const handleUsers = async () => {
     // const users = await get('/api/user/find-all')
     const params = {
@@ -61,6 +65,10 @@ export default function Playground() {
           <p className="text-white">Sass 테스트입니다.</p>
         </div>
         <div>{getMessage('hi')}</div>
+        <div>
+          <h1>React ColorPicker</h1>
+          <ColorPicker color={color} setColor={setColor} />
+        </div>
       </div>
     </>
   )
diff --git a/src/components/common/color-picker/ColorPicker.jsx b/src/components/common/color-picker/ColorPicker.jsx
new file mode 100644
index 00000000..7e774259
--- /dev/null
+++ b/src/components/common/color-picker/ColorPicker.jsx
@@ -0,0 +1,11 @@
+import { HexColorPicker } from 'react-colorful'
+
+export default function ColorPicker(props) {
+  const { color, setColor } = props
+
+  return (
+    <>
+      <HexColorPicker color={color} onChange={setColor} />
+    </>
+  )
+}
diff --git a/yarn.lock b/yarn.lock
index 77b7ed38..72a87734 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5470,6 +5470,11 @@ rbush@^3.0.1:
   dependencies:
     quickselect "^2.0.0"
 
+react-colorful@^5.6.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
+  integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
+
 react-datepicker@^7.3.0:
   version "7.3.0"
   resolved "https://registry.npmjs.org/react-datepicker/-/react-datepicker-7.3.0.tgz"