Improve color picker paste logic

web/src/components/ColorPicker/ColorPicker.tsx

@@ -40,7 +40,13 @@ const ColorPicker = ({ color, setColor }: ColorPickerProps) => {
           className="btn btn-square btn-sm  "
           onClick={async () => {
             try {
-              setColor(await navigator.clipboard.readText())
+              const clipboardText = await navigator.clipboard.readText()
+              const hexColorRegex =
+                /^#(?:(?:[\da-f]{3}){1,2}|(?:[\da-f]{4}){1,2})$/i
+
+              if (!hexColorRegex.test(clipboardText))
+                toast.error(`Text is not a valid hex color`)
+              else setColor(clipboardText)
             } catch {
               toast.error(`Failed to paste, please try again`)
             }