1import{_ as Ze}from"./DPIaFIMc.js";import{_ as et}from"./B8USrux4.js";import{_ as tt}from"./CdnNuUX_.js";import{_ as at}from"./8fY8EC0V.js";import{_ as ot}from"./CXwnfpox.js";import{_ as st}from"./CYwGAoYU.js";import{_ as it}from"./CnzqtAtd.js";import{d as rt,s as nt,Y as lt,$ as ct,P as ut,A as dt,M as pt,N as mt,b as bt,C as ht,w as He,y as o,E as v,c as re,o as u,f as a,D as S,t as n,e as d,F as w,r as H,k as ne,J as le,S as ze,g as p,j as y,x as X,K as Te}from"./CkpM57L6.js";import{u as vt}from"./BgwjXCoU.js";import"./B0zWc29K.js";import"./DXrLEPCz.js";import"./DlAUqK2U.js";const _t={class:"space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500"},ft={class:"flex flex-wrap items-center gap-3"},gt={class:"join"},yt={key:0,class:"join"},Ct=["onClick"],kt=["value"],xt={class:"space-y-6"},qt={class:"flex flex-wrap items-center gap-3"},St={class:"kbd kbd-xs"},wt={class:"text-sm text-base-content/60"},Ht={class:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5"},zt={class:"flex h-36 w-full"},Tt=["title","onClick"],Lt={class:"text-[0.7rem] font-bold font-mono px-1.5 py-0.5 rounded",style:{backgroundColor:"rgba(0,0,0,0.45)",color:"#fff"}},Et={class:"flex items-center justify-between px-4 py-3"},At={class:"font-mono text-xs text-base-content/60 tracking-wide truncate"},Gt=["onClick"],jt={class:"flex justify-center pt-2"},Ot={class:"space-y-6"},Pt={class:"flex flex-wrap items-center gap-2"},$t={class:"kbd kbd-xs"},Nt=["disabled"],Rt={class:"flex items-center gap-3 flex-wrap"},Mt={class:"text-xs font-bold uppercase tracking-wider text-base-content/70"},Vt={class:"join"},Bt=["onClick"],Dt={class:"flex flex-col items-center gap-2.5 mb-3"},Ut=["title","onClick"],Xt=["title","onClick"],Kt=["title","onClick"],Ft=["title","onClick"],It={key:0,class:"inline-flex items-center gap-1"},Jt={key:1},Wt={key:0,class:"text-[0.7rem] mt-1 opacity-85"},Qt={key:0,class:"bg-base-200/30 p-5 rounded-2xl border border-base-content/10 space-y-3"},Yt={class:"flex items-center justify-between flex-wrap gap-2"},Zt={class:"text-sm font-bold uppercase tracking-wider text-base-content/85 flex items-center gap-2"},ea={class:"flex items-center gap-2"},ta={class:"join"},aa={class:"grid grid-cols-5 sm:grid-cols-10 gap-1.5"},oa=["title","onClick"],sa={key:0,class:"absolute top-0 left-0 right-0 h-12 bg-success/90 text-success-content grid place-items-center text-[0.65rem] font-bold gap-0.5"},ia={class:"text-[0.65rem] font-bold py-0.5 text-base-content/70"},ra={class:"text-[0.6rem] font-mono pb-1 text-base-content/50 truncate px-1"},na={class:"grid sm:grid-cols-2 gap-4"},la={class:"bg-base-200/30 p-4 rounded-2xl border border-base-content/10"},ca={class:"text-xs font-bold uppercase tracking-wider text-base-content/70 mb-2"},ua={class:"join"},da=["onClick"],pa={class:"bg-base-200/30 p-4 rounded-2xl border border-base-content/10"},ma={class:"text-xs font-bold uppercase tracking-wider text-base-content/70 mb-2"},ba={class:"bg-base-200/30 p-4 rounded-2xl border border-base-content/10 space-y-3"},ha={class:"flex items-center justify-between flex-wrap gap-2"},va={class:"text-xs font-bold uppercase tracking-wider text-base-content/70"},_a={value:"none"},fa={value:"protan"},ga={value:"deutan"},ya={value:"tritan"},Ca={key:0,class:"text-sm text-base-content/50"},ka={class:"bg-base-200/30 p-5 rounded-2xl border border-base-content/10 space-y-3"},xa={class:"text-sm font-bold uppercase tracking-wider text-base-content/85"},qa={class:"flex items-center gap-2 flex-wrap"},Sa={class:"join"},wa=["onClick"],Ha={class:"bg-base-100 rounded-xl p-4 text-xs font-mono overflow-x-auto border border-base-content/10 max-h-48 text-base-content/80"},za={class:"space-y-8"},Ta={class:"text-base-content/80 leading-relaxed"},La={class:"text-2xl font-bold text-base-content mb-3 flex items-center gap-2"},Ea={class:"mb-6 text-base-content/85 leading-relaxed"},Aa={class:"grid sm:grid-cols-2 gap-4"},Ga={class:"shrink-0 mt-0.5"},ja={class:"text-base-content/80 text-sm leading-relaxed"},Oa="https://www.freetool.dev",Pa=9,$a=rt({__name:"color-palette-generator",setup(ve){const{t:e,locale:Ee}=nt({useScope:"local"}),W=lt(),_e=ct(),ce=re(()=>`${Oa}${W.path}`),{status:Ae}=ut("https://unpkg.com/culori@4/bundled/culori.min.js",{trigger:"client"}),ue=re(()=>Ae.value==="loaded");function M(){return typeof window<"u"&&window.culori||null}const Ge={pastel:{s:[.22,.5],l:[.8,.93]},vibrant:{s:[.7,.96],l:[.52,.7]},dark:{s:[.28,.72],l:[.16,.36]},vintage:{s:[.18,.46],l:[.42,.7],hueSectors:[[20,55],[55,95],[170,210],[340,20]]},earth:{s:[.28,.56],l:[.32,.64],hueSectors:[[25,60],[70,140],[140,175]]}},je=["pastel","vibrant","dark","vintage","earth"],f=(s,t)=>Math.random()*(t-s)+s,Oe=s=>(s%360+360)%360,E=s=>Math.max(0,Math.min(1,s));function fe(s,t,r,l){const k=M();if(!k)return Array.from({length:t},()=>"#cccccc");
1const b=Ge[l],g=r==="theme",$=[{s:[.75,.95],l:[.45,.65]},{s:[.4,.65],l:[.5,.72]},{s:[.55,.85],l:[.28,.48]},{s:[.3,.55],l:[.62,.82]},{s:[.6,.9],l:[.4,.7]}],T=$[Math.floor(Math.random()*$.length)];let i=f(0,360);if(g&&b.hueSectors?.length){const h=b.hueSectors[Math.floor(Math.random()*b.hueSectors.length)],[x,q]=h;i=x<=q?f(x,q):f(x,q+360)}const c=g?i:f(0,360),_=g?f(b.s[0],b.s[1]):f(T.s[0],T.s[1]),D=g?f(b.l[0],b.l[1]):f(T.l[0],T.l[1]),be=[["analogous",3],["monochromatic",3],["triadic",2],["complementary",2]];function We(){const h=be.reduce((q,[,L])=>q+L,0);let x=Math.random()*h;for(const[q,L]of be)if((x-=L)<0)return q;return"analogous"}const Qe=s==="auto"&&!g?We():s,we=[];for(let h=0;h<t;h++){let x=c,q=_,L=D;switch(Qe){case"analogous":x=c+(h-Math.floor(t/2))*20;break;case"monochromatic":{const he=!g&&c>=70&&c<=105?.45:.26;L=g?b.l[0]+h/Math.max(1,t-1)*(b.l[1]-b.l[0]):.88-h*((.88-he)/Math.max(1,t-1));break}case"complementary":{x=c+h%2*180;const U=h%2===1;L=E(D+(h<2?0:.12*(h-1))+(U?-.12:0)),U&&(q=E(_*.82));break}case"triadic":x=c+h%3*120,L=E(D+(h>=3?.1:0));break;case"tetradic":{x=c+h%4*90,L=E(D+([.14,-.04,-.12,-.22][h%4]??0)),q=E(_*.62);break}default:x=c+f(-22,22)+(h-(t-1)/2)*f(8,22);{const U=b.l[1]-b.l[0],he=t>1?h/(t-1):.5;L=E(b.l[1]-he*U+f(-.04,.04)),q=E(f(b.s[0],b.s[1]))}}const Ye={mode:"okhsl",h:Oe(x),s:E(q),l:E(L)};we.push(k.formatHex(k.clampChroma(Ye,"oklch"))||"#cccccc")}return we}function Q(s,t){const r=M();if(!r||t==="hex")return s.toUpperCase();if(t==="rgb"){const{r:g,g:$,b:T}=r.rgb(s);return`rgb(${Math.round(g*255)}, ${Math.round($*255)}, ${Math.round(T*255)})`}if(t==="hsl"){const{h:g=0,s:$,l:T}=r.hsl(s);return`hsl(${Math.round(g)}, ${Math.round($*100)}%, ${Math.round(T*100)}%)`}const{l,c:k,h:b=0}=r.oklch(s);return`oklch(${l.toFixed(3)} ${k.toFixed(3)} ${Math.round(b)})`}function ge(s){const t=M();return t&&t.wcagContrast(s,"#ffffff")>=t.wcagContrast(s,"#111111")?"#ffffff":"#111111"}function ye(s){const t=M();if(!t)return{pass:!1,ratio:"â"};const r=ge(s),l=t.wcagContrast(s,r);return{pass:l>=4.5,ratio:l.toFixed(1)}}const Pe=[50,100,200,300,400,500,600,700,800,900];function Ce(s){const t=M();if(!t)return[{label:500,hex:s}];const r=t.okhsl(s),l={50:.96,100:.92,200:.84,300:.74,400:.64,500:.54,600:.45,700:.36,800:.27,900:.18};return Pe.map(k=>{const b={mode:"okhsl",h:r.h??0,s:r.s,l:l[k]};return{label:k,hex:(t.formatHex(t.clampChroma(b,"oklch"))||"#cccccc").toUpperCase()}})}function $e(s,t){const r=Ce(s);return t==="tailwind"?`{ 2`+r.map(l=>` ${l.label}: '${l.hex}',`).join(` 3`)+` 4}`:`:root { 5`+r.map(l=>` --shade-${l.label}: ${l.hex};`).join(` 6`)+` 7}`}function Ne(s,t){const r=M();if(!r||t==="none")return s;const l=t==="protan"?r.filterDeficiencyProt(1):t==="deutan"?r.filterDeficiencyDeuter(1):r.filterDeficiencyTrit(1);return r.formatHex(l(s))}const de=v([]);function G(s){if(!ue.value)return;const t=[];for(let r=0;r<Pa;r++){const l=Math.floor(f(4,6.99));t.push(fe(Y.value,l,N.value,ee.value))}de.value=s?t:[...de.value,...t]}const C=v("gallery"),m=v([]),K=v(5),Y=v("auto"),V=v("hex"),F=v(!1),Z=v("none"),z=v(null),I=v("css"),j=v(null),O=v(null),pe=v(null);function Re(s){j.value=s,O.value=null,pe.value?.open(m.value[s]?.hex??"")}function Me(s){const t=j.value;if(t===null)return;A.push(m.value.map(l=>({...l}))),A.length>40&&A.shift();const r=m.value[t];r&&(r.hex=s),j.value=null,O.value=null,ae()}function Ve(s){O.value=s}function B(){j.value=null,O.value=null,pe.value?.close()}const N=v("random"),ee=v("pastel"),A=[];function ke(s){m.value=s.map(t=>({hex:t,locked:!1})),K.value=s.length,A.length=0,z.value=null,B(),P.value=null,C.value="editor",ae()}function Be(){C.value="gallery",P.value=null,B(),_e.replace({query:{...W.query,colors:void 0}})}function R(){if(!ue.value)return;A.push(m.value.map(t=>({...t}))),A.length>40&&A.shift();const s=fe(Y.value,K.value,N.value,ee.value);m.value=s.map((t,r)=>m.value[r]?.locked?m.value[r]:{hex:t,locked:!1}),z.value=null,B(),ae()}function xe(){const s=A.pop();s&&(m.value=s,K.value=s.length,z.value=null,B(),ae())}function De(s){const t=m.value[s];t&&(t.locked=!t.locked)}function Ue(s){K.value=s,R()}function Xe(s){z.value=z.value===s?null:s}const P=v(null);let J=null;async function te(s){try{await navigator.clipboard.writeText(s),P.value=s,J&&clearTimeout(J),J=setTimeout(()=>{P.value=null},1200)}catch(t){console.error("Failed to copy:",t)}}function ae(){if(C.value!=="editor"||!m.value.length)return;const s=m.value.map(t=>t.hex.replace("#","")).join("-");_e.replace({query:{...W.query,colors:s}})}const qe=re(()=>{if(!m.value.length)return"";const s=m.value.map(t=>t.hex.replace("#","")).join("-");return`${ce.value}?colors=${s}`}),oe=v(!1);async function Ke(){if(qe.value)try{await navigator.clipboard.writeText(qe.value),oe.value=!0,setTimeout(()=>{oe.value=!1},1500)}catch(s){console.error("Failed to copy share URL:",s)}}const se=v("css"),ie=v(!1),me=re(()=>{const s=m.value.map(r=>r.hex);if(!s.length)return"";const t=se.value==="hex"?s.map(r=>r.toUpperCase()):s.map(r=>Q(r,V.value));switch(se.value){case"hex":return t.join(` 8`);case"css":return`:root { 9`+t.map((r,l)=>` --color-${l+1}: ${r};`).join(` 10`)+` 11}`;case"scss":return t.map((r,l)=>`$color-${l+1}: ${r};`).join(` 12`);case"json":return JSON.stringify(t.reduce((r,l,k)=>({...r,[`color-${k+1}`]:l}),{}),null,2);case"tailwind":return`module.exports = { 13 theme: { 14 extend: { 15 colors: { 16`+t.map((r,l)=>` 'brand-${l+1}': '${r}',`).join(` 17`)+` 18 } 19 } 20 } 21}`;default:return""}});async function Fe(){if(me.value)try{await navigator.clipboard.writeText(me.value),ie.value=!0,setTimeout(()=>{ie.value=!1},1500)}catch(s){console.error("Failed to copy export:",s)}}dt(ue,s=>{if(!s)return;const t=W.query.colors;if(typeof t=="string"&&t.trim()){const r=t.split("-").map(l=>`#${l.replace(/[^0-9a-fA-F]/g,"")}`).filter(l=>l.length===7);if(r.length>=2){ke(r);return}}G(!0)},{immediate:!0});function Se(s){const t=s.target?.tagName;/INPUT|SELECT|TEXTAREA/.test(t)||(s.code==="Space"&&(s.preventDefault(),C.value==="editor"?R():G(!0)),(s.metaKey||s.ctrlKey)&&s.key==="z"&&C.value==="editor"&&(s.preventDefault(),xe()))}pt(()=>window.addEventListener("keydown",Se)),mt(()=>{window.removeEventListener("keydown",Se),J&&clearTimeout(J)}
21),vt({name:e("title"),description:e("meta"),features:[e("feature_1"),e("feature_2"),e("feature_3"),e("feature_4")],faq:[{question:e("faq1q"),answer:e("faq1a")},{question:e("faq2q"),answer:e("faq2a")},{question:e("faq3q"),answer:e("faq3a")},{question:e("faq5q"),answer:e("faq5a")}]}),bt(()=>({htmlAttrs:{lang:Ee.value},title:e("pageTitle"),link:[{rel:"canonical",href:ce.value}],meta:[{name:"description",content:e("meta")},{property:"og:title",content:e("ogTitle")},{property:"og:description",content:e("meta")},{property:"og:type",content:"website"},{property:"og:locale",content:e("ogLocale")},{property:"og:url",content:ce.value},{name:"twitter:card",content:"summary"},{name:"twitter:title",content:e("ogTitle")},{name:"twitter:description",content:e("meta")}]}));const Ie=["auto","analogous","monochromatic","complementary","triadic","tetradic"],Je=[3,4,5,6,7];return(s,t)=>{const r=Ze,l=et,k=tt,b=at,g=ot,$=st,T=it;return u(),ht(T,{title:o(e)("title"),description:o(e)("meta"),"show-ads":C.value==="editor",breadcrumb:{label:o(e)("bc"),to:"color-tools"},"see-also-links":[{label:o(e)("see1"),to:"color-editor"},{label:o(e)("see2"),to:"dominant-colors-of-the-image"},{label:o(e)("see3"),to:"random-colors"},{label:o(e)("see4"),to:"color-converter"}]},{info:He(()=>[a("div",za,[a("p",Ta,n(o(e)("intro")),1),p(k,{title:o(e)("features_title"),items:[o(e)("feature_1"),o(e)("feature_2"),o(e)("feature_3"),o(e)("feature_4")]},null,8,["title","items"]),p(b,{title:o(e)("apps_title"),items:[o(e)("app1"),o(e)("app2"),o(e)("app3"),o(e)("app4"),o(e)("app5")]},null,8,["title","items"]),p(g,{title:o(e)("how_title"),items:[{title:o(e)("step_1_t"),description:o(e)("step_1_d")},{title:o(e)("step_2_t"),description:o(e)("step_2_d")},{title:o(e)("step_3_t"),description:o(e)("step_3_d")}]},null,8,["title","items"]),a("div",null,[a("h2",La,[p(r,{name:"heroicons:information-circle-20-solid",class:"text-primary w-6 h-6","aria-hidden":"true"}),y(" "+n(o(e)("tech_title")),1)]),a("p",Ea,n(o(e)("tech_desc")),1),a("div",Aa,[(u(!0),d(w,null,H([o(e)("tech1"),o(e)("tech2"),o(e)("tech3"),o(e)("tech4")],(i,c)=>(u(),d("div",{key:c,class:"bg-base-200/40 p-5 rounded-2xl border border-base-content/10 flex items-start gap-4"},[a("div",Ga,[p(r,{name:"heroicons:information-circle-20-solid",class:"text-info w-5 h-5"})]),a("span",ja,n(i),1)]))),128))])]),p($,{title:o(e)("faq_title"),items:[{question:o(e)("faq1q"),answer:o(e)("faq1a")},{question:o(e)("faq2q"),answer:o(e)("faq2a")},{question:o(e)("faq3q"),answer:o(e)("faq3a")},{question:o(e)("faq5q"),answer:o(e)("faq5a")}]},null,8,["title","items"])])]),default:He(()=>[a("div",_t,[a("div",ft,[a("div",gt,[a("button",{type:"button",class:S(["btn btn-sm join-item",N.value==="random"?"btn-primary":"btn-outline"]),onClick:t[0]||(t[0]=i=>{N.value="random",C.value==="editor"?R():G(!0)})},n(o(e)("mode_random")),3),a("button",{type:"button",class:S(["btn btn-sm join-item",N.value==="theme"?"btn-primary":"btn-outline"]),onClick:t[1]||(t[1]=i=>{N.value="theme",C.value==="editor"?R():G(!0)})},n(o(e)("mode_theme")),3)]),N.value==="theme"?(u(),d("div",yt,[(u(),d(w,null,H(je,i=>a("button",{key:i,type:"button",class:S(["btn btn-xs sm:btn-sm join-item",ee.value===i?"btn-secondary":"btn-outline"]),onClick:c=>{ee.value=i,C.value==="editor"?R():G(!0)}},n(o(e)(`theme_${i}`)),11,Ct)),64))])):ne("",!0),le(a("select",{"onUpdate:modelValue":t[2]||(t[2]=i=>Y.value=i),class:"select select-sm select-bordered rounded-xl",onChange:t[3]||(t[3]=i=>C.value==="editor"?R():G(!0))},[(u(),d(w,null,H(Ie,i=>a("option",{key:i,value:i},n(o(e)(`harmony_${i}`)),9,kt)),64))],544),[[ze,Y.value]])]),le(a("div",xt,[a("div",qt,[a("button",{type:"button",class:"btn btn-sm btn-primary gap-2",onClick:t[4]||(t[4]=i=>G(!0))},[p(r,{name:"material-symbols:shuffle-rounded",class:"w-4 h-4"}),y(" "+n(o(e)("gen_new"))+" ",1),a("kbd",St,n(o(e)("space")),1)]),a("p",wt,n(o(e)("gallery_hint")),1)]),a("div",Ht,[(u(!0),d(w,null,H(de.value,(i,c)=>(u(),d("div",{key:c,class:"rounded-2xl overflow-hidden border border-base-content/10 bg-base-200/30 shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-200"},[a("div",zt,[(u(!0),d(w,null,H(i,(_,D)=>(u(),d("button",{key:D,type:"button",class:"relative flex-1 cursor-pointer group/sw",style:X({backgroundColor:_}),title:o(e)("click_to_copy"),onClick:be=>te(_.toUpperCase())},[a("span",{class:S(["absolute inset-0 grid place-items-center transition-opacity duration-150",P.value===_.toUpperCase()?"opacity-100":"opacity-0 group-hover/sw:opacity-100"])},[a("span",Lt,n(P.value===_.toUpperCase()?o(e)("copied"):_.toUpperCase().replace("#","")),1)],2)],12,Tt))),128))]),a("div",Et,[a("span",At,n(i.slice(0,3).map(_=>_.toUpperCase().replace("#","")).join(" · "))+n(i.length>3?" +"+(i.length-3):""),1),a("button",{type:"button",class:"btn btn-xs btn-outline btn-primary gap-1.5",onClick:_=>ke(i)},[p(r,{name:"mdi:tune-vertical",class:"w-3.5 h-3.5"}),y(" "+n(o(e)("edit")),1)],8,Gt)])]))),128))]),a("div",jt,[a("button",{type:"button",class:"btn btn-outline gap-2",onClick:t[5]||(t[5]=i=>G(!1))},[y(n(o(e)("load_more"))+" ",1),p(r,{name:"material-symbols:keyboard-arrow-down-rounded",class:"w-5 h-5"})])])],512),[[Te,C.value==="gallery"]]),le(a("div",Ot,[a("div",Pt,[a("button",{type:"button",class:"btn btn-sm btn-ghost gap-1.5",onClick:Be},[p(r,{name:"material-symbols:arrow-back-rounded",class:"w-4 h-4"}),y(" "+n(o(e)("back")),1)]),a("button",{type:"button",class:"btn btn-sm btn-primary gap-2",onClick:R},[p(r,{name:"material-symbols:shuffle-rounded",class:"w-4 h-4"}),y(" "+n(o(e)("generate"))+" ",1),a("kbd",$t,n(o(e)("space")),1)]),a("button",{type:"button",class:"btn btn-sm btn-outline gap-1.5",disabled:!A.length,onClick:xe},[p(r,{name:"material-symbols:undo-rounded",class:"w-4 h-4"}
21),y(" "+n(o(e)("undo")),1)],8,Nt),a("button",{type:"button",class:"btn btn-sm btn-outline btn-secondary gap-1.5 ml-auto",onClick:Ke},[p(r,{name:oe.value?"material-symbols:check-rounded":"material-symbols:link-rounded",class:"w-4 h-4"},null,8,["name"]),y(" "+n(oe.value?o(e)("copied"):o(e)("share")),1)])]),a("div",Rt,[a("span",Mt,n(o(e)("count_label")),1),a("div",Vt,[(u(),d(w,null,H(Je,i=>a("button",{key:i,type:"button",class:S(["btn btn-sm join-item",K.value===i?"btn-primary":"btn-outline"]),onClick:c=>Ue(i)},n(i),11,Bt)),64))])]),a("div",{class:"grid gap-0 rounded-2xl overflow-hidden shadow-lg",style:X({gridTemplateColumns:`repeat(${m.value.length}, minmax(0, 1fr))`})},[(u(!0),d(w,null,H(m.value,(i,c)=>(u(),d("div",{key:c,class:"relative flex flex-col items-center justify-end pb-6 min-h-[260px] sm:min-h-[340px]",style:X({backgroundColor:j.value===c&&O.value?O.value:i.hex,color:ge(j.value===c&&O.value?O.value:i.hex)})},[a("div",Dt,[a("button",{type:"button",class:"w-9 h-9 rounded-full grid place-items-center bg-black/15 hover:bg-black/30 backdrop-blur-sm transition-all",title:i.locked?o(e)("unlock"):o(e)("lock"),onClick:_=>De(c)},[p(r,{name:i.locked?"material-symbols:lock":"material-symbols:lock-open-outline",class:"w-4 h-4"},null,8,["name"])],8,Ut),a("button",{type:"button",class:S(["w-9 h-9 rounded-full grid place-items-center backdrop-blur-sm transition-all",z.value===c?"bg-black/35":"bg-black/15 hover:bg-black/30"]),title:o(e)("shades"),onClick:_=>Xe(c)},[p(r,{name:"material-symbols:gradient",class:"w-4 h-4"})],10,Xt),a("button",{type:"button",class:S(["w-9 h-9 rounded-full grid place-items-center backdrop-blur-sm transition-all",j.value===c?"bg-black/35":"bg-black/15 hover:bg-black/30"]),title:o(e)("edit_color"),onClick:_=>j.value===c?B():Re(c)},[p(r,{name:"material-symbols:edit-outline-rounded",class:"w-4 h-4"})],10,Kt)]),a("button",{type:"button",class:"font-mono font-bold tracking-wider px-2 py-1 rounded hover:bg-black/10 transition-colors cursor-pointer min-w-[5rem]",title:o(e)("click_to_copy"),onClick:_=>te(Q(i.hex,V.value))},[P.value===Q(i.hex,V.value)?(u(),d("span",It,[p(r,{name:"material-symbols:check-rounded",class:"w-4 h-4"}),y(" "+n(o(e)("copied")),1)])):(u(),d("span",Jt,n(Q(i.hex,V.value)),1))],8,Ft),F.value?(u(),d("div",Wt,n(ye(i.hex).pass?"AA â":"AA â")+" · "+n(ye(i.hex).ratio)+":1 ",1)):ne("",!0)],4))),128))],4),z.value!==null&&m.value[z.value]?(u(),d("div",Qt,[a("div",Yt,[a("p",Zt,[p(r,{name:"material-symbols:gradient",class:"w-4 h-4 text-primary"}),y(" "+n(o(e)("shades_title")),1)]),a("div",ea,[a("div",ta,[a("button",{type:"button",class:S(["btn btn-xs join-item",I.value==="css"?"btn-primary":"btn-outline"]),onClick:t[6]||(t[6]=i=>I.value="css")},"CSS",2),a("button",{type:"button",class:S(["btn btn-xs join-item",I.value==="tailwind"?"btn-primary":"btn-outline"]),onClick:t[7]||(t[7]=i=>I.value="tailwind")},"Tailwind",2)]),a("button",{type:"button",class:"btn btn-xs btn-secondary gap-1",onClick:t[8]||(t[8]=i=>te($e(m.value[z.value].hex,I.value)))},[p(r,{name:"material-symbols:content-copy-outline",class:"w-3.5 h-3.5"}),y(" "+n(o(e)("copy_ramp")),1)])])]),a("div",aa,[(u(!0),d(w,null,H(Ce(m.value[z.value].hex),i=>(u(),d("button",{key:i.label,type:"button",class:"relative flex flex-col items-stretch rounded-lg overflow-hidden border border-base-content/10 hover:ring-2 hover:ring-primary transition-all cursor-pointer",title:o(e)("click_to_copy"),onClick:c=>te(i.hex)},[a("span",{class:"h-12 w-full",style:X({backgroundColor:i.hex})},null,4),P.value===i.hex?(u(),d("span",sa,[p(r,{name:"material-symbols:check-rounded",class:"w-4 h-4"})])):ne("",!0),a("span",ia,n(i.label),1),a("span",ra,n(i.hex.replace("#","")),1)],8,oa))),128))])])):ne("",!0),a("div",na,[a("div",la,[a("p",ca,n(o(e)("format_label")),1),a("div",ua,[(u(),d(w,null,H(["hex","rgb","hsl","oklch"],i=>a("button",{key:i,type:"button",class:S(["btn btn-sm join-item uppercase",V.value===i?"btn-primary":"btn-outline"]),onClick:c=>V.value=i},n(i),11,da)),64))])]),a("div",pa,[a("p",ma,n(o(e)("contrast_label")),1),a("button",{type:"button",class:S(["btn btn-sm",F.value?"btn-primary":"btn-outline"]),onClick:t[9]||(t[9]=i=>F.value=!F.value)},[p(r,{name:"material-symbols:contrast",class:"w-4 h-4"}),y(" "+n(F.value?o(e)("contrast_on"):o(e)("contrast_off")),1)],2)])]),a("div",ba,[a("div",ha,[a("p",va,n(o(e)("cvd_label")),1),le(a("select",{"onUpdate:modelValue":t[10]||(t[10]=i=>Z.value=i),class:"select select-sm select-bordered rounded-lg"},[a("option",_a,n(o(e)("cvd_none")),1),a("option",fa,n(o(e)("cvd_protan")),1),a("option",ga,n(o(e)("cvd_deutan")),1
21),a("option",ya,n(o(e)("cvd_tritan")),1)],512),[[ze,Z.value]])]),Z.value==="none"?(u(),d("p",Ca,n(o(e)("cvd_hint")),1)):(u(),d("div",{key:1,class:"grid gap-0 rounded-xl overflow-hidden h-16",style:X({gridTemplateColumns:`repeat(${m.value.length}, minmax(0, 1fr))`})},[(u(!0),d(w,null,H(m.value,(i,c)=>(u(),d("div",{key:c,style:X({backgroundColor:Ne(i.hex,Z.value)})},null,4))),128))],4))]),a("div",ka,[a("p",xa,n(o(e)("export_label")),1),a("div",qa,[a("div",Sa,[(u(),d(w,null,H(["hex","css","scss","json","tailwind"],i=>a("button",{key:i,type:"button",class:S(["btn btn-xs sm:btn-sm join-item",se.value===i?"btn-primary":"btn-outline"]),onClick:c=>se.value=i},n(i==="css"?"CSS":i==="scss"?"SCSS":i==="json"?"JSON":i==="tailwind"?"Tailwind":"HEX"),11,wa)),64))]),a("button",{type:"button",class:"btn btn-sm btn-secondary gap-1.5 ml-auto",onClick:Fe},[p(r,{name:ie.value?"material-symbols:check-rounded":"material-symbols:content-copy-outline",class:"w-4 h-4"},null,8,["name"]),y(" "+n(ie.value?o(e)("copied"):o(e)("copy_all")),1)])]),a("pre",Ha,[a("code",null,n(me.value),1)])])],512),[[Te,C.value==="editor"]]),p(l,{ref_key:"editDialogRef",ref:pe,onConfirm:Me,onPreview:Ve,onCancel:B},null,512)])]),_:1},8,["title","description","show-ads","breadcrumb","see-also-links"])}}});function Le(ve){const e=ve;e.__i18n=e.__i18n||[],e.__i18n.push({locale:"",resource:{pt:{pageTitle:{t:0,b:{t:2,i:[{t:3}],s:"Gerador de Paleta de Cores Online â Paletas Aleatórias e Temáticas"}},ogTitle:{t:0,b:{t:2,i:[{t:3}],s:"Gerador de Paleta de Cores â Paletas Harmoniosas em HEX, RGB, HSL e OKLCH"}},ogLocale:{t:0,b:{t:2,i:[{t:3}],s:"pt_BR"}},title:{t:0,b:{t:2,i:[{t:3}],s:"Gerador de Paleta de Cores"}},bc:{t:0,b:{t:2,i:[{t:3}],s:"Ferramentas de Cores"}},meta:{t:0,b:{t:2,i:[{t:3}],s:"Crie paletas de cores harmoniosas online. Gere cores aleatórias ou por tema, trave as favoritas, veja tons, confira contraste e daltonismo e exporte em CSS, SCSS, JSON, Tailwind, HEX, RGB, HSL ou OKLCH."}},intro:{t:0,b:{t:2,i:[{t:3}],s:"Crie paletas de cores harmoniosas em segundos. Explore a galeria de paletas geradas automaticamente ou abra o editor para gerar variações, travar cores favoritas, ajustar a quantidade de cores e exportar para seus projetos. As cores são calculadas no espaço perceptual Okhsl, o que ajuda a manter tons visualmente equilibrados e evita distorções comuns do HSL tradicional."}},mode_random:{t:0,b:{t:2,i:[{t:3}],s:"Aleatórias"}},mode_theme:{t:0,b:{t:2,i:[{t:3}],s:"Por tema"}},theme_pastel:{t:0,b:{t:2,i:[{t:3}],s:"Pastel"}},theme_vibrant:{t:0,b:{t:2,i:[{t:3}],s:"Vibrante"}},theme_dark:{t:0,b:{t:2,i:[{t:3}],s:"Escura"}},theme_vintage:{t:0,b:{t:2,i:[{t:3}],s:"Vintage"}},theme_earth:{t:0,b:{t:2,i:[{t:3}],s:"Terrosa"}},harmony_auto:{t:0,b:{t:2,i:[{t:3}],s:"Automática"}},harmony_analogous:{t:0,b:{t:2,i:[{t:3}],s:"Análoga"}},harmony_monochromatic:{t:0,b:{t:2,i:[{t:3}],s:"Monocromática"}},harmony_complementary:{t:0,b:{t:2,i:[{t:3}],s:"Complementar"}},harmony_triadic:{t:0,b:{t:2,i:[{t:3}],s:"TrÃade"}},harmony_tetradic:{t:0,b:{t:2,i:[{t:3}],s:"Tétrade"}},gen_new:{t:0,b:{t:2,i:[{t:3}],s:"Gerar novas"}},gallery_hint:{t:0,b:{t:2,i:[{t:3}],s:"Clique em uma paleta para abrir no editor"}},load_more:{t:0,b:{t:2,i:[{t:3}],s:"Carregar mais"}},edit:{t:0,b:{t:2,i:[{t:3}],s:"Editar"}},space:{t:0,b:{t:2,i:[{t:3}],s:"espaço"}},back:{t:0,b:{t:2,i:[{t:3}],s:"Voltar"}},generate:{t:0,b:{t:2,i:[{t:3}],s:"Gerar"}},undo:{t:0,b:{t:2,i:[{t:3}],s:"Desfazer"}},share:{t:0,b:{t:2,i:[{t:3}],s:"Compartilhar"}},lock:{t:0,b:{t:2,i:[{t:3}],s:"Travar cor"}},unlock:{t:0,b:{t:2,i:[{t:3}],s:"Destravar cor"}},shades:{t:0,b:{t:2,i:[{t:3}],s:"Ver escala de cores"}},edit_color:{t:0,b:{t:2,i:[{t:3}],s:"Editar cor"}},count_label:{t:0,b:{t:2,i:[{t:3}],s:"Quantidade de cores"}},format_label:{t:0,b:{t:2,i:[{t:3}],s:"Formato"}},contrast_label:{t:0,b:{t:2,i:[{t:3}],s:"Contraste WCAG"}},contrast_on:{t:0,b:{t:2,i:[{t:3}],s:"Contraste ativo"}},contrast_off:{t:0,b:{t:2,i:[{t:3}],s:"Mostrar contraste"}},shades_title:{t:0,b:{t:2,i:[{t:3}],s:"Escala de cores da cor selecionada"}},copy_ramp:{t:0,b:{t:2,i:[{t:3}],s:"Copiar escala"}},cvd_label:{t:0,b:{t:2,i:[{t:3}],s:"Simulação de daltonismo"}},cvd_hint:{t:0,b:{t:2,i:[{t:3}],s:"Escolha um tipo de daltonismo para ver como a paleta aparece."}},cvd_none:{t:0,b:{t:2,i:[{t:3}],s:"Visão normal"}},cvd_protan:{t:0,b:{t:2,i:[{t:3}],s:"Protanopia"}},cvd_deutan:{t:0,b:{t:2,i:[{t:3}],s:"Deuteranopia"}},cvd_tritan:{t:0,b:{t:2,i:[{t:3}],s:"Tritanopia"}},export_label:{t:0,b:{t:2,i:[{t:3}],s:"Exportar paleta"}}
21,copy_all:{t:0,b:{t:2,i:[{t:3}],s:"Copiar"}},click_to_copy:{t:0,b:{t:2,i:[{t:3}],s:"Clique para copiar"}},copied:{t:0,b:{t:2,i:[{t:3}],s:"Copiado!"}},features_title:{t:0,b:{t:2,i:[{t:3}],s:"Principais recursos"}},feature_1:{t:0,b:{t:2,i:[{t:3}],s:"Gere paletas aleatórias ou por tema, como pastel, vibrante, escura, vintage e terrosa"}},feature_2:{t:0,b:{t:2,i:[{t:3}],s:"Trave cores favoritas, gere novas variações e ajuste a quantidade de cores da paleta"}},feature_3:{t:0,b:{t:2,i:[{t:3}],s:"Veja tons perceptuais, confira contraste WCAG e simule daltonismo"}},feature_4:{t:0,b:{t:2,i:[{t:3}],s:"Exporte em HEX, RGB, HSL, OKLCH, CSS, SCSS, JSON ou Tailwind e compartilhe por link"}},apps_title:{t:0,b:{t:2,i:[{t:3}],s:"Aplicações comuns"}},app1:{t:0,b:{t:2,i:[{t:3}],s:"Descobrir novas paletas e combinações para interfaces e design systems, com tons perceptualmente equilibrados e prontos para uso"}},app2:{t:0,b:{t:2,i:[{t:3}],s:"Definir esquemas de cores para apresentações, posts e materiais de marketing com harmonia visual"}},app3:{t:0,b:{t:2,i:[{t:3}],s:"Copiar variáveis em HEX, RGB, HSL ou OKLCH diretamente para o CSS, sem precisar calcular cores manualmente"}},app4:{t:0,b:{t:2,i:[{t:3}],s:"Testar diferentes harmonias de cores (análogas, monocromáticas, complementares, trÃades e tétrades) em redesigns de interface antes de finalizar o projeto"}},app5:{t:0,b:{t:2,i:[{t:3}],s:"Verificar a acessibilidade de contraste e visualizar como a paleta é percebida por pessoas com daltonismo"}},tech_title:{t:0,b:{t:2,i:[{t:3}],s:"Notas técnicas"}},tech_desc:{t:0,b:{t:2,i:[{t:3}],s:"Alguns detalhes ajudam a entender como as cores são geradas e por que ficam equilibradas:"}},tech1:{t:0,b:{t:2,i:[{t:3}],s:"As cores são geradas no espaço Okhsl, que é perceptualmente uniforme: variar a luminosidade produz degraus visualmente regulares, ao contrário do HSL, onde o mesmo valor de luminosidade parece mais claro no amarelo do que no azul"}},tech2:{t:0,b:{t:2,i:[{t:3}],s:'Ao clicar em "ver tons" de uma cor, é gerada uma rampa de 50 a 900 mantendo matiz e saturação fixos e variando apenas a luminosidade perceptual â pronta para escalas de design system e copiável em CSS ou Tailwind'}},tech3:{t:0,b:{t:2,i:[{t:3}],s:"A verificação de contraste usa a razão WCAG entre a cor e o texto legÃvel sobre ela; a marcação AA indica razão de pelo menos 4,5:1"}},tech4:{t:0,b:{t:2,i:[{t:3}],s:"A simulação de daltonismo é uma aproximação para conferência rápida e não substitui testes com usuários reais"}},how_title:{t:0,b:{t:2,i:[{t:3}],s:"Como usar"}},step_1_t:{t:0,b:{t:2,i:[{t:3}],s:"Explore a galeria"}},step_1_d:{t:0,b:{t:2,i:[{t:3}],s:"A página abre com algumas paletas geradas automaticamente. Escolha entre o modo aleatório e temático, pressione a tecla Espaço para gerar novas opções, ou clique em 'Carregar mais' para expandir a galeria."}},step_2_t:{t:0,b:{t:2,i:[{t:3}],s:"Abra no editor"}},step_2_d:{t:0,b:{t:2,i:[{t:3}],s:"Clique em uma paleta para abri-la no editor. Trave as cores que quiser manter e gere novamente para variar apenas as demais."}},step_3_t:{t:0,b:{t:2,i:[{t:3}],s:"Ajuste e exporte"}},step_3_d:{t:0,b:{t:2,i:[{t:3}],s:"Ajuste a quantidade de cores, veja os tons, confira contraste e daltonismo, e exporte no formato que precisar ou compartilhe pelo link."}},faq_title:{t:0,b:{t:2,i:[{t:3}],s:"Perguntas e respostas"}},faq1q:{t:0,b:{t:2,i:[{t:3}],s:"Como gerar uma paleta de cores?"}},faq1a:{t:0,b:{t:2,i:[{t:3}],s:"A página já abre com várias paletas geradas automaticamente. Pressione a barra de espaço (ou o botão Gerar novas) para criar outras, ou escolha um tema como pastel ou escura. Ao clicar em uma paleta, você abre o editor para travar cores e ajustar como quiser."}},faq2q:{t:0,b:{t:2,i:[{t:3}],s:"Qual a diferença entre o modo aleatório e por tema?"}},faq2a:{t:0,b:{t:2,i:[{t:3}],s:"No modo aleatório, as cores podem vir de qualquer ponto do espectro. No modo por tema, a geração é enviesada para um visual especÃfico â pastel usa cores claras e suaves, escura usa tons de baixa luminosidade, vintage usa tons envelhecidos e dessaturados, e assim por diante."}},faq3q:{t:0,b:{t:2,i:[{t:3}],s:"O que é o espaço de cor Okhsl e por que ele importa?"}},faq3a:{t:0,b:{t:2,i:[{t:3}],s:"Okhsl é um modelo de cor perceptualmente uniforme. Na prática, isso significa que ajustar a luminosidade de uma cor produz mudanças que o olho percebe como regulares, gerando paletas e tons mais equilibrados do que o HSL tradicional, especialmente ao comparar cores muito diferentes como amarelo e azul."}},faq5q:{t:0,b:{t:2,i:[{t:3}],s:"Como salvo ou compartilho uma paleta?"}},faq5a:{t:0,b:{t:2,i:[{t:3}],s:"No editor, o botão Compartilhar copia um link com as cores codificadas no endereço. Quem abrir esse link verá exatamente a mesma paleta no editor. Você também pode exportar as cores em CSS, SCSS, JSON, Tailwind ou como lista de HEX."}},see1:{t:0,b:{t:2,i:[{t:3}],s:"Editor de Cores"}},see2:{t:0,b:{t:2,i:[{t:3}],s:"Cores da Imagem"}},see3:{t:0,b:{t:2,i:[{t:3}],s:"Cores Aleatórias"}},see4:{t:0,b:{t:2,i:[{t:3}],s:"Conversor de Cores"}}},en:{pageTitle:{t:0,b:{t:2,i:[{t:3}],s:"Color Palette Generator Online â Random and Theme Palettes"}},ogTitle:{t:0,b:{t:2,i:[{t:3}],s:"Color Palette Generator â Harmonious Palettes in HEX, RGB, HSL and OKLCH"}},ogLocale:{t:0,b:{t:2,i:[{t:3}],s:"en_US"}},title:{t:0,b:{t:2,i:[{t:3}],s:"Color Palette Generator"}},bc:{t:0,b:{t:2,i:[{t:3}],s:"Color Tools"}},meta:{t:0,b:{t:2,i:[{t:3}],s:"Create harmonious color palettes online. Generate random or themed colors, lock your favorites, view shade scales, check contrast and color blindness simulation, and export in CSS, SCSS, JSON, Tailwind, HEX, RGB, HSL or OKLCH."}}
21,intro:{t:0,b:{t:2,i:[{t:3}],s:"Create harmonious color palettes in seconds. Browse the gallery of auto-generated palettes or open the editor to generate variations, lock favorite colors, adjust the number of colors, and export for your projects. Colors are calculated in the perceptual Okhsl color space, which keeps tones visually balanced and avoids the common distortions of traditional HSL."}},mode_random:{t:0,b:{t:2,i:[{t:3}],s:"Random"}},mode_theme:{t:0,b:{t:2,i:[{t:3}],s:"By theme"}},theme_pastel:{t:0,b:{t:2,i:[{t:3}],s:"Pastel"}},theme_vibrant:{t:0,b:{t:2,i:[{t:3}],s:"Vibrant"}},theme_dark:{t:0,b:{t:2,i:[{t:3}],s:"Dark"}},theme_vintage:{t:0,b:{t:2,i:[{t:3}],s:"Vintage"}},theme_earth:{t:0,b:{t:2,i:[{t:3}],s:"Earth"}},harmony_auto:{t:0,b:{t:2,i:[{t:3}],s:"Automatic"}},harmony_analogous:{t:0,b:{t:2,i:[{t:3}],s:"Analogous"}},harmony_monochromatic:{t:0,b:{t:2,i:[{t:3}],s:"Monochromatic"}},harmony_complementary:{t:0,b:{t:2,i:[{t:3}],s:"Complementary"}},harmony_triadic:{t:0,b:{t:2,i:[{t:3}],s:"Triadic"}},harmony_tetradic:{t:0,b:{t:2,i:[{t:3}],s:"Tetradic"}},gen_new:{t:0,b:{t:2,i:[{t:3}],s:"Generate new"}},gallery_hint:{t:0,b:{t:2,i:[{t:3}],s:"Click a palette to open it in the editor"}},load_more:{t:0,b:{t:2,i:[{t:3}],s:"Load more"}},edit:{t:0,b:{t:2,i:[{t:3}],s:"Edit"}},space:{t:0,b:{t:2,i:[{t:3}],s:"space"}},back:{t:0,b:{t:2,i:[{t:3}],s:"Back"}},generate:{t:0,b:{t:2,i:[{t:3}],s:"Generate"}},undo:{t:0,b:{t:2,i:[{t:3}],s:"Undo"}},share:{t:0,b:{t:2,i:[{t:3}],s:"Share"}},lock:{t:0,b:{t:2,i:[{t:3}],s:"Lock color"}},unlock:{t:0,b:{t:2,i:[{t:3}],s:"Unlock color"}},shades:{t:0,b:{t:2,i:[{t:3}],s:"View shade scale"}},edit_color:{t:0,b:{t:2,i:[{t:3}],s:"Edit color"}},count_label:{t:0,b:{t:2,i:[{t:3}],s:"Number of colors"}},format_label:{t:0,b:{t:2,i:[{t:3}],s:"Format"}},contrast_label:{t:0,b:{t:2,i:[{t:3}],s:"WCAG Contrast"}},contrast_on:{t:0,b:{t:2,i:[{t:3}],s:"Contrast on"}},contrast_off:{t:0,b:{t:2,i:[{t:3}],s:"Show contrast"}},shades_title:{t:0,b:{t:2,i:[{t:3}],s:"Shade scale for selected color"}},copy_ramp:{t:0,b:{t:2,i:[{t:3}],s:"Copy scale"}},cvd_label:{t:0,b:{t:2,i:[{t:3}],s:"Color blindness simulation"}},cvd_hint:{t:0,b:{t:2,i:[{t:3}],s:"Choose a color blindness type to see how the palette appears."}},cvd_none:{t:0,b:{t:2,i:[{t:3}],s:"Normal vision"}},cvd_protan:{t:0,b:{t:2,i:[{t:3}],s:"Protanopia"}},cvd_deutan:{t:0,b:{t:2,i:[{t:3}],s:"Deuteranopia"}},cvd_tritan:{t:0,b:{t:2,i:[{t:3}],s:"Tritanopia"}},export_label:{t:0,b:{t:2,i:[{t:3}],s:"Export palette"}},copy_all:{t:0,b:{t:2,i:[{t:3}],s:"Copy"}},click_to_copy:{t:0,b:{t:2,i:[{t:3}],s:"Click to copy"}},copied:{t:0,b:{t:2,i:[{t:3}],s:"Copied!"}},features_title:{t:0,b:{t:2,i:[{t:3}],s:"Key features"}},feature_1:{t:0,b:{t:2,i:[{t:3}],s:"Generate random or themed palettes â pastel, vibrant, dark, vintage, and earth"}},feature_2:{t:0,b:{t:2,i:[{t:3}],s:"Lock favorite colors, generate new variations, and adjust the palette size"}},feature_3:{t:0,b:{t:2,i:[{t:3}],s:"View perceptual shade scales, check WCAG contrast, and simulate color blindness"}},feature_4:{t:0,b:{t:2,i:[{t:3}],s:"Export in HEX, RGB, HSL, OKLCH, CSS, SCSS, JSON or Tailwind and share via link"}},apps_title:{t:0,b:{t:2,i:[{t:3}],s:"Common uses"}},app1:{t:0,b:{t:2,i:[{t:3}],s:"Discover new palettes and combinations for interfaces and design systems, with perceptually balanced tones ready to use"}},app2:{t:0,b:{t:2,i:[{t:3}],s:"Define color schemes for presentations, posts, and marketing materials with visual harmony"}},app3:{t:0,b:{t:2,i:[{t:3}],s:"Copy color values in HEX, RGB, HSL or OKLCH directly into CSS, without manually calculating colors"}},app4:{t:0,b:{t:2,i:[{t:3}],s:"Test different color harmonies (analogous, monochromatic, complementary, triadic, tetradic) in interface redesigns before finalizing the project"}},app5:{t:0,b:{t:2,i:[{t:3}],s:"Check contrast accessibility and visualize how the palette looks to people with color blindness"}},tech_title:{t:0,b:{t:2,i:[{t:3}],s:"Technical notes"}},tech_desc:{t:0,b:{t:2,i:[{t:3}],s:"A few details help explain how colors are generated and why they stay balanced:"}},tech1:{t:0,b:{t:2,i:[{t:3}],s:"Colors are generated in the Okhsl space, which is perceptually uniform: varying lightness produces visually even steps, unlike HSL where the same lightness value appears brighter in yellow than in blue"}},tech2:{t:0,b:{t:2,i:[{t:3}],s:"Clicking 'view shade scale' on a color generates a ramp from 50 to 900, keeping hue and saturation fixed while varying only perceptual lightness â ready for design system scales and copyable as CSS or Tailwind"}}
21,tech3:{t:0,b:{t:2,i:[{t:3}],s:"Contrast checking uses the WCAG ratio between the color and its legible text; the AA badge indicates a ratio of at least 4.5:1"}},tech4:{t:0,b:{t:2,i:[{t:3}],s:"The color blindness simulation is an approximation for quick review and does not replace testing with real users"}},how_title:{t:0,b:{t:2,i:[{t:3}],s:"How to use"}},step_1_t:{t:0,b:{t:2,i:[{t:3}],s:"Browse the gallery"}},step_1_d:{t:0,b:{t:2,i:[{t:3}],s:"The page opens with several auto-generated palettes. Choose between random and theme mode, press the Space key to generate new options, or click 'Load more' to expand the gallery."}},step_2_t:{t:0,b:{t:2,i:[{t:3}],s:"Open in the editor"}},step_2_d:{t:0,b:{t:2,i:[{t:3}],s:"Click a palette to open it in the editor. Lock the colors you want to keep and generate again to vary only the rest."}},step_3_t:{t:0,b:{t:2,i:[{t:3}],s:"Adjust and export"}},step_3_d:{t:0,b:{t:2,i:[{t:3}],s:"Adjust the number of colors, view shade scales, check contrast and color blindness simulation, then export in the format you need or share via link."}},faq_title:{t:0,b:{t:2,i:[{t:3}],s:"FAQ"}},faq1q:{t:0,b:{t:2,i:[{t:3}],s:"How do I generate a color palette?"}},faq1a:{t:0,b:{t:2,i:[{t:3}],s:"The page opens with several auto-generated palettes. Press the space bar (or the Generate new button) to create more, or choose a theme like pastel or dark. Clicking a palette opens the editor where you can lock colors and adjust as needed."}},faq2q:{t:0,b:{t:2,i:[{t:3}],s:"What is the difference between random mode and theme mode?"}},faq2a:{t:0,b:{t:2,i:[{t:3}],s:"In random mode, colors can come from any point in the spectrum. In theme mode, generation is biased toward a specific look â pastel uses light and soft colors, dark uses low-lightness tones, vintage uses aged and desaturated tones, and so on."}},faq3q:{t:0,b:{t:2,i:[{t:3}],s:"What is the Okhsl color space and why does it matter?"}},faq3a:{t:0,b:{t:2,i:[{t:3}],s:"Okhsl is a perceptually uniform color model. In practice, this means that adjusting a color's lightness produces changes the eye perceives as even steps, resulting in more balanced palettes and shades than traditional HSL â especially when comparing very different colors like yellow and blue."}},faq5q:{t:0,b:{t:2,i:[{t:3}],s:"How do I save or share a palette?"}},faq5a:{t:0,b:{t:2,i:[{t:3}],s:"In the editor, the Share button copies a link with the colors encoded in the URL. Anyone opening that link will see exactly the same palette in the editor. You can also export the colors as CSS, SCSS, JSON, Tailwind, or a HEX list."}},see1:{t:0,b:{t:2,i:[{t:3}],s:"Color Editor"}},see2:{t:0,b:{t:2,i:[{t:3}],s:"Image Colors"}},see3:{t:0,b:{t:2,i:[{t:3}],s:"Random Color Generator"}},see4:{t:0,b:{t:2,i:[{t:3}],s:"Color Converter"}}},es:{pageTitle:{t:0,b:{t:2,i:[{t:3}],s:"Generador de Paletas de Colores Online â Paletas Aleatorias y Temáticas"}},ogTitle:{t:0,b:{t:2,i:[{t:3}],s:"Generador de Paletas de Colores â Paletas Armoniosas en HEX, RGB, HSL y OKLCH"}},ogLocale:{t:0,b:{t:2,i:[{t:3}],s:"es_ES"}},title:{t:0,b:{t:2,i:[{t:3}],s:"Generador de Paletas de Colores"}},bc:{t:0,b:{t:2,i:[{t:3}],s:"Herramientas de Color"}},meta:{t:0,b:{t:2,i:[{t:3}],s:"Crea paletas de colores armoniosas online. Genera colores aleatorios o por tema, bloquea los favoritos, visualiza escalas de tonos, comprueba el contraste y la simulación de daltonismo, y exporta en CSS, SCSS, JSON, Tailwind, HEX, RGB, HSL u OKLCH."}},intro:{t:0,b:{t:2,i:[{t:3}],s:"Crea paletas de colores armoniosas en segundos. Explora la galerÃa de paletas generadas automáticamente o abre el editor para crear variaciones, bloquear colores favoritos, ajustar la cantidad de colores y exportar para tus proyectos. Los colores se calculan en el espacio perceptual Okhsl, lo que mantiene los tonos visualmente equilibrados y evita las distorsiones comunes del HSL tradicional."}},mode_random:{t:0,b:{t:2,i:[{t:3}],s:"Aleatorio"}},mode_theme:{t:0,b:{t:2,i:[{t:3}],s:"Por tema"}},theme_pastel:{t:0,b:{t:2,i:[{t:3}],s:"Pastel"}},theme_vibrant:{t:0,b:{t:2,i:[{t:3}],s:"Vibrante"}},theme_dark:{t:0,b:{t:2,i:[{t:3}],s:"Oscuro"}},theme_vintage:{t:0,b:{t:2,i:[{t:3}],s:"Vintage"}},theme_earth:{t:0,b:{t:2,i:[{t:3}],s:"Tierra"}},harmony_auto:{t:0,b:{t:2,i:[{t:3}],s:"Automático"}},harmony_analogous:{t:0,b:{t:2,i:[{t:3}],s:"Análoga"}},harmony_monochromatic:{t:0,b:{t:2,i:[{t:3}],s:"Monocromática"}},harmony_complementary:{t:0,b:{t:2,i:[{t:3}],s:"Complementaria"}},harmony_triadic:{t:0,b:{t:2,i:[{t:3}],s:"Triádica"}},harmony_tetradic:{t:0,b:{t:2,i:[{t:3}],s:"Tetrádica"}},gen_new:{t:0,b:{t:2,i:[{t:3}],s:"Generar nuevas"}},gallery_hint:{t:0,b:{t:2,i:[{t:3}],s:"Haz clic en una paleta para abrirla en el editor"}},load_more:{t:0,b:{t:2,i:[{t:3}],s:"Cargar más"}},edit:{t:0,b:{t:2,i:[{t:3}],s:"Editar"}},space:{t:0,b:{t:2,i:[{t:3}],s:"espacio"}},back:{t:0,b:{t:2,i:[{t:3}],s:"Volver"}},generate:{t:0,b:{t:2,i:[{t:3}],s:"Generar"}}
21,undo:{t:0,b:{t:2,i:[{t:3}],s:"Deshacer"}},share:{t:0,b:{t:2,i:[{t:3}],s:"Compartir"}},lock:{t:0,b:{t:2,i:[{t:3}],s:"Bloquear color"}},unlock:{t:0,b:{t:2,i:[{t:3}],s:"Desbloquear color"}},shades:{t:0,b:{t:2,i:[{t:3}],s:"Ver escala de colores"}},edit_color:{t:0,b:{t:2,i:[{t:3}],s:"Editar color"}},count_label:{t:0,b:{t:2,i:[{t:3}],s:"Número de colores"}},format_label:{t:0,b:{t:2,i:[{t:3}],s:"Formato"}},contrast_label:{t:0,b:{t:2,i:[{t:3}],s:"Contraste WCAG"}},contrast_on:{t:0,b:{t:2,i:[{t:3}],s:"Contraste activado"}},contrast_off:{t:0,b:{t:2,i:[{t:3}],s:"Mostrar contraste"}},shades_title:{t:0,b:{t:2,i:[{t:3}],s:"Escala de colores del color seleccionado"}},copy_ramp:{t:0,b:{t:2,i:[{t:3}],s:"Copiar escala"}},cvd_label:{t:0,b:{t:2,i:[{t:3}],s:"Simulación de daltonismo"}},cvd_hint:{t:0,b:{t:2,i:[{t:3}],s:"Elige un tipo de daltonismo para ver cómo aparece la paleta."}},cvd_none:{t:0,b:{t:2,i:[{t:3}],s:"Visión normal"}},cvd_protan:{t:0,b:{t:2,i:[{t:3}],s:"Protanopia"}},cvd_deutan:{t:0,b:{t:2,i:[{t:3}],s:"Deuteranopia"}},cvd_tritan:{t:0,b:{t:2,i:[{t:3}],s:"Tritanopia"}},export_label:{t:0,b:{t:2,i:[{t:3}],s:"Exportar paleta"}},copy_all:{t:0,b:{t:2,i:[{t:3}],s:"Copiar"}},click_to_copy:{t:0,b:{t:2,i:[{t:3}],s:"Haz clic para copiar"}},copied:{t:0,b:{t:2,i:[{t:3}],s:"¡Copiado!"}},features_title:{t:0,b:{t:2,i:[{t:3}],s:"Funcionalidades principales"}},feature_1:{t:0,b:{t:2,i:[{t:3}],s:"Genera paletas aleatorias o por tema: pastel, vibrante, oscuro, vintage y tierra"}},feature_2:{t:0,b:{t:2,i:[{t:3}],s:"Bloquea colores favoritos, genera nuevas variaciones y ajusta el tamaño de la paleta"}},feature_3:{t:0,b:{t:2,i:[{t:3}],s:"Visualiza escalas de tonos perceptuales, comprueba el contraste WCAG y simula el daltonismo"}},feature_4:{t:0,b:{t:2,i:[{t:3}],s:"Exporta en HEX, RGB, HSL, OKLCH, CSS, SCSS, JSON o Tailwind y comparte por enlace"}},apps_title:{t:0,b:{t:2,i:[{t:3}],s:"Usos comunes"}},app1:{t:0,b:{t:2,i:[{t:3}],s:"Descubrir nuevas paletas y combinaciones para interfaces y design systems, con tonos perceptualmente equilibrados y listos para usar"}},app2:{t:0,b:{t:2,i:[{t:3}],s:"Definir esquemas de color para presentaciones, publicaciones y materiales de marketing con armonÃa visual"}},app3:{t:0,b:{t:2,i:[{t:3}],s:"Copiar valores de color en HEX, RGB, HSL u OKLCH directamente en el CSS, sin calcular los colores manualmente"}},app4:{t:0,b:{t:2,i:[{t:3}],s:"Probar diferentes armonÃas de color (análogas, monocromáticas, complementarias, triádicas, tetrádicas) en rediseños de interfaz antes de finalizar el proyecto"}},app5:{t:0,b:{t:2,i:[{t:3}],s:"Verificar la accesibilidad del contraste y visualizar cómo perciben la paleta las personas con daltonismo"}},tech_title:{t:0,b:{t:2,i:[{t:3}],s:"Notas técnicas"}},tech_desc:{t:0,b:{t:2,i:[{t:3}],s:"Algunos detalles ayudan a entender cómo se generan los colores y por qué se mantienen equilibrados:"}},tech1:{t:0,b:{t:2,i:[{t:3}],s:"Los colores se generan en el espacio Okhsl, que es perceptualmente uniforme: variar la luminosidad produce pasos visualmente regulares, a diferencia del HSL, donde el mismo valor de luminosidad parece más claro en el amarillo que en el azul"}},tech2:{t:0,b:{t:2,i:[{t:3}],s:"Al hacer clic en 'ver escala de colores' de un color, se genera una rampa de 50 a 900 manteniendo el matiz y la saturación fijos y variando solo la luminosidad perceptual â lista para escalas de design system y copiable en CSS o Tailwind"}},tech3:{t:0,b:{t:2,i:[{t:3}],s:"La verificación de contraste usa la razón WCAG entre el color y el texto legible sobre él; la marca AA indica una razón de al menos 4,5:1"}},tech4:{t:0,b:{t:2,i:[{t:3}],s:"La simulación de daltonismo es una aproximación para revisión rápida y no sustituye las pruebas con usuarios reales"}},how_title:{t:0,b:{t:2,i:[{t:3}],s:"Cómo usar"}},step_1_t:{t:0,b:{t:2,i:[{t:3}],s:"Explora la galerÃa"}},step_1_d:{t:0,b:{t:2,i:[{t:3}],s:"La página se abre con varias paletas generadas automáticamente. Elige entre el modo aleatorio y temático, pulsa la tecla Espacio para generar nuevas opciones, o haz clic en 'Cargar más' para ampliar la galerÃa."}},step_2_t:{t:0,b:{t:2,i:[{t:3}],s:"Abre en el editor"}},step_2_d:{t:0,b:{t:2,i:[{t:3}],s:"Haz clic en una paleta para abrirla en el editor. Bloquea los colores que quieras mantener y genera de nuevo para variar solo los demás."}},step_3_t:{t:0,b:{t:2,i:[{t:3}
21],s:"Ajusta y exporta"}},step_3_d:{t:0,b:{t:2,i:[{t:3}],s:"Ajusta el número de colores, visualiza las escalas de tonos, comprueba el contraste y el daltonismo, y exporta en el formato que necesites o comparte por enlace."}},faq_title:{t:0,b:{t:2,i:[{t:3}],s:"Preguntas frecuentes"}},faq1q:{t:0,b:{t:2,i:[{t:3}],s:"¿Cómo genero una paleta de colores?"}},faq1a:{t:0,b:{t:2,i:[{t:3}],s:"La página ya se abre con varias paletas generadas automáticamente. Pulsa la barra espaciadora (o el botón Generar nuevas) para crear más, o elige un tema como pastel u oscuro. Al hacer clic en una paleta, se abre el editor para bloquear colores y ajustar como quieras."}},faq2q:{t:0,b:{t:2,i:[{t:3}],s:"¿Cuál es la diferencia entre el modo aleatorio y el modo por tema?"}},faq2a:{t:0,b:{t:2,i:[{t:3}],s:"En el modo aleatorio, los colores pueden venir de cualquier punto del espectro. En el modo por tema, la generación está orientada hacia un aspecto especÃfico â pastel usa colores claros y suaves, oscuro usa tonos de baja luminosidad, vintage usa tonos envejecidos y desaturados, y asà sucesivamente."}},faq3q:{t:0,b:{t:2,i:[{t:3}],s:"¿Qué es el espacio de color Okhsl y por qué importa?"}},faq3a:{t:0,b:{t:2,i:[{t:3}],s:"Okhsl es un modelo de color perceptualmente uniforme. En la práctica, esto significa que ajustar la luminosidad de un color produce cambios que el ojo percibe como pasos regulares, generando paletas y tonos más equilibrados que el HSL tradicional, especialmente al comparar colores muy diferentes como el amarillo y el azul."}},faq5q:{t:0,b:{t:2,i:[{t:3}],s:"¿Cómo guardo o comparto una paleta?"}},faq5a:{t:0,b:{t:2,i:[{t:3}],s:"En el editor, el botón Compartir copia un enlace con los colores codificados en la URL. Quien abra ese enlace verá exactamente la misma paleta en el editor. También puedes exportar los colores en CSS, SCSS, JSON, Tailwind o como lista de HEX."}},see1:{t:0,b:{t:2,i:[{t:3}],s:"Editor de Colores"}},see2:{t:0,b:{t:2,i:[{t:3}],s:"Colores de la Imagen"}},see3:{t:0,b:{t:2,i:[{t:3}],s:"Colores Aleatorios"}},see4:{t:0,b:{t:2,i:[{t:3}],s:"Convertidor de Colores"}}},fr:{pageTitle:{t:0,b:{t:2,i:[{t:3}],s:"Générateur de Palettes de Couleurs en Ligne â Palettes Aléatoires et Thématiques"}},ogTitle:{t:0,b:{t:2,i:[{t:3}],s:"Générateur de Palettes de Couleurs â Palettes Harmonieuses en HEX, RGB, HSL et OKLCH"}},ogLocale:{t:0,b:{t:2,i:[{t:3}],s:"fr_FR"}},title:{t:0,b:{t:2,i:[{t:3}],s:"Générateur de Palettes de Couleurs"}},bc:{t:0,b:{t:2,i:[{t:3}],s:"Outils de Couleurs"}},meta:{t:0,b:{t:2,i:[{t:3}],s:"Créez des palettes de couleurs harmonieuses en ligne. Générez des couleurs aléatoires ou thématiques, verrouillez vos favorites, visualisez les échelles de tons, vérifiez le contraste et la simulation de daltonisme, et exportez en CSS, SCSS, JSON, Tailwind, HEX, RGB, HSL ou OKLCH."}},intro:{t:0,b:{t:2,i:[{t:3}],s:"Créez des palettes de couleurs harmonieuses en quelques secondes. Parcourez la galerie de palettes générées automatiquement ou ouvrez l'éditeur pour créer des variations, verrouiller les couleurs favorites, ajuster le nombre de couleurs et exporter pour vos projets. Les couleurs sont c
21alculées dans l'espace perceptuel Okhsl, ce qui maintient les tons visuellement équilibrés et évite les distorsions courantes du HSL traditionnel."}},mode_random:{t:0,b:{t:2,i:[{t:3}],s:"Aléatoire"}},mode_theme:{t:0,b:{t:2,i:[{t:3}],s:"Par thème"}},theme_pastel:{t:0,b:{t:2,i:[{t:3}],s:"Pastel"}},theme_vibrant:{t:0,b:{t:2,i:[{t:3}],s:"Vibrant"}},theme_dark:{t:0,b:{t:2,i:[{t:3}],s:"Sombre"}},theme_vintage:{t:0,b:{t:2,i:[{t:3}],s:"Vintage"}},theme_earth:{t:0,b:{t:2,i:[{t:3}],s:"Terre"}},harmony_auto:{t:0,b:{t:2,i:[{t:3}],s:"Automatique"}},harmony_analogous:{t:0,b:{t:2,i:[{t:3}],s:"Analogue"}},harmony_monochromatic:{t:0,b:{t:2,i:[{t:3}],s:"Monochromatique"}},harmony_complementary:{t:0,b:{t:2,i:[{t:3}],s:"Complémentaire"}},harmony_triadic:{t:0,b:{t:2,i:[{t:3}],s:"Triadique"}},harmony_tetradic:{t:0,b:{t:2,i:[{t:3}],s:"Tétradique"}},gen_new:{t:0,b:{t:2,i:[{t:3}],s:"Générer de nouvelles"}},gallery_hint:{t:0,b:{t:2,i:[{t:3}],s:"Cliquez sur une palette pour l'ouvrir dans l'éditeur"}},load_more:{t:0,b:{t:2,i:[{t:3}],s:"Charger plus"}},edit:{t:0,b:{t:2,i:[{t:3}],s:"Modifier"}},space:{t:0,b:{t:2,i:[{t:3}],s:"espace"}},back:{t:0,b:{t:2,i:[{t:3}],s:"Retour"}},generate:{t:0,b:{t:2,i:[{t:3}],s:"Générer"}},undo:{t:0,b:{t:2,i:[{t:3}],s:"Annuler"}},share:{t:0,b:{t:2,i:[{t:3}],s:"Partager"}},lock:{t:0,b:{t:2,i:[{t:3}],s:"Verrouiller la couleur"}},unlock:{t:0,b:{t:2,i:[{t:3}],s:"Déverrouiller la couleur"}},shades:{t:0,b:{t:2,i:[{t:3}],s:"Voir l'échelle de couleurs"}},edit_color:{t:0,b:{t:2,i:[{t:3}],s:"Modifier la couleur"}},count_label:{t:0,b:{t:2,i:[{t:3}],s:"Nombre de couleurs"}},format_label:{t:0,b:{t:2,i:[{t:3}],s:"Format"}},contrast_label:{t:0,b:{t:2,i:[{t:3}],s:"Contraste WCAG"}},contrast_on:{t:0,b:{t:2,i:[{t:3}],s:"Contraste activé"}},contrast_off:{t:0,b:{t:2,i:[{t:3}],s:"Afficher le contraste"}},shades_title:{t:0,b:{t:2,i:[{t:3}],s:"Ãchelle de couleurs de la couleur sélectionnée"}},copy_ramp:{t:0,b:{t:2,i:[{t:3}],s:"Copier l'échelle"}},cvd_label:{t:0,b:{t:2,i:[{t:3}],s:"Simulation de daltonisme"}},cvd_hint:{t:0,b:{t:2,i:[{t:3}],s:"Choisissez un type de daltonisme pour voir comment la palette apparaît."}},cvd_none:{t:0,b:{t:2,i:[{t:3}],s:"Vision normale"}},cvd_protan:{t:0,b:{t:2,i:[{t:3}],s:"Protanopie"}},cvd_deutan:{t:0,b:{t:2,i:[{t:3}],s:"Deutéranopie"}},cvd_tritan:{t:0,b:{t:2,i:[{t:3}],s:"Tritanopie"}},export_label:{t:0,b:{t:2,i:[{t:3}],s:"Exporter la palette"}},copy_all:{t:0,b:{t:2,i:[{t:3}],s:"Copier"}},click_to_copy:{t:0,b:{t:2,i:[{t:3}],s:"Cliquez pour copier"}},copied:{t:0,b:{t:2,i:[{t:3}],s:"Copié !"}},features_title:{t:0,b:{t:2,i:[{t:3}],s:"Fonctionnalités principales"}},feature_1:{t:0,b:{t:2,i:[{t:3}],s:"Générez des palettes aléatoires ou thématiques : pastel, vibrant, sombre, vintage et terre"}},feature_2:{t:0,b:{t:2,i:[{t:3}],s:"Verrouillez les couleurs favorites, générez de nouvelles variations et ajustez la taille de la palette"}},feature_3:{t:0,b:{t:2,i:[{t:3}],s:"Visualisez les échelles de tons perceptuelles, vérifiez le contraste WCAG et simulez le daltonisme"}},feature_4:{t:0,b:{t:2,i:[{t:3}],s:"Exportez en HEX, RGB, HSL, OKLCH, CSS, SCSS, JSON ou Tailwind et partagez par lien"}},apps_title:{t:0,b:{t:2,i:[{t:3}],s:"Utilisations courantes"}},app1:{t:0,b:{t:2,i:[{t:3}],s:"Découvrir de nouvelles palettes et combinaisons pour les interfaces et les design systems, avec des tons perceptuellement équilibrés et prêts à l'emploi"}},app2:{t:0,b:{t:2,i:[{t:3}],s:"Définir des schémas de couleurs pour des présentations, des publications et des supports marketing avec une harmonie visuelle"}},app3:{t:0,b:{t:2,i:[{t:3}],s:"Copier des valeurs de couleur en HEX, RGB, HSL ou OKLCH directement dans le CSS, sans calculer les couleurs manuellement"}},app4:{t:0,b:{t:2,i:[{t:3}],s:"Tester différentes harmonies de couleurs (analogues, monochromatiques, complémentaires, triadiques, tétradiques) dans les redesigns d'interface avant de finaliser le projet"}},app5:{t:0,b:{t:2,i:[{t:3}],s:"Vérifier l'accessibilité du contraste et visualiser comment les personnes daltoniennes perçoivent la palette"}},tech_title:{t:0,b:{t:2,i:[{t:3}],s:"Notes techniques"}}
21,tech_desc:{t:0,b:{t:2,i:[{t:3}],s:"Quelques détails aident à comprendre comment les couleurs sont générées et pourquoi elles restent équilibrées :"}},tech1:{t:0,b:{t:2,i:[{t:3}],s:"Les couleurs sont générées dans l'espace Okhsl, qui est perceptuellement uniforme : varier la luminosité produit des étapes visuellement régulières, contrairement au HSL où la même valeur de luminosité paraît plus claire en jaune qu'en bleu"}},tech2:{t:0,b:{t:2,i:[{t:3}],s:"En cliquant sur 'voir l'échelle de couleurs' d'une couleur, une rampe de 50 à 900 est générée en gardant la teinte et la saturation fixes et en faisant varier uniquement la luminosité perceptuelle â prête pour les échelles de design system et copiable en CSS ou Tailwind"}},tech3:{t:0,b:{t:2,i:[{t:3}],s:"La vérification du contraste utilise le rapport WCAG entre la couleur et le texte lisible sur elle ; le badge AA indique un rapport d'au moins 4,5:1"}},tech4:{t:0,b:{t:2,i:[{t:3}],s:"La simulation de daltonisme est une approximation pour une vérification rapide et ne remplace pas les tests avec de vrais utilisateurs"}},how_title:{t:0,b:{t:2,i:[{t:3}],s:"Comment utiliser"}},step_1_t:{t:0,b:{t:2,i:[{t:3}],s:"Parcourir la galerie"}},step_1_d:{t:0,b:{t:2,i:[{t:3}],s:"La page s'ouvre avec plusieurs palettes générées automatiquement. Choisissez entre le mode aléatoire et thématique, appuyez sur la touche Espace pour générer de nouvelles options, ou cliquez sur 'Charger plus' pour étendre la galerie."}},step_2_t:{t:0,b:{t:2,i:[{t:3}],s:"Ouvrir dans l'éditeur"}},step_2_d:{t:0,b:{t:2,i:[{t:3}],s:"Cliquez sur une palette pour l'ouvrir dans l'éditeur. Verrouillez les couleurs que vous souhaitez conserver et générez à nouveau pour ne varier que les autres."}},step_3_t:{t:0,b:{t:2,i:[{t:3}],s:"Ajuster et exporter"}},step_3_d:{t:0,b:{t:2,i:[{t:3}],s:"Ajustez le nombre de couleurs, visualisez les échelles de tons, vérifiez le contraste et le daltonisme, puis exportez dans le format souhaité ou partagez par lien."}},faq_title:{t:0,b:{t:2,i:[{t:3}],s:"Questions fréquentes"}},faq1q:{t:0,b:{t:2,i:[{t:3}],s:"Comment générer une palette de couleurs ?"}},faq1a:{t:0,b:{t:2,i:[{t:3}],s:"La page s'ouvre déjà avec plusieurs palettes générées automatiquement. Appuyez sur la barre d'espace (ou le bouton Générer de nouvelles) pour en créer d'autres, ou choisissez un thème comme pastel ou sombre. En cliquant sur une palette, l'éditeur s'ouvre pour verrouiller les couleurs et les ajuster à votre guise."}},faq2q:{t:0,b:{t:2,i:[{t:3}],s:"Quelle est la différence entre le mode aléatoire et le mode thématique ?"}},faq2a:{t:0,b:{t:2,i:[{t:3}],s:"En mode aléatoire, les couleurs peuvent provenir de n'importe quel point du spectre. En mode thématique, la génération est orientée vers un aspect spécifique â pastel utilise des couleurs claires et douces, sombre utilise des tons à faible luminosité, vintage utilise des tons vieillis et désaturés, et ainsi de suite."}},faq3q:{t:0,b:{t:2,i:[{t:3}],s:"Qu'est-ce que l'espace colorimétrique Okhsl et pourquoi est-il important ?"}},faq3a:{t:0,b:{t:2,i:[{t:3}],s:"Okhsl est un modèle de couleur perceptuellement uniforme. En pratique, cela signifie qu'ajuster la luminosité d'une couleur produit des changements que l'Åil perçoit comme des étapes régulières, générant des palettes et des tons plus équilibrés que le HSL traditionnel, notamment lors de la comparaison de couleurs très différentes comme le jaune et le bleu."}},faq5q:{t:0,b:{t:2,i:[{t:3}],s:"Comment sauvegarder ou partager une palette ?"}},faq5a:{t:0,b:{t:2,i:[{t:3}],s:"Dans l'éditeur, le bouton Partager copie un lien avec les couleurs encodées dans l'URL. Toute personne ouvrant ce lien verra exactement la même palette dans l'éditeur. Vous pouvez aussi exporter les couleurs en CSS, SCSS, JSON, Tailwind ou sous forme de liste HEX."}},see1:{t:0,b:{t:2,i:[{t:3}],s:"Ãditeur de Couleurs"}},see2:{t:0,b:{t:2,i:[{t:3}],s:"Couleurs de l'Image"}},see3:{t:0,b:{t:2,i:[{t:3}],s:"Couleurs Aléatoires"}},see4:{t:0,b:{t:2,i:[{t:3}],s:"Convertisseur de Couleurs"}}},it:{pageTitle:{t:0,b:{t:2,i:[{t:3}],s:"Generatore di Palette di Colori Online â Palette Casuali e Tematiche"}},ogTitle:{t:0,b:{t:2,i:[{t:3}],s:"Generatore di Palette di Colori â Palette Armoniose in HEX, RGB, HSL e OKLCH"}},ogLocale:{t:0,b:{t:2,i:[{t:3}],s:"it_IT"}},title:{t:0,b:{t:2,i:[{t:3}],s:"Generatore di Palette di Colori"}},bc:{t:0,b:{t:2,i:[{t:3}],s:"Strumenti per Colori"}},meta:{t:0,b:{t:2,i:[{t:3}],s:"Crea palette di colori armoniose online. Genera colori casuali o tematici, blocca i tuoi preferiti, visualizza le scale di tonalità , verifica il contrasto e la simulazione del daltonismo, ed esporta in CSS, SCSS, JSON, Tailwind, HEX, RGB, HSL o OKLCH."}}
21,intro:{t:0,b:{t:2,i:[{t:3}],s:"Crea palette di colori armoniose in pochi secondi. Sfoglia la galleria di palette generate automaticamente o apri l'editor per creare variazioni, bloccare i colori preferiti, regolare il numero di colori ed esportare per i tuoi progetti. I colori vengono calcolati nello spazio percettivo Okhsl, che mantiene i toni visivamente equilibrati ed evita le distorsioni comuni dell'HSL tradizionale."}},mode_random:{t:0,b:{t:2,i:[{t:3}],s:"Casuale"}},mode_theme:{t:0,b:{t:2,i:[{t:3}],s:"Per tema"}},theme_pastel:{t:0,b:{t:2,i:[{t:3}],s:"Pastello"}},theme_vibrant:{t:0,b:{t:2,i:[{t:3}],s:"Vibrante"}},theme_dark:{t:0,b:{t:2,i:[{t:3}],s:"Scuro"}},theme_vintage:{t:0,b:{t:2,i:[{t:3}],s:"Vintage"}},theme_earth:{t:0,b:{t:2,i:[{t:3}],s:"Terra"}},harmony_auto:{t:0,b:{t:2,i:[{t:3}],s:"Automatico"}},harmony_analogous:{t:0,b:{t:2,i:[{t:3}],s:"Analoga"}},harmony_monochromatic:{t:0,b:{t:2,i:[{t:3}],s:"Monocromatica"}},harmony_complementary:{t:0,b:{t:2,i:[{t:3}],s:"Complementare"}},harmony_triadic:{t:0,b:{t:2,i:[{t:3}],s:"Triadica"}},harmony_tetradic:{t:0,b:{t:2,i:[{t:3}],s:"Tetradica"}},gen_new:{t:0,b:{t:2,i:[{t:3}],s:"Genera nuove"}},gallery_hint:{t:0,b:{t:2,i:[{t:3}],s:"Clicca su una palette per aprirla nell'editor"}},load_more:{t:0,b:{t:2,i:[{t:3}],s:"Carica altro"}},edit:{t:0,b:{t:2,i:[{t:3}],s:"Modifica"}},space:{t:0,b:{t:2,i:[{t:3}],s:"spazio"}},back:{t:0,b:{t:2,i:[{t:3}],s:"Indietro"}},generate:{t:0,b:{t:2,i:[{t:3}],s:"Genera"}},undo:{t:0,b:{t:2,i:[{t:3}],s:"Annulla"}},share:{t:0,b:{t:2,i:[{t:3}],s:"Condividi"}},lock:{t:0,b:{t:2,i:[{t:3}],s:"Blocca colore"}},unlock:{t:0,b:{t:2,i:[{t:3}],s:"Sblocca colore"}},shades:{t:0,b:{t:2,i:[{t:3}],s:"Vedi scala di colori"}},edit_color:{t:0,b:{t:2,i:[{t:3}],s:"Modifica colore"}},count_label:{t:0,b:{t:2,i:[{t:3}],s:"Numero di colori"}},format_label:{t:0,b:{t:2,i:[{t:3}],s:"Formato"}},contrast_label:{t:0,b:{t:2,i:[{t:3}],s:"Contrasto WCAG"}},contrast_on:{t:0,b:{t:2,i:[{t:3}],s:"Contrasto attivo"}},contrast_off:{t:0,b:{t:2,i:[{t:3}],s:"Mostra contrasto"}},shades_title:{t:0,b:{t:2,i:[{t:3}],s:"Scala di colori del colore selezionato"}},copy_ramp:{t:0,b:{t:2,i:[{t:3}],s:"Copia scala"}},cvd_label:{t:0,b:{t:2,i:[{t:3}],s:"Simulazione daltonismo"}},cvd_hint:{t:0,b:{t:2,i:[{t:3}],s:"Scegli un tipo di daltonismo per vedere come appare la palette."}},cvd_none:{t:0,b:{t:2,i:[{t:3}],s:"Visione normale"}},cvd_protan:{t:0,b:{t:2,i:[{t:3}],s:"Protanopia"}},cvd_deutan:{t:0,b:{t:2,i:[{t:3}],s:"Deuteranopia"}},cvd_tritan:{t:0,b:{t:2,i:[{t:3}],s:"Tritanopia"}},export_label:{t:0,b:{t:2,i:[{t:3}],s:"Esporta palette"}},copy_all:{t:0,b:{t:2,i:[{t:3}],s:"Copia"}},click_to_copy:{t:0,b:{t:2,i:[{t:3}],s:"Clicca per copiare"}},copied:{t:0,b:{t:2,i:[{t:3}],s:"Copiato!"}},features_title:{t:0,b:{t:2,i:[{t:3}],s:"Funzionalità principali"}},feature_1:{t:0,b:{t:2,i:[{t:3}],s:"Genera palette casuali o tematiche: pastello, vibrante, scuro, vintage e terra"}},feature_2:{t:0,b:{t:2,i:[{t:3}],s:"Blocca i colori preferiti, genera nuove variazioni e regola la dimensione della palette"}},feature_3:{t:0,b:{t:2,i:[{t:3}],s:"Visualizza scale di tonalità percettive, verifica il contrasto WCAG e simula il daltonismo"}},feature_4:{t:0,b:{t:2,i:[{t:3}],s:"Esporta in HEX, RGB, HSL, OKLCH, CSS, SCSS, JSON o Tailwind e condividi tramite link"}},apps_title:{t:0,b:{t:2,i:[{t:3}],s:"Utilizzi comuni"}},app1:{t:0,b:{t:2,i:[{t:3}],s:"Scoprire nuove palette e combinazioni per interfacce e design system, con tonalità percettivamente equilibrate e pronte all'uso"}},app2:{t:0,b:{t:2,i:[{t:3}],s:"Definire schemi di colori per presentazioni, post e materiali di marketing con armonia visiva"}},app3:{t:0,b:{t:2,i:[{t:3}],s:"Copiare valori di colore in HEX, RGB, HSL o OKLCH direttamente nel CSS, senza calcolare i colori manualmente"}},app4:{t:0,b:{t:2,i:[{t:3}],s:"Testare diverse armonie di colori (analoghe, monocromatiche, complementari, triadiche, tetradiche) nei redesign di interfaccia prima di finalizzare il progetto"}},app5:{t:0,b:{t:2,i:[{t:3}],s:"Verificare l'accessibilità del contrasto e visualizzare come le persone daltoniche percepiscono la palette"}},tech_title:{t:0,b:{t:2,i:[{t:3}],s:"Note tecniche"}}
21,tech_desc:{t:0,b:{t:2,i:[{t:3}],s:"Alcuni dettagli aiutano a capire come vengono generati i colori e perché rimangono equilibrati:"}},tech1:{t:0,b:{t:2,i:[{t:3}],s:"I colori vengono generati nello spazio Okhsl, che è percettivamente uniforme: variare la luminosità produce gradini visivamente regolari, al contrario dell'HSL dove lo stesso valore di luminosità appare più chiaro nel giallo che nel blu"}},tech2:{t:0,b:{t:2,i:[{t:3}],s:"Cliccando su 'vedi scala di colori' di un colore, viene generata una rampa da 50 a 900 mantenendo tonalità e saturazione fisse e variando solo la luminosità percettiva â pronta per le scale di design system e copiabile in CSS o Tailwind"}},tech3:{t:0,b:{t:2,i:[{t:3}],s:"La verifica del contrasto utilizza il rapporto WCAG tra il colore e il testo leggibile su di esso; il badge AA indica un rapporto di almeno 4,5:1"}},tech4:{t:0,b:{t:2,i:[{t:3}],s:"La simulazione del daltonismo è un'approssimazione per una verifica rapida e non sostituisce i test con utenti reali"}},how_title:{t:0,b:{t:2,i:[{t:3}],s:"Come usare"}},step_1_t:{t:0,b:{t:2,i:[{t:3}],s:"Sfoglia la galleria"}},step_1_d:{t:0,b:{t:2,i:[{t:3}],s:"La pagina si apre con diverse palette generate automaticamente. Scegli tra la modalità casuale e tematica, premi il tasto Spazio per generare nuove opzioni, oppure clicca su 'Carica altro' per espandere la galleria."}},step_2_t:{t:0,b:{t:2,i:[{t:3}],s:"Apri nell'editor"}},step_2_d:{t:0,b:{t:2,i:[{t:3}],s:"Clicca su una palette per aprirla nell'editor. Blocca i colori che vuoi mantenere e genera di nuovo per variare solo gli altri."}},step_3_t:{t:0,b:{t:2,i:[{t:3}],s:"Regola ed esporta"}},step_3_d:{t:0,b:{t:2,i:[{t:3}],s:"Regola il numero di colori, visualizza le scale di tonalità , verifica il contrasto e il daltonismo, poi esporta nel formato che ti serve o condividi tramite link."}},faq_title:{t:0,b:{t:2,i:[{t:3}],s:"Domande frequenti"}},faq1q:{t:0,b:{t:2,i:[{t:3}],s:"Come si genera una palette di colori?"}},faq1a:{t:0,b:{t:2,i:[{t:3}],s:"La pagina si apre già con diverse palette generate automaticamente. Premi la barra spaziatrice (o il pulsante Genera nuove) per crearne altre, oppure scegli un tema come pastello o scuro. Cliccando su una palette si apre l'editor per bloccare i colori e regolarli a piacere."}},faq2q:{t:0,b:{t:2,i:[{t:3}],s:"Qual è la differenza tra la modalità casuale e quella tematica?"}},faq2a:{t:0,b:{t:2,i:[{t:3}],s:"Nella modalità casuale, i colori possono provenire da qualsiasi punto dello spettro. Nella modalità tematica, la generazione è orientata verso un aspetto specifico â pastello usa colori chiari e delicati, scuro usa tonalità a bassa luminosità , vintage usa tonalità invecchiate e desaturate, e così via."}},faq3q:{t:0,b:{t:2,i:[{t:3}],s:"Cos'è lo spazio colore Okhsl e perché è importante?"}},faq3a:{t:0,b:{t:2,i:[{t:3}],s:"Okhsl è un modello di colore percettivamente uniforme. In pratica, questo significa che regolare la luminosità di un colore produce cambiamenti che l'occhio percepisce come gradini regolari, generando palette e tonalità più equilibrate rispetto all'HSL tradizionale, specialmente quando si confrontano colori molto diversi come il giallo e il blu."}},faq5q:{t:0,b:{t:2,i:[{t:3}],s:"Come salvo o condivido una palette?"}},faq5a:{t:0,b:{t:2,i:[{t:3}],s:"Nell'editor, il pulsante Condividi copia un link con i colori codificati nell'URL. Chi apre quel link vedrà esattamente la stessa palette nell'editor. Puoi anche esportare i colori in CSS, SCSS, JSON, Tailwind o come lista HEX."}},see1:{t:0,b:{t:2,i:[{t:3}],s:"Editor di Colori"}},see2:{t:0,b:{t:2,i:[{t:3}],s:"Colori dell'Immagine"}},see3:{t:0,b:{t:2,i:[{t:3}],s:"Colori Casuali"}},see4:{t:0,b:{t:2,i:[{t:3}],s:"Convertitore di Colori"}}}}})}typeof Le=="function"&&Le($a);export{$a as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.