UNPKG

@martinlaxenaire/color-palette-generator

Version:

A small, lightweight utility helper to generate color palettes based on a given input color.

3 lines (2 loc) 8.05 kB
var D=Object.defineProperty;var g=(M,b)=>D(M,"name",{value:b,configurable:!0});(function(M,b){typeof exports=="object"&&typeof module<"u"?b(exports):typeof define=="function"&&define.amd?define(["exports"],b):(M=typeof globalThis<"u"?globalThis:M||self,b(M.window=M.window||{}))})(this,function(M){"use strict";var b=g(v=>{throw TypeError(v)},"__typeError"),I=g((v,t,e)=>t.has(v)||b("Cannot "+e),"__accessCheck"),w=g((v,t,e)=>(I(v,t,"read from private field"),e?e.call(v):t.get(v)),"__privateGet"),k=g((v,t,e)=>t.has(v)?b("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(v):t.set(v,e),"__privateAdd"),c=g((v,t,e,i)=>(I(v,t,"write to private field"),t.set(v,e),e),"__privateSet"),x,C,T,H;const q=class W{static{g(this,"_ColorModel")}constructor(t="#000000"){k(this,x),k(this,C),k(this,T),k(this,H),this.hex=t}get hex(){return w(this,x)}set hex(t){c(this,x,t),c(this,C,this.hexToRgb(t)),c(this,T,this.rgbToHsl(this.rgb)),c(this,H,this.hslToHsv(this.hsl))}get rgb(){return w(this,C)}set rgb(t){c(this,C,t),c(this,x,this.rgbToHex(t)),c(this,T,this.rgbToHsl(t)),c(this,H,this.hslToHsv(this.hsl))}get hsl(){return w(this,T)}set hsl(t){c(this,T,t),c(this,C,this.hslToRgb(t)),c(this,x,this.rgbToHex(this.rgb)),c(this,H,this.hslToHsv(t))}get hsv(){return w(this,H)}set hsv(t){c(this,H,t),c(this,T,this.hsvToHsl(t)),c(this,C,this.hslToRgb(this.hsl)),c(this,x,this.rgbToHex(this.rgb))}rgbToHex({r:t=0,g:e=0,b:i=0}){const s=g(h=>{const a=Math.round(h).toString(16);return a.length===1?"0"+a:a},"toHex");return"#".concat(s(t),"").concat(s(e),"").concat(s(i),"")}hexToRgb(t){const e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:{r:0,g:0,b:0}}rgbToHsl({r:t=0,g:e=0,b:i=0}){t/=255,e/=255,i/=255;const s=Math.max(t,e,i),h=Math.min(t,e,i);let a,n,o=(s+h)/2;if(s==h)a=n=0;else{const r=s-h;switch(n=o>.5?r/(2-s-h):r/(s+h),s){case t:a=(e-i)/r+(e<i?6:0);break;case e:a=(i-t)/r+2;break;case i:a=(t-e)/r+4;break}a/=6}return{h:Math.floor(a*360),s:Math.floor(n*100),l:Math.floor(o*100)}}hslToRgb({h:t=0,s:e=0,l:i=0}){t/=360,e/=100,i/=100;const s={r:0,g:0,b:0};if(e===0)s.r=s.g=s.b=i;else{const h=g((o,r,l)=>(l<0&&(l+=1),l>1&&(l-=1),l<.16666666666666666?o+(r-o)*6*l:l<.5?r:l<.6666666666666666?o+(r-o)*(.6666666666666666-l)*6:o),"hue2rgb"),a=i<.5?i*(1+e):i+e-i*e,n=2*i-a;s.r=h(n,a,t+1/3),s.g=h(n,a,t),s.b=h(n,a,t-1/3)}return s.r*=255,s.g*=255,s.b*=255,s}hslToHsv({h:t=0,s:e=0,l:i=0}){const s=i/100,h=e/100*Math.min(s,1-s)+s;return{h:t,s:h?100*(2-2*s/h):0,v:h*100}}hsvToHsl({h:t=0,s:e=0,v:i=0}){const s=i/100,h=s-s*e/200,a=Math.min(h,1-h);return{h:t,s:a?100*(s-h)/a:0,l:h*100}}rgbToCmyk({r:t=0,g:e=0,b:i=0},s=!1){let h=1-t/255,a=1-e/255,n=1-i/255,o=Math.min(h,Math.min(a,n));return h=(h-o)/(1-o),a=(a-o)/(1-o),n=(n-o)/(1-o),s||(h=Math.round(h*1e4)/100,a=Math.round(a*1e4)/100,n=Math.round(n*1e4)/100,o=Math.round(o*1e4)/100),h=isNaN(h)?0:h,a=isNaN(a)?0:a,n=isNaN(n)?0:n,o=isNaN(o)?0:o,{c:h,m:a,y:n,k:o}}cmykToRgb({c:t=0,m:e=0,y:i=0,k:s=0},h=!1){t=t/100,e=e/100,i=i/100,s=s/100,t=t*(1-s)+s,e=e*(1-s)+s,i=i*(1-s)+s;let a=1-t,n=1-e,o=1-i;return h||(a=Math.round(255*a),n=Math.round(255*n),o=Math.round(255*o)),{r:a,g:n,b:o}}clone(){return new W(this.hex)}equals(t){return this.hex===t.hex}saturateHsv(t=0,e=100,i=0){const s=this.hsv.s;return this.hsv.s=s+t>e?e:s+t<i?i:s+t,this.hsl=this.hsvToHsl(this.hsv),this}brighten(t=0,e=100,i=0){const s=this.hsv.v;return this.hsv.v=s+t>e?e:s+t<i?i:s+t,this.hsl=this.hsvToHsl(this.hsv),this}saturateHsl(t=0,e=100,i=0){const s=this.hsl.s;return this.hsl.s=s+t>e?e:s+t<i?i:s+t,this.rgb=this.hslToRgb(this.hsl),this}lighten(t=0,e=100,i=0){const s=this.hsl.l;return this.hsl.l=s+t>e?e:s+t<i?i:s+t,this.rgb=this.hslToRgb(this.hsl),this}addToHue(t=0,e=0){return t+e>360?(t+e)%360:t+e<0?360+t+e:t+e}};x=new WeakMap,C=new WeakMap,T=new WeakMap,H=new WeakMap;let P=q;class y{static{g(this,"ColorPaletteGenerator")}constructor({rand:t=g(()=>Math.random(),"rand"),precision:e=4,hueRange:i=180,baseColor:s,baseSaturation:h}={}){this.rand=t,this.precision=e,this.hueRange=i,s?typeof s=="string"?this.setBaseColor(s,h):this.baseColor=s:(this.setBaseColor(),this.baseColor.hsv={h:Math.round(this.rand()*100*3.6),s:h!==void 0?h:Math.round(this.rand()*20+65),v:Math.round(this.rand()*20+65)}),this.generatePalettes()}setBaseColor(t="#000000",e=null){this.baseColor=new P(t),e!==void 0&&this.baseColor.saturateHsv(e)}generatePalettes(){this.palettes={base:[],light:[],dark:[]},this.generateBasePalette(),this.generateLightPalette(),this.generateDarkPalette()}generateBasePalette(){this.palettes.base.push(this.baseColor);const t=this.hueRange*.5/this.precision;let e=this.rand()*5+22.5,i=this.rand()*7.5+90;for(let s=1;s<=this.precision;s++){const h=new P,a=h.addToHue(this.baseColor.hsv.h,t*s),n=Math.max(0,Math.min(100,this.baseColor.hsv.s-s*(this.baseColor.hsv.s-e)/this.precision)),o=Math.max(0,Math.min(100,this.baseColor.hsv.v+s*(i-this.baseColor.hsv.v)/this.precision));h.hsv={h:a,s:n,v:o},this.palettes.base.unshift(h)}e=this.rand()*7.5+90,i=this.rand()*5+22.5;for(let s=1;s<=this.precision;s++){const h=new P,a=h.addToHue(this.baseColor.hsv.h,-t*s),n=Math.max(0,Math.min(100,this.baseColor.hsv.s+s*(e-this.baseColor.hsv.s)/this.precision)),o=Math.max(0,Math.min(100,this.baseColor.hsv.v-s*(this.baseColor.hsv.v-i)/this.precision));h.hsv={h:a,s:n,v:o},this.palettes.base.push(h)}}generateLightPalette(){const t=this.rand()*5+7.5,e=this.rand()*7.5+22.5,i=this.rand()*7.5+27.5;for(let s=0;s<this.palettes.base.length;s++){const h=new P(this.palettes.base[s].hex);h.hsv={h:h.addToHue(h.hsv.h,-t),s:Math.max(0,Math.min(100,h.hsv.s-e)),v:Math.max(0,Math.min(100,h.hsv.v+i))},this.palettes.light.push(h)}}generateDarkPalette(){const t=this.rand()*5+7.5,e=this.rand()*7.5+22.5,i=this.rand()*7.5+27.5;for(let s=0;s<this.palettes.base.length;s++){const h=new P(this.palettes.base[s].hex);h.hsv={h:h.addToHue(h.hsv.h,t),s:Math.max(0,Math.min(100,h.hsv.s+e)),v:Math.max(0,Math.min(100,h.hsv.v-i))},this.palettes.dark.push(h)}}get basePalette(){return this.palettes.base}get lightPalette(){return this.palettes.light}get darkPalette(){return this.palettes.dark}get fullPalette(){return[...this.palettes.light,...this.palettes.base,...this.palettes.dark]}getRandomPalette({length:t=4,includeBaseColor:e=!1,filterPasses:i=!0,sortByBrightness:s=!0,minBrightness:h=0,maxBrightness:a=100,minSaturation:n=0,maxSaturation:o=100}){t<1&&(t=1);let r=[...this.fullPalette];if(r=r.filter(l=>l.hsv.v>=h),r=r.filter(l=>l.hsv.v<=a),r=r.filter(l=>l.hsv.s>=n),r=r.filter(l=>l.hsv.s<=o),i&&this.precision>2)for(let l=0;l<2;l++)r=r.filter((p,m)=>m%2===1);return r.sort(()=>this.rand()-.5),r=r.slice(0,t),e&&(r.find(p=>p.equals(this.baseColor))||(r[0]=this.baseColor)),s&&r.sort((l,p)=>l.hsv.v-p.hsv.v),r}getDistributedPalette({length:t=4,includeBaseColor:e=!1,sortByBrightness:i=!0,minBrightness:s=0,maxBrightness:h=100,minSaturation:a=0,maxSaturation:n=100}){let o=[];e&&(o.push(this.baseColor),t=Math.max(0,t-1));let r=[...this.fullPalette];if(r=r.filter(u=>u.hsv.v>=s),r=r.filter(u=>u.hsv.v<=h),r=r.filter(u=>u.hsv.s>=a),r=r.filter(u=>u.hsv.s<=n),r.length<=t+1)return r.sort(()=>this.rand()-.5),r=r.slice(0,t),r;const l=r.filter(u=>u.hsv.v<=37.5),p=r.filter(u=>u.hsv.v>=87.5),m=r.filter(u=>u.hsv.v>37.5&&u.hsv.v<87.5),_=g(u=>Math.floor(this.rand()*u.length),"getRandomIndex"),N=[],B=[],L=[];let R=0;if(l.length){const u=Math.min(l.length,Math.floor(t/4));for(let d=0;d<u;d++){let f=null;for(;f===null||N.includes(f)||e&&l[f].equals(this.baseColor);)f=_(l);N.push(f),R++,o.push(l[f])}}if(p.length){const u=Math.min(p.length,Math.floor(t/4));for(let d=0;d<u;d++){let f=null;for(;f===null||B.includes(f)||e&&p[f].equals(this.baseColor);)f=_(p);B.push(f),R++,o.push(p[f])}}const S=Math.min(m.length,t-R);for(let u=0;u<S;u++){let d=null;for(;d===null||L.includes(d)||e&&m[d].equals(this.baseColor);)d=_(m);L.push(d),o.push(m[d])}return i&&o.sort((u,d)=>u.hsv.v-d.hsv.v),o}}M.ColorModel=P,M.ColorPaletteGenerator=y}); //# sourceMappingURL=color-palette-generator.umd.min.js.map