8f:I[903690,["/chat-static/_next/static/immutable/chunks/2yy563704owg5.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/288tyemx96rvt.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/3andy-ypw7v3e.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/36mcxef_dju-o.js","/chat-static/_next/static/immutable/chunks/22oy-kw0t_wik.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/3__zsxyhzg0xw.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3hykr3pi3-n67.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/27vgv1738ibr-.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/1sqsw1l_zcj52.js","/chat-static/_next/static/immutable/chunks/2tw1xt9xg6z5w.js","/chat-static/_next/static/immutable/chunks/3tktci1_fvshx.js","/chat-static/_next/static/immutable/chunks/0r1hc1jjtp8ni.js","/chat-static/_next/static/immutable/chunks/39b6kb95iib19.js","/chat-static/_next/static/immutable/chunks/3nyxpho2kbzkk.js","/chat-static/_next/static/immutable/chunks/39eb2kmpdon1l.js","/chat-static/_next/static/immutable/chunks/15j2l9ysttyad.js","/chat-static/_next/static/immutable/chunks/2ww7oozza38t6.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/3g0wpxfxxa0d4.js","/chat-static/_next/static/immutable/chunks/0lnb4vs21-a5s.js","/chat-static/_next/static/immutable/chunks/0sium3i1pl5dr.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/2zxw1g02stm8-.js","/chat-static/_next/static/immutable/chunks/1wrkmwn5mlljg.js","/chat-static/_next/static/immutable/chunks/2g1nme8al6bic.js"],"ExplicitChatIdProvider"] 90:I[838238,["/chat-static/_next/static/immutable/chunks/2yy563704owg5.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/288tyemx96rvt.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/3andy-ypw7v3e.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/36mcxef_dju-o.js","/chat-static/_next/static/immutable/chunks/22oy-kw0t_wik.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/3__zsxyhzg0xw.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3hykr3pi3-n67.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/27vgv1738ibr-.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/1sqsw1l_zcj52.js","/chat-static/_next/static/immutable/chunks/2tw1xt9xg6z5w.js","/chat-static/_next/static/immutable/chunks/3tktci1_fvshx.js","/chat-static/_next/static/immutable/chunks/0r1hc1jjtp8ni.js","/chat-static/_next/static/immutable/chunks/39b6kb95iib19.js","/chat-static/_next/static/immutable/chunks/3nyxpho2kbzkk.js","/chat-static/_next/static/immutable/chunks/39eb2kmpdon1l.js","/chat-static/_next/static/immutable/chunks/15j2l9ysttyad.js","/chat-static/_next/static/immutable/chunks/2ww7oozza38t6.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/3g0wpxfxxa0d4.js","/chat-static/_next/static/immutable/chunks/0lnb4vs21-a5s.js","/chat-static/_next/static/immutable/chunks/0sium3i1pl5dr.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/2zxw1g02stm8-.js","/chat-static/_next/static/immutable/chunks/1wrkmwn5mlljg.js","/chat-static/_next/static/immutable/chunks/2g1nme8al6bic.js"],"SWRDataProvider"] 91:T7b65,[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.0", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState } from "react" import HomePage from "@/components/pages/home-page" import GeneratorPage from "@/components/pages/generator-page" import SavePage from "@/components/pages/save-page" import ViewPage from "@/components/pages/view-page" type Page = "home" | "generator" | "save" | "view" export default function App() { const [currentPage, setCurrentPage] = useState("home") const [generatedPalette, setGeneratedPalette] = useState([]) const renderPage = () => { switch (currentPage) { case "home": return ( setCurrentPage("generator")} onViewClick={() => setCurrentPage("view")} /> ) case "generator": return ( { setGeneratedPalette(colors) setCurrentPage("save") }} onBack={() => setCurrentPage("home")} /> ) case "save": return ( setCurrentPage("home")} onViewSaved={() => setCurrentPage("view")} /> ) case "view": return setCurrentPage("home")} /> } } return

{renderPage()}

} [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Colour Palette Picker", description: "Create beautiful colour combinations for your artwork", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color palette for vibrant artist-friendly design */ --background: oklch(0.98 0 0); --foreground: oklch(0.15 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.15 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.15 0 0); --primary: oklch(0.45 0.32 283); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.68 0.28 16.5); --secondary-foreground: oklch(0.98 0 0); --muted: oklch(0.93 0 0); --muted-foreground: oklch(0.5 0 0); --accent: oklch(0.52 0.28 142); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.9 0 0); --input: oklch(0.95 0 0); --ring: oklch(0.45 0.32 283); --chart-1: oklch(0.45 0.32 283); --chart-2: oklch(0.68 0.28 16.5); --chart-3: oklch(0.52 0.28 142); --chart-4: oklch(0.65 0.25 45); --chart-5: oklch(0.55 0.3 320); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.15 0 0); --foreground: oklch(0.98 0 0); --card: oklch(0.2 0 0); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.2 0 0); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.6 0.32 283); --primary-foreground: oklch(0.15 0 0); --secondary: oklch(0.75 0.28 16.5); --secondary-foreground: oklch(0.15 0 0); --accent: oklch(0.65 0.28 142); --accent-foreground: oklch(0.15 0 0); --muted: oklch(0.3 0 0); --muted-foreground: oklch(0.65 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.3 0 0); --input: oklch(0.25 0 0); --ring: oklch(0.6 0.32 283); --chart-1: oklch(0.6 0.32 283); --chart-2: oklch(0.75 0.28 16.5); --chart-3: oklch(0.65 0.28 142); --chart-4: oklch(0.7 0.25 45); --chart-5: oklch(0.65 0.3 320); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } @layer components { .color-block { @apply rounded-lg shadow-md transition-transform hover:scale-105 cursor-pointer; } .palette-card { @apply bg-card rounded-lg p-4 border border-border shadow-sm hover:shadow-md transition-shadow; } } [V0_FILE]typescriptreact:file="components/pages/home-page.tsx" isEdit="true" "use client" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" interface HomePageProps { onGenerateClick: () => void onViewClick: () => void } export default function HomePage({ onGenerateClick, onViewClick }: HomePageProps) { return (

{/* Header */}

🎨

Colour Palette Picker

Create beautiful colour combinations for your artwork. Generate harmonious palettes instantly and save your favorites.

{/* Action Cards */}

✨

Generate Palette

Create stunning colour combinations based on themes or base colours

💾

View Palettes

Browse and manage your saved colour palettes

{/* Info Section */}

How it works:

1. Enter a base colour or select a mood/theme
2. Get 5 harmonious colour suggestions instantly
3. Copy hex codes or save your favourite palettes

) } [V0_FILE]typescriptreact:file="components/pages/generator-page.tsx" isEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card } from "@/components/ui/card" import ColorBlock from "@/components/color-block" import { generatePaletteFromColor, generateRandomPalette } from "@/lib/color-utils" interface GeneratorPageProps { onPaletteGenerated: (colors: string[]) => void onBack: () => void } const MOOD_THEMES = [ { name: "Warm", colors: ["#FF6B6B", "#FFA500", "#FFD93D"] }, { name: "Cool", colors: ["#4D96FF", "#00D9FF", "#00F0FF"] }, { name: "Nature", colors: ["#2D5016", "#6BAA3D", "#91D63D"] }, { name: "Sunset", colors: ["#FF6B35", "#FF8C42", "#F7931E"] }, { name: "Ocean", colors: ["#0077BE", "#00A8E8", "#00C9FF"] }, ] export default function GeneratorPage({ onPaletteGenerated, onBack }: GeneratorPageProps) { const [baseColor, setBaseColor] = useState("#9B59B6") const [palette, setPalette] = useState([]) const [selectedTheme, setSelectedTheme] = useState(null) const handleGenerateFromColor = () => { const colors = generatePaletteFromColor(baseColor) setPalette(colors) setSelectedTheme(null) } const handleThemeSelect = (themeName: string) => { const theme = MOOD_THEMES.find((t) => t.name === themeName) if (theme) { const newPalette = generateRandomPalette(theme.colors) setPalette(newPalette) setSelectedTheme(themeName) } } const handleRandomGenerate = () => { const colors = generateRandomPalette() setPalette(colors) setSelectedTheme(null) } const handleSavePalette = () => { if (palette.length > 0) { onPaletteGenerated(palette) } } return (

{/* Header */}

Generate Palette

Choose a base colour or mood to create your palette

{/* Input Section */} {/* Color Input */}

Base Colour (HEX)

setBaseColor(e.target.value)} placeholder="#9B59B6" className="font-mono" />

{/* Quick Actions */}

{/* Mood Themes */}

Moods & Themes

{MOOD_THEMES.map((theme) => ( ))}

{/* Generated Palette Display */} {palette.length > 0 && (

Your Palette

{palette.map((color) => ( ))}

)}

) } [V0_FILE]typescriptreact:file="components/pages/save-page.tsx" isEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Card } from "@/components/ui/card" import { savePalette } from "@/lib/storage" interface SavePageProps { palette: string[] onBack: () => void onViewSaved: () => void } export default function SavePage({ palette, onBack, onViewSaved }: SavePageProps) { const [paletteName, setPaletteName] = useState("") const [description, setDescription] = useState("") const [saved, setSaved] = useState(false) const handleSave = () => { if (paletteName.trim()) { savePalette({ id: Date.now().toString(), name: paletteName, description: description, colors: palette, createdAt: new Date().toISOString(), }) setSaved(true) setTimeout(() => { onViewSaved() }, 1500) } } return (

{/* Header */}

Save Palette

{/* Preview */}

Palette Preview

{palette.map((color) => (

))}

{/* Save Form */}

Palette Name * setPaletteName(e.target.value)} placeholder="e.g., Summer Vibes" className="text-base" />

Description (optional)

setDescription(e.target.value)}
              placeholder="Add notes about this palette..."
              className="min-h-24"
            />
          </div>

<Button
            onClick={handleSave}
            disabled={!paletteName.trim() || saved}
            className="w-full bg-primary hover:bg-primary/90 text-primary-foreground py-6 text-lg"
          >
            {saved ? "✓ Saved!" : "Save Palette"}
          </Button>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/pages/view-page.tsx" isEdit="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import PaletteCard from "@/components/palette-card"
import { getSavedPalettes, deletePalette } from "@/lib/storage"

interface ViewPageProps {
  onBack: () => void
}

export interface SavedPalette {
  id: string
  name: string
  description: string
  colors: string[]
  createdAt: string
}

export default function ViewPage({ onBack }: ViewPageProps) {
  const [palettes, setPalettes] = useState<SavedPalette[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    setLoading(true)
    const saved = getSavedPalettes()
    setPalettes(saved)
    setLoading(false)
  }, [])

const handleDelete = (id: string) => {
    deletePalette(id)
    setPalettes(palettes.filter((p) => p.id !== id))
  }

return (
    <div className="min-h-screen px-4 py-8">
      <div className="max-w-5xl mx-auto space-y-8">
        {/* Header */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-4xl font-bold text-foreground">Saved Palettes</h1>
            <p className="text-muted-foreground mt-2">
              {palettes.length} palette{palettes.length !== 1 ? "s" : ""} saved
            </p>
          </div>
          <Button onClick={onBack} variant="outline">
            Back
          </Button>
        </div>

{/* Palettes Grid */}
        {palettes.length === 0 ? (
          <Card className="p-12 text-center space-y-4">
            <div className="text-5xl">📭</div>
            <h2 className="text-2xl font-semibold text-foreground">No palettes yet</h2>
            <p className="text-muted-foreground">Create and save your first palette to get started</p>
            <Button onClick={onBack} className="bg-primary hover:bg-primary/90 text-primary-foreground">
              Create Palette
            </Button>
          </Card>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {palettes.map((palette) => (
              <PaletteCard key={palette.id} palette={palette} onDelete={handleDelete} />
            ))}
          </div>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/color-block.tsx" isEdit="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { hexToRgb } from "@/lib/color-utils"

interface ColorBlockProps {
  color: string
}

export default function ColorBlock({ color }: ColorBlockProps) {
  const [copied, setCopied] = useState(false)

const handleCopyHex = () => {
    navigator.clipboard.writeText(color)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

const rgb = hexToRgb(color)
  const rgbString = rgb ? `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` : ""

return (
    <div className="space-y-3">
      <div className="color-block h-32 bg-cover bg-center" style={{ backgroundColor: color }} />
      <div className="space-y-2 text-sm">
        <div
          className="font-mono font-semibold text-foreground cursor-pointer hover:text-primary"
          onClick={handleCopyHex}
        >
          {color.toUpperCase()}
        </div>
        {rgbString && <div className="font-mono text-xs text-muted-foreground">{rgbString}</div>}
        <Button onClick={handleCopyHex} size="sm" variant="outline" className="w-full text-xs bg-transparent">
          {copied ? "✓ Copied" : "Copy HEX"}
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/palette-card.tsx" isEdit="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import type { SavedPalette } from "./pages/view-page"

interface PaletteCardProps {
  palette: SavedPalette
  onDelete: (id: string) => void
}

export default function PaletteCard({ palette, onDelete }: PaletteCardProps) {
  const [copied, setCopied] = useState(false)

const handleCopyAll = () => {
    const hex = palette.colors.join(", ")
    navigator.clipboard.writeText(hex)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

const handleExport = () => {
    const content = `Palette: ${palette.name}\n${palette.description ? `Description: ${palette.description}\n` : ""}\nColors:\n${palette.colors.map((c, i) => `${i + 1}. ${c}`).join("\n")}`
    const blob = new Blob([content], { type: "text/plain" })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement("a")
    a.href = url
    a.download = `${palette.name.toLowerCase().replace(/\s+/g, "-")}.txt`
    a.click()
    window.URL.revokeObjectURL(url)
  }

return (
    <Card className="palette-card space-y-4">
      {/* Color Preview */}
      <div className="grid grid-cols-5 gap-2">
        {palette.colors.map((color) => (
          <div
            key={color}
            className="aspect-square rounded-md color-block"
            style={{ backgroundColor: color }}
            title={color}
          />
        ))}
      </div>

{/* Info */}
      <div className="space-y-1">
        <h3 className="font-bold text-foreground text-text-pretty">{palette.name}</h3>
        {palette.description && <p className="text-xs text-muted-foreground line-clamp-2">{palette.description}</p>}
        <p className="text-xs text-muted-foreground">{new Date(palette.createdAt).toLocaleDateString()}</p>
      </div>

{/* Actions */}
      <div className="flex gap-2 pt-2">
        <Button onClick={handleCopyAll} size="sm" variant="outline" className="flex-1 text-xs bg-transparent">
          {copied ? "✓ Copied" : "Copy All"}
        </Button>
        <Button onClick={handleExport} size="sm" variant="outline" className="flex-1 text-xs bg-transparent">
          Export
        </Button>
        <Button
          onClick={() => onDelete(palette.id)}
          size="sm"
          variant="outline"
          className="flex-1 text-xs text-destructive hover:text-destructive"
        >
          Delete
        </Button>
      </div>
    </Card>
  )
}
[V0_FILE]typescript:file="lib/color-utils.ts" isEdit="true"
/**
 * Generate a harmonious palette from a base color
 */
export function generatePaletteFromColor(baseHex: string): string[] {
  const base = hexToHsl(baseHex)
  if (!base) return generateRandomPalette()

return [
    baseHex,
    hslToHex({ ...base, h: (base.h + 60) % 360 }),
    hslToHex({ ...base, h: (base.h + 120) % 360 }),
    hslToHex({ ...base, h: (base.h + 180) % 360 }),
    hslToHex({ ...base, h: (base.h + 240) % 360 }),
  ].filter((hex): hex is string => hex !== null)
}

/**
 * Generate random colors, optionally influenced by base colors
 */
export function generateRandomPalette(baseColors?: string[]): string[] {
  if (baseColors && baseColors.length > 0) {
    // Generate variations from base colors
    return baseColors.slice(0, 5).map((color) => {
      const hsl = hexToHsl(color)
      if (!hsl) return color

// Add variation
      return (
        hslToHex({
          h: (hsl.h + Math.random() * 40 - 20) % 360,
          s: Math.max(20, Math.min(100, hsl.s + Math.random() * 20 - 10)),
          l: Math.max(20, Math.min(80, hsl.l + Math.random() * 20 - 10)),
        }) || color
      )
    })
  }

// Generate completely random palette
  return Array.from({ length: 5 }, () => {
    const h = Math.random() * 360
    const s = 50 + Math.random() * 40
    const l = 45 + Math.random() * 25
    return hslToHex({ h, s, l }) || "#000000"
  })
}

/**
 * Convert HEX to RGB
 */
export function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
  return result
    ? {
        r: Number.parseInt(result[1], 16),
        g: Number.parseInt(result[2], 16),
        b: Number.parseInt(result[3], 16),
      }
    : null
}

/**
 * Convert RGB to HEX
 */
export function rgbToHex(r: number, g: number, b: number): string {
  return (
    "#" +
    [r, g, b]
      .map((x) => {
        const hex = x.toString(16)
        return hex.length === 1 ? "0" + hex : hex
      })
      .join("")
      .toUpperCase()
  )
}

/**
 * Convert HEX to HSL
 */
export function hexToHsl(hex: string): { h: number; s: number; l: number } | null {
  const rgb = hexToRgb(hex)
  if (!rgb) return null

const r = rgb.r / 255
  const g = rgb.g / 255
  const b = rgb.b / 255

const max = Math.max(r, g, b)
  const min = Math.min(r, g, b)
  let h = 0
  let s = 0
  const l = (max + min) / 2

if (max !== min) {
    const d = max - min
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)

switch (max) {
      case r:
        h = ((g - b) / d + (g < b ? 6 : 0)) / 6
        break
      case g:
        h = ((b - r) / d + 2) / 6
        break
      case b:
        h = ((r - g) / d + 4) / 6
        break
    }
  }

return {
    h: h * 360,
    s: s * 100,
    l: l * 100,
  }
}

/**
 * Convert HSL to HEX
 */
export function hslToHex(hsl: { h: number; s: number; l: number }): string | null {
  const h = hsl.h / 360
  const s = hsl.s / 100
  const l = hsl.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)
  }

return rgbToHex(Math.round(r * 255), Math.round(g * 255), Math.round(b * 255))
}
[V0_FILE]typescript:file="lib/storage.ts" isEdit="true"
export interface SavedPalette {
  id: string
  name: string
  description: string
  colors: string[]
  createdAt: string
}

const STORAGE_KEY = "color-palette-picker-palettes"

export function savePalette(palette: SavedPalette): void {
  const palettes = getSavedPalettes()
  palettes.push(palette)
  localStorage.setItem(STORAGE_KEY, JSON.stringify(palettes))
}

export function getSavedPalettes(): SavedPalette[] {
  if (typeof window === "undefined") return []

const data = localStorage.getItem(STORAGE_KEY)
  return data ? JSON.parse(data) : []
}

export function deletePalette(id: string): void {
  const palettes = getSavedPalettes()
  const filtered = palettes.filter((p) => p.id !== id)
  localStorage.setItem(STORAGE_KEY, JSON.stringify(filtered))
}

export function updatePalette(id: string, updates: Partial<SavedPalette>): void {
  const palettes = getSavedPalettes()
  const index = palettes.findIndex((p) => p.id === id)
  if (index !== -1) {
    palettes[index] = { ...palettes[index], ...updates }
    localStorage.setItem(STORAGE_KEY, JSON.stringify(palettes))
  }
}88:["$","$L8f",null,{"chatId":"djYXHdx0jYd","children":["$","$L90",null,{"data":{"@\"active-block\",\"djYXHdx0jYd\",":{"id":"b_JtRoU1RpYqE","messageId":"Q3SsmEmrpLcux237ZSrEi8O62VLcT1HB","source":"$91","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"color-palette-picker","type":"code-project","project":"color-palette-picker","taskNameActive":"Compiling complete code","taskNameComplete":"Complete code provided"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"djYXHdx0jYd\",":false},"children":"$L92"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This