[V0_FILE]typescriptreact:file="app/page.tsx" import type { Metadata } from "next" import ColorExtractor from "@/components/color-extractor" export const metadata: Metadata = { title: "Image Color Extractor", description: "Extract dominant colors from your images with this easy-to-use tool", openGraph: { title: "Image Color Extractor", description: "Extract dominant colors from your images with this easy-to-use tool", type: "website", }, } export default function Home() { return (

Image Color Extractor

Upload an image to extract its dominant colors

) } [V0_FILE]typescriptreact:file="components/color-extractor.tsx" "use client" import { useState, useCallback, useRef } from "react" import { useDropzone } from "react-dropzone" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Skeleton } from "@/components/ui/skeleton" import { Download, Upload, ImageIcon } from "lucide-react" import { useToast } from "@/hooks/use-toast" import ColorPalette from "@/components/color-palette" import { extractColors } from "@/lib/color-extractor" import { cn } from "@/lib/utils" export default function ColorExtractor() { const [imageUrl, setImageUrl] = useState(null) const [colors, setColors] = useState([]) const [isProcessing, setIsProcessing] = useState(false) const [activeTab, setActiveTab] = useState("hex") const imageRef = useRef(null) const { toast } = useToast() const onDrop = useCallback( async (acceptedFiles: File[]) => { const file = acceptedFiles[0] if (!file) return setIsProcessing(true) setColors([]) try { // Create a URL for the image const url = URL.createObjectURL(file) setImageUrl(url) // Create an image element to load the image const img = new Image() img.crossOrigin = "anonymous" img.onload = async () => { try { const extractedColors = await extractColors(img, 6) setColors(extractedColors) } catch (error) { toast({ title: "Error extracting colors", description: "There was a problem processing your image.", variant: "destructive", }) } finally { setIsProcessing(false) } } img.onerror = () => { toast({ title: "Error loading image", description: "There was a problem loading your image.", variant: "destructive", }) setIsProcessing(false) } img.src = url } catch (error) { toast({ title: "Error processing image", description: "There was a problem processing your image.", variant: "destructive", }) setIsProcessing(false) } }, [toast], ) const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop, accept: { "image/jpeg": [], "image/png": [], "image/webp": [], }, maxFiles: 1, multiple: false, }) const handleCopyColor = (color: string) => { navigator.clipboard.writeText(color) toast({ title: "Copied!", description: `${color} has been copied to clipboard.`, }) } const hexToRgb = (hex: string): string => { // Remove the hash if it exists hex = hex.replace("#", "") // Parse the hex values const r = Number.parseInt(hex.substring(0, 2), 16) const g = Number.parseInt(hex.substring(2, 4), 16) const b = Number.parseInt(hex.substring(4, 6), 16) return `rgb(${r}, ${g}, ${b})` } const downloadPalette = (format: "json" | "image") => { if (format === "json") { const data = { colors: colors.map((color) => ({ hex: color, rgb: hexToRgb(color), })), } const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = "color-palette.json" document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) } else if (format === "image") { // Create a canvas to draw the palette const canvas = document.createElement("canvas") const ctx = canvas.getContext("2d") if (!ctx) return const width = 600 const height = 200 canvas.width = width canvas.height = height // Draw each color as a rectangle const colorWidth = width / colors.length colors.forEach((color, index) => { ctx.fillStyle = color ctx.fillRect(index * colorWidth, 0, colorWidth, height) }) // Convert canvas to image and download const url = canvas.toDataURL("image/png") const a = document.createElement("a") a.href = url a.download = "color-palette.png" document.body.appendChild(a) a.click() document.body.removeChild(a) } } return (

Drag & drop your image here

Supports PNG, JPG, and WebP formats

{imageUrl && (

Extracted Colors

{isProcessing ? (

{Array(6) .fill(0) .map((_, i) => ( ))}

) : colors.length > 0 ? (

HEX RGB

) : (

No colors extracted yet

)}

) } [V0_FILE]typescriptreact:file="components/color-palette.tsx" "use client" import { Copy } from "lucide-react" import { Button } from "@/components/ui/button" import { cn } from "@/lib/utils" interface ColorPaletteProps { colors: string[] format: "hex" | "rgb" onCopy: (color: string) => void } export default function ColorPalette({ colors, format, onCopy }: ColorPaletteProps) { return (

{colors.map((color, index) => (

onCopy(color)} > {color}

))}

) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" "use client" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { Moon, Sun } from "lucide-react" export function ThemeToggle() { const { setTheme, theme } = useTheme() return ( ) } [V0_FILE]typescriptreact:file="lib/color-extractor.ts" interface RGB { r: number g: number b: number } // Function to extract dominant colors from an image export async function extractColors(image: HTMLImageElement, colorCount = 6): Promise { return new Promise((resolve, reject) => { try { // Create a canvas element const canvas = document.createElement("canvas") const ctx = canvas.getContext("2d", { willReadFrequently: true }) if (!ctx) { reject(new Error("Could not get canvas context")) return } // Set canvas dimensions to match image const width = image.naturalWidth || image.width const height = image.naturalHeight || image.height // Scale down large images for performance const maxDimension = 300 let scaledWidth = width let scaledHeight = height if (width > maxDimension || height > maxDimension) { if (width > height) { scaledWidth = maxDimension scaledHeight = Math.floor(height * (maxDimension / width)) } else { scaledHeight = maxDimension scaledWidth = Math.floor(width * (maxDimension / height)) } } canvas.width = scaledWidth canvas.height = scaledHeight // Draw image on canvas ctx.drawImage(image, 0, 0, scaledWidth, scaledHeight) // Get image data const imageData = ctx.getImageData(0, 0, scaledWidth, scaledHeight).data // Process pixels to find dominant colors const colorMap: Map = new Map() // Sample pixels (skip some for performance) const pixelCount = imageData.length / 4 const sampleRate = Math.max(1, Math.floor(pixelCount / 10000)) for (let i = 0; i < pixelCount; i += sampleRate) { const offset = i * 4 const r = imageData[offset] const g = imageData[offset + 1] const b = imageData[offset + 2] const a = imageData[offset + 3] // Skip transparent pixels if (a < 128) continue // Quantize colors to reduce the number of unique colors const quantizedR = Math.round(r / 16) * 16 const quantizedG = Math.round(g / 16) * 16 const quantizedB = Math.round(b / 16) * 16 const colorKey = `${quantizedR},${quantizedG},${quantizedB}` if (colorMap.has(colorKey)) { const color = colorMap.get(colorKey)! color.count++ colorMap.set(colorKey, color) } else { colorMap.set(colorKey, { count: 1, rgb: { r: quantizedR, g: quantizedG, b: quantizedB }, }) } } // Convert to array and sort by count const colorArray = Array.from(colorMap.values()) .sort((a, b) => b.count - a.count) .slice(0, colorCount) // Convert to hex colors const hexColors = colorArray.map((color) => { const { r, g, b } = color.rgb return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}` }) resolve(hexColors) } catch (error) { reject(error) } }) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import "@/app/globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" import { ThemeToggle } from "@/components/theme-toggle" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: { default: "Image Color Extractor", template: "%s | Image Color Extractor", }, description: "Extract dominant colors from your images with this easy-to-use tool", keywords: ["color extractor", "image colors", "color palette", "dominant colors"], } export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

Image Color Extractor

{children}

) } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], }