From 579e13f3176a9b573998814001ac641b449d695d Mon Sep 17 00:00:00 2001 From: Nicholas Jitkoff Date: Sat, 2 Jul 2022 14:27:07 -0700 Subject: [PATCH] Add color renderer --- docs/js/color.global.min.js | 2 + docs/render/color.css | 18 +++++ docs/render/color.js | 131 ++++++++++++++++++++++++++++++++++++ 3 files changed, 151 insertions(+) create mode 100644 docs/js/color.global.min.js create mode 100644 docs/render/color.css create mode 100644 docs/render/color.js diff --git a/docs/js/color.global.min.js b/docs/js/color.global.min.js new file mode 100644 index 0000000..e51db53 --- /dev/null +++ b/docs/js/color.global.min.js @@ -0,0 +1,2 @@ +var Color=function(){"use strict";function e(e,t){let r=e.length;Array.isArray(e[0])||(e=[e]),Array.isArray(t[0])||(t=t.map((e=>[e])));let a=t[0].length,o=t[0].map(((e,r)=>t.map((e=>e[r])))),n=e.map((e=>o.map((t=>{let r=0;if(!Array.isArray(e)){for(let a of t)r+=e*a;return r}for(let a=0;ae[0])):n}function t(e){return"string"===r(e)}function r(e){return(Object.prototype.toString.call(e).match(/^\[object\s+(.*?)\]$/)[1]||"").toLowerCase()}function a(e,t){e=+e,t=+t;let r=(Math.floor(e)+"").length;if(t>r)return+e.toFixed(t-r);{let a=10**(r-t);return Math.round(e/a)*a}}function o(e){if(!e)return;e=e.trim();const t=/^-?[\d.]+$/;let r=e.match(/^([a-z]+)\((.+?)\)$/i);if(r){let e=[];return r[2].replace(/\/?\s*([-\w.]+(?:%|deg)?)/g,((r,a)=>{/%$/.test(a)?(a=new Number(a.slice(0,-1)/100)).type="":/deg$/.test(a)?((a=new Number(+a.slice(0,-3))).type="",a.unit="deg"):t.test(a)&&((a=new Number(a)).type=""),r.startsWith("/")&&((a=a instanceof Number?a:new Number(a)).alpha=!0),e.push(a)})),{name:r[1].toLowerCase(),rawName:r[1],rawArgs:r[2],args:e}}}function n(e){return e[e.length-1]}function s(e,t,r){return isNaN(e)?t:isNaN(t)?e:e+(t-e)*r}function i(e,t,r){return(r-e)/(t-e)}function l(e,t,r){return s(t[0],t[1],i(e[0],e[1],r))}function c(e){return e.map((e=>e.split("|").map((e=>{let t=(e=e.trim()).match(/^(<[a-z]+>)\[(-?[.\d]+),\s*(-?[.\d]+)\]?$/);if(t){let e=new String(t[1]);return e.range=[+t[2],+t[3]],e}return e}))))}var u=Object.freeze({__proto__:null,isString:t,type:r,toPrecision:a,parseFunction:o,last:n,interpolate:s,interpolateInv:i,mapRange:l,parseCoordGrammar:c,multiplyMatrices:e});const h=new class{add(e,t,r){if("string"==typeof arguments[0])(Array.isArray(e)?e:[e]).forEach((function(e){this[e]=this[e]||[],t&&this[e][r?"unshift":"push"](t)}),this);else for(var e in arguments[0])this.add(e,arguments[0][e],arguments[1])}run(e,t){this[e]=this[e]||[],this[e].forEach((function(e){e.call(t&&t.context?t.context:t,t)}))}};var d={gamut_mapping:"lch.c",precision:5,deltaE:"76",css_space:"srgb"};const f={D50:[.3457/.3585,1,.2958/.3585],D65:[.3127/.329,1,.3583/.329]};function m(e){return Array.isArray(e)?e:f[e]}function p(t,r,a,o={}){if(t=m(t),r=m(r),!t||!r)throw new TypeError(`Missing white point to convert ${t?"":"from"}${t||r?"":"/"}${r?"":"to"}`);if(t===r)return a;let n={W1:t,W2:r,XYZ:a,options:o};if(h.run("chromatic-adaptation-start",n),n.M||(n.W1===f.D65&&n.W2===f.D50?n.M=[[1.0479298208405488,.022946793341019088,-.05019222954313557],[.029627815688159344,.990434484573249,-.01707382502938514],[-.009243058152591178,.015055144896577895,.7518742899580008]]:n.W1===f.D50&&n.W2===f.D65&&(n.M=[[.9554734527042182,-.023098536874261423,.0632593086610217],[-.028369706963208136,1.0099954580058226,.021041398966943008],[.012314001688319899,-.020507696433477912,1.3303659366080753]])),h.run("chromatic-adaptation-end",n),n.M)return e(n.M,n.XYZ);throw new TypeError("Only Bradford CAT with white points D50 and D65 supported for now.")}class g{constructor(e){this.id=e.id,this.name=e.name,this.base=e.base?g.get(e.base):null,this.base&&(this.fromBase=e.fromBase,this.toBase=e.toBase);let t=e.coords??this.base.coords;this.coords=t;let r=e.white??this.base.white??"D65";this.white=m(r),this.formats=e.formats??{};for(let e in this.formats){let t=this.formats[e];t.type||="function",t.name||=e}e.cssId&&!this.formats.functions?.color?(this.formats.color={id:e.cssId},Object.defineProperty(this,"cssId",{value:e.cssId})):this.formats?.color&&!this.formats?.color.id&&(this.formats.color.id=this.id),this.referred=e.referred,this.#e=this.#t().reverse(),h.run("colorspace-init-end",this)}inGamut(e,{epsilon:t=75e-6}={}){if(this.isPolar)return e=this.toBase(e),this.base.inGamut(e,{epsilon:t});let r=Object.values(this.coords);return e.every(((e,a)=>{let o=r[a];if("angle"!==o.type&&o.range){if(Number.isNaN(e))return!0;let[r,a]=o.range;return(void 0===r||e>=r-t)&&(void 0===a||e<=a+t)}return!0}))}get cssId(){return this.formats.functions?.color?.id||this.id}get isPolar(){for(let e in this.coords)if("angle"===this.coords[e].type)return!0;return!1}#r(e){if(e.coords&&!e.coordGrammar){e.type||="function",e.name||="color",e.coordGrammar=c(e.coords);let t=Object.entries(this.coords).map((([t,r],a)=>{let o=e.coordGrammar[a][0],n=r.range||r.refRange,s=o.range,i="";return""==o?(s=[0,100],i="%"):""==o&&(i="deg"),{fromRange:n,toRange:s,suffix:i}}));e.serializeCoords=(e,r)=>e.map(((e,o)=>{let{fromRange:n,toRange:s,suffix:i}=t[o];return n&&s&&(e=l(n,s,e)),e=a(e,r),i&&(e+=i),e}))}return e}getFormat(e){if("object"==typeof e)return e=this.#r(e);let t;return t="default"===e?Object.values(this.formats)[0]:this.formats[e],t?(t=this.#r(t),t):null}#e;#t(){let e=[this];for(let t=this;t=t.base;)e.push(t);return e}to(e,t){if(1===arguments.length&&([e,t]=[e.space,e.coords]),this===(e=g.get(e)))return t;t=t.map((e=>Number.isNaN(e)?0:e));let r,a,o=this.#e,n=e.#e;for(let e=0;ea;e--)t=o[e].toBase(t);for(let e=a+1;e=0){let e=Object.entries(a.coords)[o];if(e)return{space:a,id:e[0],index:o,...e[1]}}a=g.get(a);let s=o.toLowerCase(),i=0;for(let e in a.coords){let t=a.coords[e];if(e.toLowerCase()===s||t.name?.toLowerCase()===s)return{space:a,id:e,index:i,...t};i++}throw new TypeError(`No "${o}" coordinate found in ${a.name}. Its coordinates are: ${Object.keys(a.coords).join(", ")}`)}static DEFAULT_FORMAT={type:"functions",name:"color"}}class b extends g{constructor(t){t.coords||(t.coords={r:{range:[0,1],name:"Red"},g:{range:[0,1],name:"Green"},b:{range:[0,1],name:"Blue"}}),t.base||(t.base="xyz-d65"),t.toXYZ_M&&t.fromXYZ_M&&(t.toBase??=r=>{let a=e(t.toXYZ_M,r);return this.white!==this.base.white&&(a=p(this.white,this.base.white,a)),a},t.fromBase??=r=>(r=p(this.base.white,this.white,r),e(t.fromXYZ_M,r))),t.referred??="display",super(t)}}function M(e){let t={str:e};if(h.run("parse-start",t),t.color)return t.color;if(t.parsed=o(t.str),t.parsed){let e=t.parsed.name;if("color"===e){let e=t.parsed.args.shift(),r=t.parsed.rawArgs.indexOf("/")>0?t.parsed.args.pop():1;for(let a of g.all){let o=a.getFormat("color");if(o&&(e===o.id||o.ids?.includes(e))){let e=Object.keys(a.coords).length,o=Array(e).fill(0);return o.forEach(((e,r)=>o[r]=t.parsed.args[r]||0)),{spaceId:a.id,coords:o,alpha:r}}}let a="";if(e in g.registry){let t=g.registry[e].formats?.functions?.color?.id;a=`Did you mean color(${t})?`}throw new TypeError(`Cannot parse color(${e}). `+(a||"Missing a plugin?"))}for(let r of g.all){let a=r.getFormat(e);if(a&&"function"===a.type){let o=1;(a.lastAlpha||n(t.parsed.args).alpha)&&(o=t.parsed.args.pop());let s=t.parsed.args;return a.coordGrammar&&Object.entries(r.coords).forEach((([t,r],o)=>{let n=a.coordGrammar[o],i=s[o]?.type;if(n=n.find((e=>e==i)),!n){console.log(r);let a=r.name||t;throw new TypeError(`${i} not allowed for ${a} in ${e}()`)}let c=n.range;""===i&&(c||=[0,1]);let u=r.range||r.refRange;c&&u&&(s[o]=l(c,u,s[o]))})),{spaceId:r.id,coords:s,alpha:o}}}}else for(let e of g.all)for(let r in e.formats){let a=e.formats[r];if("custom"!==a.type)continue;if(a.test&&!a.test(t.str))continue;let o=a.parse(t.str);if(o)return o.alpha??=1,o}throw new TypeError(`Could not parse ${e} as a color. Missing a plugin?`)}function y(e){if(!e)throw new TypeError("Empty color reference");t(e)&&(e=M(e));let r=e.space||e.spaceId;return r instanceof g||(e.space=g.get(r)),void 0===e.alpha&&(e.alpha=1),e}function w(e,t){return(t=g.get(t)).from(e)}function v(e,t){let{space:r,index:a}=g.resolveCoord(t,e.space);return w(e,r)[a]}function _(e,t,r){return t=g.get(t),e.coords=t.to(e.space,r),e}function C(e,t,a){if(e=y(e),2===arguments.length&&"object"===r(arguments[1])){let t=arguments[1];for(let r in t)C(e,r,t[r])}else{"function"==typeof a&&(a=a(v(e,t)));let{space:r,index:o}=g.resolveCoord(t,e.space),n=w(e,r);n[o]=a,_(e,r,n)}return e}const B=g.create({id:"xyz-d65",name:"XYZ D65",coords:{x:{name:"X"},y:{name:"Y"},z:{name:"Z"}},white:"D65",formats:{color:{}}});g.register("xyz",B),B.formats.color.ids||=[],B.formats.color.ids.push("xyz");var k=g.create({id:"xyz-d50",name:"XYZ D50",white:"D50",base:B,fromBase:e=>p(B.white,"D50",e),toBase:e=>p("D50",B.white,e),formats:{color:{}}});const N=24/116,x=24389/27;let R=f.D50;var z=g.create({id:"lab",name:"Lab",coords:{l:{refRange:[0,100],name:"L"},a:{refRange:[-125,125]},b:{refRange:[-125,125]}},white:R,base:k,fromBase(e){let t=e.map(((e,t)=>e/R[t])).map((e=>e>.008856451679035631?Math.cbrt(e):(x*e+16)/116));return[116*t[1]-16,500*(t[0]-t[1]),200*(t[1]-t[2])]},toBase(e){let t=[];return t[1]=(e[0]+16)/116,t[0]=e[1]/500+t[1],t[2]=t[1]-e[2]/200,[t[0]>N?Math.pow(t[0],3):(116*t[0]-16)/x,e[0]>8?Math.pow((e[0]+16)/116,3):e[0]/x,t[2]>N?Math.pow(t[2],3):(116*t[2]-16)/x].map(((e,t)=>e*R[t]))},formats:{lab:{coords:[" | ","",""]}}});function A(e){return(e%360+360)%360}var E=g.create({id:"lch",name:"LCH",coords:{l:{refRange:[0,100],name:"Lightness"},c:{refRange:[0,150],name:"Chroma"},h:{refRange:[0,360],type:"angle",name:"Hue"}},base:z,fromBase(e){let t,[r,a,o]=e;return t=Math.abs(a)<.02&&Math.abs(o)<.02?NaN:180*Math.atan2(o,a)/Math.PI,[r,Math.sqrt(a**2+o**2),A(t)]},toBase(e){let[t,r,a]=e;return r<0&&(r=0),isNaN(a)&&(a=0),[t,r*Math.cos(a*Math.PI/180),r*Math.sin(a*Math.PI/180)]},formats:{lch:{coords:[" | ",""," | "]}}});const j=25**7,O=Math.PI,S=180/O,$=O/180;function P(e,t,{kL:r=1,kC:a=1,kH:o=1}={}){let[n,s,i]=z.from(e),l=E.from(z,[n,s,i])[1],[c,u,h]=z.from(t),d=E.from(z,[c,u,h])[1];l<0&&(l=0),d<0&&(d=0);let f=((l+d)/2)**7,m=.5*(1-Math.sqrt(f/(f+j))),p=(1+m)*s,g=(1+m)*u,b=Math.sqrt(p**2+i**2),M=Math.sqrt(g**2+h**2),y=0===p&&0===i?0:Math.atan2(i,p),w=0===g&&0===h?0:Math.atan2(h,g);y<0&&(y+=2*O),w<0&&(w+=2*O),y*=S,w*=S;let v,_=c-n,C=M-b,B=w-y,k=y+w,N=Math.abs(B);b*M==0?v=0:N<=180?v=B:B>180?v=B-360:B<-180?v=B+360:console.log("the unthinkable has happened");let x,R=2*Math.sqrt(M*b)*Math.sin(v*$/2),A=(n+c)/2,P=(b+M)/2,I=Math.pow(P,7);x=b*M==0?k:N<=180?k/2:k<360?(k+360)/2:(k-360)/2;let D=(A-50)**2,q=1+.015*D/Math.sqrt(20+D),L=1+.045*P,F=1;F-=.17*Math.cos((x-30)*$),F+=.24*Math.cos(2*x*$),F+=.32*Math.cos((3*x+6)*$),F-=.2*Math.cos((4*x-63)*$);let G=1+.015*P*F,T=30*Math.exp(-1*((x-275)/25)**2),X=2*Math.sqrt(I/(I+j)),Y=(_/(r*q))**2;return Y+=(C/(a*L))**2,Y+=(R/(o*G))**2,Y+=-1*Math.sin(2*T*$)*X*(C/(a*L))*(R/(o*G)),Math.sqrt(Y)}function I(e,t=e.space,{epsilon:r=75e-6}={}){e=y(e),t=g.get(t);let a=e.coords;return t!==e.space&&(a=t.from(e)),t.inGamut(a,{epsilon:r})}function D(e){return{space:e.space,coords:e.coords.slice(),alpha:e.alpha}}function q(e,{method:r=d.gamut_mapping,space:a=e.space}={}){if(t(arguments[1])&&(a=arguments[1]),I(e,a=g.get(a),{epsilon:0}))return e;let o=L(e,a);if("clip"!==r&&!I(e,a)){let t=q(D(o),{method:"clip",space:a});if(P(e,t)>2){let e=g.resolveCoord(r),t=e.space,n=e.id,s=L(o,t),i=.01,l=(e.range||e.refRange)[0],c=v(s,n);for(;c-l>i;){let e=D(s);e=q(e,{space:a,method:"clip"}),P(s,e)-2e.range||[]));o.coords=o.coords.map(((t,r)=>{let[a,o]=e[r];return void 0!==a&&(t=Math.max(a,t)),void 0!==o&&(t=Math.min(t,o)),t}))}return a!==e.space&&(o=L(o,e.space)),e.coords=o.coords,e}function L(e,t,{inGamut:r}={}){e=y(e);let a=(t=g.get(t)).from(e),o={space:t,coords:a,alpha:e.alpha};return r&&(o=q(o)),o}function F(e,{precision:t=d.precision,format:r="default",inGamut:o=!0,fallback:n,...s}={}){let i,l=r;r=(e=y(e)).space.getFormat(r)??e.space.getFormat("default")??g.DEFAULT_FORMAT,o||=r.toGamut;let c=e.coords;if(c=c.map((e=>e||0)),o&&!I(e)&&(c=q(D(e),!0===o?void 0:o).coords),"custom"===r.type){if(s.precision=t,!r.serialize)throw new TypeError(`format ${l} can only be used to parse colors, not for serialization`);i=r.serialize(c,e.alpha,s)}else{let o=r.name||"color";r.serializeCoords?c=r.serializeCoords(c,t):null!==t&&(c=c.map((e=>a(e,t))));let n=[...c];if("color"===o){let t=r.id||r.ids?.[0]||e.space.id;n.unshift(t)}let s=e.alpha;null!==t&&(s=a(s,t));let l=e.alpha<1?` ${r.commas?",":"/"} ${s}`:"";i=`${o}(${n.join(r.commas?", ":" ")}${l})`}if(n)if("undefined"==typeof CSS||CSS.supports("color",i)||!d.css_space)i=new String(i),i.color=e;else{let r=L(e,!0===n?d.css_space:n);i=new String(F(r,{precision:t,inGamut:o})),i.color=r}return i}function G(e,t,r="lab"){let a=(r=g.get(r)).from(e),o=r.from(t);return Math.sqrt(a.reduce(((e,t,r)=>{let a=o[r];return isNaN(t)||isNaN(a)?e:e+(a-t)**2}),0))}function T(e,t){e=y(e),t=y(t);let r=e.luminance,a=t.luminance;return a>r&&([r,a]=[a,r]),(r+.05)/(a+.05)}q.returns="color",L.returns="color";var X=Object.freeze({__proto__:null,default:T,register:function(e){e.defineFunction("contrast",T)}});function Y(e){return v(e,[B,"y"])}function Z(e){set(e,[B,"y"],value)}var H=Object.freeze({__proto__:null,getLuminance:Y,setLuminance:Z,register:function(e){Object.defineProperty(e.prototype,"luminance",{get(){return Y(this)},set(e){Z(this)}})}});function W(e){let[t,r,a]=e.getAll(B),o=t+15*r+3*a;return[4*t/o,9*r/o]}function J(e){let[t,r,a]=e.getAll(B),o=t+r+a;return[t/o,r/o]}var K=Object.freeze({__proto__:null,uv:W,xy:J,register:function(e){Object.defineProperty(e.prototype,"uv",{get(){return W(this)}}),Object.defineProperty(e.prototype,"xy",{get(){return J(this)}})}});const U={};function V(e,r,a={}){t(a)&&(a={method:a});let{method:o=d.deltaE,...n}=a;if(e=y(e),r=y(r),o in U)return U[o](e,r,n);throw new TypeError(`Unknown deltaE method: ${o}`)}function Q(e,t){let r=e.replace(/^deltaE/,"");U[r]=t}var ee=Object.freeze({__proto__:null,DELTAE_METHODS:U,default:V,registerMethod:Q,register:function(e){e.defineFunction("deltaE",V);for(let t in U){let r="deltaE"+t;e.defineFunction(r,(function(e,r,a){return e=y(e),U[t](e,r,a)}))}}});const te=Math.PI/180;var re=g.create({id:"xyz-abs-d65",name:"Absolute XYZ D65",coords:{x:{refRange:[0,9504.7],name:"Xa"},y:{refRange:[0,1e4],name:"Ya"},z:{refRange:[0,10888.3],name:"Za"}},base:"xyz-d65",fromBase:e=>e.map((e=>Math.max(203*e,0))),toBase:e=>e.map((e=>Math.max(e/203,0)))});const ae=1.15,oe=.66,ne=2610/16384,se=.8359375,ie=2413/128,le=18.6875,ce=32/(1.7*2523),ue=-.56,he=16295499532821565e-27,de=[[.41478972,.579999,.014648],[-.20151,1.120649,.0531008],[-.0166008,.2648,.6684799]],fe=[[1.9242264357876067,-1.0047923125953657,.037651404030618],[.35031676209499907,.7264811939316552,-.06538442294808501],[-.09098281098284752,-.3127282905230739,1.5227665613052603]],me=[[.5,.5,0],[3.524,-4.066708,.542708],[.199076,1.096799,-1.295875]],pe=[[1,.1386050432715393,.05804731615611886],[.9999999999999999,-.1386050432715393,-.05804731615611886],[.9999999999999998,-.09601924202631895,-.8118918960560388]];var ge=g.create({id:"jzazbz",name:"Jzazbz",coords:{jz:{refRange:[0,1],name:"Jz"},az:{refRange:[-.5,.5]},bz:{refRange:[-.5,.5]}},base:re,fromBase(t){let[r,a,o]=t,n=e(de,[ae*r-(ae-1)*o,oe*a-(oe-1)*r,o]).map((function(e){return((se+ie*(e/1e4)**ne)/(1+le*(e/1e4)**ne))**134.03437499999998})),[s,i,l]=e(me,n);return[(1+ue)*s/(1+ue*s)-he,i,l]},toBase(t){let[r,a,o]=t,n=e(pe,[(r+he)/(1+ue-ue*(r+he)),a,o]).map((function(e){return 1e4*((se-e**ce)/(le*e**ce-ie))**6.277394636015326})),[s,i,l]=e(fe,n),c=(s+(ae-1)*l)/ae;return[c,(i+(oe-1)*c)/oe,l]},formats:{color:{}}}),be=g.create({id:"jzczhz",name:"JzCzHz",coords:{jz:{refRange:[0,1],name:"Jz"},cz:{refRange:[0,1],name:"Chroma"},hz:{refRange:[0,360],type:"angle",name:"Hue"}},base:ge,fromBase(e){let t,[r,a,o]=e;const n=2e-4;return t=Math.abs(a)[e[0],e[1]*Math.cos(e[2]*Math.PI/180),e[1]*Math.sin(e[2]*Math.PI/180)],formats:{color:{}}});const Me=.8359375,ye=2413/128,we=18.6875,ve=2610/16384,_e=2523/32,Ce=16384/2610,Be=32/2523,ke=[[.3592,.6976,-.0358],[-.1922,1.1004,.0755],[.007,.0749,.8434]],Ne=[[.5,.5,0],[6610/4096,-13613/4096,7003/4096],[17933/4096,-17390/4096,-543/4096]],xe=[[.9999888965628402,.008605050147287059,.11103437159861648],[1.00001110343716,-.008605050147287059,-.11103437159861648],[1.0000320633910054,.56004913547279,-.3206339100541203]],Re=[[2.0701800566956137,-1.326456876103021,.20661600684785517],[.3649882500326575,.6804673628522352,-.04542175307585323],[-.04959554223893211,-.04942116118675749,1.1879959417328034]];var ze=g.create({id:"ictcp",name:"ICTCP",coords:{i:{refRange:[0,1],name:"I"},ct:{refRange:[-.5,.5],name:"CT"},cp:{refRange:[-.5,.5],name:"CP"}},base:re,fromBase:t=>function(t){let r=t.map((function(e){return((Me+ye*(e/1e4)**ve)/(1+we*(e/1e4)**ve))**_e}));return e(Ne,r)}(e(ke,t)),toBase(t){let r=function(t){return e(xe,t).map((function(e){return 1e4*(Math.max(e**Be-Me,0)/(ye-we*e**Be))**Ce}))}(t);return e(Re,r)},formats:{color:{}}});const Ae=[[.8190224432164319,.3619062562801221,-.12887378261216414],[.0329836671980271,.9292868468965546,.03614466816999844],[.048177199566046255,.26423952494422764,.6335478258136937]],Ee=[[1.2268798733741557,-.5578149965554813,.28139105017721583],[-.04057576262431372,1.1122868293970594,-.07171106666151701],[-.07637294974672142,-.4214933239627914,1.5869240244272418]],je=[[.2104542553,.793617785,-.0040720468],[1.9779984951,-2.428592205,.4505937099],[.0259040371,.7827717662,-.808675766]],Oe=[[.9999999984505198,.39633779217376786,.2158037580607588],[1.0000000088817609,-.10556134232365635,-.06385417477170591],[1.0000000546724108,-.08948418209496575,-1.2914855378640917]];var Se=g.create({id:"oklab",name:"OKLab",coords:{l:{refRange:[0,1],name:"L"},a:{refRange:[-.4,.4]},b:{refRange:[-.4,.4]}},white:"D65",base:"xyz-d65",fromBase(t){let r=e(Ae,t).map((e=>Math.cbrt(e)));return e(je,r)},toBase(t){let r=e(Oe,t).map((e=>e**3));return e(Ee,r)},formats:{oklab:{coords:["","",""]}}});var $e=Object.freeze({__proto__:null,deltaE76:function(e,t){return G(e,t,"lab")},deltaECMC:function(e,t,{l:r=2,c:a=1}={}){let[o,n,s]=z.from(e),[,i,l]=E.from(z,[o,n,s]),[c,u,h]=z.from(t),d=E.from(z,[c,u,h])[1];i<0&&(i=0),d<0&&(d=0);let f=o-c,m=i-d,p=(n-u)**2+(s-h)**2-m**2,g=.511;o>=16&&(g=.040975*o/(1+.01765*o));let b,M=.0638*i/(1+.0131*i)+.638;Number.isNaN(l)&&(l=0),b=l>=164&&l<=345?.56+Math.abs(.2*Math.cos((l+168)*te)):.36+Math.abs(.4*Math.cos((l+35)*te));let y=Math.pow(i,4),w=Math.sqrt(y/(y+1900)),v=(f/(r*g))**2;return v+=(m/(a*M))**2,v+=p/(M*(w*b+1-w))**2,Math.sqrt(v)},deltaE2000:P,deltaEJz:function(e,t){let[r,a,o]=be.from(e),[n,s,i]=be.from(t),l=r-n,c=a-s;Number.isNaN(o)&&Number.isNaN(i)?(o=0,i=0):Number.isNaN(o)?o=i:Number.isNaN(i)&&(i=o);let u=o-i,h=2*Math.sqrt(a*s)*Math.sin(u/2*(Math.PI/180));return Math.sqrt(l**2+c**2+h**2)},deltaEITP:function(e,t){let[r,a,o]=ze.from(e),[n,s,i]=ze.from(t);return 720*Math.sqrt((r-n)**2+.25*(a-s)**2+(o-i)**2)},deltaEOK:function(e,t){let[r,a,o]=Se.from(e),[n,s,i]=Se.from(t),l=r-n,c=a-s,u=o-i;return Math.sqrt(l**2+c**2+u**2)}});var Pe=Object.freeze({__proto__:null,lighten:function(e,t=.25){return C(e,[g.get("oklch","lch"),"l"],(e=>e*(1+t)))},darken:function(e,t=.25){return C(e,[g.get("oklch","lch"),"l"],(e=>e*(1-t)))}});function Ie(e,t,a=.5,o={}){[e,t]=[y(e),y(t)],"object"===r(a)&&([a,o]=[.5,a]);let{space:n,outputSpace:s}=o;return qe(e,t,{space:n,outputSpace:s})(a)}function De(e,t,r={}){let a;Le(e)&&([a,r]=[e,t],[e,t]=a.rangeArgs.colors);let{maxDeltaE:o,deltaEMethod:n,steps:s=2,maxSteps:i=1e3,...l}=r;a||([e,t]=[y(e),y(t)],a=qe(e,t,l));let c=V(e,t),u=o>0?Math.max(s,Math.ceil(c/o)+1):s,h=[];if(void 0!==i&&(u=Math.min(u,i)),1===u)h=[{p:.5,color:a(.5)}];else{let e=1/(u-1);h=Array.from({length:u},((t,r)=>{let o=r*e;return{p:o,color:a(o)}}))}if(o>0){let e=h.reduce(((e,t,r)=>{if(0===r)return 0;let a=V(t.color,h[r-1].color,n);return Math.max(e,a)}),0);for(;e>o;){e=0;for(let t=1;te.color)),h}function qe(e,t,r={}){if(Le(e)){let[r,a]=[e,t];return qe(...r.rangeArgs.colors,{...r.rangeArgs.options,...a})}let{space:a,outputSpace:o,progression:n,premultiplied:i}=r;e=y(e),t=y(t),e=D(e),t=D(t);let l={colors:[e,t],options:r};if(a=a?g.get(a):g.registry[d.interpolationSpace]||e.space,o=o?g.get(o):a,e=L(e,a),t=L(t,a),e=q(e),t=q(t),a.coords.h&&"angle"===a.coords.h.type){let o=r.hue=r.hue||"shorter",n=[a,"h"],[s,i]=[v(e,n),v(t,n)];[s,i]=function(e,t){if("raw"===e)return t;let[r,a]=t.map(A),o=a-r;return"increasing"===e?o<0&&(a+=360):"decreasing"===e?o>0&&(r+=360):"longer"===e?-1800?a+=360:r+=360):"shorter"===e&&(o>180?r+=360:o<-180&&(a+=360)),[r,a]}(o,[s,i]),C(e,n,s),C(t,n,i)}return i&&(e.coords=e.coords.map((t=>t*e.alpha)),t.coords=t.coords.map((e=>e*t.alpha))),Object.assign((r=>{r=n?n(r):r;let l=e.coords.map(((e,a)=>s(e,t.coords[a],r))),c=s(e.alpha,t.alpha,r),u={space:a,coords:l,alpha:c};return i&&(u.coords=u.coords.map((e=>e/c))),o!==a&&(u=L(u,o)),u}),{rangeArgs:l})}function Le(e){return"function"===r(e)&&!!e.rangeArgs}d.interpolationSpace="lab";var Fe=Object.freeze({__proto__:null,mix:Ie,steps:De,range:qe,isRange:Le,register:function(e){e.defineFunction("mix",Ie,{returns:"color"}),e.defineFunction("range",qe,{returns:"function"}),e.defineFunction("steps",De,{returns:"array"})}});var Ge=b.create({id:"srgb-linear",name:"Linear sRGB",white:"D65",toXYZ_M:[[.41239079926595934,.357584339383878,.1804807884018343],[.21263900587151027,.715168678767756,.07219231536073371],[.01933081871559182,.11919477979462598,.9505321522496607]],fromXYZ_M:[[3.2409699419045226,-1.537383177570094,-.4986107602930034],[-.9692436362808796,1.8759675015077202,.04155505740717559],[.05563007969699366,-.20397695888897652,1.0569715142428786]],formats:{color:{}}}),Te={aliceblue:[240/255,248/255,1],antiquewhite:[250/255,235/255,215/255],aqua:[0,1,1],aquamarine:[127/255,1,212/255],azure:[240/255,1,1],beige:[245/255,245/255,220/255],bisque:[1,228/255,196/255],black:[0,0,0],blanchedalmond:[1,235/255,205/255],blue:[0,0,1],blueviolet:[138/255,43/255,226/255],brown:[165/255,42/255,42/255],burlywood:[222/255,184/255,135/255],cadetblue:[95/255,158/255,160/255],chartreuse:[127/255,1,0],chocolate:[210/255,105/255,30/255],coral:[1,127/255,80/255],cornflowerblue:[100/255,149/255,237/255],cornsilk:[1,248/255,220/255],crimson:[220/255,20/255,60/255],cyan:[0,1,1],darkblue:[0,0,139/255],darkcyan:[0,139/255,139/255],darkgoldenrod:[184/255,134/255,11/255],darkgray:[169/255,169/255,169/255],darkgreen:[0,100/255,0],darkgrey:[169/255,169/255,169/255],darkkhaki:[189/255,183/255,107/255],darkmagenta:[139/255,0,139/255],darkolivegreen:[85/255,107/255,47/255],darkorange:[1,140/255,0],darkorchid:[.6,50/255,.8],darkred:[139/255,0,0],darksalmon:[233/255,150/255,122/255],darkseagreen:[143/255,188/255,143/255],darkslateblue:[72/255,61/255,139/255],darkslategray:[47/255,79/255,79/255],darkslategrey:[47/255,79/255,79/255],darkturquoise:[0,206/255,209/255],darkviolet:[148/255,0,211/255],deeppink:[1,20/255,147/255],deepskyblue:[0,191/255,1],dimgray:[105/255,105/255,105/255],dimgrey:[105/255,105/255,105/255],dodgerblue:[30/255,144/255,1],firebrick:[178/255,34/255,34/255],floralwhite:[1,250/255,240/255],forestgreen:[34/255,139/255,34/255],fuchsia:[1,0,1],gainsboro:[220/255,220/255,220/255],ghostwhite:[248/255,248/255,1],gold:[1,215/255,0],goldenrod:[218/255,165/255,32/255],gray:[128/255,128/255,128/255],green:[0,128/255,0],greenyellow:[173/255,1,47/255],grey:[128/255,128/255,128/255],honeydew:[240/255,1,240/255],hotpink:[1,105/255,180/255],indianred:[205/255,92/255,92/255],indigo:[75/255,0,130/255],ivory:[1,1,240/255],khaki:[240/255,230/255,140/255],lavender:[230/255,230/255,250/255],lavenderblush:[1,240/255,245/255],lawngreen:[124/255,252/255,0],lemonchiffon:[1,250/255,205/255],lightblue:[173/255,216/255,230/255],lightcoral:[240/255,128/255,128/255],lightcyan:[224/255,1,1],lightgoldenrodyellow:[250/255,250/255,210/255],lightgray:[211/255,211/255,211/255],lightgreen:[144/255,238/255,144/255],lightgrey:[211/255,211/255,211/255],lightpink:[1,182/255,193/255],lightsalmon:[1,160/255,122/255],lightseagreen:[32/255,178/255,170/255],lightskyblue:[135/255,206/255,250/255],lightslategray:[119/255,136/255,.6],lightslategrey:[119/255,136/255,.6],lightsteelblue:[176/255,196/255,222/255],lightyellow:[1,1,224/255],lime:[0,1,0],limegreen:[50/255,205/255,50/255],linen:[250/255,240/255,230/255],magenta:[1,0,1],maroon:[128/255,0,0],mediumaquamarine:[.4,205/255,170/255],mediumblue:[0,0,205/255],mediumorchid:[186/255,85/255,211/255],mediumpurple:[147/255,112/255,219/255],mediumseagreen:[60/255,179/255,113/255],mediumslateblue:[123/255,104/255,238/255],mediumspringgreen:[0,250/255,154/255],mediumturquoise:[72/255,209/255,.8],mediumvioletred:[199/255,21/255,133/255],midnightblue:[25/255,25/255,112/255],mintcream:[245/255,1,250/255],mistyrose:[1,228/255,225/255],moccasin:[1,228/255,181/255],navajowhite:[1,222/255,173/255],navy:[0,0,128/255],oldlace:[253/255,245/255,230/255],olive:[128/255,128/255,0],olivedrab:[107/255,142/255,35/255],orange:[1,165/255,0],orangered:[1,69/255,0],orchid:[218/255,112/255,214/255],palegoldenrod:[238/255,232/255,170/255],palegreen:[152/255,251/255,152/255],paleturquoise:[175/255,238/255,238/255],palevioletred:[219/255,112/255,147/255],papayawhip:[1,239/255,213/255],peachpuff:[1,218/255,185/255],peru:[205/255,133/255,63/255],pink:[1,192/255,203/255],plum:[221/255,160/255,221/255],powderblue:[176/255,224/255,230/255],purple:[128/255,0,128/255],rebeccapurple:[.4,.2,.6],red:[1,0,0],rosybrown:[188/255,143/255,143/255],royalblue:[65/255,105/255,225/255],saddlebrown:[139/255,69/255,19/255],salmon:[250/255,128/255,114/255],sandybrown:[244/255,164/255,96/255],seagreen:[46/255,139/255,87/255],seashell:[1,245/255,238/255],sienna:[160/255,82/255,45/255],silver:[192/255,192/255,192/255],skyblue:[135/255,206/255,235/255],slateblue:[106/255,90/255,205/255],slategray:[112/255,128/255,144/255],slategrey:[112/255,128/255,144/255],snow:[1,250/255,250/255],springgreen:[0,1,127/255],steelblue:[70/255,130/255,180/255],tan:[210/255,180/255,140/255],teal:[0,128/255,128/255],thistle:[216/255,191/255,216/255],tomato:[1,99/255,71/255],turquoise:[64/255,224/255,208/255],violet:[238/255,130/255,238/255],wheat:[245/255,222/255,179/255],white:[1,1,1],whitesmoke:[245/255,245/255,245/255],yellow:[1,1,0],yellowgreen:[154/255,205/255,50/255]};let Xe=Array(3).fill(" | [0, 255]");var Ye=b.create({id:"srgb",name:"sRGB",base:Ge,fromBase:e=>e.map((e=>{let t=e<0?-1:1,r=e*t;return r>.0031308?t*(1.055*r**(1/2.4)-.055):12.92*e})),toBase:e=>e.map((e=>{let t=e<0?-1:1,r=e*t;return r<.04045?e/12.92:t*((r+.055)/1.055)**2.4})),formats:{rgb:{coords:Xe},color:{},rgba:{coords:Xe,commas:!0,lastAlpha:!0},hex:{type:"custom",toGamut:!0,test:e=>/^#([a-f0-9]{3,4}){1,2}$/i.test(e),parse(e){e.length<=5&&(e=e.replace(/[a-f0-9]/gi,"$&$&"));let t=[];return e.replace(/[a-f0-9]{2}/gi,(e=>{t.push(parseInt(e,16)/255)})),{spaceId:"srgb",coords:t.slice(0,3),alpha:t.slice(3)[0]}},serialize:(e,t,{collapse:r=!0}={})=>{t<1&&e.push(t),e=e.map((e=>Math.round(255*e)));let a=r&&e.every((e=>e%17==0)),o=e.map((e=>a?(e/17).toString(16):e.toString(16).padStart(2,"0"))).join("");return"#"+o}},keyword:{type:"custom",test:e=>/^[a-z]+$/i.test(e),parse(e){let t={spaceId:"srgb",coords:null,alpha:1};if("transparent"===(e=e.toLowerCase())?(t.coords=Te.black,t.alpha=0):t.coords=Te[e],t.coords)return t}}}});class Ze{constructor(...e){let t,r,a,o;1===e.length&&(t=y(e[0])),t?(r=t.space||t.spaceId,a=t.coords,o=t.alpha):[r,a,o]=e,this.#a=g.get(r),this.coords=a?a.slice():[0,0,0],this.alpha=o<1?o:1;for(let e=0;ethis.get(e),set:t=>this.set(e,t)})}#a;get space(){return this.#a}get spaceId(){return this.#a.id}clone(){return new Ze(this.space,this.coords,this.alpha)}toJSON(){return{spaceId:this.spaceId,coords:this.coords,alpha:this.alpha}}toString(...e){let t=F(this,...e);return t.color&&(t.color=new Ze(t.color)),t}static get(e,...t){return e instanceof Ze?e:new Ze(e,...t)}static defineFunction(e,t,{instance:r=!0,returns:a}={}){let o=function(...e){let r=t(...e);if("color"===a)r=Ze.get(r);else if("function"===a){let e=r;r=function(...t){let r=e(...t);return Ze.get(r)},Object.assign(r,e)}else"array"===a&&(r=r.map((e=>Ze.get(e))));return r};e in Ze||(Ze[e]=o),r&&(Ze.prototype[e]=function(...e){return o(this,...e)})}static defineFunctions(e){for(let t in e)Ze.defineFunction(t,e[t],e[t])}static extend(e){if(e.register)e.register(Ze);else for(let t in e)Ze.defineFunction(t,e[t],e[t])}}if(Ze.defineFunctions({get:v,getAll:w,set:C,setAll:_,to:L,equals:function(e,t){return e=y(e),t=y(t),e.space===t.space&&e.alpha===t.alpha&&e.coords.every(((e,r)=>e===t.coords[r]))},inGamut:I,toGamut:q,distance:G}),Object.assign(Ze,{util:u,hooks:h,WHITES:f,Space:g,spaces:g.registry,parse:M,defaults:d}),"undefined"!=typeof CSS&&CSS.supports)for(let e of["lab","rec2020","p3","srgb"])if(e in g.registry){let t=g.registry[e].getMinCoords(),r=new Ze(e,t);if(CSS.supports("color",r)){d.css_space=e;break}}var He=g.create({id:"hsl",name:"HSL",coords:{h:{refRange:[0,360],type:"angle",name:"Hue"},s:{range:[0,100],name:"Saturation"},l:{range:[0,100],name:"Lightness"}},base:Ye,fromBase:e=>{let t=Math.max(...e),r=Math.min(...e),[a,o,n]=e,[s,i,l]=[NaN,0,(r+t)/2],c=t-r;if(0!==c){switch(i=0===l||1===l?0:(t-l)/Math.min(l,1-l),t){case a:s=(o-n)/c+(o{let[t,r,a]=e;function o(e){let o=(e+t/30)%12,n=r*Math.min(a,1-a);return a-n*Math.max(-1,Math.min(o-3,9-o,1))}return t%=360,t<0&&(t+=360),r/=100,a/=100,[o(0),o(8),o(4)]},formats:{hsl:{toGamut:!0,coords:[" | ","",""]},hsla:{coords:[" | ","",""],commas:!0,lastAlpha:!0}}}),We=g.create({id:"hsv",name:"HSV",coords:{h:{refRange:[0,360],type:"angle",name:"Hue"},s:{range:[0,100],name:"Saturation"},v:{range:[0,100],name:"Value"}},base:He,fromBase(e){let[t,r,a]=e;r/=100,a/=100;let o=a+r*Math.min(a,1-a);return[t,0===o?0:200*(1-a/o),100*o]},toBase(e){let[t,r,a]=e;r/=100,a/=100;let o=a*(1-r/2);return[t,0===o||1===o?0:(a-o)/Math.min(o,1-o)*100,100*o]},formats:{color:{toGamut:!0}}});g.create({id:"hwb",name:"HWB",coords:{h:{refRange:[0,360],type:"angle",name:"Hue"},w:{range:[0,100],name:"Whiteness"},b:{range:[0,100],name:"Blackness"}},base:We,fromBase(e){let[t,r,a]=e;return[t,a*(100-r)/100,100-a]},toBase(e){let[t,r,a]=e;r/=100,a/=100;let o=r+a;if(o>=1){return[t,0,100*(r/o)]}let n=1-a;return[t,100*(0===n?0:1-r/n),100*n]},formats:{hwb:{toGamut:!0,coords:[" | ","",""]}}});var Je=b.create({id:"p3-linear",name:"Linear P3",white:"D65",toXYZ_M:[[.4865709486482162,.26566769316909306,.1982172852343625],[.2289745640697488,.6917385218365064,.079286914093745],[0,.04511338185890264,1.043944368900976]],fromXYZ_M:[[2.493496911941425,-.9313836179191239,-.40271078445071684],[-.8294889695615747,1.7626640603183463,.023624685841943577],[.03584583024378447,-.07617238926804182,.9568845240076872]]});b.create({id:"p3",name:"P3",base:Je,fromBase:Ye.fromBase,toBase:Ye.toBase,formats:{color:{id:"display-p3"}}});var Ke=b.create({id:"a98rgb-linear",name:"Linear Adobe® 98 RGB compatible",white:"D65",toXYZ_M:[[.5766690429101305,.1855582379065463,.1882286462349947],[.29734497525053605,.6273635662554661,.07529145849399788],[.02703136138641234,.07068885253582723,.9913375368376388]],fromXYZ_M:[[2.0415879038107465,-.5650069742788596,-.34473135077832956],[-.9692436362808795,1.8759675015077202,.04155505740717557],[.013444280632031142,-.11836239223101838,1.0151749943912054]]});b.create({id:"a98rgb",name:"Adobe® 98 RGB compatible",base:Ke,toBase:e=>e.map((e=>Math.pow(Math.abs(e),563/256)*Math.sign(e))),fromBase:e=>e.map((e=>Math.pow(Math.abs(e),256/563)*Math.sign(e))),formats:{color:{id:"a98-rgb"}}});var Ue=b.create({id:"prophoto-linear",name:"Linear ProPhoto",white:"D50",base:"xyz-d50",toXYZ_M:[[.7977604896723027,.13518583717574031,.0313493495815248],[.2880711282292934,.7118432178101014,8565396060525902e-20],[0,0,.8251046025104601]],fromXYZ_M:[[1.3457989731028281,-.25558010007997534,-.05110628506753401],[-.5446224939028347,1.5082327413132781,.02053603239147973],[0,0,1.2119675456389454]]});b.create({id:"prophoto",name:"ProPhoto",base:Ue,toBase:e=>e.map((e=>e<.03125?e/16:e**1.8)),fromBase:e=>e.map((e=>e>=.001953125?e**(1/1.8):16*e)),formats:{color:{id:"prophoto-rgb"}}});var Ve=b.create({id:"rec2020-linear",name:"Linear REC.2020",white:"D65",toXYZ_M:[[.6369580483012914,.14461690358620832,.1688809751641721],[.2627002120112671,.6779980715188708,.05930171646986196],[0,.028072693049087428,1.060985057710791]],fromXYZ_M:[[1.716651187971268,-.355670783776392,-.25336628137366],[-.666684351832489,1.616481236634939,.0157685458139111],[.017639857445311,-.042770613257809,.942103121235474]]});const Qe=1.09929682680944,et=.018053968510807;b.create({id:"rec2020",name:"REC.2020",base:Ve,toBase:e=>e.map((function(e){return e<4.5*et?e/4.5:Math.pow((e+Qe-1)/Qe,1/.45)})),fromBase:e=>e.map((function(e){return e>=et?Qe*Math.pow(e,.45)-(Qe-1):4.5*e})),formats:{color:{}}}),g.create({id:"oklch",name:"OKLCh",coords:{l:{refRange:[0,1],name:"Lightness"},c:{refRange:[0,.4],name:"Chroma"},h:{refRange:[0,360],type:"angle",name:"Hue"}},white:"D65",base:Se,fromBase(e){let t,[r,a,o]=e;const n=2e-4;return t=Math.abs(a)",""," | "]}}});const tt=2610/16384,rt=32/2523,at=.8359375,ot=2413/128,nt=18.6875;b.create({id:"rec2100pq",name:"REC.2100-PQ",base:Ve,toBase:e=>e.map((function(e){return 1e4*(Math.max(e**rt-at,0)/(ot-nt*e**rt))**6.277394636015326/203})),fromBase:e=>e.map((function(e){let t=Math.max(203*e/1e4,0);return((at+ot*t**tt)/(1+nt*t**tt))**78.84375})),formats:{color:{id:"rec2100-pq"}}});const st=.17883277,it=.28466892,lt=.55991073;b.create({id:"rec2100hlg",cssid:"rec2100-hlg",name:"REC.2100-HLG",referred:"scene",base:Ve,toBase:e=>e.map((function(e){return e<=1/12?Math.sqrt(3*e):st*Math.log(12*e-it)+lt})),fromBase:e=>e.map((function(e){return e<=.5?e**2/3:Math.exp((e-lt)/st+it)/12})),formats:{color:{id:"rec2100-hlg"}}});const ct={};function ut({id:e,toCone_M:t,fromCone_M:r}){ct[e]=arguments[0]}function ht(t,r,a="Bradford"){let o=ct[a],[n,s,i]=e(o.toCone_M,t),[l,c,u]=e(o.toCone_M,r),h=e([[l/n,0,0],[0,c/s,0],[0,0,u/i]],o.toCone_M);return e(o.fromCone_M,h)}h.add("chromatic-adaptation-start",(e=>{e.options.method&&(e.M=ht(e.W1,e.W2,e.options.method))})),h.add("chromatic-adaptation-end",(e=>{e.M||(e.M=ht(e.W1,e.W2,e.options.method))})),ut({id:"von Kries",toCone_M:[[.40024,.7076,-.08081],[-.2263,1.16532,.0457],[0,0,.91822]],fromCone_M:[[1.8599364,-1.1293816,.2198974],[.3611914,.6388125,-64e-7],[0,0,1.0890636]]}),ut({id:"Bradford",toCone_M:[[.8951,.2664,-.1614],[-.7502,1.7135,.0367],[.0389,-.0685,1.0296]],fromCone_M:[[.9869929,-.1470543,.1599627],[.4323053,.5183603,.0492912],[-.0085287,.0400428,.9684867]]}),ut({id:"CAT02",toCone_M:[[.7328,.4296,-.1624],[-.7036,1.6975,.0061],[.003,.0136,.9834]],fromCone_M:[[1.0961238,-.278869,.1827452],[.454369,.4735332,.0720978],[-.0096276,-.005698,1.0153256]]}),ut({id:"CAT16",toCone_M:[[.401288,.650173,-.051461],[-.250268,1.204414,.045854],[-.002079,.048952,.953127]],fromCone_M:[[1.862067855087233,-1.011254630531685,.1491867754444518],[.3875265432361372,.6214474419314753,-.008973985167612518],[-.01584149884933386,-.03412293802851557,1.04996443687785]]}),Object.assign(f,{A:[1.0985,1,.35585],C:[.98074,1,1.18232],D55:[.95682,1,.92149],D75:[.94972,1,1.22638],E:[1,1,1],F2:[.99186,1,.67393],F7:[.95041,1,1.08747],F11:[1.00962,1,.6435]}),f.ACES=[.32168/.33767,1,.34065/.33767];var dt=b.create({id:"acescg",name:"ACEScg",coords:{r:{range:[0,65504],name:"Red"},g:{range:[0,65504],name:"Green"},b:{range:[0,65504],name:"Blue"}},referred:"scene",white:f.ACES,toXYZ_M:[[.6624541811085053,.13400420645643313,.1561876870049078],[.27222871678091454,.6740817658111484,.05368951740793705],[-.005574649490394108,.004060733528982826,1.0103391003129971]],fromXYZ_M:[[1.6410233796943257,-.32480329418479,-.23642469523761225],[-.6636628587229829,1.6153315916573379,.016756347685530137],[.011721894328375376,-.008284441996237409,.9883948585390215]]});const ft=2**-16,mt=-.35828683,pt=(Math.log2(65504)+9.72)/17.52;b.create({id:"acescc",name:"ACEScc",coords:{r:{range:[mt,pt],name:"Red"},g:{range:[mt,pt],name:"Green"},b:{range:[mt,pt],name:"Blue"}},referred:"scene",base:dt,toBase:e=>e.map((function(e){return e<=-.3013698630136986?2*(2**(17.52*e-9.72)-ft):ee.map((function(e){return e<=0?(Math.log2(ft)+9.72)/17.52:ee.name));let r=e.replace(/-/g,"_");Object.defineProperty(Ze.prototype,r,{get(){let r=this.getAll(e);return"undefined"==typeof Proxy?r:new Proxy(r,{has:(e,r)=>{try{return g.resolveCoord([t,r]),!0}catch(e){}return Reflect.has(e,r)},get:(e,r,a)=>{if(r&&"symbol"!=typeof r&&!(r in e)){let{index:a}=g.resolveCoord([t,r]);if(a>=0)return e[a]}return Reflect.get(e,r,a)},set:(r,a,o,n)=>{if(a&&"symbol"!=typeof a&&!(a in r)||a>=0){let{index:n}=g.resolveCoord([t,a]);if(n>=0)return r[n]=o,this.setAll(e,r),!0}return Reflect.set(r,a,o,n)}})},set(t){this.setAll(e,t)},configurable:!0,enumerable:!0})}h.add("colorspace-init-end",gt);for(let e in $e){Q(e.replace(/^deltaE/,""),$e[e])}return Ze.extend(ee),Ze.extend(Pe),Ze.extend(X),Ze.extend(K),Ze.extend(H),Ze.extend(Fe),Ze}(); +//# sourceMappingURL=color.global.min.js.map diff --git a/docs/render/color.css b/docs/render/color.css new file mode 100644 index 0000000..2624872 --- /dev/null +++ b/docs/render/color.css @@ -0,0 +1,18 @@ +* { + font-family: -apple-system, BlinkMacSystemFont, sans-serif; +} + +body { + display:flex; + min-height:100vh; + justify-content: center; + align-items: center; + font-size:10vmin; + margin:0 +} + +canvas { + border:2px solid black; + box-shadow: 2px 2px 0 black; + border-radius:4px +} diff --git a/docs/render/color.js b/docs/render/color.js new file mode 100644 index 0000000..d91c64b --- /dev/null +++ b/docs/render/color.js @@ -0,0 +1,131 @@ +let script = document.currentScript?.src || import.meta?.url; + + import Color from "https://colorjs.io/dist/color.js"; +// import Color from (new URL("/js/color.global.min.js", script.src)).href; +console.log("script",script) + +function share() { + parent.postMessage({share:{}}, "*"); +} + +let currentColor; + +/** + * Return the location of the element (x,y) being relative to the document. + * + * @param {Element} obj Element to be located + */ + function getElementPosition(obj) { + var curleft = 0, curtop = 0; + if (obj.offsetParent) { + do { + curleft += obj.offsetLeft; + curtop += obj.offsetTop; + } while (obj = obj.offsetParent); + return { x: curleft, y: curtop }; + } + return undefined; +} + +/** + * return the location of the click (or another mouse event) relative to the given element (to increase accuracy). + * @param {DOM Object} element A dom element (button,canvas,input etc) + * @param {DOM Event} event An event generate by an event listener. + */ + function getEventLocation(element,event){ + // Relies on the getElementPosition function. + var pos = getElementPosition(element); + + return { + x: (event.pageX - pos.x), + y: (event.pageY - pos.y) + }; +} + +function update (e){ + if (!e.buttons) return; + console.log(e) + // Get the coordinates of the click + var eventLocation = getEventLocation(this,event); + // Get the data of the pixel according to the location generate by the getEventLocation function + var context = this.getContext('2d'); + var pixelData = context.getImageData(eventLocation.x, eventLocation.y, 1, 1).data; + + // If transparency on the pixel , array = [0,0,0,0] + if((pixelData[0] == 0) && (pixelData[1] == 0) && (pixelData[2] == 0) && (pixelData[3] == 0)){ + // Do something if the pixel is transparent + } + currentColor = `rgba(${pixelData[0]},${pixelData[1]},${pixelData[2]},${pixelData[3]})`; + renderCanvas() + + console.log(pixelData[0], pixelData[1], pixelData[2]); + // Convert it to HEX if you want using the rgbToHex method. + // var hex = "#" + ("000000" + rgbToHex(pixelData[0], pixelData[1], pixelData[2])).slice(-6); +} +function render() { + let colors = params.body.substring(2).split(";"); + console.log("params", params, colors) + // parent.postMessage({title:title, favicon:"🍴", image:image, description:description, wakeLock:true, updateURL:true}, "*"); + document.body.style.backgroundColor = colors[0]; + document.body.style.color = colors[1]; + currentColor = colors[0]; + window.canvas = el("canvas", {width:320, height:320}); + document.body.appendChild( + el("div", {}, [ + // el("div", {innerHTML: colors.join("
")}), + window.canvas + ] + ) + ) + window.canvas.addEventListener("pointerdown",update); + window.canvas.addEventListener("pointermove",update); + renderCanvas() +} + +function renderCanvas() { + let ctx = canvas.getContext("2d"); + let w = canvas.width, h = canvas.height; + + var luminance = ctx.createLinearGradient(0, 0, w, 0); + luminance.addColorStop(0, "white"); + luminance.addColorStop(1, "black"); + ctx.fillStyle = luminance; + ctx.fillRect(0, h/4, canvas.width, h * 3/4); + + + var hue = ctx.createLinearGradient(0, 0, w, 0); + hue.addColorStop(0.0, "#FAC22B"); + hue.addColorStop(0.1448, "#0E8E51"); + hue.addColorStop(0.349, "#0E638E"); + hue.addColorStop(0.503, "#67378D"); + hue.addColorStop(0.7423, "#D42A20"); + hue.addColorStop(0.8907, "#E77625"); + hue.addColorStop(1.0, "#FAC22B"); + ctx.fillStyle = hue; + ctx.fillRect(0, 0, w, h/4); + + let color = new Color(currentColor); + document.body.style.backgroundColor = currentColor; + + + color.hsl.s = 100; + + var chroma = ctx.createLinearGradient(0, h, 0, h/4); // ctx.createRadialGradient(w/2, h/4, h/8, w/2, h/4, w/2); + chroma.addColorStop(0, color); + color.alpha = 0.0; + + chroma.addColorStop(1, color); + + ctx.fillStyle = chroma; + ctx.fillRect(0, h/4, canvas.width, h * 3/4); +} + + +var path = script.substring(0, script.lastIndexOf(".")); +var cssURL = path + ".css"; +Promise.all([ + loadSyle("https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"), + loadSyle(cssURL) +]).then(render); + +