diff --git a/src/assets/icons/check.svg b/src/assets/icons/check.svg
new file mode 100644
index 0000000..3adb08a
--- /dev/null
+++ b/src/assets/icons/check.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.54972 15.15L18.0247 6.675C18.2247 6.475 18.4622 6.375 18.7372 6.375C19.0122 6.375 19.2497 6.475 19.4497 6.675C19.6497 6.875 19.7497 7.1125 19.7497 7.3875C19.7497 7.6625 19.6497 7.9 19.4497 8.1L10.2497 17.3C10.0497 17.5 9.81639 17.6 9.54972 17.6C9.28305 17.6 9.04972 17.5 8.84972 17.3L4.54972 13C4.34972 12.8 4.25389 12.5625 4.26222 12.2875C4.27055 12.0125 4.37472 11.775 4.57472 11.575C4.77472 11.375 5.01222 11.275 5.28722 11.275C5.56222 11.275 5.79972 11.375 5.99972 11.575L9.54972 15.15Z" fill="white"/>
+</svg>
diff --git a/src/components/ui/Chip/ColorChip.tsx b/src/components/ui/Chip/ColorChip.tsx
new file mode 100644
index 0000000..f813ceb
--- /dev/null
+++ b/src/components/ui/Chip/ColorChip.tsx
@@ -0,0 +1,15 @@
+import { HexColor } from '@/constants/colors';
+import { cn } from '@/utils/helper';
+import { HTMLAttributes } from 'react';
+
+interface ColorChipProps extends HTMLAttributes<HTMLSpanElement> {
+  color: HexColor;
+}
+
+export default function ColorChip({ color, className, ...props }: ColorChipProps) {
+  return (
+    <span className={cn('inline-flex h-[30px] w-[30px] rounded-full leading-none', className)} style={{ backgroundColor: color }} {...props}>
+      <span className='sr-only'>{color}</span>
+    </span>
+  );
+}
diff --git a/src/components/ui/Chip/ColorPicker.tsx b/src/components/ui/Chip/ColorPicker.tsx
new file mode 100644
index 0000000..30c8a6d
--- /dev/null
+++ b/src/components/ui/Chip/ColorPicker.tsx
@@ -0,0 +1,45 @@
+import Image from 'next/image';
+import { DEFAULT_COLORS } from '@/constants/colors';
+import check_icon from '@/assets/icons/check.svg';
+import ColorChip from './ColorChip';
+import { cn } from '@/utils/helper';
+
+/**
+ * input name을 통한 radio group으로 구성된 컬러 피커 입니다.
+ * Controller를 사용하여 `react-hook-form`과 `ColorPicker` 컴포넌트를 연결하시면 됩니다.
+ * (name은 zod schema key값을 내려주면 됩니다.)
+ *
+ * @example
+ * <Controller
+ *   control={control}
+ *   name='color'
+ *   render={({ field }) => (
+ *     <ColorPicker
+ *       name='color'
+ *       selected={field.value}
+ *       onChange={(value) => field.onChange(value)}
+ *     />
+ *   )}
+ * />
+ */
+
+interface ColorPickerProps {
+  name: string;
+  selected: string;
+  onChange: (value: string) => void;
+  className?: string;
+}
+
+export default function ColorPicker({ name = 'color', selected, onChange, className }: ColorPickerProps) {
+  return (
+    <div className={cn('flex flex-wrap gap-2 leading-none', className)}>
+      {DEFAULT_COLORS.map((color) => (
+        <label key={color} className='relative cursor-pointer'>
+          <input type='radio' className='peer' name={name} value={color} hidden checked={selected === color} onChange={(e) => onChange(e.target.value)} />
+          <ColorChip color={color} />
+          <Image src={check_icon} alt='선택됨' className='absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0 transition-opacity peer-checked:opacity-100' />
+        </label>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/ui/Chip/NumberChip.tsx b/src/components/ui/Chip/NumberChip.tsx
new file mode 100644
index 0000000..8df8dd4
--- /dev/null
+++ b/src/components/ui/Chip/NumberChip.tsx
@@ -0,0 +1,19 @@
+import { cn } from '@/utils/helper';
+import { HTMLAttributes } from 'react';
+
+interface NumberChipProps extends HTMLAttributes<HTMLSpanElement> {
+  label: number;
+  max?: number;
+}
+
+const DEFAULT_MAX_NUMBER = 99;
+
+export default function NumberChip({ label, max = DEFAULT_MAX_NUMBER, className, ...props }: NumberChipProps) {
+  const safeParseMaxNumber = max <= 0 || !Number.isInteger(max) ? DEFAULT_MAX_NUMBER : max;
+
+  return (
+    <span className={cn('inline-flex h-5 min-w-5 items-center justify-center whitespace-nowrap rounded bg-gray-20 px-1 text-xs leading-none text-gray-50', className)} {...props}>
+      {label > safeParseMaxNumber ? `${safeParseMaxNumber}+` : label}
+    </span>
+  );
+}
diff --git a/src/components/ui/Chip/RoundChip.tsx b/src/components/ui/Chip/RoundChip.tsx
new file mode 100644
index 0000000..5eb718d
--- /dev/null
+++ b/src/components/ui/Chip/RoundChip.tsx
@@ -0,0 +1,21 @@
+import { cn } from '@/utils/helper';
+import { HTMLAttributes } from 'react';
+
+interface RoundChipProps extends HTMLAttributes<HTMLSpanElement> {
+  label: string;
+}
+
+export default function RoundChip({ label, className, ...props }: RoundChipProps) {
+  return (
+    <span
+      className={cn(
+        'inline-grid h-[26px] grid-flow-col items-center justify-center gap-[6px] rounded-full bg-violet-10 px-2 text-xs leading-none text-violet-20 before:h-[6px] before:w-[6px] before:rounded-full before:bg-violet-20 md:h-8 md:px-[10px] md:text-md',
+        className,
+      )}
+      title={label}
+      {...props}
+    >
+      <span className='truncate'>{label}</span>
+    </span>
+  );
+}
diff --git a/src/components/ui/Chip/TagChip.tsx b/src/components/ui/Chip/TagChip.tsx
new file mode 100644
index 0000000..083e413
--- /dev/null
+++ b/src/components/ui/Chip/TagChip.tsx
@@ -0,0 +1,32 @@
+import { HTMLAttributes } from 'react';
+import { DEFAULT_COLORS } from '@/constants/colors';
+import { cn, getColorByString } from '@/utils/helper';
+
+/**
+ * 하나의 color 값으로 배경색과 폰트색상에 적용합니다.
+ *
+ * 받은 color가 #FFCC00일경우
+ *
+ * font color => #FFCCOO
+ * background color => #FFCCOO30 (30% opacity)
+ */
+
+const BACKGROUND_ALPHA = 30;
+
+interface TagChipProps extends HTMLAttributes<HTMLSpanElement> {
+  label: string;
+}
+
+export default function TagChip({ label, className, ...props }: TagChipProps) {
+  const colorCode = getColorByString(label, DEFAULT_COLORS);
+
+  return (
+    <span
+      className={cn('inline-flex h-[26px] items-center justify-center whitespace-nowrap rounded-[4px] px-[6px] text-xs leading-none md:h-7 md:text-md', className)}
+      style={{ color: colorCode, backgroundColor: `${colorCode}${BACKGROUND_ALPHA}` }}
+      {...props}
+    >
+      {label}
+    </span>
+  );
+}
diff --git a/src/constants/colors.ts b/src/constants/colors.ts
index 7abcc32..ce2d01a 100644
--- a/src/constants/colors.ts
+++ b/src/constants/colors.ts
@@ -1,3 +1,3 @@
-type HexColor = `#${string}`;
+export type HexColor = `#${string}`;
 
 export const DEFAULT_COLORS: HexColor[] = ['#7AC555', '#760DDE', '#FFA500', '#76A5EA', '#E876EA'];