[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Link from "next/link" import { PlusCircle } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import PaletteGrid from "@/components/palette-grid" import { popularPalettes, newPalettes, randomPalettes } from "@/lib/sample-data" export default function HomePage() { return (

Palette Pro

Discover Color Palettes

{palette.name}

{palette.tags.map((tag) => ( {tag} ))}

{palette.likes} likes • {palette.views} views

))}

) } [V0_FILE]typescriptreact:file="app/palette/[id]/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { ArrowLeft, Copy, Heart } from "lucide-react" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { getPaletteById } from "@/lib/sample-data" import WebsitePreview from "@/components/previews/website-preview" import MobilePreview from "@/components/previews/mobile-preview" import CardPreview from "@/components/previews/card-preview" import AccessibilityChecker from "@/components/accessibility-checker" export default function PalettePage({ params }: { params: { id: string } }) { const palette = getPaletteById(params.id) const [isFavorite, setIsFavorite] = useState(false) if (!palette) { return

Palette not found

} const copyColor = (color: string) => { navigator.clipboard.writeText(color).then(() => { // Could add a toast notification here console.log(`Copied ${color} to clipboard`) }) } return (

{palette.name}

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

copyColor(color)} >

{color}

))}

{palette.tags.map((tag) => ( {tag} ))}

Website Mobile App Card Design

) } [V0_FILE]typescriptreact:file="components/previews/website-preview.tsx" isEdit="true" isQuickEdit="true" isMerged="true" interface WebsitePreviewProps { colors: string[] } export default function WebsitePreview({ colors }: WebsitePreviewProps) { // Use the first color as primary, second as background, third as accent, fourth as text const primaryColor = colors[0] || "#3b82f6" const backgroundColor = colors[1] || "#ffffff" const accentColor = colors[2] || "#10b981" const textColor = colors[3] || "#1f2937" return (

{/* Header */}

ColorPalette

Home

Gallery

About

Contact

{/* Hero Section */}

Create stunning designs with perfect colors

Discover the perfect palette for your next project and bring your vision to life.

{/* Content */}

Curated Palettes

Browse through thousands of professionally curated color combinations for any project.

Accessibility Tools

Ensure your color choices meet WCAG standards with our built-in contrast checker.

Create & Share

Design your own custom palettes and share them with your team or the community.

{/* Testimonial Section */}

What Our Users Say

"This tool has completely transformed my design workflow. Finding the perfect color palette has never been easier!"

Sarah Johnson

UI Designer

"The preview tools are incredible. Being able to see how colors work together in real contexts saves me so much time."

Michael Chen

Web Developer

{/* Footer */}

ColorPalette

) } [V0_FILE]typescriptreact:file="components/previews/mobile-preview.tsx" isEdit="true" isQuickEdit="true" isMerged="true" interface MobilePreviewProps { colors: string[] } export default function MobilePreview({ colors }: MobilePreviewProps) { const primaryColor = colors[0] || "#3b82f6" const backgroundColor = colors[1] || "#ffffff" const accentColor = colors[2] || "#10b981" const textColor = colors[3] || "#1f2937" return (

{/* Status Bar */}

9:41

{/* App Content */}

{/* App Header */}

ColorPal

Search palettes...

Popular

New

Trending

Minimal

{/* Content */}

Today's Picks

Summer Vibes

by Jessica

4.8

Galaxy Dreams

by Michael

4.5

Accessibility Check

{contrastPairs.map((pair, index) => { const ratio = calculateContrastRatio(pair.color1, pair.color2) const { level, pass } = checkContrast(Number.parseFloat(ratio)) return (

{pass ? : }

{pair.name} Contrast ratio: {ratio}:1 ({level}) {!pass && (

This combination may be difficult to read for some users. Consider using higher contrast colors.

)}

) })}

) } [V0_FILE]typescriptreact:file="app/create/page.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { ArrowLeft, Check, Copy, Shuffle } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import WebsitePreview from "@/components/previews/website-preview" import MobilePreview from "@/components/previews/mobile-preview" import CardPreview from "@/components/previews/card-preview" import AccessibilityChecker from "@/components/accessibility-checker" export default function CreatePalettePage() { const [colors, setColors] = useState(["#3b82f6", "#ffffff", "#10b981", "#1f2937"]) const [paletteName, setPaletteName] = useState("") const updateColor = (index: number, value: string) => { const newColors = [...colors] newColors[index] = value setColors(newColors) } const generateRandomColor = () => { return `#${Math.floor(Math.random() * 16777215) .toString(16) .padStart(6, "0")}` } const generateRandomPalette = () => { setColors([generateRandomColor(), generateRandomColor(), generateRandomColor(), generateRandomColor()]) } const copyPalette = () => { navigator.clipboard.writeText(colors.join(", ")).then(() => { // Could add a toast notification here console.log("Palette copied to clipboard") }) } return (

Create New Palette

Palette Name setPaletteName(e.target.value)} placeholder="My Awesome Palette" className="max-w-md" />

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

{index === 0 ? "Primary" : index === 1 ? "Background" : index === 2 ? "Accent" : "Text"} Color

updateColor(index, e.target.value)} className="font-mono" /> updateColor(index, e.target.value)} className="h-10 w-10 cursor-pointer p-0" />

))}

Website Mobile App Card Design

) } [V0_FILE]typescriptreact:file="lib/types.ts" isMerged="true" export interface Palette { id: string name: string colors: string[] tags: string[] likes: number views: number createdAt: string } [V0_FILE]typescriptreact:file="lib/sample-data.ts" isMerged="true" import type { Palette } from "./types" export const popularPalettes: Palette[] = [ { id: "1", name: "Ocean Breeze", colors: ["#1a73e8", "#f8f9fa", "#34a853", "#202124"], tags: ["blue", "calm", "professional"], likes: 1245, views: 5678, createdAt: "2023-10-15", }, { id: "2", name: "Sunset Vibes", colors: ["#ff7043", "#fef9f0", "#ffca28", "#37474f"], tags: ["warm", "energetic", "sunset"], likes: 987, views: 3456, createdAt: "2023-11-02", }, { id: "3", name: "Forest Retreat", colors: ["#2e7d32", "#f1f8e9", "#689f38", "#212121"], tags: ["green", "nature", "calm"], likes: 876, views: 2987, createdAt: "2023-09-28", }, { id: "4", name: "Modern Minimal", colors: ["#212121", "#ffffff", "#757575", "#000000"], tags: ["monochrome", "minimal", "clean"], likes: 1543, views: 6789, createdAt: "2023-10-05", }, { id: "5", name: "Berry Smoothie", colors: ["#9c27b0", "#f3e5f5", "#e91e63", "#37474f"], tags: ["purple", "pink", "vibrant"], likes: 765, views: 2345, createdAt: "2023-11-10", }, { id: "6", name: "Citrus Fresh", colors: ["#ff9800", "#fff3e0", "#4caf50", "#3e2723"], tags: ["orange", "fresh", "energetic"], likes: 654, views: 1987, createdAt: "2023-09-15", }, ] export const newPalettes: Palette[] = [ { id: "7", name: "Midnight Dream", colors: ["#3f51b5", "#e8eaf6", "#7986cb", "#263238"], tags: ["blue", "night", "calm"], likes: 123, views: 567, createdAt: "2023-12-01", }, { id: "8", name: "Desert Sand", colors: ["#ff5722", "#fbe9e7", "#ffab91", "#3e2723"], tags: ["orange", "warm", "desert"], likes: 87, views: 345, createdAt: "2023-12-03", }, { id: "9", name: "Arctic Chill", colors: ["#00bcd4", "#e0f7fa", "#80deea", "#263238"], tags: ["blue", "cold", "winter"], likes: 76, views: 298, createdAt: "2023-12-05", }, { id: "10", name: "Spring Blossom", colors: ["#e91e63", "#fce4ec", "#f06292", "#212121"], tags: ["pink", "spring", "fresh"], likes: 54, views: 178, createdAt: "2023-12-07", }, ] export const randomPalettes: Palette[] = [ { id: "11", name: "Vintage Paper", colors: ["#795548", "#efebe9", "#a1887f", "#3e2723"], tags: ["brown", "vintage", "retro"], likes: 432, views: 1234, createdAt: "2023-08-15", }, { id: "12", name: "Electric Neon", colors: ["#f50057", "#000000", "#00e676", "#ffffff"], tags: ["neon", "dark", "vibrant"], likes: 876, views: 2345, createdAt: "2023-07-22", }, { id: "13", name: "Lavender Fields", colors: ["#673ab7", "#ede7f6", "#9575cd", "#212121"], tags: ["purple", "lavender", "calm"], likes: 543, views: 1876, createdAt: "2023-06-30", }, { id: "14", name: "Coffee Break", colors: ["#5d4037", "#efebe9", "#8d6e63", "#212121"], tags: ["brown", "coffee", "warm"], likes: 321, views: 987, createdAt: "2023-05-15", }, ] export function getPaletteById(id: string): Palette | undefined { return [...popularPalettes, ...newPalettes, ...randomPalettes].find((palette) => palette.id === id) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Palette Pro - Color Palette Explorer", description: "Discover, create, and preview beautiful color palettes for your next project", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="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; } .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; } } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @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")], } [V0_FILE]typescriptreact:file="components/previews/card-preview.tsx" isEdit="true" interface CardPreviewProps { colors: string[] } export default function CardPreview({ colors }: CardPreviewProps) { const primaryColor = colors[0] || "#3b82f6" const backgroundColor = colors[1] || "#ffffff" const accentColor = colors[2] || "#10b981" const textColor = colors[3] || "#1f2937" return (

{/* Product Card */}

NEW

Premium Headphones

Wireless noise-cancelling headphones with premium sound quality

$129.99

{/* Profile Card */}

Sarah Johnson

UI/UX Designer

{/* Pricing Card */}

Premium Plan

$29 /month

Unlimited projects
Priority support
Custom exports

) }

About

Tags

Share

About

Tags

Share

More from code-wrangler

More Templates Like This

About

Tags

Share

About

Tags

Share

More from code-wrangler

More Templates Like This