diff --git a/apps/web/app/api/generate-color-palette/route.ts b/apps/web/app/api/generate-color-palette/route.ts
new file mode 100644
index 0000000..45f9aa3
--- /dev/null
+++ b/apps/web/app/api/generate-color-palette/route.ts
@@ -0,0 +1,56 @@
+import { generateColorPalette } from "@/lib/colorCalculator";
+import { colorHelper } from "@/lib/colorHelper";
+import { BaseColorTypes, ColorMode } from "@/types/app";
+import { NextResponse } from "next/server";
+
+export async function GET(req: Request) {
+  const origin = req.headers.get("origin");
+  const { searchParams } = new URL(req.url);
+  const colorsString = searchParams.get("colors");
+  console.log({ colorsString });
+  if (!colorsString) {
+    return NextResponse.json(
+      {
+        data: null,
+        error: {
+          message: "Invalid token",
+        },
+      },
+      {
+        status: 400,
+      },
+    );
+  }
+  const baseColors = colorHelper.colorStringToBaseColors(colorsString);
+  const mode = ColorMode.HEX;
+  const [primaryPalette, secondaryPalette, accentPalette, grayPalette] = [
+    "primary",
+    "secondary",
+    "accent",
+    "gray",
+  ].map((color) =>
+    generateColorPalette({
+      color: color === "gray" ? baseColors.primary : baseColors[color],
+      type: color as BaseColorTypes,
+      colorMode: mode,
+    }),
+  );
+  return NextResponse.json(
+    {
+      data: {
+        baseColors,
+        colorPalettes: {
+          primary: primaryPalette,
+          secondary: secondaryPalette,
+          accent: accentPalette,
+          gray: grayPalette,
+        },
+        colorMode: mode,
+      },
+      error: null,
+    },
+    {
+      status: 200,
+    },
+  );
+}