1import{_ as Ce}from"./DcxiuGWS.js";import{_ as ye}from"./DPIaFIMc.js";import{_ as we}from"./CdnNuUX_.js";import{_ as Se}from"./8fY8EC0V.js";import{_ as qe}from"./CXwnfpox.js";import{_ as Pe}from"./CYwGAoYU.js";import{_ as ze}from"./CnzqtAtd.js";import{d as ke,s as Ee,Y as Ge,X as Ie,P as He,M as Te,N as Re,b as Le,C as Ne,w as se,y as i,E as h,A as je,a5 as Je,c as D,o as _,f as o,J as G,g as u,t as d,e as y,k as Ae,K as I,D as J,x as Xe,j as A,F as X,r as B,R as Be}from"./CkpM57L6.js";import{C as V}from"./DE57XRoa.js";import{u as Fe}from"./BgwjXCoU.js";import{_ as Oe}from"./DlAUqK2U.js";import"./B0zWc29K.js";import"./DXrLEPCz.js";const Ue={class:"space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500"},$e={class:"flex flex-col items-center justify-center py-8 gap-4"},We={class:"text-sm text-base-content/60"},De={key:0,role:"alert",class:"alert alert-warning max-w-md rounded-xl"},Ve={class:"text-sm"},Me={class:"flex flex-col md:flex-row gap-6 items-start"},Ye={class:"w-full md:w-auto flex-shrink-0 flex flex-col items-center"},Qe={class:"checkerboard p-2 rounded-2xl border border-base-content/10 bg-base-100 max-w-full overflow-hidden flex items-center justify-center shadow-inner relative"},Ke=["width","height"],Ze={class:"grid gap-6 w-full md:flex-1"},et={class:"flex items-center gap-2 flex-wrap"},tt={class:"text-sm font-medium text-base-content/70"},at={class:"join"},ot=["onClick"],it={class:"grid sm:grid-cols-2 gap-6"},st={class:"space-y-2 bg-base-200/30 p-5 rounded-2xl border border-base-content/10"},rt={class:"text-sm font-bold text-base-content/85 uppercase tracking-wider"},nt={class:"relative group h-32 w-full rounded-xl overflow-hidden shadow-md"},lt={class:"absolute top-2 left-0 right-0 flex justify-center gap-2 z-10"},ct={class:"space-y-2 bg-base-200/30 p-5 rounded-2xl border border-base-content/10"},ut={class:"text-sm font-bold text-base-content/85 uppercase tracking-wider"},dt={key:0,class:"relative group h-32 w-full rounded-xl overflow-hidden shadow-md"},pt={class:"absolute top-2 left-0 right-0 flex justify-center gap-2 z-10"},mt={key:1,class:"h-32 w-full rounded-xl border border-dashed border-base-content/20 flex items-center justify-center text-center text-sm text-base-content/50 px-3"},bt={class:"space-y-2 bg-base-200/30 p-5 rounded-2xl border border-base-content/10"},ft={class:"flex items-center justify-between"},gt={class:"text-sm font-bold text-base-content/85 uppercase tracking-wider"},ht={class:"font-mono text-sm text-primary font-semibold"},vt={class:"space-y-2 bg-base-200/30 p-5 rounded-2xl border border-base-content/10"},_t={class:"text-sm font-bold text-base-content/85 uppercase tracking-wider"},xt={class:"grid grid-cols-1 sm:grid-cols-4 gap-3"},Ct={class:"absolute top-2 left-0 right-0 flex justify-center gap-1.5 z-10"},yt=["onClick"],wt=["onClick"],St={class:"space-y-3 bg-base-200/30 p-5 rounded-2xl border border-base-content/10"},qt={class:"text-sm font-bold text-base-content/85 uppercase tracking-wider"},Pt={class:"flex items-center gap-2 flex-wrap"},zt={class:"join"},kt=["onClick"],Et={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"},Gt={class:"space-y-8"},It={class:"text-base-content/80 leading-relaxed"},Ht={class:"text-2xl font-bold text-base-content mb-3 flex items-center gap-2"},Tt={class:"mb-6 text-base-content/85 leading-relaxed"},Rt={class:"grid sm:grid-cols-2 gap-4"},Lt={class:"shrink-0 mt-0.5"},Nt={class:"text-base-content/80 text-sm leading-relaxed"},b=8,x=9,jt="https://www.freetool.dev",ne=ke({__name:"dominant-colors-of-the-image",setup(M){const m=h(""),H=h([]),T=h(null),R=Je(null),L=h(8),q=h("hex"),z=h(""),C=h(!1),k=h(""),w=h({visible:!1,x:0,y:0,color:""}),{t:e,locale:le}=Ee({useScope:"local"}),ce=Ge(),Y=Ie(),Q=D(()=>`${jt}${ce.path}`),{status:ue}=He("https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.4.0/color-thief.umd.js",{trigger:"client"}),K=D(()=>ue.value==="loaded");function de(s){const t=T.value;if(!t)return;const r=t.getContext("2d",{willReadFrequently:!0});if(!r)return;r.clearRect(0,0,t.width,t.height);const a=Math.min(t.width/s.width,t.height/s.height),l=s.width*a,c=s.height*a;r.drawImage(s,0,0,s.width,s.height,(t.width-l)/2,(t.height-c)/2,l,c)}function F(s){const t=window.ColorThief;if(!t)return;const r=new t;m.value=O(r.getColor(s)),H.value=r.getPalette(s,L.value).map(a=>O(a))}let S=null;function Z(s){const t=Array.isArray(s)?s[0]:s;if(!t)return;z.value="";const r=(window.URL||window.webkitURL).createObjectURL(t),a=new Image;a.onload=()=>{try{S?.(),S=null,R.value=a,de(a),K.value?F(a):S=je(K,l=>{l&&(F(a),S?.(),S=null)})}catch(l){console.error("Failed to process image:",l),z.value=e("process_error")}finally{(window.URL||window.webkitURL).revokeObjectURL(r)}},a.onerror=()=>{(window.URL||window.webkitURL).revokeObjectURL(r),z.value=e("load_error")},a.src=r}function pe(){R.value&&F(R.value)}function ee(s,t){const r=t.getBoundingClientRect(),a=t.width/r.width,l=t.height/r.height;return{x:Math.floor((s.clientX-r.left)*a),y:Math.floor((s.clientY-r.top)*l),rectX:s.clientX-r.left,rectY:s.clientY-r.top}}function te(s,t,r){try{const a=s.getImageData(t,r,1,1).data;return a[3]===0?null:O([a[0],a[1],a[2]])}catch(a){return console.error("Failed to read pixel:",a),null}}function me(s){if(!C.value)return;const t=T.value;if(!t)return;const r=t.getContext("2d",{willReadFrequently:!0});if(!r)return;const{x:a,y:l,rectX:c,rectY:f}=ee(s,t),g=te(r,a,l);if(!g){w.value.visible=!1;return}ge(r,a,l);const v=t.getBoundingClientRect(),n=x*b,p=16,E=c+p+n>v.width?c-n-p:c+p,P=f+p+n>v.height?f-n-p:f+p;w.value={visible:!0,x:E,y:P,color:g}}function be(){w.value.visible=!1}function fe(s){if(!C.value)return;const t=T.value;if(!t)return;const r=t.getContext("2d",{willReadFrequently:!0});if(!r)return;const{x:a,y:l}=ee(s,t),c=te(r,a,l);c&&(k.value=c)}const ae=h(null);function ge(s,t,r){const a=ae.value;if(!a)return;const l=a.getContext("2d");if(!l)return;const c=Math.floor(x/2),f=t-c,g=r-c;l.imageSmoothingEnabled=!1,l.clearRect(0,0,a.width,a.height),l.drawImage(s.canvas,f,g,x,x,0,0,x*b,x*b),l.strokeStyle="rgba(0,0,0,0.6)",l.lineWidth=1,l.strokeRect(c*b,c*b,b,b),l.strokeStyle="rgba(255,255,255,0.9)",l.strokeRect(c*b-1,c*b-1,b+2,b+2)}function he(){C.value=!C.value,C.value||(w.value.visible=!1)}function O(s){const t=s[0]??0,r=s[1]??0,a=s[2]??0;return"#"+((1<<24)+(t<<16)+(r<<8)+a).toString(16).slice(1)}function U(s){const t=Y("color-combination");
1window.open(`${t}?color=${s.replace("#","")}`,"_blank")}function $(s){const t=Y("color-editor");window.open(`${t}?color=${s.replace("#","")}`,"_blank")}const N=h("css"),j=h(!1);function ve(s){if(q.value==="rgb"){const t=parseInt(s.slice(1),16),r=t>>16&255,a=t>>8&255,l=t&255;return`rgb(${r}, ${a}, ${l})`}if(q.value==="hsl"){const t=parseInt(s.slice(1),16),r=t>>16&255,a=t>>8&255,l=t&255,c=r/255,f=a/255,g=l/255,v=Math.max(c,f,g),n=Math.min(c,f,g),p=v-n,E=(v+n)/2;let P=0,ie=0;if(p!==0){switch(ie=E>.5?p/(2-v-n):p/(v+n),v){case c:P=(f-g)/p+(f<g?6:0);break;case f:P=(g-c)/p+2;break;default:P=(c-f)/p+4}P*=60}return`hsl(${Math.round(P)}, ${Math.round(ie*100)}%, ${Math.round(E*100)}%)`}return s}const W=D(()=>{const s=H.value;if(!s.length)return"";const t=N.value==="hex"?s:s.map(ve);switch(N.value){case"hex":return t.join(` 2`);case"css":return`:root { 3`+t.map((r,a)=>` --color-${a+1}: ${r};`).join(` 4`)+` 5}`;case"scss":return t.map((r,a)=>`$color-${a+1}: ${r};`).join(` 6`);case"json":return JSON.stringify(t.reduce((r,a,l)=>({...r,[`color-${l+1}`]:a}),{}),null,2);case"tailwind":return`module.exports = { 7 theme: { 8 extend: { 9 colors: { 10`+t.map((r,a)=>` 'brand-${a+1}': '${r}',`).join(` 11`)+` 12 } 13 } 14 } 15}`;default:return""}});async function _e(){if(W.value)try{await navigator.clipboard.writeText(W.value),j.value=!0,setTimeout(()=>{j.value=!1},1500)}catch(s){console.error("Failed to copy export:",s)}}function oe(s){const t=s.clipboardData?.items;if(t){for(const r of t)if(r.type.startsWith("image/")){const a=r.getAsFile();a&&(Z(a),s.preventDefault());break}}}Te(()=>{window.addEventListener("paste",oe)}),Re(()=>{window.removeEventListener("paste",oe),S?.()});function xe(){m.value="",H.value=[],k.value="",C.value=!1,w.value.visible=!1,R.value=null,z.value="",S?.(),S=null}return Fe({name:e("title"),description:e("meta"),features:[e("feature_1"),e("feature_2"),e("feature_3"),e("feature_4")],faq:[{question:e("faq2q"),answer:e("faq2a")},{question:e("faq3q"),answer:e("faq3a")},{question:e("faq4q"),answer:e("faq4a")},{question:e("faq5q"),answer:e("faq5a")}]}),Le(()=>({htmlAttrs:{lang:le.value},title:e("pageTitle"),link:[{rel:"canonical",href:Q.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:Q.value},{name:"twitter:card",content:"summary"},{name:"twitter:title",content:e("ogTitle")},{name:"twitter:description",content:e("meta")}]})),(s,t)=>{const r=Ce,a=ye,l=we,c=Se,f=qe,g=Pe,v=ze;return _(),Ne(v,{title:i(e)("title"),description:i(e)("meta"),"show-ads":!!m.value,breadcrumb:{label:i(e)("bc"),to:"color-tools"},"see-also-links":[{label:i(e)("see1"),to:"random-colors"},{label:i(e)("see2"),to:"color-editor"},{label:i(e)("see3"),to:"color-combination"},{label:i(e)("see4"),to:"color-palette-generator"}]},{info:se(()=>[o("div",Gt,[o("div",null,[o("p",It,d(i(e)("intro")),1)]),u(l,{title:i(e)("features_title"),items:[i(e)("feature_1"),i(e)("feature_2"),i(e)("feature_3"),i(e)("feature_4")]},null,8,["title","items"]),u(c,{title:i(e)("apps_title"),items:[i(e)("app1"),i(e)("app2"),i(e)("app3"),i(e)("app4"),i(e)("app5")]},null,8,["title","items"]),u(f,{title:i(e)("how_title"),items:[{title:i(e)("step_1_t"),description:i(e)("step_1_d")},{title:i(e)("step_2_t"),description:i(e)("step_2_d")},{title:i(e)("step_3_t"),description:i(e)("step_3_d")}]},null,8,["title","items"]),o("div",null,[o("h2",Ht,[u(a,{name:"heroicons:information-circle-20-solid",class:"text-primary w-6 h-6","aria-hidden":"true"}),A(" "+d(i(e)("tech_title")),1)]),o("p",Tt,d(i(e)("tech_desc")),1),o("div",Rt,[(_(!0),y(X,null,B([i(e)("tech1"),i(e)("tech2"),i(e)("tech3"),i(e)("tech4")],(n,p)=>(_(),y("div",{key:p,class:"bg-base-200/40 p-5 rounded-2xl border border-base-content/10 flex items-start gap-4"},[o("div",Lt,[u(a,{name:"heroicons:information-circle-20-solid",class:"text-info w-5 h-5"})]),o("span",Nt,d(n),1)]))),128))])]),u(g,{title:i(e)("faq_title"),items:[{question:i(e)("faq2q"),answer:i(e)("faq2a")},{question:i(e)("faq3q"),answer:i(e)("faq3a")},{question:i(e)("faq4q"),answer:i(e)("faq4a")},{question:i(e)("faq5q"),answer:i(e)("faq5a")}]},null,8,["title","items"])])]),default:se(()=>[o("div",Ue,[G(o("div",$e,[u(r,{show:!m.value,onOnFile:Z},null,8,["show"]),o("p",We,d(i(e)("paste_hint")),1),z.value?(_(),y("div",De,[u(a,{name:"heroicons:exclamation-triangle-20-solid",class:"w-5 h-5 shrink-0","aria-hidden":"true"}),o("span",Ve,d(z.value),1)])):Ae("",!0)],512),[[I,!m.value]]),G(o("div",Me,[o("div",Ye,[o("div",Qe,[o("canvas",{ref_key:"canvasRef",ref:T,width:"450",height:"300",class:J(["max-w-full h-auto rounded-xl",C.value?"curs
15or-crosshair":"cursor-default"]),onMousemove:me,onMouseleave:be,onClick:fe},null,34),G(o("div",{class:"pointer-events-none absolute z-10 rounded-full overflow-hidden border-2 border-white shadow-lg",style:Xe({width:`${x*b}px`,height:`${x*b}px`,left:`${w.value.x}px`,top:`${w.value.y}px`})},[o("canvas",{ref_key:"magCanvasRef",ref:ae,width:x*b,height:x*b},null,8,Ke)],4),[[I,w.value.visible]])]),o("button",{type:"button",onClick:he,class:J(["btn w-full mt-4 flex items-center gap-2 justify-center rounded-xl",C.value?"btn-primary":"btn-outline btn-primary"])},[u(a,{name:"eyedropper.svg?width=18&height=18&color=currentColor",lib:"mdi"}),A(" "+d(C.value?i(e)("picker_on"):i(e)("picker_off")),1)],2),o("button",{type:"button",onClick:xe,class:"btn btn-ghost w-full mt-2 flex items-center gap-2 justify-center rounded-xl"},[u(a,{name:"restart.svg?width=18&height=18&color=currentColor",lib:"mdi"}),A(" "+d(i(e)("restart")),1)])]),o("div",Ze,[o("div",et,[o("span",tt,d(i(e)("format_label")),1),o("div",at,[(_(),y(X,null,B(["hex","rgb","hsl"],n=>o("button",{key:n,type:"button",class:J(["btn btn-sm join-item uppercase",q.value===n?"btn-primary":"btn-outline"]),onClick:p=>q.value=n},d(n),11,ot)),64))])]),o("div",it,[o("div",st,[o("p",rt,d(i(e)("dominant")),1),o("div",nt,[u(V,{color:m.value,format:q.value,class:"w-full h-full"},null,8,["color","format"]),o("div",lt,[o("button",{onClick:t[0]||(t[0]=n=>$(m.value)),type:"button",class:"p-1.5 rounded-md bg-black/60 hover:bg-black/80 transition-all flex items-center justify-center cursor-pointer opacity-100 md:opacity-0 md:group-hover:opacity-100 text-white shadow-sm",title:"Editor"},[u(a,{name:"mdi:tune-vertical"})]),o("button",{onClick:t[1]||(t[1]=n=>U(m.value)),type:"button",class:"p-1.5 rounded-md bg-black/60 hover:bg-black/80 transition-all flex items-center justify-center cursor-pointer opacity-100 md:opacity-0 md:group-hover:opacity-100 text-white shadow-sm",title:"Combinações"},[u(a,{name:"palette-outline",lib:"mdi"})])])])]),o("div",ct,[o("p",ut,d(i(e)("picked")),1),k.value?(_(),y("div",dt,[u(V,{color:k.value,format:q.value,class:"w-full h-full"},null,8,["color","format"]),o("div",pt,[o("button",{onClick:t[2]||(t[2]=n=>$(k.value)),type:"button",class:"p-1.5 rounded-md bg-black/60 hover:bg-black/80 transition-all flex items-center justify-center cursor-pointer opacity-100 md:opacity-0 md:group-hover:opacity-100 text-white shadow-sm",title:"Editor"},[u(a,{name:"mdi:tune-vertical"})]),o("button",{onClick:t[3]||(t[3]=n=>U(k.value)),type:"button",class:"p-1.5 rounded-md bg-black/60 hover:bg-black/80 transition-all flex items-center justify-center cursor-pointer opacity-100 md:opacity-0 md:group-hover:opacity-100 text-white shadow-sm",title:"Combinações"},[u(a,{name:"palette-outline",lib:"mdi"})])])])):(_(),y("div",mt,d(i(e)("picked_empty")),1))])]),o("div",bt,[o("div",ft,[o("p",gt,d(i(e)("count_label")),1),o("span",ht,d(L.value),1)]),G(o("input",{type:"range",min:"2",max:"16",step:"1","onUpdate:modelValue":t[4]||(t[4]=n=>L.value=n),onChange:pe,class:"range range-primary range-sm w-full"},null,544),[[Be,L.value,void 0,{number:!0}]])])])],512),[[I,m.value]]),G(o("div",vt,[o("p",_t,d(i(e)("palette")),1),o("div",xt,[(_(!0),y(X,null,B(H.value,(n,p)=>(_(),y("div",{key:p,class:"relative group h-32 w-full rounded-xl overflow-hidden shadow-sm"},[u(V,{color:n,format:q.value,class:"w-full h-full"},null,8,["color","format"]),o("div",Ct,[o("button",{onClick:E=>$(n),type:"button",class:"p-1.5 rounded-md bg-black/60 hover:bg-black/80 transition-all flex items-center justify-center cursor-pointer opacity-100 md:opacity-0 md:group-hover:opacity-100 text-white shadow-sm",title:"Editor"},[u(a,{name:"mdi:tune-vertical",class:"w-4 h-4"})],8,yt),o("button",{onClick:E=>U(n),type:"button",class:"p-1.5 rounded-md bg-black/60 hover:bg-black/80 transition-all flex items-center justify-center cursor-pointer opacity-100 md:opacity-0 md:group-hover:opacity-100 text-white shadow-sm",title:"Combinações"},[u(a,{name:"palette-outline",lib:"mdi",class:"w-4 h-4"})],8,wt)])]))),128))])],512),[[I,m.value]]),G(o("div",St,[o("p",qt,d(i(e)("export_label")),1),o("div",Pt,[o("div",zt,[(_(),y(X,null,B(["hex","css","scss","
15json","tailwind"],n=>o("button",{key:n,type:"button",class:J(["btn btn-xs sm:btn-sm join-item",N.value===n?"btn-primary":"btn-outline"]),onClick:p=>N.value=n},d(n==="css"?"CSS":n==="scss"?"SCSS":n==="json"?"JSON":n==="tailwind"?"Tailwind":"HEX"),11,kt)),64))]),o("button",{type:"button",onClick:_e,class:"btn btn-sm btn-secondary flex items-center gap-1.5 ml-auto"},[u(a,{name:j.value?"material-symbols:check-rounded":"material-symbols:content-copy-outline",class:"w-4 h-4"},null,8,["name"]),A(" "+d(j.value?i(e)("copied"):i(e)("copy_all")),1)])]),o("pre",Et,[o("code",null,d(W.value),1)])],512),[[I,m.value]])])]),_:1},8,["title","description","show-ads","breadcrumb","see-also-links"])}}});function re(M){const m=M;m.__i18n=m.__i18n||[],m.__i18n.push({locale:"",resource:{en:{pageTitle:{t:0,b:{t:2,i:[{t:3}],s:"Dominant Colors Palette from Image & Color Picker"}},ogTitle:{t:0,b:{t:2,i:[{t:3}],s:"Image Color Palette & Color Picker â Extract Colors from Any Photo"}},ogLocale:{t:0,b:{t:2,i:[{t:3}],s:"en_US"}},title:{t:0,b:{t:2,i:[{t:3}],s:"Image Colors"}},bc:{t:0,b:{t:2,i:[{t:3}],s:"Color Tools"}},intro:{t:0,b:{t:2,i:[{t:3}],s:`Get the color palette of any image, photo, or illustration. Automatically detect the dominant color and generate a complete color palette from photos, screenshots, logos, illustrations, and product images. Hover over the image with the eyedropper to read the exact color of any pixel, switch between HEX, RGB, and HSL, and export the whole palette as CSS, SCSS, JSON, or Tailwind. 16 17Our Color Extractor performs all processing directly in your browser, ensuring complete privacy and instant results. Ideal for UI/UX, branding, CSS variables, design systems, moodboards, and professional visual analysis.`}},meta:{t:0,b:{t:2,i:[{t:3}],s:"Generate color palettes from any image, photo, or picture. Pick exact pixel colors, switch between HEX, RGB and HSL, and export to CSS, SCSS, JSON or Tailwind."}},how_title:{t:0,b:{t:2,i:[{t:3}],s:"How It Works"}},step_1_t:{t:0,b:{t:2,i:[{t:3}],s:"Upload the Image"}},step_1_d:{t:0,b:{t:2,i:[{t:3}],s:"Upload, drag and drop, or paste (Ctrl+V) the image you want to analyze."}},step_2_t:{t:0,b:{t:2,i:[{t:3}],s:"Analyze the Profile"}},step_2_d:{t:0,b:{t:2,i:[{t:3}],s:"The tool analyzes the pixel distribution to identify the dominant color and extract the colors most present in the image. Use the slider to choose how many colors the palette should contain."}},step_3_t:{t:0,b:{t:2,i:[{t:3}],s:"Pick, Copy, or Export"}},step_3_d:{t:0,b:{t:2,i:[{t:3}],s:"Click any swatch to copy it, enable the eyedropper to read a specific pixel, or export the full palette in your preferred code format."}},apps_title:{t:0,b:{t:2,i:[{t:3}],s:"Common Applications"}},app1:{t:0,b:{t:2,i:[{t:3}],s:"Extract palettes from logos, screenshots, hero images and product photos to build interfaces visually aligned with brand identity"}},app2:{t:0,b:{t:2,i:[{t:3}],s:"Capture HEX codes from reference images to assemble brand boards, presentations, ads and social media layouts"}},app3:{t:0,b:{t:2,i:[{t:3}],s:"Identify background, highlight and supporting colors from photographs before building landing pages, banners or ecommerce pages"}},app4:{t:0,b:{t:2,i:[{t:3}],s:"Analyze artwork, illustrations and portfolio images to understand the chromatic balance and visual style of a project"}},app5:{t:0,b:{t:2,i:[{t:3}],s:"Export palettes straight into your stack as CSS variables, SCSS, JSON or a Tailwind config to keep design and code in sync"}},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 practical details affect how extracted colors should be interpreted in real projects:"}},tech1:{t:0,b:{t:2,i:[{t:3}],s:"The dominant color is not always the most visually important one. Large backgrounds, shadows or neutral areas may occupy more space in the image than the main subject's colors, even when those are visually more striking"}},tech2:{t:0,b:{t:2,i:[{t:3}],s:"Images with gradients, lighting variations, blur or compression may produce approximate palettes and not necessarily exact branding values"}}
17,tech3:{t:0,b:{t:2,i:[{t:3}],s:"For a cleaner and more consistent palette, use a cropped image highlighting the main subject, or use the eyedropper to read an exact pixel instead of relying on the automatic palette"}},tech4:{t:0,b:{t:2,i:[{t:3}],s:"All conversions between HEX, RGB and HSL are computed in your browser. The values shown are standard sRGB representations and are intended for quick exploration; validate critical brand values in your design workflow"}},faq_title:{t:0,b:{t:2,i:[{t:3}],s:"Questions and Answers"}},faq2q:{t:0,b:{t:2,i:[{t:3}],s:"Which image formats work best?"}},faq2a:{t:0,b:{t:2,i:[{t:3}],s:"Common formats like PNG, JPG/JPEG and WebP work well. Cleaner images with less compression and a clearer main subject tend to produce more useful palettes. HEIC files from phones may not be supported by the browser."}},faq3q:{t:0,b:{t:2,i:[{t:3}],s:"Why does the dominant color sometimes look different from the main subject?"}},faq3a:{t:0,b:{t:2,i:[{t:3}],s:"Because the tool analyzes the overall pixel distribution. If the image has a large background, shadows or neutral areas, those regions may influence the dominant result more than a smaller highlighted object. The eyedropper lets you read the exact color you actually want."}},faq4q:{t:0,b:{t:2,i:[{t:3}],s:"How do I extract a color palette from a photo?"}},faq4a:{t:0,b:{t:2,i:[{t:3}],s:"Upload, drag, or paste your photo. The tool instantly analyses the pixel distribution and extracts the dominant colour plus a full palette with HEX codes. You can then switch the notation to RGB or HSL and export everything at once."}},faq5q:{t:0,b:{t:2,i:[{t:3}],s:"Can I pick the color of a specific point in the image?"}},faq5a:{t:0,b:{t:2,i:[{t:3}],s:"Yes. Enable the eyedropper and move the cursor over the image: a magnifier shows a zoomed view, and clicking captures the exact pixel color into the 'Picked color' panel."}},features_title:{t:0,b:{t:2,i:[{t:3}],s:"Key Features"}},feature_1:{t:0,b:{t:2,i:[{t:3}],s:"Pick the exact color of any pixel with the eyedropper and zoom"}},feature_2:{t:0,b:{t:2,i:[{t:3}],s:"Generate palettes and choose how many colors to extract"}},feature_3:{t:0,b:{t:2,i:[{t:3}],s:"Copy in HEX, RGB or HSL and export to CSS, SCSS, JSON or Tailwind"}},feature_4:{t:0,b:{t:2,i:[{t:3}],s:"Upload, drag and drop, or paste a screenshot â supports JPG, PNG and WebP"}},restart:{t:0,b:{t:2,i:[{t:3}],s:"Start Over"}},dominant:{t:0,b:{t:2,i:[{t:3}],s:"Dominant color"}},picked:{t:0,b:{t:2,i:[{t:3}],s:"Picked color"}},picked_empty:{t:0,b:{t:2,i:[{t:3}],s:"Enable the eyedropper and click the image to pick a color"}},palette:{t:0,b:{t:2,i:[{t:3}],s:"Image palette"}},format_label:{t:0,b:{t:2,i:[{t:3}],s:"Format:"}},count_label:{t:0,b:{t:2,i:[{t:3}],s:"Number of colors"}},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"}},copied:{t:0,b:{t:2,i:[{t:3}],s:"Copied!"}},picker_on:{t:0,b:{t:2,i:[{t:3}],s:"Eyedropper on"}},picker_off:{t:0,b:{t:2,i:[{t:3}],s:"Eyedropper"}},paste_hint:{t:0,b:{t:2,i:[{t:3}],s:"You can also paste an image with Ctrl+V"}},load_error:{t:0,b:{t:2,i:[{t:3}],s:"This image could not be loaded. It may be in an unsupported format (for example HEIC). Try a JPG, PNG or WebP file."}},process_error:{t:0,b:{t:2,i:[{t:3}],s:"This image couldn't be processed. Please try a different file (JPG, PNG or WebP)."}}
17,see1:{t:0,b:{t:2,i:[{t:3}],s:"Random Color Generator"}},see2:{t:0,b:{t:2,i:[{t:3}],s:"Color Editor"}},see3:{t:0,b:{t:2,i:[{t:3}],s:"Color Combination"}},see4:{t:0,b:{t:2,i:[{t:3}],s:"Color Palette Generator"}}},pt:{pageTitle:{t:0,b:{t:2,i:[{t:3}],s:"Paleta de Cores Dominantes da Imagem e Conta-gotas"}},ogTitle:{t:0,b:{t:2,i:[{t:3}],s:"Gerador de Paleta e Seletor de Cores de Imagem â Extraia Cores de Fotos"}},ogLocale:{t:0,b:{t:2,i:[{t:3}],s:"pt_BR"}},title:{t:0,b:{t:2,i:[{t:3}],s:"Cores da Imagem"}},bc:{t:0,b:{t:2,i:[{t:3}],s:"Ferramentas de Cores"}},intro:{t:0,b:{t:2,i:[{t:3}],s:`Obtenha a paleta de cores de qualquer imagem, foto ou ilustração. Detecte automaticamente a cor dominante e gere uma paleta completa a partir de fotos, screenshots, logos, ilustrações e imagens de produtos. Passe o conta-gotas sobre a imagem para ler a cor exata de qualquer pixel, alterne entre HEX, RGB e HSL e exporte a paleta inteira como CSS, SCSS, JSON ou Tailwind. 18 19Nosso Extrator de Cores realiza todo o processamento diretamente no seu navegador, garantindo total privacidade e resultados instantâneos. Ideal para UI/UX, branding, variáveis CSS, design systems, moodboards e análise visual profissional.`}},meta:{t:0,b:{t:2,i:[{t:3}],s:"Gere paletas de cores a partir de qualquer imagem ou foto. Capture a cor exata de cada pixel, alterne entre HEX, RGB e HSL e exporte para CSS, SCSS, JSON ou Tailwind."}},how_title:{t:0,b:{t:2,i:[{t:3}],s:"Como Funciona"}},step_1_t:{t:0,b:{t:2,i:[{t:3}],s:"Envie a Imagem"}},step_1_d:{t:0,b:{t:2,i:[{t:3}],s:"Faça upload, arraste e solte ou cole (Ctrl+V) a imagem que você quer analisar."}},step_2_t:{t:0,b:{t:2,i:[{t:3}],s:"Analise o Perfil"}},step_2_d:{t:0,b:{t:2,i:[{t:3}],s:"A ferramenta analisa a distribuição dos pixels para identificar a cor predominante e extrair as cores mais presentes na imagem. Use o controle deslizante para escolher quantas cores a paleta deve ter."}},step_3_t:{t:0,b:{t:2,i:[{t:3}],s:"Capture, Copie ou Exporte"}},step_3_d:{t:0,b:{t:2,i:[{t:3}],s:"Clique em qualquer amostra para copiá-la, ative o conta-gotas para ler um pixel especÃfico ou exporte a paleta completa no formato de código que preferir."}},apps_title:{t:0,b:{t:2,i:[{t:3}],s:"Aplicações Comuns"}},app1:{t:0,b:{t:2,i:[{t:3}],s:"Extraia paletas de logos, screenshots, hero images e fotos de produtos para criar interfaces visualmente alinhadas à identidade da marca"}},app2:{t:0,b:{t:2,i:[{t:3}],s:"Capture códigos HEX de imagens de referência para montar brand boards, apresentações, anúncios e layouts para redes sociais"}},app3:{t:0,b:{t:2,i:[{t:3}],s:"Identifique cores de fundo, destaque e apoio a partir de fotografias antes de criar landing pages, banners ou páginas de ecommerce"}},app4:{t:0,b:{t:2,i:[{t:3}],s:"Analise artes, ilustrações e imagens de portfólio para compreender o equilÃbrio cromático e o estilo visual de um projeto"}},app5:{t:0,b:{t:2,i:[{t:3}],s:"Exporte paletas diretamente para o seu projeto como variáveis CSS, SCSS, JSON ou configuração do Tailwind para manter design e código sincronizados"}},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 práticos afetam a forma como as cores extraÃdas devem ser interpretadas em projetos reais:"}},tech1:{t:0,b:{t:2,i:[{t:3}],s:"A cor dominante nem sempre é a visualmente mais importante. Fundos amplos, sombras ou áreas neutras podem ocupar mais espaço na imagem do que as cores do elemento principal, mesmo que estas sejam visualmente mais marcantes"}},tech2:{t:0,b:{t:2,i:[{t:3}],s:"Imagens com gradientes, variações de iluminação, desfoque ou compressão podem gerar paletas aproximadas e não necessariamente valores exatos de branding"}},tech3:{t:0,b:{t:2,i:[{t:3}],s:"Para obter uma paleta mais limpa e consistente, utilize uma imagem recortada destacando o elemento principal, ou use o conta-gotas para ler um pixel exato em vez de depender apenas da paleta automática"}},tech4:{t:0,b:{t:2,i:[{t:3}],s:"Todas as conversões entre HEX, RGB e HSL são calculadas no seu navegador. Os valores exibidos são representações sRGB padrão, voltadas para exploração rápida; valide os valores crÃticos de marca no seu fluxo de design"}},faq_title:{t:0,b:{t:2,i:[{t:3}],s:"Perguntas e Respostas"}},faq2q:{t:0,b:{t:2,i:[{t:3}],s:"Quais formatos de imagem funcionam melhor?"}},faq2a:{t:0,b:{t:2,i:[{t:3}],s:"Formatos comuns como PNG, JPG/JPEG e WebP funcionam bem. Imagens mais limpas, com menos compressão e com o assunto principal mais claro, costumam gerar paletas mais úteis. Arquivos HEIC de celular podem não ser suportados pelo navegador."}},faq3q:{t:0,b:{t:2,i:[{t:3}],s:"Por que a cor dominante à s vezes parece diferente do objeto principal?"}},faq3a:{t:0,b:{t:2,i:[{t:3}],s:"Porque a ferramenta analisa a distribuição geral dos pixels. Se a imagem tiver muito fundo, sombras ou áreas neutras, essas regiões podem influenciar o resultado dominante mais do que um objeto menor em destaque. O conta-gotas permite ler exatamente a cor que você quer."}},faq4q:{t:0,b:{t:2,i:[{t:3}],s:"Como extrair uma paleta de cores de uma foto?"}},faq4a:{t:0,b:{t:2,i:[{t:3}],s:"Faça upload, arraste ou cole sua foto. A ferramenta analisa instantaneamente a distribuição de pixels e extrai a cor dominante mais uma paleta completa com códigos HEX. Depois é possÃvel alternar a notação para RGB ou HSL e exportar tudo de uma vez."}},faq5q:{t:0,b:{t:2,i:[{t:3}],s:"Posso capturar a cor de um ponto especÃfico da imagem?"}},faq5a:{t:0,b:{t:2,i:[{t:3}],s:"Sim. Ative o conta-gotas e mova o cursor sobre a imagem: uma lupa mostra a área ampliada e, ao clicar, a cor exata do pixel é capturada no painel 'Cor selecionada'."}},features_title:{t:0,b:{t:2,i:[{t:3}],s:"Principais Recursos"}},feature_1:{t:0,b:{t:2,i:[{t:3}],s:"Capture a cor exata de qualquer pixel com o conta-gotas e o zoom"}},feature_2:{t:0,b:{t:2,i:[{t:3}],s:"Gere paletas e escolha quantas cores extrair"}},feature_3:{t:0,b:{t:2,i:[{t:3}],s:"Copie em HEX, RGB ou HSL e exporte para CSS, SCSS, JSON ou Tailwind"}},feature_4:{t:0,b:{t:2,i:[{t:3}],s:"Faça upload, arraste ou cole um print â suporta JPG, PNG e WebP"}},restart:{t:0,b:{t:2,i:[{t:3}],s:"Recomeçar"}},dominant:{t:0,b:{t:2,i:[{t:3}],s:"Cor dominante"}},picked:{t:0,b:{t:2,i:[{t:3}],s:"Cor selecionada"}},picked_empty:{t:0,b:{t:2,i:[{t:3}],s:"Ative o conta-gotas e clique na imagem para capturar uma cor"}},palette:{t:0,b:{t:2,i:[{t:3}],s:"Paleta da imagem"}},format_label:{t:0,b:{t:2,i:[{t:3}],s:"Formato:"}}
19,count_label:{t:0,b:{t:2,i:[{t:3}],s:"Número de cores"}},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"}},copied:{t:0,b:{t:2,i:[{t:3}],s:"Copiado!"}},picker_on:{t:0,b:{t:2,i:[{t:3}],s:"Conta-gotas ativo"}},picker_off:{t:0,b:{t:2,i:[{t:3}],s:"Conta-gotas"}},paste_hint:{t:0,b:{t:2,i:[{t:3}],s:"Você também pode colar uma imagem com Ctrl+V"}},load_error:{t:0,b:{t:2,i:[{t:3}],s:"Não foi possÃvel carregar esta imagem. Ela pode estar em um formato não suportado (por exemplo HEIC). Tente um arquivo JPG, PNG ou WebP."}},process_error:{t:0,b:{t:2,i:[{t:3}],s:"Não foi possÃvel processar esta imagem. Tente um arquivo diferente (JPG, PNG ou WebP)."}},see1:{t:0,b:{t:2,i:[{t:3}],s:"Cores Aleatórias"}},see2:{t:0,b:{t:2,i:[{t:3}],s:"Editor de Cores"}},see3:{t:0,b:{t:2,i:[{t:3}],s:"Combinação de Cores"}},see4:{t:0,b:{t:2,i:[{t:3}],s:"Gerador de Paleta de Cores"}}},es:{pageTitle:{t:0,b:{t:2,i:[{t:3}],s:"Paleta de Colores Dominantes de la Imagen y Cuentagotas"}},ogTitle:{t:0,b:{t:2,i:[{t:3}],s:"Generador de Paleta y Selector de Colores de Imagen â Extrae Colores de Fotos"}},ogLocale:{t:0,b:{t:2,i:[{t:3}],s:"es_ES"}},title:{t:0,b:{t:2,i:[{t:3}],s:"Colores de la Imagen"}},bc:{t:0,b:{t:2,i:[{t:3}],s:"Herramientas de Color"}},intro:{t:0,b:{t:2,i:[{t:3}],s:`Obtén la paleta de colores de cualquier imagen, foto o ilustración. Detecta automáticamente el color dominante y genera una paleta completa a partir de fotos, capturas de pantalla, logotipos, ilustraciones e imágenes de productos. Pasa el cuentagotas sobre la imagen para leer el color exacto de cualquier pÃxel, alterna entre HEX, RGB y HSL y exporta toda la paleta como CSS, SCSS, JSON o Tailwind. 20 21Nuestro Extractor de Colores realiza todo el procesamiento directamente en tu navegador, garantizando total privacidad y resultados instantáneos. Ideal para UI/UX, branding, variables CSS, sistemas de diseño, moodboards y análisis visual profesional.`}},meta:{t:0,b:{t:2,i:[{t:3}],s:"Genera paletas de colores a partir de cualquier imagen o foto. Captura el color exacto de cada pÃxel, alterna entre HEX, RGB y HSL y exporta a CSS, SCSS, JSON o Tailwind."}},how_title:{t:0,b:{t:2,i:[{t:3}],s:"Cómo Funciona"}},step_1_t:{t:0,b:{t:2,i:[{t:3}],s:"Sube la Imagen"}},step_1_d:{t:0,b:{t:2,i:[{t:3}],s:"Sube, arrastra y suelta o pega (Ctrl+V) la imagen que quieres analizar."}},step_2_t:{t:0,b:{t:2,i:[{t:3}],s:"Analiza el Perfil"}},step_2_d:{t:0,b:{t:2,i:[{t:3}],s:"La herramienta analiza la distribución de pÃxeles para identificar el color predominante y extraer los colores más presentes en la imagen. Usa el control deslizante para elegir cuántos colores tendrá la paleta."}},step_3_t:{t:0,b:{t:2,i:[{t:3}],s:"Captura, Copia o Exporta"}},step_3_d:{t:0,b:{t:2,i:[{t:3}],s:"Haz clic en cualquier muestra para copiarla, activa el cuentagotas para leer un pÃxel especÃfico o exporta la paleta completa en el formato de código que prefieras."}},apps_title:{t:0,b:{t:2,i:[{t:3}],s:"Aplicaciones Comunes"}},app1:{t:0,b:{t:2,i:[{t:3}],s:"Extrae paletas de logos, capturas de pantalla, hero images y fotos de productos para crear interfaces visualmente alineadas con la identidad de marca"}},app2:{t:0,b:{t:2,i:[{t:3}],s:"Captura códigos HEX de imágenes de referencia para armar brand boards, presentaciones, anuncios y layouts para redes sociales"}},app3:{t:0,b:{t:2,i:[{t:3}],s:"Identifica colores de fondo, destaque y apoyo a partir de fotografÃas antes de crear landing pages, banners o páginas de ecommerce"}},app4:{t:0,b:{t:2,i:[{t:3}],s:"Analiza artes, ilustraciones e imágenes de portafolio para comprender el equilibrio cromático y el estilo visual de un proyecto"}},app5:{t:0,b:{t:2,i:[{t:3}],s:"Exporta paletas directamente a tu proyecto como variables CSS, SCSS, JSON o configuración de Tailwind para mantener diseño y código sincronizados"}},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 prácticos afectan la forma en que los colores extraÃdos deben interpretarse en proyectos reales:"}},tech1:{t:0,b:{t:2,i:[{t:3}],s:"El color dominante no siempre es el más importante visualmente. Fondos amplios, sombras o áreas neutras pueden ocupar más espacio en la imagen que los colores del elemento principal, aunque estos sean visualmente más llamativos"}},tech2:{t:0,b:{t:2,i:[{t:3}],s:"Las imágenes con degradados, variaciones de iluminación, desenfoque o compresión pueden generar paletas aproximadas y no necesariamente valores exactos de branding"}},tech3:{t:0,b:{t:2,i:[{t:3}],s:"Para obtener una paleta más limpia y consistente, usa una imagen recortada que destaque el elemento principal, o usa el cuentagotas para leer un pÃxel exacto en lugar de depender solo de la paleta automática"}}
21,tech4:{t:0,b:{t:2,i:[{t:3}],s:"Todas las conversiones entre HEX, RGB y HSL se calculan en tu navegador. Los valores mostrados son representaciones sRGB estándar, pensadas para exploración rápida; valida los valores crÃticos de marca en tu flujo de diseño"}},faq_title:{t:0,b:{t:2,i:[{t:3}],s:"Preguntas y Respuestas"}},faq2q:{t:0,b:{t:2,i:[{t:3}],s:"¿Qué formatos de imagen funcionan mejor?"}},faq2a:{t:0,b:{t:2,i:[{t:3}],s:"Formatos comunes como PNG, JPG/JPEG y WebP funcionan bien. Las imágenes más limpias, con menos compresión y con el sujeto principal más claro, suelen generar paletas más útiles. Los archivos HEIC de los móviles pueden no ser compatibles con el navegador."}},faq3q:{t:0,b:{t:2,i:[{t:3}],s:"¿Por qué el color dominante a veces parece diferente al objeto principal?"}},faq3a:{t:0,b:{t:2,i:[{t:3}],s:"Porque la herramienta analiza la distribución general de pÃxeles. Si la imagen tiene mucho fondo, sombras o áreas neutras, esas regiones pueden influir en el resultado dominante más que un objeto más pequeño en primer plano. El cuentagotas te permite leer exactamente el color que quieres."}},faq4q:{t:0,b:{t:2,i:[{t:3}],s:"¿Cómo extraigo una paleta de colores de una foto?"}},faq4a:{t:0,b:{t:2,i:[{t:3}],s:"Sube, arrastra o pega tu foto. La herramienta analiza al instante la distribución de pÃxeles y extrae el color dominante más una paleta completa con códigos HEX. Después puedes cambiar la notación a RGB o HSL y exportar todo de una vez."}},faq5q:{t:0,b:{t:2,i:[{t:3}],s:"¿Puedo capturar el color de un punto especÃfico de la imagen?"}},faq5a:{t:0,b:{t:2,i:[{t:3}],s:"SÃ. Activa el cuentagotas y mueve el cursor sobre la imagen: una lupa muestra la zona ampliada y, al hacer clic, el color exacto del pÃxel se captura en el panel 'Color seleccionado'."}},features_title:{t:0,b:{t:2,i:[{t:3}],s:"CaracterÃsticas Principales"}},feature_1:{t:0,b:{t:2,i:[{t:3}],s:"Captura el color exacto de cualquier pÃxel con el cuentagotas y el zoom"}},feature_2:{t:0,b:{t:2,i:[{t:3}],s:"Genera paletas y elige cuántos colores extraer"}},feature_3:{t:0,b:{t:2,i:[{t:3}],s:"Copia en HEX, RGB o HSL y exporta a CSS, SCSS, JSON o Tailwind"}},feature_4:{t:0,b:{t:2,i:[{t:3}],s:"Sube, arrastra o pega una captura â compatible con JPG, PNG y WebP"}},restart:{t:0,b:{t:2,i:[{t:3}],s:"Empezar de nuevo"}},dominant:{t:0,b:{t:2,i:[{t:3}],s:"Color dominante"}},picked:{t:0,b:{t:2,i:[{t:3}],s:"Color seleccionado"}},picked_empty:{t:0,b:{t:2,i:[{t:3}],s:"Activa el cuentagotas y haz clic en la imagen para capturar un color"}},palette:{t:0,b:{t:2,i:[{t:3}],s:"Paleta de la imagen"}},format_label:{t:0,b:{t:2,i:[{t:3}],s:"Formato:"}},count_label:{t:0,b:{t:2,i:[{t:3}],s:"Número de colores"}},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"}},copied:{t:0,b:{t:2,i:[{t:3}],s:"¡Copiado!"}},picker_on:{t:0,b:{t:2,i:[{t:3}],s:"Cuentagotas activo"}},picker_off:{t:0,b:{t:2,i:[{t:3}],s:"Cuentagotas"}},paste_hint:{t:0,b:{t:2,i:[{t:3}],s:"También puedes pegar una imagen con Ctrl+V"}},load_error:{t:0,b:{t:2,i:[{t:3}],s:"No se pudo cargar esta imagen. Puede estar en un formato no compatible (por ejemplo HEIC). Prueba con un archivo JPG, PNG o WebP."}},process_error:{t:0,b:{t:2,i:[{t:3}],s:"No se pudo procesar esta imagen. Prueba con un archivo diferente (JPG, PNG o WebP)."}},see1:{t:0,b:{t:2,i:[{t:3}],s:"Colores Aleatorios"}},see2:{t:0,b:{t:2,i:[{t:3}],s:"Editor de Colores"}},see3:{t:0,b:{t:2,i:[{t:3}],s:"Combinación de Colores"}},see4:{t:0,b:{t:2,i:[{t:3}],s:"Generador de Paletas de Colores"}}},fr:{pageTitle:{t:0,b:{t:2,i:[{t:3}],s:"Palette de Couleurs Dominantes de l'Image & Pipette"}},ogTitle:{t:0,b:{t:2,i:[{t:3}],s:"Générateur de Palette & Sélecteur de Couleurs â Extrayez les Couleurs"}},ogLocale:{t:0,b:{t:2,i:[{t:3}],s:"fr_FR"}},title:{t:0,b:{t:2,i:[{t:3}],s:"Couleurs de l'Image"}},bc:{t:0,b:{t:2,i:[{t:3}],s:"Outils de Couleurs"}},intro:{t:0,b:{t:2,i:[{t:3}],s:`Obtenez la palette de couleurs de n'importe quelle image, photo ou illustration. Détectez automatiquement la couleur dominante et générez une palette complète à partir de photos, captures d'écran, logos, illustrations et images de produits. Passez la pipette sur l'image pour lire la couleur exacte de n'importe quel pixel, basculez entre HEX, RGB et HSL et exportez toute la palette en CSS, SCSS, JSON ou Tailwind. 22
23Notre Extracteur de Couleurs effectue tout le traitement directement dans votre navigateur, garantissant une confidentialité totale et des résultats instantanés. Idéal pour l'UI/UX, le branding, les variables CSS, les design systems, les moodboards et l'analyse visuelle professionnelle.`}},meta:{t:0,b:{t:2,i:[{t:3}],s:"Générez des palettes de couleurs à partir de n'importe quelle image ou photo. Capturez la couleur exacte de chaque pixel, basculez entre HEX, RGB et HSL et exportez en CSS, SCSS, JSON ou Tailwind."}},how_title:{t:0,b:{t:2,i:[{t:3}],s:"Comment ça Fonctionne"}},step_1_t:{t:0,b:{t:2,i:[{t:3}],s:"Envoyez l'Image"}},step_1_d:{t:0,b:{t:2,i:[{t:3}],s:"Téléchargez, glissez-déposez ou collez (Ctrl+V) l'image que vous souhaitez analyser."}},step_2_t:{t:0,b:{t:2,i:[{t:3}],s:"Analysez le Profil"}},step_2_d:{t:0,b:{t:2,i:[{t:3}],s:"L'outil analyse la distribution des pixels pour identifier la couleur prédominante et extraire les couleurs les plus présentes. Utilisez le curseur pour choisir le nombre de couleurs de la palette."}},step_3_t:{t:0,b:{t:2,i:[{t:3}],s:"Capturez, Copiez ou Exportez"}},step_3_d:{t:0,b:{t:2,i:[{t:3}],s:"Cliquez sur un échantillon pour le copier, activez la pipette pour lire un pixel précis ou exportez la palette complète dans le format de code de votre choix."}},apps_title:{t:0,b:{t:2,i:[{t:3}],s:"Applications Courantes"}},app1:{t:0,b:{t:2,i:[{t:3}],s:"Extrayez des palettes de logos, de captures d'écran, d'images d'en-tête (hero images) et de photos de produits pour créer des interfaces visuellement alignées sur l'identité de la marque"}},app2:{t:0,b:{t:2,i:[{t:3}],s:"Capturez des codes HEX à partir d'images de référence pour concevoir des brand boards, des présentations, des publicités et des mises en page pour les réseaux sociaux"}},app3:{t:0,b:{t:2,i:[{t:3}],s:"Identifiez les couleurs d'arrière-plan, de mise en valeur et de soutien à partir de photographies avant de créer des landing pages, des bannières ou des pages d'e-commerce"}},app4:{t:0,b:{t:2,i:[{t:3}],s:"Analysez des Åuvres d'art, des illustrations et des images de portfolio pour comprendre l'équilibre chromatique et le style visuel d'un projet"}},app5:{t:0,b:{t:2,i:[{t:3}],s:"Exportez les palettes directement dans votre stack sous forme de variables CSS, SCSS, JSON ou de configuration Tailwind pour garder le design et le code synchronisés"}},tech_title:{t:0,b:{t:2,i:[{t:3}],s:"Notes Techniques"}},tech_desc:{t:0,b:{t:2,i:[{t:3}],s:"Certains détails pratiques influencent la manière dont les couleurs extraites doivent être interprétées dans les projets réels :"}},tech1:{t:0,b:{t:2,i:[{t:3}],s:"La couleur dominante n'est pas toujours la plus importante visuellement. Des arrière-plans larges, des ombres ou des zones neutres peuvent occuper plus d'espace sur l'image que les couleurs de l'élément principal, même si ces dernières sont visuellement plus marquantes"}},tech2:{t:0,b:{t:2,i:[{t:3}],s:"Les images avec des dégradés, des variations de lumière, du flou ou de la compression peuvent générer des palettes approximatives et pas nécessairement des valeurs de branding exactes"}},tech3:{t:0,b:{t:2,i:[{t:3}],s:"Pour obtenir une palette plus propre et plus cohérente, utilisez une image recadrée mettant en valeur l'élément principal, ou utilisez la pipette pour lire un pixel exact plutôt que de vous fier uniquement à la palette automatique"}},tech4:{t:0,b:{t:2,i:[{t:3}],s:"Toutes les conversions entre HEX, RGB et HSL sont calculées dans votre navigateur. Les valeurs affichées sont des représentations sRGB standard, destinées à une exploration rapide ; validez les valeurs de marque critiques dans votre flux de conception"}},faq_title:{t:0,b:{t:2,i:[{t:3}],s:"Questions et Réponses"}},faq2q:{t:0,b:{t:2,i:[{t:3}],s:"Quels formats d'image fonctionnent le mieux ?"}},faq2a:{t:0,b:{t:2,i:[{t:3}],s:"Les formats courants comme PNG, JPG/JPEG et WebP fonctionnent très bien. Les images plus nettes, moins compressées et avec le sujet principal bien visible ont tendance à générer des palettes plus utiles. Les fichiers HEIC des téléphones peuvent ne pas être pris en charge par le navigateur."}},faq3q:{t:0,b:{t:2,i:[{t:3}],s:"Pourquoi la couleur dominante semble-t-elle parfois différente de l'objet principal ?"}},faq3a:{t:0,b:{t:2,i:[{t:3}],s:"Parce que l'outil analyse la distribution globale des pixels. Si l'image comporte un grand arr
23ière-plan, des ombres ou des zones neutres, ces régions peuvent influencer le résultat dominant plus qu'un objet plus petit mis en valeur. La pipette vous permet de lire exactement la couleur souhaitée."}},faq4q:{t:0,b:{t:2,i:[{t:3}],s:"Comment extraire une palette de couleurs depuis une photo ?"}},faq4a:{t:0,b:{t:2,i:[{t:3}],s:"Téléversez, glissez ou collez votre photo. L'outil analyse instantanément la distribution des pixels et extrait la couleur dominante ainsi qu'une palette complète avec codes HEX. Vous pouvez ensuite basculer la notation en RGB ou HSL et tout exporter d'un coup."}},faq5q:{t:0,b:{t:2,i:[{t:3}],s:"Puis-je capturer la couleur d'un point précis de l'image ?"}},faq5a:{t:0,b:{t:2,i:[{t:3}],s:"Oui. Activez la pipette et déplacez le curseur sur l'image : une loupe affiche une vue agrandie et un clic capture la couleur exacte du pixel dans le panneau « Couleur sélectionnée »."}},features_title:{t:0,b:{t:2,i:[{t:3}],s:"Principaux Atouts"}},feature_1:{t:0,b:{t:2,i:[{t:3}],s:"Capturez la couleur exacte de n'importe quel pixel avec la pipette et le zoom"}},feature_2:{t:0,b:{t:2,i:[{t:3}],s:"Générez des palettes et choisissez le nombre de couleurs à extraire"}},feature_3:{t:0,b:{t:2,i:[{t:3}],s:"Copiez en HEX, RGB ou HSL et exportez en CSS, SCSS, JSON ou Tailwind"}},feature_4:{t:0,b:{t:2,i:[{t:3}],s:"Téléversez, glissez ou collez une capture â prend en charge JPG, PNG et WebP"}},restart:{t:0,b:{t:2,i:[{t:3}],s:"Recommencer"}},dominant:{t:0,b:{t:2,i:[{t:3}],s:"Couleur dominante"}},picked:{t:0,b:{t:2,i:[{t:3}],s:"Couleur sélectionnée"}},picked_empty:{t:0,b:{t:2,i:[{t:3}],s:"Activez la pipette et cliquez sur l'image pour capturer une couleur"}},palette:{t:0,b:{t:2,i:[{t:3}],s:"Palette de l'image"}},format_label:{t:0,b:{t:2,i:[{t:3}],s:"Format :"}},count_label:{t:0,b:{t:2,i:[{t:3}],s:"Nombre de couleurs"}},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"}},copied:{t:0,b:{t:2,i:[{t:3}],s:"Copié !"}},picker_on:{t:0,b:{t:2,i:[{t:3}],s:"Pipette active"}},picker_off:{t:0,b:{t:2,i:[{t:3}],s:"Pipette"}},paste_hint:{t:0,b:{t:2,i:[{t:3}],s:"Vous pouvez aussi coller une image avec Ctrl+V"}},load_error:{t:0,b:{t:2,i:[{t:3}],s:"Cette image n'a pas pu être chargée. Elle est peut-être dans un format non pris en charge (par exemple HEIC). Essayez un fichier JPG, PNG ou WebP."}},process_error:{t:0,b:{t:2,i:[{t:3}],s:"Cette image n'a pas pu être traitée. Essayez un autre fichier (JPG, PNG ou WebP)."}},see1:{t:0,b:{t:2,i:[{t:3}],s:"Couleurs Aléatoires"}},see2:{t:0,b:{t:2,i:[{t:3}],s:"Ãditeur de Couleurs"}},see3:{t:0,b:{t:2,i:[{t:3}],s:"Combinaison de Couleurs"}},see4:{t:0,b:{t:2,i:[{t:3}],s:"Générateur de Palettes de Couleurs"}}},it:{pageTitle:{t:0,b:{t:2,i:[{t:3}],s:"Palette di Colori Dominanti dell'Immagine & Contagocce"}},ogTitle:{t:0,b:{t:2,i:[{t:3}],s:"Generatore di Palette e Selettore di Colori â Estrai Colori da Foto"}},ogLocale:{t:0,b:{t:2,i:[{t:3}],s:"it_IT"}},title:{t:0,b:{t:2,i:[{t:3}],s:"Colori dell'Immagine"}},bc:{t:0,b:{t:2,i:[{t:3}],s:"Strumenti per Colori"}},intro:{t:0,b:{t:2,i:[{t:3}],s:`Ottieni la palette di colori da qualsiasi immagine, foto o illustrazione. Rileva automaticamente il colore dominante e genera una palette completa da foto, screenshot, loghi, illustrazioni e immagini di prodotti. Passa il contagocce sull'immagine per leggere il colore esatto di qualsiasi pixel, alterna tra HEX, RGB e HSL ed esporta l'intera palette come CSS, SCSS, JSON o Tailwind. 24 25Il nostro Estrattore di Colori esegue tutte le elaborazioni direttamente nel tuo browser, garantendo la totale privacy e risultati istantanei. Ideale per UI/UX, branding, variabili CSS, design system, moodboard e analisi visiva professionale.`}},meta:{t:0,b:{t:2,i:[{t:3}],s:"Genera palette di colori da qualsiasi immagine o foto. Cattura il colore esatto di ogni pixel, alterna tra HEX, RGB e HSL ed esporta in CSS, SCSS, JSON o Tailwind."}},how_title:{t:0,b:{t:2,i:[{t:3}],s:"Come Funziona"}},step_1_t:{t:0,b:{t:2,i:[{t:3}],s:"Invia l'Immagine"}},step_1_d:{t:0,b:{t:2,i:[{t:3}],s:"Carica, trascina e rilascia o incolla (Ctrl+V) l'immagine che desideri analizzare."}},step_2_t:{t:0,b:{t:2,i:[{t:3}],s:"Analizza il Profilo"}},step_2_d:{t:0,b:{t:2,i:[{t:3}],s:"Lo strumento analizza la distribuzione dei pixel per identificare il colore predominante ed estrarre i colori più presenti nell'immagine. Usa il cursore per scegliere quanti colori deve contenere la palette."}},step_3_t:{t:0,b:{t:2,i:[{t:3}],s:"Cattura, Copia o Esporta"}},step_3_d:{t:0,b:{t:2,i:[{t:3}],s:"Clicca su un campione per copiarlo, attiva il contagocce per leggere un pixel specifico o esporta l'intera palette nel formato di codice che preferisci."}},apps_title:{t:0,b:{t:2,i:[{t:3}],s:"Applicazioni Comuni"}},app1:{t:0,b:{t:2,i:[{t:3}],s:"Estrai palette da loghi, screenshot, hero image e foto di prodotti per creare interfacce visivamente allineate all'identità del brand"}},app2:{t:0,b:{t:2,i:[{t:3}
25],s:"Cattura codici HEX da immagini di riferimento per comporre brand board, presentazioni, annunci e layout per i social network"}},app3:{t:0,b:{t:2,i:[{t:3}],s:"Identifica colori di sfondo, evidenziazione e supporto da fotografie prima di creare landing page, banner o pagine di e-commerce"}},app4:{t:0,b:{t:2,i:[{t:3}],s:"Analizza opere d'arte, illustrazioni e immagini di portfolio per comprendere l'equilibrio cromatico e lo stile visuale di un progetto"}},app5:{t:0,b:{t:2,i:[{t:3}],s:"Esporta le palette direttamente nel tuo stack come variabili CSS, SCSS, JSON o configurazione Tailwind per mantenere design e codice sincronizzati"}},tech_title:{t:0,b:{t:2,i:[{t:3}],s:"Note Tecniche"}},tech_desc:{t:0,b:{t:2,i:[{t:3}],s:"Alcuni dettagli pratici influenzano il modo in cui i colori estratti devono essere interpretati nei progetti reali:"}},tech1:{t:0,b:{t:2,i:[{t:3}],s:"Il colore dominante non è sempre il più importante visivamente. Sfondi ampi, ombre o aree neutre possono occupare più spazio nell'immagine rispetto ai colori dell'elemento principale, anche se questi ultimi sono visivamente più marcati"}},tech2:{t:0,b:{t:2,i:[{t:3}],s:"Le immagini con sfumature, variazioni di luce, sfocatura o compressione possono generare palette approssimative e non necessariamente valori di branding esatti"}},tech3:{t:0,b:{t:2,i:[{t:3}],s:"Per ottenere una palette più pulita e coerente, utilizza un'immagine ritagliata che evidenzi l'elemento principale, oppure usa il contagocce per leggere un pixel esatto invece di affidarti solo alla palette automatica"}},tech4:{t:0,b:{t:2,i:[{t:3}],s:"Tutte le conversioni tra HEX, RGB e HSL sono calcolate nel tuo browser. I valori mostrati sono rappresentazioni sRGB standard, pensate per un'esplorazione rapida; valida i valori di brand critici nel tuo flusso di lavoro di progettazione"}},faq_title:{t:0,b:{t:2,i:[{t:3}],s:"Domande e Risposte"}},faq2q:{t:0,b:{t:2,i:[{t:3}],s:"Quali formati di immagine funzionano meglio?"}},faq2a:{t:0,b:{t:2,i:[{t:3}],s:"I formati comuni come PNG, JPG/JPEG e WebP funzionano molto bene. Le immagini più nitide, meno compresse e con il soggetto principale ben visibile tendono a generare palette più utili. I file HEIC dei telefoni potrebbero non essere supportati dal browser."}},faq3q:{t:0,b:{t:2,i:[{t:3}],s:"Perché il colore dominante a volte sembra diverso dall'oggetto principale?"}},faq3a:{t:0,b:{t:2,i:[{t:3}],s:"Perché lo strumento analizza la distribuzione complessiva dei pixel. Se l'immagine presenta un grande sfondo, ombre o aree neutre, queste regioni possono influenzare il risultato dominante più di un oggetto in evidenza più piccolo. Il contagocce ti permette di leggere esattamente il colore che desideri."}},faq4q:{t:0,b:{t:2,i:[{t:3}],s:"Come estraggo una palette di colori da una foto?"}},faq4a:{t:0,b:{t:2,i:[{t:3}],s:"Carica, trascina o incolla la tua foto. Lo strumento analizza istantaneamente la distribuzione dei pixel ed estrae il colore dominante più una palette completa con codici HEX. Puoi poi cambiare la notazione in RGB o HSL ed esportare tutto in una volta."}},faq5q:{t:0,b:{t:2,i:[{t:3}],s:"Posso catturare il colore di un punto specifico dell'immagine?"}},faq5a:{t:0,b:{t:2,i:[{t:3}],s:"Sì. Attiva il contagocce e muovi il cursore sull'immagine: una lente mostra una vista ingrandita e cliccando si cattura il colore esatto del pixel nel pannello 'Colore selezionato'."}},features_title:{t:0,b:{t:2,i:[{t:3}],s:"Caratteristiche Principali"}},feature_1:{t:0,b:{t:2,i:[{t:3}],s:"Cattura il colore esatto di qualsiasi pixel con il contagocce e lo zoom"}},feature_2:{t:0,b:{t:2,i:[{t:3}],s:"Genera palette e scegli quanti colori estrarre"}},feature_3:{t:0,b:{t:2,i:[{t:3}],s:"Copia in HEX, RGB o HSL ed esporta in CSS, SCSS, JSON o Tailwind"}},feature_4:{t:0,b:{t:2,i:[{t:3}],s:"Carica, trascina o incolla uno screenshot â supporta JPG, PNG e WebP"}},restart:{t:0,b:{t:2,i:[{t:3}],s:"Ricomincia"}},dominant:{t:0,b:{t:2,i:[{t:3}],s:"Colore dominante"}},picked:{t:0,b:{t:2,i:[{t:3}],s:"Colore selezionato"}},picked_empty:{t:0,b:{t:2,i:[{t:3}],s:"Attiva il contagocce e clicca sull'immagine per catturare un colore"}},palette:{t:0,b:{t:2,i:[{t:3}],s:"Palette dell'immagine"}},format_label:{t:0,b:{t:2,i:[{t:3}],s:"Formato:"}}
25,count_label:{t:0,b:{t:2,i:[{t:3}],s:"Numero di colori"}},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"}},copied:{t:0,b:{t:2,i:[{t:3}],s:"Copiato!"}},picker_on:{t:0,b:{t:2,i:[{t:3}],s:"Contagocce attivo"}},picker_off:{t:0,b:{t:2,i:[{t:3}],s:"Contagocce"}},paste_hint:{t:0,b:{t:2,i:[{t:3}],s:"Puoi anche incollare un'immagine con Ctrl+V"}},load_error:{t:0,b:{t:2,i:[{t:3}],s:"Impossibile caricare questa immagine. Potrebbe essere in un formato non supportato (ad esempio HEIC). Prova con un file JPG, PNG o WebP."}},process_error:{t:0,b:{t:2,i:[{t:3}],s:"Impossibile elaborare questa immagine. Prova con un file diverso (JPG, PNG o WebP)."}},see1:{t:0,b:{t:2,i:[{t:3}],s:"Colori Casuali"}},see2:{t:0,b:{t:2,i:[{t:3}],s:"Editor di Colori"}},see3:{t:0,b:{t:2,i:[{t:3}],s:"Combinazione di Colori"}},see4:{t:0,b:{t:2,i:[{t:3}],s:"Generatore di Palette di Colori"}}}}})}typeof re=="function"&&re(ne);const Qt=Oe(ne,[["__scopeId","data-v-d5dd3ad6"]]);export{Qt 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.