diff --git a/components/Icons/PasteTiny.tsx b/components/Icons/PasteTiny.tsx
new file mode 100644
index 00000000..74c1284b
--- /dev/null
+++ b/components/Icons/PasteTiny.tsx
@@ -0,0 +1,19 @@
+import { Props } from "./Props";
+
+export const PasteTiny = (props: Props) => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M8.78343 1.30539C9.48078 0.593592 10.6233 0.581819 11.3352 1.27902L14.4504 4.33175C15.2886 5.15308 15.3029 6.49837 14.4817 7.33664L9.31175 12.614C8.71235 13.2257 7.75963 13.28 7.09593 12.7732L6.21214 13.6755C5.97056 13.9219 5.57486 13.9258 5.32835 13.6843L5.15843 13.5173L2.62229 15.1384C2.37716 15.2947 2.05558 15.2608 1.84788 15.0573L1.09886 14.323C0.891251 14.1194 0.851748 13.7997 1.00315 13.5515L2.56956 10.9812L2.39964 10.8152C2.15307 10.5736 2.14929 10.1779 2.39085 9.93136L3.33714 8.96457C2.92145 8.17051 3.04042 7.16777 3.7014 6.49289L8.78343 1.30539ZM2.32835 13.778L2.36839 13.8171L4.24241 12.6198L3.48558 11.8796L2.32835 13.778ZM3.72093 10.3591L5.75706 12.3542L6.19358 11.9079L4.15647 9.91378L3.72093 10.3591ZM10.4612 2.17257C10.2424 1.95827 9.89031 1.96164 9.67601 2.18039L4.59397 7.36691C4.25597 7.71196 4.26193 8.266 4.60667 8.60421L7.81272 11.7448C7.98168 11.9103 8.25367 11.9079 8.41917 11.739L13.5891 6.46164C13.927 6.11657 13.9211 5.56251 13.5764 5.22433L10.4612 2.17257ZM8.07249 4.61203C8.31404 4.3658 8.70981 4.36189 8.95628 4.60324C9.20284 4.84479 9.2066 5.24046 8.96507 5.48703L6.89183 7.60324C6.65032 7.84974 6.25462 7.85438 6.00804 7.613C5.76156 7.37143 5.75771 6.97575 5.99925 6.72921L8.07249 4.61203ZM9.43284 3.22824C9.67693 2.98484 10.0718 2.98449 10.3157 3.22824C10.5597 3.47232 10.5597 3.86893 10.3157 4.113L10.1438 4.28488C9.89974 4.52863 9.504 4.52771 9.25999 4.2839C9.01624 4.03983 9.01609 3.6441 9.25999 3.40011L9.43284 3.22824Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/components/ThemeManager/Pickers/HexKeyboard.tsx b/components/ThemeManager/Pickers/HexKeyboard.tsx
index 46e19594..dd6f3847 100644
--- a/components/ThemeManager/Pickers/HexKeyboard.tsx
+++ b/components/ThemeManager/Pickers/HexKeyboard.tsx
@@ -4,6 +4,9 @@ import { useState, useCallback, useRef } from "react";
 import { Color, parseColor } from "react-aria-components";
 import { Popover } from "components/Popover";
 import { GoToArrow } from "components/Icons/GoToArrow";
+import { useSmoker } from "components/Toast";
+import { CopyTiny } from "components/Icons/CopyTiny";
+import { PasteTiny } from "components/Icons/PasteTiny";
 
 const HEX_ROWS = [
   ["1", "2", "3", "A", "B", "C"],
@@ -29,7 +32,7 @@ const HexKey = (props: {
         h-10 w-10 rounded-md
          font-bold
         flex items-center justify-center
-        border border-[#CCCCCC]] text-[#969696]
+        border border-[#CCCCCC] text-[#969696]
         disabled:bg-[#DBDBDB] disabled:border-[#DBDBDB] disabled:text-[#CCCCCC] disabled:cursor-not-allowed
         ${props.className ?? ""}
       `}
@@ -49,6 +52,8 @@ export const HexKeyboard = (props: {
 
   let [draft, setDraft] = useState(hexString);
   let committed = useRef(false);
+  let copyButtonRef = useRef<HTMLButtonElement>(null);
+  let smoker = useSmoker();
 
   let syncDraftToValue = useCallback(() => {
     let hex = props.value
@@ -102,6 +107,34 @@ export const HexKeyboard = (props: {
   let isSubmittable =
     /^#[0-9A-Fa-f]{3}$/.test(draft) || /^#[0-9A-Fa-f]{6}$/.test(draft);
 
+  let handleCopy = () => {
+    navigator.clipboard.writeText(draft);
+    let rect = copyButtonRef.current?.getBoundingClientRect();
+    console.log(draft);
+    smoker({
+      position: {
+        x: rect ? rect.left + rect.width / 2 : 0,
+        y: rect ? rect.top - 8 : 0,
+      },
+      text: "Copied!",
+    });
+  };
+
+  let handlePaste = async () => {
+    try {
+      let text = await navigator.clipboard.readText();
+      let cleaned = text.trim();
+      if (!cleaned.startsWith("#")) cleaned = "#" + cleaned;
+      cleaned = cleaned.toUpperCase();
+      if (/^#[0-9A-Fa-f]{0,6}$/.test(cleaned)) {
+        setDraft(cleaned);
+        committed.current = false;
+      }
+    } catch {
+      // Clipboard read failed, do nothing
+    }
+  };
+
   return (
     <Popover
       align="center"
@@ -132,6 +165,28 @@ export const HexKeyboard = (props: {
           <span className="select-all">{draft}</span>
         </div>
 
+        {/* Copy / Paste buttons */}
+        <div className="grid grid-cols-2 gap-1">
+          <button
+            ref={copyButtonRef}
+            onPointerDown={(e) => e.preventDefault()}
+            onClick={handleCopy}
+            className="h-8 gap-2 rounded-md border border-[#CCCCCC] text-sm text-[#969696] font-bold flex items-center justify-center"
+          >
+            <CopyTiny /> Copy
+          </button>
+          <button
+            onPointerDown={(e) => e.preventDefault()}
+            onClick={handlePaste}
+            className="h-8 gap-2 rounded-md border border-[#CCCCCC] text-sm text-[#969696] font-bold flex items-center justify-center"
+          >
+            <PasteTiny />
+            Paste
+          </button>
+        </div>
+
+        <hr className="border-[#CCCCCC]" />
+
         {/* Hex keyboard grid — 6 columns */}
         <div className="grid grid-cols-6 gap-1">
           {/* Row 1: 1 2 3 A B C */}