diff --git a/package.json b/package.json
index 94ff376..4c98fe7 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "standard-version": "^9.5.0",
     "ts-node": "^10.9.1",
     "tsup": "^6.7.0",
-    "typescript": "^5.0.4"
+    "typescript": "^5.0.4",
+    "canvas": "^2.11.2"
   }
 }
diff --git a/src/scripts/build_palettes.mjs b/src/scripts/build_palettes.mjs
index 83ffdf9..bc4ce06 100644
--- a/src/scripts/build_palettes.mjs
+++ b/src/scripts/build_palettes.mjs
@@ -1,4 +1,5 @@
 import fs from "fs";
+import { createCanvas } from "canvas";
 import crypto from "crypto";
 import { variants } from "@catppuccin/palette";
 import url from "url";
@@ -75,11 +76,27 @@ const generateSip = (name, palette) => {
   return JSON.stringify(data, null, 2);
 };
 
+const generatePng = (name, palette) => {
+  const colors = Object.entries(palette).map(([key, value]) => value.hex);
+  const size = 25;
+  const width = size * colors.length;
+  const canvas = createCanvas(width, size * 2);
+  const ctx = canvas.getContext("2d");
+
+  for (let x = 0; x < width; x += size) {
+    const index = (x / size) % colors.length;
+    ctx.fillStyle = `#${colors[index]}`;
+    ctx.fillRect(x, 0, size, size * 2);
+  }
+
+  return canvas.toBuffer("image/png");
+};
+
 Object.entries(variants).map(async ([name, palette]) => {
   // formatted "pretty" name, Catppuccin <Flavor>
   const pname = `Catppuccin ${name.charAt(0).toUpperCase() + name.slice(1)}`;
 
-  ["gimp", "procreate", "sip"].map((folder) =>
+  ["gimp", "procreate", "sip", "png"].map((folder) =>
     fs.mkdirSync(path.join(root, folder), { recursive: true })
   );
   fs.writeFileSync(
@@ -94,4 +111,8 @@ Object.entries(variants).map(async ([name, palette]) => {
     path.resolve(root, `sip/${pname}.palette`),
     generateSip(pname, palette)
   );
+  fs.writeFileSync(
+    path.resolve(root, `png/${pname}.png`),
+    generatePng(pname, palette)
+  );
 });