[V0_FILE]typescriptreact:file="app/page.tsx" import ColorPaletteGenerator from "@/components/color-palette-generator" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/ui/toast.tsx" import * as React from "react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", { variants: { variant: { default: "border bg-background text-foreground", destructive: "destructive group border-destructive bg-destructive text-destructive-foreground", }, }, defaultVariants: { variant: "default", }, }, ) const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } [V0_FILE]typescriptreact:file="components/ui/toaster.tsx" "use client" import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast" import { useToast } from "@/components/ui/use-toast" export function Toaster() { const { toasts } = useToast() return ( {toasts.map(({ id, title, description, action, ...props }) => (

{title && {title}} {description && {description}}

{action} ))} ) } [V0_FILE]typescriptreact:file="components/ui/use-toast.ts" isFixed="true" isQuickEdit="true" "use client" // Inspired by react-hot-toast library import * as React from "react" import type { ToastActionElement, ToastProps } from "@/components/ui/toast" const TOAST_LIMIT = 1 const TOAST_REMOVE_DELAY = 1000000 type ToasterToast = ToastProps & { id: string title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement } const actionTypes = { ADD_TOAST: "ADD_TOAST", UPDATE_TOAST: "UPDATE_TOAST", DISMISS_TOAST: "DISMISS_TOAST", REMOVE_TOAST: "REMOVE_TOAST", } as const let count = 0 function genId() { count = (count + 1) % Number.MAX_VALUE return count.toString() } type ActionType = typeof actionTypes type Action = | { type: ActionType["ADD_TOAST"] toast: ToasterToast } | { type: ActionType["UPDATE_TOAST"] toast: Partial } | { type: ActionType["DISMISS_TOAST"] toastId?: string } | { type: ActionType["REMOVE_TOAST"] toastId?: string } interface State { toasts: ToasterToast[] } const toastTimeouts = new Map>() const addToRemoveQueue = (toastId: string) => { if (toastTimeouts.has(toastId)) { return } const timeout = setTimeout(() => { toastTimeouts.delete(toastId) dispatch({ type: "REMOVE_TOAST", toastId: toastId, }) }, TOAST_REMOVE_DELAY) toastTimeouts.set(toastId, timeout) } export const reducer = (state: State, action: Action): State => { switch (action.type) { case "ADD_TOAST": return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), } case "UPDATE_TOAST": return { ...state, toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)), } case "DISMISS_TOAST": { const { toastId } = action // ! Side effects ! - This could be extracted into a dismissToast() action, // but I'll keep it here for simplicity if (toastId) { addToRemoveQueue(toastId) } else { state.toasts.forEach((toast) => { addToRemoveQueue(toast.id) }) } return { ...state, toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined ? { ...t, open: false, } : t, ), } } case "REMOVE_TOAST": if (action.toastId === undefined) { return { ...state, toasts: [], } } return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId), } } } const listeners: Array<(state: State) => void> = [] let memoryState: State = { toasts: [] } function dispatch(action: Action) { memoryState = reducer(memoryState, action) listeners.forEach((listener) => { listener(memoryState) }) } type Toast = Omit function toast({ ...props }: Toast) { const id = genId() const update = (props: ToasterToast) => dispatch({ type: "UPDATE_TOAST", toast: { ...props, id }, }) const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id }) dispatch({ type: "ADD_TOAST", toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dismiss() }, }, }) return { id: id, dismiss, update, } } function useToast() { const [state, setState] = React.useState(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, []) // Removed unnecessary dependency: [state] return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }), } } export { useToast, toast } [V0_FILE]typescriptreact:file="components/ui/slider.tsx" isQuickEdit="true" "use client" import * as React from "react" import * as SliderPrimitive from "@radix-ui/react-slider" import { cn } from "@/lib/utils" const Slider = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Slider.displayName = SliderPrimitive.Root.displayName export { Slider } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isQuickEdit="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return ( ) }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/popover.tsx" "use client" import * as React from "react" import * as PopoverPrimitive from "@radix-ui/react-popover" import { cn } from "@/lib/utils" const Popover = PopoverPrimitive.Root const PopoverTrigger = PopoverPrimitive.Trigger const PopoverContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( )) PopoverContent.displayName = PopoverPrimitive.Content.displayName export { Popover, PopoverTrigger, PopoverContent } [V0_FILE]typescriptreact:file="components/ui/switch.tsx" "use client" import * as React from "react" import * as SwitchPrimitives from "@radix-ui/react-switch" import { cn } from "@/lib/utils" const Switch = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Switch.displayName = SwitchPrimitives.Root.displayName export { Switch } [V0_FILE]typescriptreact:file="components/ui/label.tsx" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inconsolata } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import { Toaster } from "@/components/ui/toaster" const inconsolata = Inconsolata({ subsets: ["latin"], variable: "--font-inconsolata", }) export const metadata: Metadata = { title: "Tailwind Color Palette Generator", description: "Generate beautiful color palettes for your Tailwind CSS projects", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {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: { fontFamily: { sans: ["var(--font-inconsolata)"], }, 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")], } [V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; --chart-1: 221.2 83.2% 53.3%; --chart-2: 142.1 76.2% 36.3%; --chart-3: 346.8 77.2% 49.8%; --chart-4: 43.3 96.4% 56.3%; --chart-5: 262.1 83.3% 57.8%; --font-sans: var(--font-inconsolata); } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground font-sans; } } /* Custom styles for color picker */ .react-colorful { width: 100%; height: 200px; transition: all 0.2s ease; } .react-colorful__saturation { border-radius: 4px 4px 0 0; transition: all 0.2s ease; } .react-colorful__hue { height: 24px; margin-top: 8px; border-radius: 0 0 4px 4px; transition: all 0.2s ease; } .react-colorful__pointer { width: 20px; height: 20px; border-width: 2px; transition: border-color 0.1s ease; } /* Improved theme transition */ .theme-transition { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* Optimize animations */ @layer utilities { .animate-fast { animation-duration: 0.2s; } .animate-smooth { transition: all 0.2s ease; } .hover-scale { transition: transform 0.2s ease; } .hover-scale:hover { transform: scale(1.02); } } /* Smooth transitions for all elements */ button, a, input, select, textarea { transition: all 0.2s ease; } /* Enhance slider interactions */ .slider-thumb { transition: transform 0.1s ease; } .slider-thumb:hover { transform: scale(1.2); } /* Enhance color shade transitions */ .color-shade { transition: background-color 0.3s ease; } /* Custom scrollbar styles */ .custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; } .custom-scrollbar::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 4px; } .custom-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.8); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: #000; } .dark .custom-scrollbar::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); } .dark .custom-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.8); } .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: #fff; } /* Firefox scrollbar */ .custom-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.8) rgba(0, 0, 0, 0.1); } .dark .custom-scrollbar { scrollbar-color: rgba(255, 255, 255, 0.8) rgba(255, 255, 255, 0.1); } [V0_FILE]typescriptreact:file="package.json" { "name": "tailwind-palette-generator", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-slider": "^1.1.2", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.0.3", "@radix-ui/react-toast": "^1.1.5", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "framer-motion": "^10.16.4", "lucide-react": "^0.292.0", "next": "14.0.3", "next-themes": "^0.2.1", "react": "^18", "react-colorful": "^5.6.1", "react-dom": "^18", "tailwind-merge": "^2.0.0", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.0.3", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/color-palette-generator.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState, useEffect, useMemo, useCallback } from "react" import { HexColorPicker } from "react-colorful" import { Download, Check, Copy, RefreshCw, AlertCircle } from "lucide-react" import { Slider } from "@/components/ui/slider" import { Button } from "@/components/ui/button" import { useToast } from "@/components/ui/use-toast" import { useTheme } from "next-themes" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { motion } from "framer-motion" interface ColorShade { shade: number hex: string hue: number saturation: number lightness: number } interface ContrastScore { background: ColorShade foreground: ColorShade ratio: number level: string pass: boolean } export default function ColorPaletteGenerator() { const [baseColor, setBaseColor] = useState("#15437F") const [vibrancy, setVibrancy] = useState(50) const [hueShift, setHueShift] = useState(0) const [colorShades, setColorShades] = useState([]) const [copiedHex, setCopiedHex] = useState(null) const [inputValue, setInputValue] = useState(baseColor) const [isRandomizing, setIsRandomizing] = useState(false) // Initialize dark mode state const [isDarkMode, setIsDarkMode] = useState(true) const { theme, setTheme } = useTheme() const { toast } = useToast() // Convert hex to HSL - memoized for performance const hexToHSL = useCallback((hex: string): [number, number, number] => { // Remove the # if present hex = hex.replace(/^#/, "") // Parse the hex values const r = Number.parseInt(hex.substring(0, 2), 16) / 255 const g = Number.parseInt(hex.substring(2, 4), 16) / 255 const b = Number.parseInt(hex.substring(4, 6), 16) / 255 // Find min and max values const max = Math.max(r, g, b) const min = Math.min(r, g, b) // Calculate lightness let l = (max + min) / 2 let h = 0 let s = 0 if (max !== min) { // Calculate saturation s = l > 0.5 ? (max - min) / (2 - max - min) : (max - min) / (max + min) // Calculate hue if (max === r) { h = (g - b) / (max - min) + (g < b ? 6 : 0) } else if (max === g) { h = (b - r) / (max - min) + 2 } else { h = (r - g) / (max - min) + 4 } h /= 6 } // Convert to degrees, percentage, percentage h = Math.round(h * 360) s = Math.round(s * 100) l = Math.round(l * 100) return [h, s, l] }, []) // Convert HSL to hex - memoized for performance const hslToHex = useCallback((h: number, s: number, l: number): string => { h /= 360 s /= 100 l /= 100 let r, g, b if (s === 0) { r = g = b = l } else { const hue2rgb = (p: number, q: number, t: number) => { if (t < 0) t += 1 if (t > 1) t -= 1 if (t < 1 / 6) return p + (q - p) * 6 * t if (t < 1 / 2) return q if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6 return p } const q = l < 0.5 ? l * (1 + s) : l + s - l * s const p = 2 * l - q r = hue2rgb(p, q, h + 1 / 3) g = hue2rgb(p, q, h) b = hue2rgb(p, q, h - 1 / 3) } const toHex = (x: number) => { const hex = Math.round(x * 255).toString(16) return hex.length === 1 ? "0" + hex : hex } return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase() }, []) // Generate color shades - memoized to prevent unnecessary recalculations const generateColorShades = useCallback(() => { const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900] const [baseHue, baseSat, baseLight] = hexToHSL(baseColor) // Apply hue shift const adjustedHue = (baseHue + hueShift + 360) % 360 // Apply vibrancy (affects saturation) // Cap vibrancy to prevent issues with extreme values const cappedVibrancy = Math.min(vibrancy, 85) // Cap at 85% to prevent oversaturation const saturationMultiplier = cappedVibrancy / 50 // 0-85 range to 0-1.7 multiplier const newShades = shades.map((shade) => { // Fixed lightness values to ensure proper gradient // These values ensure 50 is always lightest and 900 is always darkest const lightnessMap: Record = { 50: 96, // Lightest 100: 90, 200: 80, 300: 70, 400: 60, 500: 50, 600: 40, 700: 30, 800: 20, 900: 10, // Darkest } const targetLightness = lightnessMap[shade] // Calculate saturation with a more controlled approach // Lighter shades get less saturation, darker shades get more let adjustedSaturation: number if (shade <= 100) { // Very light shades (50, 100) get significantly reduced saturation adjustedSaturation = baseSat * saturationMultiplier * (0.3 + shade / 500) } else if (shade < 500) { // Medium-light shades get moderately reduced saturation adjustedSaturation = baseSat * saturationMultiplier * (0.6 + shade / 1000) } else if (shade < 800) { // Medium-dark shades get slightly increased saturation adjustedSaturation = baseSat * saturationMultiplier * (0.9 + (shade - 500) / 2000) } else { // Very dark shades (800, 900) get reduced saturation to prevent muddiness adjustedSaturation = baseSat * saturationMultiplier * 0.95 } // Cap saturation to prevent oversaturation adjustedSaturation = Math.min(adjustedSaturation, 100) // Generate the hex color const hex = hslToHex(adjustedHue, adjustedSaturation, targetLightness) return { shade, hex, hue: adjustedHue, saturation: Math.round(adjustedSaturation), lightness: targetLightness, } }) return newShades }, [baseColor, vibrancy, hueShift, hexToHSL, hslToHex]) // Memoize color shades to prevent unnecessary re-renders const memoizedColorShades = useMemo(() => generateColorShades(), [generateColorShades]) // Update color shades when dependencies change useEffect(() => { setColorShades(memoizedColorShades) }, [memoizedColorShades]) // Reset copied state after 1 second (reduced from 2 seconds) useEffect(() => { if (copiedHex) { const timeout = setTimeout(() => { setCopiedHex(null) }, 1000) return () => clearTimeout(timeout) } }, [copiedHex]) // Update input value when baseColor changes from other sources useEffect(() => { setInputValue(baseColor) }, [baseColor]) // Set dark mode as default and sync the switch state useEffect(() => { // Only set dark mode if theme is undefined (initial load) if (!theme) { setTheme("dark") setIsDarkMode(true) } }, [theme, setTheme]) // Copy hex value to clipboard const copyToClipboard = (hex: string) => { navigator.clipboard.writeText(hex) setCopiedHex(hex) toast({ title: "Copied to clipboard", description: `${hex} has been copied to your clipboard.`, duration: 1000, // Reduced from 2000ms }) } // Download palette as JSON const downloadPalette = () => { const palette = colorShades.reduce( (acc, { shade, hex }) => { acc[shade] = hex return acc }, {} as Record, ) const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(palette, null, 2)) const downloadAnchorNode = document.createElement("a") downloadAnchorNode.setAttribute("href", dataStr) downloadAnchorNode.setAttribute("download", `palette-${baseColor.replace("#", "")}.json`) document.body.appendChild(downloadAnchorNode) downloadAnchorNode.click() downloadAnchorNode.remove() } // Download palette as CSS const downloadCSS = () => { let css = `:root {\n` colorShades.forEach(({ shade, hex }) => { css += ` --color-primary-${shade}: ${hex};\n` }) css += `}\n` const dataStr = "data:text/css;charset=utf-8," + encodeURIComponent(css) const downloadAnchorNode = document.createElement("a") downloadAnchorNode.setAttribute("href", dataStr) downloadAnchorNode.setAttribute("download", `palette-${baseColor.replace("#", "")}.css`) document.body.appendChild(downloadAnchorNode) downloadAnchorNode.click() downloadAnchorNode.remove() } // Download palette as Tailwind config const downloadTailwindConfig = () => { const colors = colorShades.reduce( (acc, { shade, hex }) => { acc[shade] = hex return acc }, {} as Record, ) const config = `/** @type {import('tailwindcss').Config} */ module.exports = { theme: { extend: { colors: { primary: ${JSON.stringify(colors, null, 6).replace(/"([^"]+)":/g, "$1:")} } } } }` const dataStr = "data:text/javascript;charset=utf-8," + encodeURIComponent(config) const downloadAnchorNode = document.createElement("a") downloadAnchorNode.setAttribute("href", dataStr) downloadAnchorNode.setAttribute("download", `tailwind-config-${baseColor.replace("#", "")}.js`) document.body.appendChild(downloadAnchorNode) downloadAnchorNode.click() downloadAnchorNode.remove() } // Format and validate hex value - memoized for performance const formatHexValue = useCallback( (value: string): string => { // Remove any non-hex characters let hex = value.replace(/[^0-9A-Fa-f]/g, "") // If empty, return the current base color if (!hex) return baseColor // Handle shorthand hex (e.g., "F00" -> "FF0000") if (hex.length === 3) { hex = hex .split("") .map((char) => char + char) .join("") } // Complete incomplete hex values if (hex.length < 6) { // Pad with zeros or repeat the pattern if (hex.length === 1) { // Single character - repeat it (e.g., "F" -> "FFFFFF") hex = hex.repeat(6) } else if (hex.length === 2) { // Two characters - treat as RR and repeat (e.g., "FF" -> "FFFF00") hex = hex + hex + "00" } else if (hex.length === 4) { // Four characters - treat as RRGG and add default blue (e.g., "FFFF" -> "FFFF00") hex = hex + "00" } else if (hex.length === 5) { // Five characters - add one more from the pattern hex = hex + hex.charAt(0) } } else if (hex.length > 6) { // Truncate if too long hex = hex.substring(0, 6) } return "#" + hex.toUpperCase() }, [baseColor], ) // Handle theme toggle with faster transition const handleThemeToggle = (checked: boolean) => { setIsDarkMode(checked) const newTheme = checked ? "dark" : "light" document.documentElement.classList.add("theme-transition") setTheme(newTheme) // Remove transition class after animation completes - reduced from 800ms to 300ms setTimeout(() => { document.documentElement.classList.remove("theme-transition") }, 300) } // Generate a random color with more variation and reset sliders const randomizeColor = () => { // Set randomizing state for animation setIsRandomizing(true) // Reset vibrancy and hue shift to default values setVibrancy(50) setHueShift(0) // Decide whether to make a completely random color (30% chance) or stay somewhat related const completelyRandom = Math.random() < 0.3 if (completelyRandom) { // Generate a completely random color const newHue = Math.floor(Math.random() * 360) const newSaturation = 20 + Math.random() * 80 // 20-100% const newLightness = 20 + Math.random() * 60 // 20-80% const newColor = hslToHex(newHue, newSaturation, newLightness) setBaseColor(newColor) setInputValue(newColor) } else { // Generate a color with wider variation but still somewhat related const [currentHue, _, __] = hexToHSL(baseColor) // Much wider hue variation (±60°) const newHue = (currentHue + (Math.random() * 120 - 60) + 360) % 360 const newSaturation = 20 + Math.random() * 80 // 20-100% const newLightness = 20 + Math.random() * 60 // 20-80% const newColor = hslToHex(newHue, newSaturation, newLightness) setBaseColor(newColor) setInputValue(newColor) } toast({ title: "Color Randomized", description: `New base color: ${baseColor}`, duration: 1000, }) // Reset randomizing state after animation setTimeout(() => { setIsRandomizing(false) }, 500) } // Helper function to calculate relative luminance const getLuminance = (hex: string) => { // Remove # if present hex = hex.replace("#", "") // Convert hex to rgb const r = Number.parseInt(hex.substr(0, 2), 16) / 255 const g = Number.parseInt(hex.substr(2, 2), 16) / 255 const b = Number.parseInt(hex.substr(4, 2), 16) / 255 // Calculate luminance const R = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4) const G = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4) const B = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4) return 0.2126 * R + 0.7152 * G + 0.0722 * B } // Calculate contrast ratio const getContrastRatio = useCallback( (color1: string, color2: string) => { const luminance1 = getLuminance(color1) const luminance2 = getLuminance(color2) const lighter = Math.max(luminance1, luminance2) const darker = Math.min(luminance1, luminance2) return (lighter + 0.05) / (darker + 0.05) }, [], // Removed getLuminance as a dependency ) // Calculate accessibility scores for all shade combinations const calculatePaletteAccessibility = useMemo(() => { // Skip some shades to avoid too many combinations const testShades = [50, 100, 200, 500, 700, 900] const results: ContrastScore[] = [] // Test all combinations of shades against each other for (let i = 0; i < testShades.length; i++) { for (let j = i + 1; j < testShades.length; j++) { const bgShade = colorShades.find((s) => s.shade === testShades[i]) const fgShade = colorShades.find((s) => s.shade === testShades[j]) if (bgShade && fgShade) { const ratio = getContrastRatio(bgShade.hex, fgShade.hex) let level = "" let pass = false if (ratio >= 7) { level = "AAA" pass = true } else if (ratio >= 4.5) { level = "AA" pass = true } else if (ratio >= 3) { level = "AA Large" pass = true } else { level = "Fail" pass = false } results.push({ background: bgShade, foreground: fgShade, ratio, level, pass, }) } } } // Sort by contrast ratio (highest first) return results.sort((a, b) => b.ratio - a.ratio) }, [colorShades, getContrastRatio]) // Get passing combinations const passingCombinations = useMemo(() => { return calculatePaletteAccessibility.filter((score) => score.pass) }, [calculatePaletteAccessibility]) // Get failing combinations const failingCombinations = useMemo(() => { return calculatePaletteAccessibility.filter((score) => !score.pass) }, [calculatePaletteAccessibility]) return (

Color Palette Generator

{baseColor}

Dark Mode

Base Color

{ // Always update the input value as the user types setInputValue(e.target.value) }} onBlur={() => { // When the user clicks outside, try to convert to a valid hex const validHex = formatHexValue(inputValue) setInputValue(validHex) setBaseColor(validHex) }} onKeyDown={(e) => { // When the user presses Enter, update the color if (e.key === "Enter") { const validHex = formatHexValue(inputValue) setInputValue(validHex) setBaseColor(validHex) e.currentTarget.blur() } }} className="flex-1 px-3 py-2 border rounded-lg text-sm font-mono transition-all duration-200 focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="#RRGGBB" initial={{ scale: 1 }} whileFocus={{ scale: 1.01 }} transition={{ duration: 0.2 }} />

Vibrancy {vibrancy}%

setVibrancy(value[0])} className="transition-all duration-150 ease-out" />

Hue Shift {hueShift}°

setHueShift(value[0])} className="transition-all duration-150 ease-out" /> {colorShades.map(({ shade, hex }, index) => ( ))}

Accessibility Pairs

{passingCombinations.length} passing / {calculatePaletteAccessibility.length} total

{/* Passing combinations */}

Accessible Combinations

{passingCombinations.length > 0 ? ( passingCombinations.map((score, index) => (

{score.background.shade} {" + "} {score.foreground.shade}

{score.ratio.toFixed(2)}:1

{score.level}

)) ) : (

No accessible combinations found

)}

{/* Failing combinations */}

Inaccessible Combinations

{failingCombinations.length > 0 ? ( failingCombinations.map((score, index) => (

{score.background.shade} {" + "} {score.foreground.shade}

{score.ratio.toFixed(2)}:1

{score.level}

)) ) : (

All combinations are accessible!

)}

{colorShades.map(({ shade, hex, hue, saturation, lightness }, index) => (

{shade}

copyToClipboard(hex)} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} > {hex} {copiedHex === hex ? ( ) : ( )}

H {hue}

S {saturation}

L {lightness}

))}

) }

About

About