diff --git a/package-lock.json b/package-lock.json
index 91c0852..354c1fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
"@radix-ui/react-slot": "^1.1.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
+ "color-2-name": "^1.4.4",
"lucide-react": "^0.441.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
@@ -2521,6 +2522,16 @@
"node": ">=6"
}
},
+ "node_modules/color-2-name": {
+ "version": "1.4.4",
+ "resolved": "https://registry.npmjs.org/color-2-name/-/color-2-name-1.4.4.tgz",
+ "integrity": "sha512-CSF+PANU5YSZYviiU88GJBeJADD4g9mydxLRMYtMEqVxhcLyl72b6PkMQnvomZyUZZLbPhfXs42QZcR0We4JOA==",
+ "license": "ISC",
+ "engines": {
+ "node": ">=14.0.0",
+ "npm": ">=6.0.0"
+ }
+ },
"node_modules/color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
diff --git a/package.json b/package.json
index 0df92a2..00f48c0 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"@radix-ui/react-slot": "^1.1.0",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
+ "color-2-name": "^1.4.4",
"lucide-react": "^0.441.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
diff --git a/src/components/video-feed.tsx b/src/components/video-feed.tsx
index cb182b1..dbf64e8 100644
--- a/src/components/video-feed.tsx
+++ b/src/components/video-feed.tsx
@@ -1,6 +1,7 @@
import { useEffect, useRef, useState, MouseEvent } from "react";
import { Button } from "./ui/button";
import { SwitchCamera } from "lucide-react";
+import { closest } from "color-2-name";
function VideoFeed() {
const videoRef = useRef
Pixel Color: {pixelColor}
+Closest: {`${closest(pixelColor).name}`}
);