https://toolscity.lovable.app/assets/ColorPalette-B7AA0Tgu.js

1import{i as S,r as n,j as e,L,k as F,P as u,l as I,h as r}from"./index-247nGzn5.js";import{B as P}from"./Breadcrumb-CJbsQv-7.js";import{B as i}from"./button-BxNdWbEK.js";import{I as A}from"./input-RX_WuuTu.js";import{L as E}from"./label-BQEXRI0E.js";import{C as h,d as g,a as T,b as G,c as H}from"./card-D7rHx1fG.js";import{u as U}from"./useActivityLogger-BhYPqghO.js";import{T as q,t as B}from"./toolContent-g7PYLuij.js";import{L as D}from"./lock-okg1BGUY.js";import{C as f}from"./copy-5we8j_Qi.js";import{R}from"./refresh-cw-DSSGJfaN.js";import"./accordion-DLcJBDMK.js";import"./index-BFFkLd1z.js";import"./circle-check-big-BP9P3yQp.js";/**
2 * @license lucide-react v0.462.0 - ISC
3 *
4 * This source code is licensed under the ISC license.
5 * See the LICENSE file in the root directory of this source tree.
6 */const O=S("LockOpen",[["rect",{width:"18",height:"11",x:"3",y:"11",rx:"2",ry:"2",key:"1w4ew1"}],["path",{d:"M7 11V7a5 5 0 0 1 9.9-1",key:"1mm8w8"}]]),oe=()=>{const[l,c]=n.useState([{hex:"#E76F51",locked:!1},{hex:"#F4A261",locked:!1},{hex:"#E9C46A",locked:!1},{hex:"#2A9D8F",locked:!1},{hex:"#264653",locked:!1}]),[y,m]=n.useState(null),{logActivity:C}=U(),b=()=>{const s="0123456789ABCDEF";let o="#";for(let t=0;t<6;t++)o+=s[Math.floor(Math.random()*16)];return o},j=n.useCallback(()=>{c(s=>s.map(o=>o.locked?o:{...o,hex:b()}))},[]),w=s=>{c(o=>o.map((t,a)=>a===s?{...t,locked:!t.locked}:t))},d=(s,o)=>{c(t=>t.map((a,x)=>x===s?{...a,hex:o}:a))},k=async(s,o)=>{try{await navigator.clipboard.writeText(s),m(o),r.success(`Copied ${s} to clipboard!`),setTimeout(()=>m(null),2e3)}catch{r.error("Failed to copy color")}},N=async()=>{const s=l.map(o=>o.hex).join(", ");try{await navigator.clipboard.writeText(s),r.success("All colors copied to clipboard!"),C("palette",s.slice(0,30),"copied")}catch{r.error("Failed to copy colors")}},v=async()=>{const o=`:root {
7${l.map((t,a)=>`  --color-${a+1}: ${t.hex};`).join(`
8`)}
9}`;try{await navigator.clipboard.writeText(o),r.success("CSS variables copied to clipboard!")}catch{r.error("Failed to copy CSS")}},p=s=>{const o=parseInt(s.slice(1,3),16),t=parseInt(s.slice(3,5),16),a=parseInt(s.slice(5,7),16);return(.299*o+.587*t+.114*a)/255>.5?"#000000":"#FFFFFF"};return e.jsxs(L,{children:[e.jsx(F,{title:"Free Color Palette Generator - Create Beautiful Color Schemes | Tools City",description:"Generate stunning color palettes instantly! Create harmonious color schemes for web design, branding & UI. Lock colors you like, export as CSS variables. 100% free.",keywords:"color palette generator, color scheme, color picker, web design colors, CSS colors, brand colors, color combination, hex colors",canonical:"/color-palette",jsonLd:{type:"WebApplication",name:"Free Color Palette Generator",description:"Generate beautiful, harmonious color palettes for web design, branding, and UI. Lock favorite colors and export as CSS variables.",applicationCategory:"DesignApplication",offers:{price:"0",priceCurrency:"USD"},aggregateRating:{ratingValue:"4.7",ratingCount:"1893"},featureList:["One-Click Generate","Lock Colors","Export CSS Variables","Copy Hex Codes","Harmonious Schemes"]},faq:[{question:"How do I save colors I like?",answer:"Click the lock icon on any color to keep it while generating new colors for the unlocked positions. This helps you build the perfect palette."},{question:"Can I export colors for my website?",answer:"Yes, click 'Export as CSS' to copy CSS custom property variables that you can paste directly into your stylesheet."},{question:"What color formats are supported?",answer:"Colors are displayed in HEX format. You can copy individual colors or export all as CSS variables for easy integration."}],breadcrumbs:[{name:"Home",url:"/"},{name:"Tools",url:"/#tools"},{name:"Color Palette Generator",url:"/color-palette"}]}),e.jsxs("div",{className:"container py-8 sm:py-12",children:[e.jsx(P,{items:[{label:"Tools",href:"/#tools"},{label:"Color Palette Generator"}]}),e.jsxs("div",{className:"max-w-3xl mx-auto text-center mb-8 sm:mb-12 px-4 animate-fade-in",children:[e.jsxs("div",{className:"inline-flex items-center gap-2 px-3 sm:px-4 py-1.5 sm:py-2 rounded-full bg-primary/10 text-primary text-xs sm:text-sm font-medium mb-3 sm:mb-4",children:[e.jsx(u,{className:"h-3.5 w-3.5 sm:h-4 sm:w-4"}),"100% Free • No Signup Required"]}),e.jsxs("h1",{className:"text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-display mb-3 sm:mb-4",children:["Color Palette ",e.jsx("span",{className:"gradient-text-warm",children:"Generator"})]}),e.jsx("p",{className:"text-sm sm:text-base md:text-lg text-muted-foreground max-w-xl mx-auto mb-4",children:"Create beautiful, harmonious color palettes in one click! Perfect for web designers, UI/UX designers, and brand developers. Lock your favorite colors and generate endless combinations."}),e.jsxs("div",{className:"flex flex-wrap justify-center gap-2 text-xs sm:text-sm text-muted-foreground",children:[e.jsx("span",{className:"px-3 py-1 bg-secondary rounded-full",children:"✓ One-Click Generate"}),e.jsx("span",{className:"px-3 py-1 bg-secondary rounded-full",children:"✓ Lock Colors"}),e.jsx("span",{className:"px-3 py-1 bg-secondary rounded-full",children:"✓ Export CSS"}),e.jsx("span",{className:"px-3 py-1 bg-secondary rounded-full",children:"✓ Copy Hex Codes"})]})]}),e.jsx(h,{className:"max-w-5xl mx-auto mb-6 sm:mb-8 overflow-hidden",children:e.jsx(g,{className:"p-0",children:e.jsx("div",{className:"grid grid-cols-5 min-h-[200px] sm:min-h-[300px]",children:l.map((s,o)=>e.jsxs("div",{className:"relative group flex flex-col items-center justify-end p-2 sm:p-4 transition-all duration-300",style:{backgroundColor:s.hex},children:[e.jsx("button",{onClick:()=>w(o),className:"absolute top-2 sm:top-4 left-1/2 -translate-x-1/2 p-1.5 

9sm:p-2 rounded-full bg-black/20 hover:bg-black/40 transition-colors opacity-0 group-hover:opacity-100",style:{color:p(s.hex)},children:s.locked?e.jsx(D,{className:"h-3 w-3 sm:h-4 sm:w-4"}):e.jsx(O,{className:"h-3 w-3 sm:h-4 sm:w-4"})}),e.jsx("div",{className:"flex flex-col items-center gap-1 sm:gap-2",children:e.jsxs("button",{onClick:()=>k(s.hex,o),className:"flex items-center gap-1 px-2 sm:px-3 py-1 sm:py-1.5 rounded-lg bg-black/20 hover:bg-black/40 transition-colors text-[10px] sm:text-xs font-mono font-medium",style:{color:p(s.hex)},children:[y===o?e.jsx(I,{className:"h-3 w-3"}):e.jsx(f,{className:"h-3 w-3"}),e.jsx("span",{className:"hidden sm:inline",children:s.hex.toUpperCase()}),e.jsx("span",{className:"sm:hidden",children:s.hex.toUpperCase().slice(1)})]})})]},o))})})}),e.jsxs("div",{className:"max-w-5xl mx-auto space-y-4 sm:space-y-6",children:[e.jsxs("div",{className:"flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4",children:[e.jsxs(i,{onClick:j,className:"w-full sm:w-auto btn-primary h-11 sm:h-12 px-6 sm:px-8 text-sm sm:text-base",children:[e.jsx(R,{className:"h-4 w-4 sm:h-5 sm:w-5 mr-2"}),"Generate New Palette"]}),e.jsxs(i,{onClick:N,variant:"outline",className:"w-full sm:w-auto rounded-xl h-11 sm:h-12 px-6 text-sm",children:[e.jsx(f,{className:"h-4 w-4 mr-2"}),"Copy All"]}),e.jsx(i,{onClick:v,variant:"outline",className:"w-full sm:w-auto rounded-xl h-11 sm:h-12 px-6 text-sm",children:"Export as CSS"})]}),e.jsxs(h,{children:[e.jsxs(T,{className:"pb-3 sm:pb-4",children:[e.jsxs(G,{className:"text-base sm:text-lg flex items-center gap-2",children:[e.jsx(u,{className:"h-4 w-4 sm:h-5 sm:w-5"}),"Edit Colors"]}),e.jsx(H,{className:"text-xs sm:text-sm",children:"Click on a color input to manually adjust each color"})]}),e.jsx(g,{children:e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-5 gap-3 sm:gap-4",children:l.map((s,o)=>e.jsxs("div",{className:"space-y-2",children:[e.jsxs(E,{className:"text-xs sm:text-sm",children:["Color ",o+1]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("input",{type:"color",value:s.hex,onChange:t=>d(o,t.target.value),className:"w-10 h-10 sm:w-12 sm:h-12 rounded-lg cursor-pointer border-2 border-border"}),e.jsx(A,{value:s.hex,onChange:t=>d(o,t.target.value),className:"input-field font-mono uppercase text-xs sm:text-sm flex-1",maxLength:7})]})]},o))})})]}),e.jsx("div",{className:"p-4 sm:p-6 rounded-xl bg-secondary/50 text-center",children:e.jsxs("p",{className:"text-xs sm:text-sm text-muted-foreground",children:[e.jsx("strong",{children:"Tip:"})," Press the lock icon to keep colors you like, then generate new ones for the rest. Press ",e.jsx("kbd",{className:"px-1.5 py-0.5 rounded bg-background border text-[10px]",children:"Space"})," to quickly generate a new palette."]})})]}),e.jsx(q,{toolName:"Color Palette Generator",...B["color-palette"]})]})]})};export{oe as default};