[V0_FILE]typescriptreact:file="tailwind.config.js" isFixed="true" isQuickEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { 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))", }, // Foggy Gray foggy: { 50: "#F4F5F0", 100: "#E7E9DE", 200: "#CDD0B9", 300: "#B6BB9B", 400: "#9AA17A", 500: "#7E855D", 600: "#626947", 700: "#4C5239", 800: "#3F4331", 900: "#373B2D", 950: "#1C1E15", }, // Tan Hide tan: { 50: "#FFF7ED", 100: "#FFECD5", 200: "#FED6AA", 300: "#FDB874", 400: "#FB9342", 500: "#F97016", 600: "#EA550C", 700: "#C23F0C", 800: "#9A3212", 900: "#7C2C12", 950: "#431307", }, // Keppel keppel: { 50: "#F2FBF9", 100: "#D3F4EC", 200: "#A6E9D9", 300: "#72D6C2", 400: "#41B4A1", 500: "#2CA08F", 600: "#218074", 700: "#1E675E", 800: "#1C534D", 900: "#1C4541", 950: "#0A2927", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="color-palette-exporter.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Check, Copy, Download } from "lucide-react" // Color palette data const colorPalettes = { foggyGray: { "50": "#F4F5F0", "100": "#E7E9DE", "200": "#CDD0B9", "300": "#B6BB9B", "400": "#9AA17A", "500": "#7E855D", "600": "#626947", "700": "#4C5239", "800": "#3F4331", "900": "#373B2D", "950": "#1C1E15", }, tanHide: { "50": "#FFF7ED", "100": "#FFECD5", "200": "#FED6AA", "300": "#FDB874", "400": "#FB9342", "500": "#F97016", "600": "#EA550C", "700": "#C23F0C", "800": "#9A3212", "900": "#7C2C12", "950": "#431307", }, keppel: { "50": "#F2FBF9", "100": "#D3F4EC", "200": "#A6E9D9", "300": "#72D6C2", "400": "#41B4A1", "500": "#2CA08F", "600": "#218074", "700": "#1E675E", "800": "#1C534D", "900": "#1C4541", "950": "#0A2927", }, } export default function ColorPaletteExporter() { const [copied, setCopied] = useState(null) // Generate JSON format const jsonFormat = JSON.stringify(colorPalettes, null, 2) // Generate Tailwind config format const tailwindFormat = `/** @type {import('tailwindcss').Config} */ module.exports = { theme: { extend: { colors: { // Foggy Gray foggy: ${JSON.stringify(colorPalettes.foggyGray, null, 8)}, // Tan Hide tan: ${JSON.stringify(colorPalettes.tanHide, null, 8)}, // Keppel keppel: ${JSON.stringify(colorPalettes.keppel, null, 8)}, }, }, }, }` // Generate CSS Variables format const cssVariablesFormat = `:root { /* Foggy Gray */ ${Object.entries(colorPalettes.foggyGray) .map(([key, value]) => ` --foggy-${key}: ${value};`) .join("\n")} /* Tan Hide */ ${Object.entries(colorPalettes.tanHide) .map(([key, value]) => ` --tan-${key}: ${value};`) .join("\n")} /* Keppel */ ${Object.entries(colorPalettes.keppel) .map(([key, value]) => ` --keppel-${key}: ${value};`) .join("\n")} }` const copyToClipboard = async (text: string, format: string) => { await navigator.clipboard.writeText(text) setCopied(format) setTimeout(() => setCopied(null), 2000) } const downloadFile = (content: string, filename: string, contentType: string) => { const blob = new Blob([content], { type: contentType }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = filename document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) } return (

Color Palette Exporter

Export your color palettes in different formats for use in your Next.js application with Tailwind CSS.

Tailwind Config JSON CSS Variables

Tailwind Configuration

{tailwindFormat}

How to use in your Next.js app:

Copy the above configuration into your{" "} tailwind.config.js file
Merge it with your existing theme.extend.colors configuration
Use the colors in your components like:{" "} className="bg-foggy-500 text-tan-50"

JSON Format

{jsonFormat}

How to use in your Next.js app:

Save this JSON to a file in your project, e.g.,{" "} colors.json
Import it in your tailwind.config.js:{" "} const colors = require('./colors.json')
Use it in your theme:{" "} colors: {"{"} foggy: colors.foggyGray, ... {"}"}

CSS Variables

{cssVariablesFormat}

How to use in your Next.js app:

Add these CSS variables to your global CSS file (e.g.,{" "} app/globals.css)
Configure Tailwind to use these variables in your tailwind.config.js:

                  {`theme: {
  extend: {
    colors: {
      foggy: {
        50: 'var(--foggy-50)',
        // ... other shades
      },
      // ... other color palettes
    }
  }
}`}

) } [V0_FILE]typescriptreact:file="color-palette.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Lock, Download } from "lucide-react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Check, Copy } from "lucide-react" export default function ColorPalette() { const [open, setOpen] = useState(false) const [copied, setCopied] = useState(null) // Color palette data const colorPalettes = { foggyGray: { "50": "#F4F5F0", "100": "#E7E9DE", "200": "#CDD0B9", "300": "#B6BB9B", "400": "#9AA17A", "500": "#7E855D", "600": "#626947", "700": "#4C5239", "800": "#3F4331", "900": "#373B2D", "950": "#1C1E15", }, tanHide: { "50": "#FFF7ED", "100": "#FFECD5", "200": "#FED6AA", "300": "#FDB874", "400": "#FB9342", "500": "#F97016", "600": "#EA550C", "700": "#C23F0C", "800": "#9A3212", "900": "#7C2C12", "950": "#431307", }, keppel: { "50": "#F2FBF9", "100": "#D3F4EC", "200": "#A6E9D9", "300": "#72D6C2", "400": "#41B4A1", "500": "#2CA08F", "600": "#218074", "700": "#1E675E", "800": "#1C534D", "900": "#1C4541", "950": "#0A2927", }, } // Generate JSON format const jsonFormat = JSON.stringify(colorPalettes, null, 2) // Generate Tailwind config format const tailwindFormat = `/** @type {import('tailwindcss').Config} */ module.exports = { theme: { extend: { colors: { // Foggy Gray foggy: ${JSON.stringify(colorPalettes.foggyGray, null, 8)}, // Tan Hide tan: ${JSON.stringify(colorPalettes.tanHide, null, 8)}, // Keppel keppel: ${JSON.stringify(colorPalettes.keppel, null, 8)}, }, }, }, }` // Generate CSS Variables format const cssVariablesFormat = `:root { /* Foggy Gray */ ${Object.entries(colorPalettes.foggyGray) .map(([key, value]) => ` --foggy-${key}: ${value};`) .join("\n")} /* Tan Hide */ ${Object.entries(colorPalettes.tanHide) .map(([key, value]) => ` --tan-${key}: ${value};`) .join("\n")} /* Keppel */ ${Object.entries(colorPalettes.keppel) .map(([key, value]) => ` --keppel-${key}: ${value};`) .join("\n")} }` const copyToClipboard = async (text: string, format: string) => { await navigator.clipboard.writeText(text) setCopied(format) setTimeout(() => setCopied(null), 2000) } const downloadFile = (content: string, filename: string, contentType: string) => { const blob = new Blob([content], { type: contentType }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = filename document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) } return (

{/* Global Export Button */}

{/* Foggy Gray Palette */}

Foggy Gray

{/* Tan Hide Palette */}

Tan Hide

{/* Keppel Palette */}

Keppel

) } interface ColorSwatchProps { shade: string hex: string bg: string locked?: boolean } function ColorSwatch({ shade, hex, bg, locked = false }: ColorSwatchProps) { return (

{locked && (

)}

{shade}

{hex}

) }

About

About