https://schedulewave.com/_nuxt/CkYWbVAz.js

1import{_ as q}from"./B8bumXJy.js";import{q as T,c as v,a as N,b as U,o as p,d as h,e,f as x,i as E,h as y,H as B,a5 as I,g as i,K as L,F as k,r as C,t as u,L as F,n as G,w as V,_ as z}from"./D7a92jyZ.js";const D={class:"relative overflow-hidden bg-schedulewave-950 -mt-16 lg:-mt-18 pt-20 pb-14 sm:pt-28 sm:pb-20 lg:pt-32 lg:pb-28"},O={class:"relative z-10 px-4 mx-auto max-w-7xl sm:px-6 lg:px-8"},J={class:"text-center max-w-3xl mx-auto"},R={class:"inline-flex items-center gap-2 px-3 py-1 bg-white/10 text-white/90 rounded-full text-sm font-medium mb-5 backdrop-blur-sm"},Q=e("h1",{class:"text-2xl font-display text-white sm:text-4xl lg:text-5xl leading-[1.1] tracking-tight"},[y(" Brand Color "),e("br"),e("span",{class:"text-transparent bg-clip-text bg-gradient-to-r from-amber-300 via-pink-400 to-schedulewave-400"},"Palette Generator")],-1),K=e("p",{class:"mt-3 sm:mt-5 text-base text-white/60 sm:text-lg lg:text-xl max-w-xl mx-auto"}," Generate harmonious color palettes from your brand color. Check contrast ratios and copy hex codes. ",-1),X={class:"py-10 sm:py-16 lg:py-20 bg-white"},Y={class:"px-4 mx-auto max-w-4xl sm:px-6 lg:px-8"},Z={class:"flex flex-wrap items-end gap-4 mb-10"},ee=e("label",{class:"block text-sm font-bold text-gray-700 mb-2"},"Brand Color",-1),te={class:"flex items-center gap-3"},oe={class:"space-y-8"},se={class:"text-sm font-bold text-gray-900 mb-3"},ae={class:"flex rounded-2xl overflow-hidden border border-gray-200 h-24 sm:h-32"},re=["onClick"],ne={class:"absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/20"},le={class:"text-xs font-bold text-white bg-black/50 px-2 py-1 rounded-md"},ie={class:"flex mt-2"},ce={class:"mt-12"},de=e("h3",{class:"text-sm font-bold text-gray-900 mb-4"},"Contrast Check (WCAG)",-1),me={class:"grid sm:grid-cols-2 gap-4"},pe={class:"rounded-xl border border-gray-200 p-4 flex items-center gap-4"},he=e("p",{class:"text-sm font-bold text-gray-900"},"White text on brand",-1),ue={class:"rounded-xl border border-gray-200 p-4 flex items-center gap-4"},xe=e("p",{class:"text-sm font-bold text-gray-900"},"Black text on brand",-1),ge={class:"mt-10 bg-schedulewave-950 rounded-2xl p-6 sm:p-8 flex flex-col sm:flex-row items-center justify-between gap-4"},be={class:"flex items-center gap-4"},fe={class:"w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center flex-shrink-0"},ye=e("p",{class:"text-white/80 text-sm"},[e("span",{class:"font-bold text-white"},"Stay on-brand."),y(" ScheduleWave keeps your visual identity consistent across all platforms. ")],-1),we=e("section",{class:"py-10 sm:py-16 lg:py-20 bg-gray-50 relative overflow-hidden"},null,-1),Ce={__name:"brand-color-palette-generator",setup(_e){const c=T("#3B82F6"),w=T(null),W=()=>{c.value="#"+Math.floor(Math.random()*16777215).toString(16).padStart(6,"0")};let M=null;const H=async a=>{try{await navigator.clipboard.writeText(a),w.value=a,clearTimeout(M),M=setTimeout(()=>{w.value=null},1500)}catch{}},j=a=>{let o=parseInt(a.slice(1,3),16)/255,t=parseInt(a.slice(3,5),16)/255,s=parseInt(a.slice(5,7),16)/255;const l=Math.max(o,t,s),r=Math.min(o,t,s);let d=0,m=0,_=(l+r)/2;if(l!==r){const f=l-r;m=_>.5?f/(2-l-r):f/(l+r),l===o?d=((t-s)/f+(t<s?6:0))/6:l===t?d=((s-o)/f+2)/6:d=((o-t)/f+4)/6}return[d*360,m*100,_*100]},n=(a,o,t)=>{a=(a%360+360)%360,o=Math.max(0,Math.min(100,o))/100,t=Math.max(0,Math.min(100,t))/100;const s=o*Math.min(t,1-t),l=r=>{const d=(r+a/30)%12,m=t-s*Math.max(Math.min(d-3,9-d,1),-1);return Math.round(255*m).toString(16).padStart(2,"0")};return`#${l(0)}${l(8)}${l(4)}`.toUpperCase()},P=v(()=>{const a=c.value;if(!/^#[0-9A-Fa-f]{6}$/.test(a))return[];const[o,t,s]=j(a);return[{name:"Complementary",colors:[a,n(o+180,t,s),n(o,t,Math.min(s+20,95)),n(o+180,t,Math.min(s+20,95)),n(o,t*.3,95)]},{name:"Analogous",colors:[n(o-30,t,s),n(o-15,t,s),a,n(o+15,t,s),n(o+30,t,s)]},{name:"Triadic",colors:[a,n(o+120,t,s),n(o+240,t,s),n(o,t*.4,Math.min(s+30,95)),n(o,t,Math.max(s-20,10))]},{name:"Split Complementary",colors:[a,n(o+150,t,s),n(o+210,t,s),n(o,t*.3,Math.min(s+25,95)),n(o+180,t*.5,s)]},{name:"Monochromatic",colors:[n(o,t,Math.max(s-30,5)),n(o,t,Math.max(s-15,10)),a,n(o,t*.7,Math.min(s+15,90)),n(o,t*.3,Math.min(s+30,95))]}]}),A=a=>{const o=parseInt(a.slice(1,3),16)/255,t=parseInt(a.slice(3,5),16)/255,s=parseInt(a.slice(5,7),16)/255,l=r=>r<=.03928?r/12.92:Math.pow((r+.055)/1.055,2.4);return .2126*l(o)+.7152*l(t)+.0722*l(s)},S=(a,o)=>{const t=A(a),s=A(o),l=Math.max(t,s),r=Math.min(t,s);return(l+.05)/(r+.05)},g=v(()=>/^#[0-9A-Fa-f]{6}$/.test(c.value)?S(c.value,"#FFFFFF"):0),b=v(()=>/^#[0-9A-Fa-f]{6}$/.test(c.value)?S(c.value,"#000000"):0),$=[{question:"What is a color palette?",answer:"A color palette is a set of colors that work harmoniously together. For social media branding, a consistent palette makes your content instantly recognizable in a feed. Most brands use 3-5 colors: a primary brand color, 1-2 accent colors, and neutral tones for text and backgrounds."},{question:"What do the palette types mean?",answer:"Complementary uses colors opposite on the color wheel for high contrast. Analogou

1s uses neighboring colors for a harmonious, cohesive look. Triadic uses three evenly spaced colors for vibrant variety. Split complementary is a softer version of complementary. Monochromatic uses variations of one hue for a clean, sophisticated look."},{question:"What is WCAG contrast?",answer:"WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for readable text. A ratio of 4.5:1 passes 'AA' for normal text, 3:1 passes for large text. This matters for social media graphics — text overlaid on colored backgrounds needs sufficient contrast to be readable."},{question:"How do I choose the right palette type?",answer:"For a professional, corporate look: monochromatic or analogous. For energetic, attention-grabbing content: complementary or triadic. For balanced variety without clashing: split complementary. Start with your brand's primary color and let the math generate harmonious options."}];return N({title:"Free Brand Color Palette Generator — Social Media Colors | ScheduleWave",description:"Generate harmonious color palettes from your brand color. Includes complementary, analogous, triadic, and monochromatic palettes with WCAG contrast checking. Free.",ogTitle:"Free Brand Color Palette Generator | ScheduleWave",ogDescription:"Generate harmonious color palettes from your brand color with contrast checking.",ogImage:"https://www.schedulewave.com/og-image.png",twitterCard:"summary_large_image"}),U({script:[{type:"application/ld+json",innerHTML:JSON.stringify({"@context":"https://schema.org","@type":"FAQPage",mainEntity:$.map(a=>({"@type":"Question",name:a.question,acceptedAnswer:{"@type":"Answer",text:a.answer}}))})},{type:"application/ld+json",innerHTML:JSON.stringify({"@context":"https://schema.org","@type":"WebApplication",name:"Brand Color Palette Generator",url:"https://www.schedulewave.com/brand-color-palette-generator",applicationCategory:"UtilityApplication",operatingSystem:"Any",offers:{"@type":"Offer",price:"0",priceCurrency:"USD"}})},{type:"application/ld+json",innerHTML:JSON.stringify({"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:[{"@type":"ListItem",position:1,name:"Home",item:"https://www.schedulewave.com"},{"@type":"ListItem",position:2,name:"Explore",item:"https://www.schedulewave.com/explore"},{"@type":"ListItem",position:3,name:"Free Tools",item:"https://www.schedulewave.com/free-tools"},{"@type":"ListItem",position:4,name:"Brand Color Palette Generator",item:"https://www.schedulewave.com/brand-color-palette-generator"}]})}]}),(a,o)=>{const t=q,s=E,l=z;return p(),h("div",null,[e("section",D,[e("div",O,[e("div",J,[x(t,{crumbs:[{label:"Home",to:"/"},{label:"Explore",to:"/explore"},{label:"Free Tools",to:"/free-tools"}],current:"Brand Color Palette Generator",dark:!0,class:"justify-center mb-5"}),e("div",R,[x(s,{name:"i-heroicons-wrench-screwdriver",class:"w-4 h-4"}),y(" Free Tool ")]),Q,K])])]),e("section",X,[e("div",Y,[e("div",Z,[e("div",null,[ee,e("div",te,[B(e("input",{"onUpdate:modelValue":o[0]||(o[0]=r=>L(c)?c.value=r:null),type:"color",class:"w-12 h-12 rounded-xl border border-gray-200 cursor-pointer p-1"},null,512),[[I,i(c)]]),B(e("input",{"onUpdate:modelValue":o[1]||(o[1]=r=>L(c)?c.value=r:null),type:"text",placeholder:"#3B82F6",maxlength:"7",class:"w-32 px-4 py-3 text-base text-gray-900 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-schedulewave-500/20 focus:border-schedulewave-300 transition-colors font-mono"},null,512),[[I,i(c)]])])]),e("button",{onClick:W,class:"px-4 py-3 text-sm font-semibold text-gray-600 bg-white border border-gray-200 rounded-xl hover:border-gray-300 transition-all flex items-center gap-1.5"},[x(s,{name:"i-heroicons-sparkles",class:"w-4 h-4"}),y(" Random ")])]),e("div",oe,[(p(!0),h(k,null,C(i(P),r=>(p(),h("div",{key:r.name},[e("h3",se,u(r.name),1),e("div",ae,[(p(!0),h(k,null,C(r.colors,(d,m)=>(p(),h("div",{key:m,class:"flex-1 relative group cursor-pointer",style:F({backgroundColor:d}),onClick:_=>H(d)},[e("div",ne,[e("span",le,u(i(w)===d?"Copied!":d),1)])],12,re))),128))]),e("div",ie,[(p(!0),h(k,null,C(r.colors,(d,m)=>(p(),h("span",{key:"label-"+m,class:"flex-1 text-center text-xs text-gray-500 font-mono"},u(d),1))),128))])]))),128))]),e("div",ce,[de,e("div",me,[e("div",pe,[e("div",{class:"w-16 h-16 rounded-lg flex items-center justify-center text-lg font-bold",style:F({backgroundColor:i(c),color:"#FFFFFF"})},"Aa",4),e("div",null,[he,e("p",{class:G(["text-xs mt-0.5",i(g)>=4.5?"text-green-600":i(g)>=3?"text-amber-600":"text-red-500"])},u(i(g).toFixed(2))+":1 — "+u(i(g)>=4.5?"AA Pass":i(g)>=3?"AA Large only":"Fail"),3)])]),e("div",ue,[e("div",{class:"w-16 h-16 rounded-lg flex items-center justify-center text-lg font-bold",style:F({backgroundColor:i(c),color:"#000000"})},"Aa",4),e("div",null,[xe,e("p",{class:G(["text-xs mt-0.5",i(b)>=4.5?"text-green-600":i(b)>=3?"text-amber-600":"text-red-500"])},u(i(b).toFixed(2))+":1 — "+u(i(b)>=4.5?"AA Pass":i(b)>=3?"AA Large only":"Fail"),3)])])])]),e("div",ge,[e("div",be,[e("div",fe,[x(s,{name:"i-heroicons-swatch",class:"w-5 h-5 text-white"})]),ye]),x(l,{to:"/auth/register",class:"inline-flex items-center justify-center px-6 py-2.5 text-sm font-semibold text-schedulewave-950 bg-gradient-to-r from-amber-300 to-amber-400 rounded-xl hover:from-amber-400 hover:to-amber-500 shadow-lg shadow-amber-500/20 transition-all whitespace-nowrap flex-shrink-0"},{default:V(()=>[y(" Try Free "),x(s,{name:"i-heroicons-arrow-right",class:"w-4 h-4 ml-1.5"})]),_:1})])])]),we])}}};export{Ce as default};