https://freetool.dev/_nuxt/BzAlkYcU.js

1import{_ as Z}from"./DPIaFIMc.js";import{_ as tt}from"./CdnNuUX_.js";import{_ as et}from"./8fY8EC0V.js";import{_ as ot}from"./CXwnfpox.js";import{_ as st}from"./CYwGAoYU.js";import{_ as at}from"./CnzqtAtd.js";import{d as it,s as rt,Y as nt,b as lt,P as ct,A as K,C as X,w as W,y as s,o as c,f as t,t as i,J as H,R as q,e as d,k as _,g as b,j as m,D as v,x as A,F as B,r as O,c as V,m as dt,E as L}from"./CkpM57L6.js";import{u as ut}from"./BgwjXCoU.js";import"./B0zWc29K.js";import"./DXrLEPCz.js";import"./DlAUqK2U.js";const pt={class:"flex flex-col w-full max-w-4xl mx-auto py-8 gap-8 animate-in fade-in slide-in-from-bottom-4 duration-500"},bt={class:"flex gap-4 items-center bg-base-200/50 p-4 rounded-2xl border border-base-content/10 w-fit"},mt={class:"font-bold text-sm text-base-content uppercase tracking-wider"},ft={class:"flex items-center gap-2"},ht=["value","title"],_t={key:0,class:"text-xs text-error font-medium"},Ct={class:"grid grid-cols-1 md:grid-cols-2 gap-8"},xt={class:"bg-base-200/50 p-6 rounded-3xl border border-base-content/10 flex flex-col gap-8 shadow-sm"},gt={class:"font-bold text-xl text-base-content flex items-center gap-2"},vt={class:"flex justify-between mb-2"},St={class:"text-sm font-semibold text-base-content/80"},yt={class:"text-sm font-mono bg-base-100 px-2 py-0.5 rounded shadow-sm border border-base-content/5"},wt={class:"flex justify-between mb-2"},Ht={class:"text-sm font-semibold text-base-content/80"},qt={class:"text-sm font-mono bg-base-100 px-2 py-0.5 rounded shadow-sm border border-base-content/5"},At={class:"flex justify-between mb-2"},Lt={class:"text-sm font-semibold text-base-content/80"},kt={class:"text-sm font-mono bg-base-100 px-2 py-0.5 rounded shadow-sm border border-base-content/5"},Tt={class:"flex flex-col gap-4"},Et={key:0,class:"grid grid-cols-2 gap-3"},Gt={class:"flex justify-between items-center mb-1"},zt={class:"text-xs font-mono font-medium truncate"},Bt={class:"flex justify-between items-center mb-1"},Ot={class:"text-xs font-mono font-medium truncate"},jt={class:"flex justify-between items-center mb-1"},Pt={class:"text-xs font-mono font-medium truncate"},Rt={class:"flex justify-between items-center mb-1"},Kt={class:"text-xs font-mono font-medium truncate"},Xt={key:0,class:"bg-base-200/50 p-6 md:p-8 rounded-3xl border border-base-content/10 shadow-sm"},Wt={class:"font-bold text-xl text-base-content mb-6 flex items-center gap-2"},Vt={class:"grid grid-cols-1 md:grid-cols-2 gap-6"},Ft={class:"text-2xl md:text-3xl font-bold text-white tracking-tight"},It={class:"flex gap-4"},Nt={class:"bg-white/10 p-3 rounded-xl backdrop-blur-sm border border-white/10 flex-1"},Mt={class:"text-white font-mono text-lg font-bold"},Ut={key:0,class:"text-sm font-sans ml-1 opacity-80"},$t={key:1,class:"text-sm font-sans ml-1 opacity-80"},Jt={class:"bg-white/10 p-3 rounded-xl backdrop-blur-sm border border-white/10 flex-1"},Dt={class:"text-white font-mono text-lg font-bold"},Qt={key:0,class:"text-sm font-sans ml-1 opacity-80"},Yt={key:1,class:"text-sm font-sans ml-1 opacity-80"},Zt={class:"text-2xl md:text-3xl font-bold text-black tracking-tight"},te={class:"flex gap-4"},ee={class:"bg-black/5 p-3 rounded-xl backdrop-blur-sm border border-black/5 flex-1"},oe={class:"text-black font-mono text-lg font-bold"},se={key:0,class:"text-sm font-sans ml-1 opacity-80"},ae={key:1,class:"text-sm font-sans ml-1 opacity-80"},ie={class:"bg-black/5 p-3 rounded-xl backdrop-blur-sm border border-black/5 flex-1"},re={class:"text-black font-mono text-lg font-bold"},ne={key:0,class:"text-sm font-sans ml-1 opacity-80"},le={key:1,class:"text-sm font-sans ml-1 opacity-80"},ce={key:1,class:"bg-base-200/50 p-6 rounded-3xl border border-base-content/10 shadow-sm"},de={class:"font-bold text-xl text-base-content mb-6 flex items-center gap-2"},ue={key:0,class:"flex h-24 rounded-2xl overflow-hidden shadow-inner border border-base-content/10"},pe=["onClick"],be={key:1},me={class:"text-xs text-base-content/50 mt-4 text-center"},fe={key:1,class:"mt-6 bg-base-200/30 p-4 sm:p-6 rounded-3xl border border-base-content/10 space-y-4"},he={class:"text-xs font-bold text-base-content/70 uppercase tracking-wider"},_e={class:"flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"},Ce={class:"flex items-center gap-4 flex-wrap"},xe={class:"join shadow-sm"},ge=["onClick"],ve={class:"join shadow-sm"},Se=["onClick"],ye={class:"bg-base-100 rounded-xl p-4 text-xs sm:text-sm font-mono overflow-x-auto border border-base-content/10 max-h-48 text-base-content/80 shadow-inner scrollbar-thin"},we={class:"space-y-8"},He=it({__name:"color-editor",setup(j){const{t:e,locale:I}=rt({useScope:"local"}),P=nt();ut({name:e("title"),description:e("desc"),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")}]}),lt({htmlAttrs:{lang:I.value},title:e("pageTitle"),meta:[{name:"description",content:e("desc")}]});const{status:N}=ct("https://colorjs.io/dist/color.global.min.js",{trigger:"client"}),S=V(()=>N.value==="loaded"),M=P.query.color?String(P.query.color):"#3b82f6";function U(n){return/^([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(n)?"#"+n:decodeURIComponent(n)}const $=U(M),o=dt({baseColor:$,h:0,s:100,l:50,hex:"",rgb:"",hsl:"",hsv:"",oklch:"",shades:[],wcagWhite:0,wcagBlack:0,apcaWhite:0,apcaBlack:0,isValid:!0});let C=null;function k(n){if(!S.value)return;const a=window.Color;if(a)try{C=new a(n);const l=C.to("hsl");

1o.h=l.coords[0]||0,o.s=l.coords[1]||0,o.l=l.coords[2]||0,o.isValid=!0,R()}catch{o.isValid=!1}}const T=L("css"),f=L("hex"),y=L(!1),w=L("");function J(n){x(n),w.value=n,setTimeout(()=>w.value="",1500)}const E=V(()=>{const n=o.shades;if(!n.length)return"";const a=window.Color,l=n.map(p=>{if(f.value==="hex")return p;const u=new a(p);return f.value==="rgb"?u.toString({format:"rgb"}):f.value==="hsl"?u.toString({format:"hsl"}):f.value==="oklch"?u.toString({format:"oklch"}):p}),h=[50,100,200,300,400,500,600,700,800,900,950];switch(T.value){case"hex":return l.join(`
2`);case"css":return`:root {
3`+l.map((p,u)=>`  --color-${u+1}: ${p};`).join(`
4`)+`
5}`;case"scss":return l.map((p,u)=>`$color-${u+1}: ${p};`).join(`
6`);case"json":return JSON.stringify(l.reduce((p,u,g)=>({...p,[`color-${g+1}`]:u}),{}),null,2);case"tailwind":return`module.exports = {
7  theme: {
8    extend: {
9      colors: {
10`+l.map((p,u)=>`        'brand-${h[u]||u*100}': '${p}',`).join(`
11`)+`
12      }
13    }
14  }
15}`;default:return""}});async function D(){if(E.value)try{await navigator.clipboard.writeText(E.value),y.value=!0,setTimeout(()=>{y.value=!1},1500)}catch(n){console.error("Failed to copy export:",n)}}K(S,n=>{n&&k(o.baseColor)},{immediate:!0});function Q(){k(o.baseColor)}function Y(n){const a=n.target.value;o.baseColor=a,k(a)}async function x(n){try{await navigator.clipboard.writeText(n)}catch{}}function R(){if(!C)return;const n=window.Color;C=new n("hsl",[o.h,o.s,o.l]);const a=C.to("srgb");o.hex=a.toString({format:"hex"}),o.rgb=a.toString({format:"rgb"}),o.hsl=a.toString({format:"hsl"}),o.hsv=a.to("hsv").toString({format:"hsv"}),o.oklch=a.to("oklch").toString({format:"oklch"});const l=new n("white"),h=new n("black");o.wcagWhite=a.contrast(l,"WCAG21"),o.wcagBlack=a.contrast(h,"WCAG21"),o.apcaWhite=a.contrast(l,"APCA"),o.apcaBlack=a.contrast(h,"APCA");const p=[];for(let u=0;u<=10;u++){const g=95-u*8,G=new n("hsl",[o.h,o.s,Math.max(0,Math.min(100,g))]);p.push(G.to("srgb").toString({format:"hex"}))}o.shades=p}return K(()=>[o.h,o.s,o.l],()=>{S.value&&o.isValid&&R()}),(n,a)=>{const l=Z,h=tt,p=et,u=ot,g=st,G=at;return c(),X(G,{title:s(e)("title"),description:s(e)("desc"),"info-description":s(e)("about_d"),breadcrumb:{label:s(e)("bc"),to:"color-tools"},"see-also-links":[{label:s(e)("see1"),to:"dominant-colors-of-the-image"},{label:s(e)("see2"),to:"color-combination"},{label:s(e)("see3"),to:"color-converter"},{label:s(e)("see4"),to:"color-palette-generator"}]},{info:W(()=>[t("div",we,[b(h,{title:s(e)("features_title"),items:[s(e)("feature_1"),s(e)("feature_2"),s(e)("feature_3"),s(e)("feature_4")]},null,8,["title","items"]),b(p,{title:s(e)("apps_title"),items:[s(e)("app1"),s(e)("app2"),s(e)("app3"),s(e)("app4"),s(e)("app5")]},null,8,["title","items"]),b(u,{title:s(e)("how_title"),items:[{title:s(e)("step_1_t"),description:s(e)("step_1_d")},{title:s(e)("step_2_t"),description:s(e)("step_2_d")},{title:s(e)("step_3_t"),description:s(e)("step_3_d")},{title:s(e)("step_4_t"),description:s(e)("step_4_d")},{title:s(e)("step_5_t"),description:s(e)("step_5_d")}]},null,8,["title","items"]),b(g,{title:s(e)("faq_title"),items:[{question:s(e)("faq1q"),answer:s(e)("faq1a")},{question:s(e)("faq2q"),answer:s(e)("faq2a")},{question:s(e)("faq3q"),answer:s(e)("faq3a")}]},null,8,["title","items"])])]),default:W(()=>[t("div",pt,[t("div",bt,[t("label",mt,i(s(e)("base")),1),t("div",ft,[H(t("input",{type:"text","onUpdate:modelValue":a[0]||(a[0]=r=>o.baseColor=r),onInput:Q,class:"input input-bordered input-sm font-mono w-48"},null,544),[[q,o.baseColor]]),t("input",{type:"color",value:o.isValid?o.hex:"#000000",onInput:Y,class:"w-8 h-8 rounded-lg shadow-sm border border-base-content/10 cursor-pointer p-0.5 bg-transparent",title:o.hex},null,40,ht)]),o.isValid?_("",!0):(c(),d("span",_t,"Cor inválida"))]),t("div",Ct,[t("div",xt,[t("h3",gt,[b(l,{name:"mdi:tune-vertical",class:"w-6 h-6 text-primary"}),m(" "+i(s(e)("adjust")),1)]),t("div",{class:v(["space-y-6",{"opacity-50 pointer-events-none":!o.isValid||!S.value}])},[t("div",null,[t("div",vt,[t("label",St,i(s(e)("hue")),1),t("span",yt,i(Math.round(o.h))+"°",1)]),H(t("input",{type:"range",min:"0",max:"360",step:"1","onUpdate:modelValue":a[1]||(a[1]=r=>o.h=r),class:"range range-xs range-primary"},null,512),[[q,o.h,void 0,{number:!0}]])]),t("div",null,[t("div",wt,[t("label",Ht,i(s(e)("saturation")),1),t("span",qt,i(Math.round(o.s))+"%",1)]),H(t("input",{type:"range",min:"0",max:"100",step:"1","onUpdate:modelValue":a[2]||(a[2]=r=>o.s=r),class:"range range-xs range-secondary"},null,512),[[q,o.s,void 0,{number:!0}]])]),t("div",null,[t("div",At,[t("label",Lt,i(s(e)("lightness")),1),t("span",kt,i(Math.round(o.l))+"%",1)]),H(t("input",{type:"range",min:"0",max:"100",step:"1","onUpdate:modelValue":a[3]||(a[3]=r=>o.l=r),class:"range range-xs range-accent"},null,512),[[q,o.l,void 0,{number:!0}]])])],2)]),t("div",Tt,[t("div",{class:"h-32 rounded-3xl border border-base-content/10 flex items-center justify-center transition-colors duration-200 shadow-sm relative group",style:A({backgroundColor:o.hex})},[t("span",{class:v(["font-mono text-2xl font-bold px-5 py-2 rounded-xl bg-base-100/30 backdrop-blur-md shadow-lg",o.wcagWhite>o.wcagBlack?"text-white":"text-black"])},i(o.hex),3)],4),o.isValid?(c(),d("div",Et,[t("div",{class:"bg-base-200/50 p-3 rounded-2xl border border-base-content/10 group cursor-pointer hover:border-primary/50 transition-colors",onClick:a[4]||(a[4]=r=>x(o.rgb))},[t("div",Gt,[a[8]||(a[8]=t("p",{class:"text-xs text-base-content/60 font-bold uppercase tracking-wider"},"RGB",-1)),b(l,{name:"mdi:content-copy",class:"w-3.5 h-3.5 text-base-content/40 group-hover:text-primary transition-colors"})]),t("p",zt,i(o.rgb),1)]),t("div",{class:"bg-base-200/50 p-3 rounded-2xl border border-base-content/10 group cursor-pointer hover:border-primary/50 transition-colors",onClick:a[5]||(a[5]=r=>x(o.hsl))},[t("div",Bt,[a[9]||(a[9]=t("p",{class:"text-xs text-base-content/60 font-bold uppercase tracking-wider"},"HSL",-1)),b(l,{name:"mdi:content-copy",class:"w-3.5 h-3.5 text-base-content/40 group-hover:text-primary transition-colors"})]),t("p",Ot,i(o.hsl),1)]),t("div",{class:"bg-base-200/50 p-3 rounded-2xl border border-base-content/10 group cursor-pointer hover:border-primary/50 transition-colors",onClick:a[6]||(a[6]=r=>x(o.hsv))},[t("div",jt,[a[10]||(a[10]=t("p",{class:"text-xs text-base-content/60 font-bold uppercase tracking-wider"},"HSV",-1)),b(l,{name:"mdi:content-copy",class:"w-3.5 h-3.5 text-base-content/40 group-hover:text-primary transition-colors"})]),t("p",Pt,i(o.hsv),1)]),t("div",{class:"bg-base-200/50 p-3 rounded-2xl border border-base-content/10 group cursor-pointer hover:border-primary/50 transition-colors",onClick:a[7]||(a[7]=r=>x(o.oklch))},[t("div",Rt,[a[11]||(a[11]=t("p",{class:"text-xs text-base-content/60 font-bold uppercase tracking-wider"},"OKLCH",-1)),b(l,{name:"mdi:content-copy",class:"w-3.5 h-3.5 text-base-content/40 group-hover:text-primary transition-colors"})]),t("p",Kt,i(o.oklch),1)])])):_("",!0)])]),o.isValid?(c(),d("div",Xt,[t("h3",Wt,[b(l,{name:"mdi:eye-check-outline",class:"w-6 h-6 text-primary"}),m(" "+i(s(e)("contrast")),1)]),t("div",Vt,[t("div",{class:"p-6 rounded-2xl border border-base-content/10 flex flex-col gap-4 shadow-inner",style:A({backgroundColor:o.hex})},[t("p",Ft,i(s(e)("white_text")),1),t("div",It,[t("div",Nt,[a[12]||(a[12]=t("p",{class:"text-white/60 text-xs font-bold uppercase mb-1"},"WCAG 2.1",-1)),t("p",Mt,[m(i(o.wcagWhite.toFixed(2))+" ",1),o.wcagWhite>=4.5?(c(),d("span",Ut,"("+i(s(e)("pass"))+")",1)):(c(),d("span",$t,"("+i(s(e)("fail"))+")",1))])]),t("div",Jt,[a[13]||(a[13]=t("p",{class:"text-white/60 text-xs font-bold uppercase mb-1"},"APCA",-1)),t("p",Dt,[m(i(Math.abs(Math.round(o.apcaWhite)))+" ",1),Math.abs(Math.round(o.apcaWhite))>=60?(c(),d("span",Qt,"("+i(s(e)("pass"))+")",1)):(c(),d("span",Yt,"("+i(s(e)("fail"))+")",1))])])])],4),t("div",{class:"p-6 rounded-2xl border border-base-content/10 flex flex-col gap-4 shadow-inner",style:A({backgroundColor:o.hex})},[t("p",Zt,i(s(e)("black_text")),1),t("div",te,[t("div",ee,[a[14]||(a[14]=t("p",{class:"text-black/50 text-xs font-bold uppercase mb-1"},"WCAG 2.1",-1)),t("p",oe,[m(i(o.wcagBlack.toFixed(2))+" ",1),o.wcagBlack>=4.5?(c(),d("span",se,"("+i(s(e)("pass"))+")",1)):(c(),d("span",ae,"("+i(s(e)("fail"))+")",1))])]),t("div",ie,[a[15]||(a[15]=t("p",{class:"text-black/50 text-xs font-bold uppercase mb-1"},"APCA",-1)),t("p",re,[m(i(Math.abs(Math.round(o.apcaBlack)))+" ",1),Math.abs(Math.round(o.apcaBlack))>=60?(c(),d("span",ne,"("+i(s(e)("pass"))+")",1)):(c(),d("span",le,"("+i(s(e)("fail"))+")",1))])])])],4)])])):_("",!0),o.isValid?(c(),d("div",ce,[t("h3",de,[b(l,{name:"mdi:gradient-horizontal",class:"w-6 h-6 text-primary"}),m(" "+i(s(e)("shades")),1)]),o.shades.length?(c(),d("div",ue,[(c(!0),d(B,null,O(o.shades,(r,z)=>(c(),d("div",{key:z,class:"flex-1 cursor-pointer transition-transform hover:scale-y-110 origin-center group relative flex items-end justify-center pb-2",style:A({backgroundColor:r}),onClick:qe=>J(r)},[t("div",{class:v(["transition-opacity text-[10px] font-mono px-1.5 py-0.5 rounded absolute top-2 pointer-events-none whitespace-nowrap backdrop-blur-sm flex items-center justify-center",w.value===r?"opacity-100 bg-black/80 text-green-400":"opacity-0 group-hover:opacity-100 bg-black/60 text-white"])},[w.value===r?(c(),X(l,{key:0,name:"mdi:check-bold",class:"w-3.5 h-3.5"})):(c(),d("span",be,i(r),1))],2)],12,pe))),128))])):_("",!0),t("p",me,i(s(e)("click_to_copy")),1),o.shades.length?(c(),d("div",fe,[t("p",he,i(s(e)("export_label")),1),t("div",_e,[t("div",Ce,[t("div",xe,[(c(),d(B,null,O(["hex","css","scss","

15json","tailwind"],r=>t("button",{key:r,type:"button",class:v(["btn btn-xs sm:btn-sm join-item",T.value===r?"btn-primary":"btn-outline"]),onClick:z=>T.value=r},i(r==="css"?"CSS":r==="scss"?"SCSS":r==="json"?"JSON":r==="tailwind"?"Tailwind":"HEX"),11,ge)),64))]),t("div",ve,[(c(),d(B,null,O(["hex","rgb","hsl","oklch"],r=>t("button",{key:r,type:"button",class:v(["btn btn-xs sm:btn-sm join-item uppercase",f.value===r?"btn-secondary":"btn-outline"]),onClick:z=>f.value=r},i(r),11,Se)),64))])]),t("button",{type:"button",onClick:D,class:"btn btn-xs sm:btn-sm btn-primary flex items-center gap-1.5 shadow-sm"},[b(l,{name:y.value?"material-symbols:check-rounded":"material-symbols:content-copy-outline",class:"w-4 h-4"},null,8,["name"]),m(" "+i(y.value?s(e)("copied"):s(e)("copy_all")),1)])]),t("pre",ye,[t("code",null,i(E.value),1)])])):_("",!0)])):_("",!0)])]),_:1},8,["title","description","info-description","breadcrumb","see-also-links"])}}});function F(j){const e=j;e.__i18n=e.__i18n||[],e.__i18n.push({locale:"",resource:{pt:{pageTitle:{t:0,b:{t:1,c:[{t:2,i:[{t:3}],s:"Editor e Ajuste de Cores Online"},{t:2,i:[{t:3}],s:"Grátis"}]}},title:{t:0,b:{t:2,i:[{t:3}],s:"Editor de Cores"}},bc:{t:0,b:{t:2,i:[{t:3}],s:"Ferramentas de Cores"}},desc:{t:0,b:{t:2,i:[{t:3}],s:"Ajuste e refine cores com precisão. Altere saturação, luminosidade e matiz, crie escalas de tons e verifique o contraste de acessibilidade para textos."}},base:{t:0,b:{t:2,i:[{t:3}],s:"Cor Base"}},adjust:{t:0,b:{t:2,i:[{t:3}],s:"Ajustes de Cor"}},lightness:{t:0,b:{t:2,i:[{t:3}],s:"Luminosidade"}},saturation:{t:0,b:{t:2,i:[{t:3}],s:"Saturação"}},hue:{t:0,b:{t:2,i:[{t:3}],s:"Matiz (Tom)"}},contrast:{t:0,b:{t:2,i:[{t:3}],s:"Acessibilidade & Contraste"}},white_text:{t:0,b:{t:2,i:[{t:3}],s:"Texto Branco"}},black_text:{t:0,b:{t:2,i:[{t:3}],s:"Texto Preto"}},pass:{t:0,b:{t:2,i:[{t:3}],s:"Passou"}},fail:{t:0,b:{t:2,i:[{t:3}],s:"Falhou"}},shades:{t:0,b:{t:2,i:[{t:3}],s:"Escala de Tons (Tints & Shades)"}},about_d:{t:0,b:{t:2,i:[{t:3}],s:`O Editor de Cores é uma ferramenta completa para ajustar e aperfeiçoar qualquer cor com precisão. Insira uma cor em formatos como HEX, RGB, HSL ou até mesmo pelo nome e utilize os controles deslizantes para modificar propriedades como Matiz (a tonalidade da cor), Saturação (a intensidade das cores) e Luminosidade (o quanto a cor é clara ou escura).
16
17As alterações são aplicadas em tempo real, permitindo visualizar instantaneamente o resultado e verificar a legibilidade da cor com textos claros e escuros. Além disso, a ferramenta converte automaticamente a cor para os principais formatos utilizados em design e desenvolvimento web, incluindo HEX, RGB, HSL, HSV e OKLCH.`}},see1:{t:0,b:{t:2,i:[{t:3}],s:"Cores da Imagem"}},see2:{t:0,b:{t:2,i:[{t:3}],s:"Combinação de Cores"}},see3:{t:0,b:{t:2,i:[{t:3}],s:"Conversor de Cores"}},see4:{t:0,b:{t:2,i:[{t:3}],s:"Gerador de Paleta de Cores"}},feature_1:{t:0,b:{t:2,i:[{t:3}],s:"Ajustes fáceis e precisos de Matiz, Saturação e Luminosidade"}},feature_2:{t:0,b:{t:2,i:[{t:3}],s:"Calculadora de Contraste Dupla (WCAG 2.1 e APCA) para textos"}},feature_3:{t:0,b:{t:2,i:[{t:3}],s:"Geração de escalas tonais perfeitas para Design Systems e interfaces"}},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!"}},click_to_copy:{t:0,b:{t:2,i:[{t:3}],s:"Clique em qualquer cor acima para copiar o HEX correspondente."}},feature_4:{t:0,b:{t:2,i:[{t:3}],s:"Exportação em HEX, RGB, HSL e OKLCH para CSS, SCSS, JSON e Tailwind"}},features_title:{t:0,b:{t:2,i:[{t:3}],s:"Funcionalidades"}},apps_title:{t:0,b:{t:2,i:[{t:3}],s:"Para que Usar o Editor de Cores"}},app1:{t:0,b:{t:2,i:[{t:3}],s:"Criar paletas consistentes para design systems, componentes e interfaces web"}},app2:{t:0,b:{t:2,i:[{t:3}],s:"Verificar se combinações de cor passam nos critérios de acessibilidade WCAG e APCA antes de publicar"}},app3:{t:0,b:{t:2,i:[{t:3}],s:"Ajustar a cor de marca para diferentes contextos, como modo escuro, hover e estados desabilitados"}},app4:{t:0,b:{t:2,i:[{t:3}

17],s:"Gerar escalas de tons no estilo Tailwind para exportar como variáveis CSS ou tokens de design"}},app5:{t:0,b:{t:2,i:[{t:3}],s:"Converter cores entre HEX, RGB, HSL e OKLCH ao integrar diferentes ferramentas de design e desenvolvimento"}},how_title:{t:0,b:{t:2,i:[{t:3}],s:"Como Usar o Editor de Cores"}},step_1_t:{t:0,b:{t:2,i:[{t:3}],s:"Insira a cor base"}},step_1_d:{t:0,b:{t:2,i:[{t:3}],s:"Digite qualquer valor HEX, RGB, HSL ou nome de cor no campo Cor Base. A ferramenta carrega a cor automaticamente e converte para todos os formatos disponíveis"}},step_2_t:{t:0,b:{t:2,i:[{t:3}],s:"Ajuste com os sliders"}},step_2_d:{t:0,b:{t:2,i:[{t:3}],s:"Use os controles de Matiz, Saturação e Luminosidade para modificar a cor em tempo real. Todas as saídas e a escala de tons são atualizadas instantaneamente"}},step_3_t:{t:0,b:{t:2,i:[{t:3}],s:"Verifique o contraste"}},step_3_d:{t:0,b:{t:2,i:[{t:3}],s:"A seção de acessibilidade mostra a taxa de contraste com texto branco e preto nos modelos WCAG 2.1 e APCA, indicando se a combinação passa ou falha nos critérios"}},step_4_t:{t:0,b:{t:2,i:[{t:3}],s:"Copie os valores"}},step_4_d:{t:0,b:{t:2,i:[{t:3}],s:"Clique em qualquer bloco de formato (RGB, HSL, HSV, OKLCH) para copiar o valor diretamente. O HEX é exibido no preview central"}},step_5_t:{t:0,b:{t:2,i:[{t:3}],s:"Exporte a escala de tons"}},step_5_d:{t:0,b:{t:2,i:[{t:3}],s:"Na seção Tints & Shades, escolha o formato de exportação (CSS, SCSS, JSON, Tailwind) e o formato de cor (HEX, RGB, HSL ou OKLCH). Clique em Copiar para usar no seu projeto"}},faq_title:{t:0,b:{t:2,i:[{t:3}],s:"Perguntas Frequentes"}},faq1q:{t:0,b:{t:2,i:[{t:3}],s:"O que é APCA e como difere do WCAG 2.1?"}},faq1a:{t:0,b:{t:2,i:[{t:3}],s:"WCAG 2.1 usa uma fórmula matemática simples para calcular o contraste entre cores. APCA (Accessible Perceptual Contrast Algorithm) é um modelo mais moderno que considera como o olho humano percebe a luminosidade em diferentes contextos de leitura. Para textos normais, um valor APCA de 60 ou mais é considerado adequado."}},faq2q:{t:0,b:{t:2,i:[{t:3}],s:"Como usar a escala de tons gerada no Tailwind CSS?"}},faq2a:{t:0,b:{t:2,i:[{t:3}],s:"Selecione o formato de exportação Tailwind e o formato de cor desejado. O código gerado pode ser colado diretamente no tailwind.config.js ou em um arquivo CSS como variáveis customizadas. Se usar OKLCH, é compatível com Tailwind 4 nativamente."}},faq3q:{t:0,b:{t:2,i:[{t:3}],s:"O que é OKLCH e por que usá-lo?"}},faq3a:{t:0,b:{t:2,i:[{t:3}],s:"OKLCH é um espaço de cor perceptualmente uniforme — isso significa que alterar a luminosidade ou a croma muda a cor de forma visualmente previsível. É o formato adotado pelo Tailwind 4 internamente e pelo CSS Color Level 4, sendo ideal para gerar escalas de tons mais consistentes do que HSL."}}},en:{pageTitle:{t:0,b:{t:1,c:[{t:2,i:[{t:3}],s:"Online Color Editor & Adjuster – HEX, RGB, HSL, OKLCH"},{t:2,i:[{t:3}],s:"Free"}]}},title:{t:0,b:{t:2,i:[{t:3}],s:"Color Editor"}},bc:{t:0,b:{t:2,i:[{t:3}],s:"Color Tools"}},desc:{t:0,b:{t:2,i:[{t:3}],s:"Adjust and refine colors with precision. Tweak hue, saturation, and lightness, generate shade scales, and check accessibility contrast for text."}},base:{t:0,b:{t:2,i:[{t:3}],s:"Base Color"}},adjust:{t:0,b:{t:2,i:[{t:3}],s:"Color Adjustments"}},lightness:{t:0,b:{t:2,i:[{t:3}],s:"Lightness"}},saturation:{t:0,b:{t:2,i:[{t:3}],s:"Saturation"}},hue:{t:0,b:{t:2,i:[{t:3}],s:"Hue"}},contrast:{t:0,b:{t:2,i:[{t:3}],s:"Accessibility & Contrast"}},white_text:{t:0,b:{t:2,i:[{t:3}],s:"White Text"}},black_text:{t:0,b:{t:2,i:[{t:3}],s:"Black Text"}},pass:{t:0,b:{t:2,i:[{t:3}],s:"Pass"}},fail:{t:0,b:{t:2,i:[{t:3}],s:"Fail"}},shades:{t:0,b:{t:2,i:[{t:3}],s:"Tints & Shades Scale"}},about_d:{t:0,b:{t:2,i:[{t:3}],s:`The Color Editor is a complete tool for adjusting and fine-tuning any color with precision. Enter a color in HEX, RGB, HSL, or even by name, then use the sliders to modify Hue (the color tone), Saturation (color intensity), and Lightness (how light or dark the color is).
18
19Changes are applied in real time, so you can instantly preview the result and verify legibility against light and dark text. The tool also automatically converts the color to the most common formats used in web design and development, including HEX, RGB, HSL, HSV, and OKLCH.`}},see1:{t:0,b:{t:2,i:[{t:3}],s:"Image Colors"}},see2:{t:0,b:{t:2,i:[{t:3}],s:"Color Combination"}},see3:{t:0,b:{t:2,i:[{t:3}],s:"Color Converter"}},see4:{t:0,b:{t:2,i:[{t:3}],s:"Color Palette Generator"}},feature_1:{t:0,b:{t:2,i:[{t:3}],s:"Precise Hue, Saturation, and Lightness adjustments with real-time sliders"}},feature_2:{t:0,b:{t:2,i:[{t:3}],s:"Dual contrast checker (WCAG 2.1 and APCA) for text accessibility"}},feature_3:{t:0,b:{t:2,i:[{t:3}],s:"11-step shade scale generation in Tailwind style (50–950)"}},feature_4:{t:0,b:{t:2,i:[{t:3}],s:"Export in HEX, RGB, HSL, and OKLCH for CSS, SCSS, JSON, and Tailwind"}},features_title:{t:0,b:{t:2,i:[{t:3}],s:"Key Features"}},apps_title:{t:0,b:{t:2,i:[{t:3}],s:"What You Can Use the Color Editor For"}},app1:{t:0,b:{t:2,i:[{t:3}],s:"Build consistent palettes for design systems, components, and web interfaces"}},app2:{t:0,b:{t:2,i:[{t:3}],s:"Verify that color combinations pass WCAG and APCA accessibility thresholds before publishing"}},app3:{t:0,b:{t:2,i:[{t:3}

19],s:"Adapt a brand color for different contexts such as dark mode, hover states, and disabled elements"}},app4:{t:0,b:{t:2,i:[{t:3}],s:"Generate Tailwind-style shade scales to export as CSS variables or design tokens"}},app5:{t:0,b:{t:2,i:[{t:3}],s:"Convert colors between HEX, RGB, HSL, and OKLCH when working across different design and development tools"}},how_title:{t:0,b:{t:2,i:[{t:3}],s:"How to Use the Color Editor"}},step_1_t:{t:0,b:{t:2,i:[{t:3}],s:"Enter the base color"}},step_1_d:{t:0,b:{t:2,i:[{t:3}],s:"Type any HEX value, RGB, HSL, or color name into the Base Color field. The tool loads the color instantly and converts it to all available formats"}},step_2_t:{t:0,b:{t:2,i:[{t:3}],s:"Adjust with the sliders"}},step_2_d:{t:0,b:{t:2,i:[{t:3}],s:"Use the Hue, Saturation, and Lightness controls to modify the color in real time. All outputs and the shade scale update instantly"}},step_3_t:{t:0,b:{t:2,i:[{t:3}],s:"Check the contrast"}},step_3_d:{t:0,b:{t:2,i:[{t:3}],s:"The accessibility section shows the contrast ratio against white and black text using both WCAG 2.1 and APCA models, indicating whether the combination passes or fails"}},step_4_t:{t:0,b:{t:2,i:[{t:3}],s:"Copy the values"}},step_4_d:{t:0,b:{t:2,i:[{t:3}],s:"Click any format block (RGB, HSL, HSV, OKLCH) to copy the value directly. The HEX value is shown in the main preview"}},step_5_t:{t:0,b:{t:2,i:[{t:3}],s:"Export the shade scale"}},step_5_d:{t:0,b:{t:2,i:[{t:3}],s:"In the Tints & Shades section, choose the export format (CSS, SCSS, JSON, Tailwind) and the color format (HEX, RGB, HSL, or OKLCH), then click Copy to use in your project"}},faq_title:{t:0,b:{t:2,i:[{t:3}],s:"Frequently Asked Questions"}},faq1q:{t:0,b:{t:2,i:[{t:3}],s:"What is APCA and how does it differ from WCAG 2.1?"}},faq1a:{t:0,b:{t:2,i:[{t:3}],s:"WCAG 2.1 uses a simple mathematical formula to calculate contrast between colors. APCA (Accessible Perceptual Contrast Algorithm) is a more modern model that accounts for how the human eye perceives luminosity in different reading contexts. For normal body text, an APCA value of 60 or above is considered adequate."}},faq2q:{t:0,b:{t:2,i:[{t:3}],s:"How do I use the generated shade scale in Tailwind CSS?"}},faq2a:{t:0,b:{t:2,i:[{t:3}],s:"Select the Tailwind export format and your preferred color format. The generated code can be pasted directly into tailwind.config.js or into a CSS file as custom properties. If you use OKLCH, it is natively compatible with Tailwind 4."}},faq3q:{t:0,b:{t:2,i:[{t:3}],s:"What is OKLCH and why use it?"}},faq3a:{t:0,b:{t:2,i:[{t:3}],s:"OKLCH is a perceptually uniform color space — meaning that changing lightness or chroma produces visually predictable results. It is the format adopted internally by Tailwind 4 and CSS Color Level 4, making it ideal for generating shade scales that are more perceptually consistent than HSL."}},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!"}},click_to_copy:{t:0,b:{t:2,i:[{t:3}],s:"Click any color above to copy its HEX value."}}},es:{pageTitle:{t:0,b:{t:1,c:[{t:2,i:[{t:3}],s:"Editor y Ajuste de Colores Online – HEX, RGB, HSL, OKLCH"},{t:2,i:[{t:3}],s:"Gratis"}]}},title:{t:0,b:{t:2,i:[{t:3}],s:"Editor de Colores"}},bc:{t:0,b:{t:2,i:[{t:3}],s:"Herramientas de Color"}},desc:{t:0,b:{t:2,i:[{t:3}],s:"Ajusta y refina colores con precisión. Modifica el tono, la saturación y la luminosidad, genera escalas de tonos y verifica el contraste de accesibilidad para textos."}},base:{t:0,b:{t:2,i:[{t:3}],s:"Color Base"}},adjust:{t:0,b:{t:2,i:[{t:3}],s:"Ajustes de Color"}},lightness:{t:0,b:{t:2,i:[{t:3}],s:"Luminosidad"}},saturation:{t:0,b:{t:2,i:[{t:3}],s:"Saturación"}},hue:{t:0,b:{t:2,i:[{t:3}],s:"Tono"}},contrast:{t:0,b:{t:2,i:[{t:3}],s:"Accesibilidad y Contraste"}},white_text:{t:0,b:{t:2,i:[{t:3}],s:"Texto Blanco"}},black_text:{t:0,b:{t:2,i:[{t:3}],s:"Texto Negro"}},pass:{t:0,b:{t:2,i:[{t:3}],s:"Aprobado"}},fail:{t:0,b:{t:2,i:[{t:3}],s:"Fallido"}},shades:{t:0,b:{t:2,i:[{t:3}],s:"Escala de Tonos (Tints & Shades)"}},about_d:{t:0,b:{t:2,i:[{t:3}],s:`El Editor de Colores es una herramienta completa para ajustar y perfeccionar cualquier color con precisión. Introduce un color en formato HEX, RGB, HSL o incluso por nombre y utiliza los controles deslizantes para modificar el Tono (la tonalidad del color), la Saturación (la intensidad del color) y la Luminosidad (qué tan claro u oscuro es el color).
20
21Los cambios se aplican en tiempo real, lo que te permite visualizar el resultado al instante y verificar la legibilidad con textos claros y oscuros. Además, la herramienta convierte automáticamente el color a los formatos más utilizados en diseño y desarrollo web, incluyendo HEX, RGB, HSL, HSV y OKLCH.`}},see1:{t:0,b:{t:2,i:[{t:3}],s:"Colores de la Imagen"}},see2:{t:0,b:{t:2,i:[{t:3}],s:"Combinación de Colores"}},see3:{t:0,b:{t:2,i:[{t:3}],s:"Convertidor de Colores"}},see4:{t:0,b:{t:2,i:[{t:3}],s:"Generador de Paletas de Colores"}},feature_1:{t:0,b:{t:2,i:[{t:3}],s:"Ajustes precisos de Tono, Saturación y Luminosidad con sliders en tiempo real"}},feature_2:{t:0,b:{t:2,i:[{t:3}],s:"Calculadora de contraste dual (WCAG 2.1 y APCA) para accesibilidad de textos"}},feature_3:{t:0,b:{t:2,i:[{t:3}],s:"Generación de escala de 11 tonos al estilo Tailwind (50–950)"}},feature_4:{t:0,b:{t:2,i:[{t:3}],s:"Exportación en HEX, RGB, HSL y OKLCH para CSS, SCSS, JSON y Tailwind"}},features_title:{t:0,b:{t:2,i:[{t:3}],s:"Funcionalidades"}},apps_title:{t:0,b:{t:2,i:[{t:3}],s:"Para Qué Usar el Editor de Colores"}},app1:{t:0,b:{t:2,i:[{t:3}],s:"Crear paletas consistentes para design systems, componentes e interfaces web"}},app2:{t:0,b:{t:2,i:[{t:3}],s:"Verificar si las combinaciones de color pasan los criterios de accesibilidad WCAG y APCA antes de publicar"}},app3:{t:0,b:{t:2,i:[{t:3}],s:"Adaptar el color de marca para diferentes contextos, como modo oscuro, hover y estados deshabilitados"}},app4:{t:0,b:{t:2,i:[{t:3}],s:"Generar escalas de tonos al estilo Tailwind para exportar como variables CSS o tokens de diseño"}},app5:{t:0,b:{t:2,i:[{t:3}],s:"Convertir colores entre HEX, RGB, HSL y OKLCH al integrar diferentes herramientas de diseño y desarrollo"}},how_title:{t:0,b:{t:2,i:[{t:3}],s:"Cómo Usar el Editor de Colores"}}

21,step_1_t:{t:0,b:{t:2,i:[{t:3}],s:"Introduce el color base"}},step_1_d:{t:0,b:{t:2,i:[{t:3}],s:"Escribe cualquier valor HEX, RGB, HSL o nombre de color en el campo Color Base. La herramienta carga el color automáticamente y lo convierte a todos los formatos disponibles"}},step_2_t:{t:0,b:{t:2,i:[{t:3}],s:"Ajusta con los sliders"}},step_2_d:{t:0,b:{t:2,i:[{t:3}],s:"Usa los controles de Tono, Saturación y Luminosidad para modificar el color en tiempo real. Todas las salidas y la escala de tonos se actualizan al instante"}},step_3_t:{t:0,b:{t:2,i:[{t:3}],s:"Verifica el contraste"}},step_3_d:{t:0,b:{t:2,i:[{t:3}],s:"La sección de accesibilidad muestra la tasa de contraste con texto blanco y negro en los modelos WCAG 2.1 y APCA, indicando si la combinación pasa o falla los criterios"}},step_4_t:{t:0,b:{t:2,i:[{t:3}],s:"Copia los valores"}},step_4_d:{t:0,b:{t:2,i:[{t:3}],s:"Haz clic en cualquier bloque de formato (RGB, HSL, HSV, OKLCH) para copiar el valor directamente. El HEX se muestra en el preview principal"}},step_5_t:{t:0,b:{t:2,i:[{t:3}],s:"Exporta la escala de tonos"}},step_5_d:{t:0,b:{t:2,i:[{t:3}],s:"En la sección Tints & Shades, elige el formato de exportación (CSS, SCSS, JSON, Tailwind) y el formato de color (HEX, RGB, HSL u OKLCH). Haz clic en Copiar para usarlo en tu proyecto"}},faq_title:{t:0,b:{t:2,i:[{t:3}],s:"Preguntas Frecuentes"}},faq1q:{t:0,b:{t:2,i:[{t:3}],s:"¿Qué es APCA y en qué se diferencia de WCAG 2.1?"}},faq1a:{t:0,b:{t:2,i:[{t:3}],s:"WCAG 2.1 utiliza una fórmula matemática simple para calcular el contraste entre colores. APCA (Accessible Perceptual Contrast Algorithm) es un modelo más moderno que considera cómo el ojo humano percibe la luminosidad en diferentes contextos de lectura. Para textos normales, un valor APCA de 60 o más se considera adecuado."}},faq2q:{t:0,b:{t:2,i:[{t:3}],s:"¿Cómo usar la escala de tonos generada en Tailwind CSS?"}},faq2a:{t:0,b:{t:2,i:[{t:3}],s:"Selecciona el formato de exportación Tailwind y el formato de color deseado. El código generado puede pegarse directamente en tailwind.config.js o en un archivo CSS como propiedades personalizadas. Si usas OKLCH, es compatible nativamente con Tailwind 4."}},faq3q:{t:0,b:{t:2,i:[{t:3}],s:"¿Qué es OKLCH y por qué usarlo?"}},faq3a:{t:0,b:{t:2,i:[{t:3}],s:"OKLCH es un espacio de color perceptualmente uniforme, lo que significa que modificar la luminosidad o el croma produce resultados visualmente predecibles. Es el formato adoptado internamente por Tailwind 4 y CSS Color Level 4, siendo ideal para generar escalas de tonos más consistentes que HSL."}},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!"}},click_to_copy:{t:0,b:{t:2,i:[{t:3}],s:"Haz clic en cualquier color de arriba para copiar su valor HEX."}}},fr:{pageTitle:{t:0,b:{t:1,c:[{t:2,i:[{t:3}],s:"Éditeur et Ajusteur de Couleurs en Ligne – HEX, RGB, HSL, OKLCH"},{t:2,i:[{t:3}],s:"Gratuit"}]}},title:{t:0,b:{t:2,i:[{t:3}],s:"Éditeur de Couleurs"}},bc:{t:0,b:{t:2,i:[{t:3}],s:"Outils de Couleurs"}},desc:{t:0,b:{t:2,i:[{t:3}],s:"Ajustez et affinez les couleurs avec précision. Modifiez la teinte, la saturation et la luminosité, générez des échelles de nuances et vérifiez le contraste pour l'accessibilité du texte."}},base:{t:0,b:{t:2,i:[{t:3}],s:"Couleur de Base"}},adjust:{t:0,b:{t:2,i:[{t:3}],s:"Ajustements de Couleur"}},lightness:{t:0,b:{t:2,i:[{t:3}],s:"Luminosité"}},saturation:{t:0,b:{t:2,i:[{t:3}],s:"Saturation"}},hue:{t:0,b:{t:2,i:[{t:3}],s:"Teinte"}},contrast:{t:0,b:{t:2,i:[{t:3}],s:"Accessibilité & Contraste"}},white_text:{t:0,b:{t:2,i:[{t:3}],s:"Texte Blanc"}},black_text:{t:0,b:{t:2,i:[{t:3}],s:"Texte Noir"}},pass:{t:0,b:{t:2,i:[{t:3}],s:"Réussi"}},fail:{t:0,b:{t:2,i:[{t:3}],s:"Échoué"}},shades:{t:0,b:{t:2,i:[{t:3}],s:"Échelle de Nuances (Tints & Shades)"}},about_d:{t:0,b:{t:2,i:[{t:3}],s:`L'Éditeur de Couleurs est un outil complet pour ajuster et affiner n'importe quelle couleur avec précision. Entrez une couleur au format HEX, RGB, HSL, ou même par nom, puis utilisez les curseurs pour modifier la Teinte, la Saturation (l'intensité de la couleur) et la Luminosité (à quel point la couleur est claire ou foncée).
22
23Les changements sont appliqués en temps réel, vous permettant de prévisualiser instantanément le résultat et de vérifier la lisibilité par rapport au texte clair et sombre. L'outil convertit également automatiquement la couleur dans les formats les plus courants utilisés en conception et développement web, y compris HEX, RGB, HSL, HSV et OKLCH.`}},see1:{t:0,b:{t:2,i:[{t:3}],s:"Couleurs de l'Image"}},see2:{t:0,b:{t:2,i:[{t:3}],s:"Combinaison de Couleurs"}},see3:{t:0,b:{t:2,i:[{t:3}],s:"Convertisseur de Couleurs"}},see4:{t:0,b:{t:2,i:[{t:3}],s:"Générateur de Palettes de Couleurs"}},feature_1:{t:0,b:{t:2,i:[{t:3}],s:"Ajustements précis de la Teinte, de la Saturation et de la Luminosité avec des curseurs en temps réel"}},feature_2:{t:0,b:{t:2,i:[{t:3}],s:"Vérificateur de contraste double (WCAG 2.1 et APCA) pour l'accessibilité du texte"}},feature_3:{t:0,b:{t:2,i:[{t:3}],s:"Génération d'échelle de nuances en 11 étapes style Tailwind (50–950)"}},feature_4:{t:0,b:{t:2,i:[{t:3}],s:"Exportation en HEX, RGB, HSL et OKLCH pour CSS, SCSS, JSON et Tailwind"}},features_title:{t:0,b:{t:2,i:[{t:3}],s:"Fonctionnalités Principales"}},apps_title:{t:0,b:{t:2,i:[{t:3}

23],s:"Pourquoi utiliser l'Éditeur de Couleurs"}},app1:{t:0,b:{t:2,i:[{t:3}],s:"Créer des palettes cohérentes pour les design systems, les composants et les interfaces web"}},app2:{t:0,b:{t:2,i:[{t:3}],s:"Vérifier que les combinaisons de couleurs respectent les seuils d'accessibilité WCAG et APCA avant publication"}},app3:{t:0,b:{t:2,i:[{t:3}],s:"Adapter une couleur de marque pour différents contextes tels que le mode sombre, le survol et les états désactivés"}},app4:{t:0,b:{t:2,i:[{t:3}],s:"Générer des échelles de nuances de style Tailwind à exporter comme variables CSS ou design tokens"}},app5:{t:0,b:{t:2,i:[{t:3}],s:"Convertir les couleurs entre HEX, RGB, HSL et OKLCH lors de l'intégration de différents outils de design et de développement"}},how_title:{t:0,b:{t:2,i:[{t:3}],s:"Comment utiliser l'Éditeur de Couleurs"}},step_1_t:{t:0,b:{t:2,i:[{t:3}],s:"Entrez la couleur de base"}},step_1_d:{t:0,b:{t:2,i:[{t:3}],s:"Tapez n'importe quelle valeur HEX, RGB, HSL ou nom de couleur dans le champ Couleur de Base. L'outil charge la couleur instantanément et la convertit dans tous les formats disponibles"}},step_2_t:{t:0,b:{t:2,i:[{t:3}],s:"Ajustez avec les curseurs"}},step_2_d:{t:0,b:{t:2,i:[{t:3}],s:"Utilisez les contrôles de Teinte, Saturation et Luminosité pour modifier la couleur en temps réel. Toutes les sorties et l'échelle de nuances se mettent à jour instantanément"}},step_3_t:{t:0,b:{t:2,i:[{t:3}],s:"Vérifiez le contraste"}},step_3_d:{t:0,b:{t:2,i:[{t:3}],s:"La section accessibilité affiche le ratio de contraste par rapport au texte blanc et noir en utilisant les modèles WCAG 2.1 et APCA, indiquant si la combinaison réussit ou échoue"}},step_4_t:{t:0,b:{t:2,i:[{t:3}],s:"Copiez les valeurs"}},step_4_d:{t:0,b:{t:2,i:[{t:3}],s:"Cliquez sur n'importe quel bloc de format (RGB, HSL, HSV, OKLCH) pour copier directement la valeur. La valeur HEX est affichée dans l'aperçu principal"}},step_5_t:{t:0,b:{t:2,i:[{t:3}],s:"Exportez l'échelle de nuances"}},step_5_d:{t:0,b:{t:2,i:[{t:3}],s:"Dans la section Tints & Shades, choisissez le format d'exportation (CSS, SCSS, JSON, Tailwind) et le format de couleur (HEX, RGB, HSL ou OKLCH), puis cliquez sur Copier pour l'utiliser dans votre projet"}},faq_title:{t:0,b:{t:2,i:[{t:3}],s:"Foire Aux Questions"}},faq1q:{t:0,b:{t:2,i:[{t:3}],s:"Qu'est-ce que l'APCA et en quoi diffère-t-il du WCAG 2.1 ?"}},faq1a:{t:0,b:{t:2,i:[{t:3}],s:"WCAG 2.1 utilise une formule mathématique simple pour calculer le contraste entre les couleurs. APCA (Accessible Perceptual Contrast Algorithm) est un modèle plus moderne qui prend en compte la façon dont l'œil humain perçoit la luminosité dans différents contextes de lecture. Pour un texte normal, une valeur APCA de 60 ou plus est considérée comme adéquate."}},faq2q:{t:0,b:{t:2,i:[{t:3}],s:"Comment utiliser l'échelle de nuances générée dans Tailwind CSS ?"}},faq2a:{t:0,b:{t:2,i:[{t:3}],s:"Sélectionnez le format d'exportation Tailwind et votre format de couleur préféré. Le code généré peut être collé directement dans tailwind.config.js ou dans un fichier CSS comme variables personnalisées. Si vous utilisez OKLCH, il est nativement compatible avec Tailwind 4."}},faq3q:{t:0,b:{t:2,i:[{t:3}],s:"Qu'est-ce que OKLCH et pourquoi l'utiliser ?"}},faq3a:{t:0,b:{t:2,i:[{t:3}],s:"OKLCH est un espace colorimétrique perceptuellement uniforme — ce qui signifie que modifier la luminosité ou le chroma produit des résultats visuellement prévisibles. C'est le format adopté en interne par Tailwind 4 et CSS Color Level 4, ce qui le rend idéal pour générer des échelles de nuances plus cohérentes visuellement que le HSL."}},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é !"}},click_to_copy:{t:0,b:{t:2,i:[{t:3}],s:"Cliquez sur n'importe quelle couleur ci-dessus pour copier sa valeur HEX."}}},it:{pageTitle:{t:0,b:{t:1,c:[{t:2,i:[{t:3}],s:"Editor e Regolatore di Colori Online – HEX, RGB, HSL, OKLCH"},{t:2,i:[{t:3}],s:"Gratuito"}]}},title:{t:0,b:{t:2,i:[{t:3}],s:"Editor di Colori"}},see4:{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"}},desc:{t:0,b:{t:2,i:[{t:3}],s:"Regola e perfeziona i colori con precisione. Modifica tonalità, saturazione e luminosità, genera scale di sfumature e verifica il contrasto per l'accessibilità del testo."}},base:{t:0,b:{t:2,i:[{t:3}],s:"Colore Base"}},adjust:{t:0,b:{t:2,i:[{t:3}],s:"Regolazioni Colore"}},lightness:{t:0,b:{t:2,i:[{t:3}],s:"Luminosità"}},saturation:{t:0,b:{t:2,i:[{t:3}],s:"Saturazione"}},hue:{t:0,b:{t:2,i:[{t:3}],s:"Tonalità"}},contrast:{t:0,b:{t:2,i:[{t:3}],s:"Accessibilità & Contrasto"}},white_text:{t:0,b:{t:2,i:[{t:3}],s:"Testo Bianco"}},black_text:{t:0,b:{t:2,i:[{t:3}],s:"Testo Nero"}},pass:{t:0,b:{t:2,i:[{t:3}],s:"Superato"}},fail:{t:0,b:{t:2,i:[{t:3}],s:"Fallito"}},shades:{t:0,b:{t:2,i:[{t:3}],s:"Scala di Tinte e Sfumature"}},about_d:{t:0,b:{t:2,i:[{t:3}],s:`L'Editor di Colori è uno strumento completo per regolare e perfezionare qualsiasi colore con precisione. Inserisci un colore in formato HEX, RGB, HSL, o persino per nome, quindi utilizza i cursori per modificare Tonalità (il tono del colore), Saturazione (l'intensità del colore) e Luminosità (quanto il colore è chiaro o scuro).
24
25Le modifiche vengono applicate in tempo reale, così puoi visualizzare immediatamente il risultato e verificare la leggibilità rispetto a testo chiaro e scuro. Lo strumento converte automaticamente il colore nei formati più comuni utilizzati nel web design e nello sviluppo, inclusi HEX, RGB, HSL, HSV e OKLCH.`}},see1:{t:0,b:{t:2,i:[{t:3}],s:"Colori dell'Immagine"}},see2:{t:0,b:{t:2,i:[{t:3}],s:"Combinazione di Colori"}},see3:{t:0,b:{t:2,i:[{t:3}],s:"Convertitore di Colori"}},feature_1:{t:0,b:{t:2,i:[{t:3}],s:"Regolazioni precise di Tonalità, Saturazione e Luminosità con cursori in tempo reale"}},feature_2:{t:0,b:{t:2,i:[{t:3}],s:"Doppio controllo del contrasto (WCAG 2.1 e APCA) per l'accessibilità del testo"}},feature_3:{t:0,b:{t:2,i:[{t:3}],s:"Generazione di scale di sfumature in 11 passaggi in stile Tailwind (50–950)"}},feature_4:{t:0,b:{t:2,i:[{t:3}],s:"Esportazione in HEX, RGB, HSL e OKLCH per CSS, SCSS, JSON e Tailwind"}},features_title:{t:0,b:{t:2,i:[{t:3}],s:"Funzionalità Principali"}},apps_title:{t:0,b:{t:2,i:[{t:3}],s:"Per cosa puoi usare l'Editor di Colori"}},app1:{t:0,b:{t:2,i:[{t:3}],s:"Creare palette coerenti per design system, componenti e interfacce web"}},app2:{t:0,b:{t:2,i:[{t:3}],s:"Verificare che le combinazioni di colori superino le soglie di accessibilità WCAG e APCA prima della pubblicazione"}},app3:{t:0,b:{t:2,i:[{t:3}],s:"Adattare il colore di un brand per diversi contesti come modalità scura, stati hover ed elementi disabilitati"}},app4:{t:0,b:{t:2,i:[{t:3}],s:"Generare scale di sfumature in stile Tailwind da esportare come variabili CSS o design token"}},app5:{t:0,b:{t:2,i:[{t:3}],s:"Convertire i colori tra HEX, RGB, HSL e OKLCH lavorando su diversi strumenti di design e sviluppo"}},how_title:{t:0,b:{t:2,i:[{t:3}],s:"Come usare l'Editor di Colori"}}

25,step_1_t:{t:0,b:{t:2,i:[{t:3}],s:"Inserisci il colore base"}},step_1_d:{t:0,b:{t:2,i:[{t:3}],s:"Digita qualsiasi valore HEX, RGB, HSL o nome di colore nel campo Colore Base. Lo strumento carica istantaneamente il colore e lo converte in tutti i formati disponibili"}},step_2_t:{t:0,b:{t:2,i:[{t:3}],s:"Regola con i cursori"}},step_2_d:{t:0,b:{t:2,i:[{t:3}],s:"Usa i controlli di Tonalità, Saturazione e Luminosità per modificare il colore in tempo reale. Tutti i formati e la scala di sfumature si aggiornano all'istante"}},step_3_t:{t:0,b:{t:2,i:[{t:3}],s:"Verifica il contrasto"}},step_3_d:{t:0,b:{t:2,i:[{t:3}],s:"La sezione accessibilità mostra il rapporto di contrasto rispetto a testo bianco e nero utilizzando i modelli WCAG 2.1 e APCA, indicando se la combinazione viene superata o meno"}},step_4_t:{t:0,b:{t:2,i:[{t:3}],s:"Copia i valori"}},step_4_d:{t:0,b:{t:2,i:[{t:3}],s:"Clicca su qualsiasi blocco di formato (RGB, HSL, HSV, OKLCH) per copiare direttamente il valore. Il valore HEX è mostrato nell'anteprima principale"}},step_5_t:{t:0,b:{t:2,i:[{t:3}],s:"Esporta la scala di sfumature"}},step_5_d:{t:0,b:{t:2,i:[{t:3}],s:"Nella sezione Scala di Tinte e Sfumature, scegli il formato di esportazione (CSS, SCSS, JSON, Tailwind) e il formato colore (HEX, RGB, HSL o OKLCH), quindi clicca su Copia per utilizzarlo nel tuo progetto"}},faq_title:{t:0,b:{t:2,i:[{t:3}],s:"Domande Frequenti"}},faq1q:{t:0,b:{t:2,i:[{t:3}],s:"Cos'è APCA e come differisce da WCAG 2.1?"}},faq1a:{t:0,b:{t:2,i:[{t:3}],s:"WCAG 2.1 utilizza una semplice formula matematica per calcolare il contrasto tra i colori. APCA (Accessible Perceptual Contrast Algorithm) è un modello più moderno che tiene conto di come l'occhio umano percepisce la luminosità in diversi contesti di lettura. Per il testo normale, un valore APCA di 60 o superiore è considerato adeguato."}},faq2q:{t:0,b:{t:2,i:[{t:3}],s:"Come utilizzo la scala di sfumature generata in Tailwind CSS?"}},faq2a:{t:0,b:{t:2,i:[{t:3}],s:"Seleziona il formato di esportazione Tailwind e il tuo formato colore preferito. Il codice generato può essere incollato direttamente in tailwind.config.js o in un file CSS come proprietà personalizzate. Se usi OKLCH, è nativamente compatibile con Tailwind 4."}},faq3q:{t:0,b:{t:2,i:[{t:3}],s:"Cos'è OKLCH e perché usarlo?"}},faq3a:{t:0,b:{t:2,i:[{t:3}],s:"OKLCH è uno spazio colore percettivamente uniforme: significa che la modifica della luminosità o della croma produce risultati visivamente prevedibili. È il formato adottato internamente da Tailwind 4 e dal CSS Color Level 4, il che lo rende ideale per generare scale di sfumature visivamente più coerenti rispetto a HSL."}},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!"}},click_to_copy:{t:0,b:{t:2,i:[{t:3}],s:"Clicca su qualsiasi colore sopra per copiare il suo valore HEX."}}}}})}typeof F=="function"&&F(He);export{He as default};