colord - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

CHANGELOG.md

@@ -0,1 +1,6 @@
+### 1.4.0
+
+- New plugin: Color mixing
+- Adjust XYZ, LAB and LCH conversions to the D50 white point ([according to the latest CSS specs](https://drafts.csswg.org/css-color-5/#color-spaces)).
+
 ### 1.3.1
@@ -2,0 +7,0 @@

package.json

 {
   "name": "colord",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "👑 A tiny yet powerful tool for high-performance color manipulations and conversions",
@@ -122,5 +122,9 @@ "keywords": [
       "path": "dist/plugins/lch.mjs",
-      "limit": "1.1 KB"
+      "limit": "1.25 KB"
     },
     {
+      "path": "dist/plugins/mix.mjs",
+      "limit": "1 KB"
+    },
+    {
       "path": "dist/plugins/names.mjs",
@@ -127,0 +131,0 @@ "limit": "1.5 KB"

plugins/lab.js

@@ -1,1 +0,1 @@
-var a=function(a){return"string"==typeof a?a.length>0:"number"==typeof a},t=function(a,t,r){return void 0===t&&(t=0),void 0===r&&(r=Math.pow(10,t)),Math.round(r*a)/r},r=function(a,t,r){return void 0===t&&(t=0),void 0===r&&(r=1),a>r?r:a>t?a:t},n=function(a){var t=a/255;return t<.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)},o=function(a){return 255*(a>.0031308?1.055*Math.pow(a,1/2.4)-.055:12.92*a)},u=function(a){var t,n=a.x/100,u=a.y/100,e=a.z/100;return t={r:o(3.2404542*n-1.5371385*u-.4985314*e),g:o(-.969266*n+1.8760108*u+.041556*e),b:o(.0556434*n-.2040259*u+1.0572252*e),a:a.a},{r:r(t.r,0,255),g:r(t.g,0,255),b:r(t.b,0,255),a:r(t.a)}},e=function(a){var t,o=n(a.r),u=n(a.g),e=n(a.b);return{x:r((t={x:100*(.4124564*o+.3575761*u+.1804375*e),y:100*(.2126729*o+.7151522*u+.072175*e),z:100*(.0193339*o+.119192*u+.9503041*e),a:a.a}).x,0,95.047),y:r(t.y,0,100),z:r(t.z,0,108.883),a:r(t.a)}},h=.0088564517,b=7.787037037,p=function(t){var n=t.l,o=t.a,u=t.b,e=t.alpha,h=void 0===e?1:e;if(!a(n)||!a(o)||!a(u))return null;var b=function(a){return{l:r(a.l,0,100),a:r(a.a,-128,128),b:r(a.b,-128,128),alpha:r(a.alpha)}}({l:Number(n),a:Number(o),b:Number(u),alpha:Number(h)});return i(b)},i=function(a){var t=(a.l+16)/116,r=a.a/500+t,n=t-a.b/200;return u({x:95.047*(Math.pow(r,3)>h?Math.pow(r,3):(r-16/116)/b),y:100*(Math.pow(t,3)>h?Math.pow(t,3):(t-16/116)/b),z:108.883*(Math.pow(n,3)>h?Math.pow(n,3):(n-16/116)/b),a:a.alpha})};module.exports=function(a,r){a.prototype.toLab=function(){return r=e(this.rgba),o=r.y/100,u=r.z/108.883,n=(n=r.x/95.047)>h?Math.cbrt(n):b*n+16/116,a={l:116*(o=o>h?Math.cbrt(o):b*o+16/116)-16,a:500*(n-o),b:200*(o-(u=u>h?Math.cbrt(u):b*u+16/116)),alpha:r.a},{l:t(a.l,2),a:t(a.a,2),b:t(a.b,2),alpha:t(a.alpha,2)};var a,r,n,o,u},r.object.push(p)};
+var a=function(a){return"string"==typeof a?a.length>0:"number"==typeof a},r=function(a,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*a)/t},t=function(a,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),a>t?t:a>r?a:r},n=function(a){var r=a/255;return r<.04045?r/12.92:Math.pow((r+.055)/1.055,2.4)},u=function(a){return 255*(a>.0031308?1.055*Math.pow(a,1/2.4)-.055:12.92*a)},o=96.422,e=100,b=82.521,h=function(a){var r,n=function(a){return{x:.9555766*a.x+-.0230393*a.y+.0631636*a.z,y:-.0282895*a.x+1.0099416*a.y+.0210077*a.z,z:.0122982*a.x+-.020483*a.y+1.3299098*a.z,a:a.a}}(a),o=n.x/100,e=n.y/100,b=n.z/100;return r={r:u(3.2404542*o-1.5371385*e-.4985314*b),g:u(-.969266*o+1.8760108*e+.041556*b),b:u(.0556434*o-.2040259*e+1.0572252*b),a:n.a},{r:t(r.r,0,255),g:t(r.g,0,255),b:t(r.b,0,255),a:t(r.a)}},i=function(a){var r=n(a.r),u=n(a.g),h=n(a.b);return function(a){return{x:t(a.x,0,o),y:t(a.y,0,e),z:t(a.z,0,b),a:t(a.a)}}(function(a){return{x:1.0478112*a.x+.0228866*a.y+-.050127*a.z,y:.0295424*a.x+.9904844*a.y+-.0170491*a.z,z:-.0092345*a.x+.0150436*a.y+.7521316*a.z,a:a.a}}({x:100*(.4124564*r+.3575761*u+.1804375*h),y:100*(.2126729*r+.7151522*u+.072175*h),z:100*(.0193339*r+.119192*u+.9503041*h),a:a.a}))},l=216/24389,p=24389/27,c=function(r){var n=r.l,u=r.a,o=r.b,e=r.alpha,b=void 0===e?1:e;if(!a(n)||!a(u)||!a(o))return null;var h=function(a){return{l:t(a.l,0,100),a:t(a.a,-128,128),b:t(a.b,-128,128),alpha:t(a.alpha)}}({l:Number(n),a:Number(u),b:Number(o),alpha:Number(b)});return f(h)},f=function(a){var r=(a.l+16)/116,t=a.a/500+r,n=r-a.b/200;return h({x:(Math.pow(t,3)>l?Math.pow(t,3):(116*t-16)/p)*o,y:(a.l>8?Math.pow((a.l+16)/116,3):a.l/p)*e,z:(Math.pow(n,3)>l?Math.pow(n,3):(116*n-16)/p)*b,a:a.alpha})};module.exports=function(a,t){a.prototype.toLab=function(){return t=i(this.rgba),u=t.y/e,h=t.z/b,n=(n=t.x/o)>l?Math.cbrt(n):(p*n+16)/116,a={l:116*(u=u>l?Math.cbrt(u):(p*u+16)/116)-16,a:500*(n-u),b:200*(u-(h=h>l?Math.cbrt(h):(p*h+16)/116)),alpha:t.a},{l:r(a.l,2),a:r(a.a,2)+0,b:r(a.b,2)+0,alpha:r(a.alpha,2)};var a,t,n,u,h},t.object.push(c)};

plugins/lch.js

@@ -1,1 +0,1 @@
-var t=function(t){return"string"==typeof t?t.length>0:"number"==typeof t},r=function(t,r,a){return void 0===r&&(r=0),void 0===a&&(a=Math.pow(10,r)),Math.round(a*t)/a},a=function(t,r,a){return void 0===r&&(r=0),void 0===a&&(a=1),t>a?a:t>r?t:r},n=function(t){var r=t/255;return r<.04045?r/12.92:Math.pow((r+.055)/1.055,2.4)},u=function(t){return 255*(t>.0031308?1.055*Math.pow(t,1/2.4)-.055:12.92*t)},h=function(t){var r,n=t.x/100,h=t.y/100,o=t.z/100;return r={r:u(3.2404542*n-1.5371385*h-.4985314*o),g:u(-.969266*n+1.8760108*h+.041556*o),b:u(.0556434*n-.2040259*h+1.0572252*o),a:t.a},{r:a(r.r,0,255),g:a(r.g,0,255),b:a(r.b,0,255),a:a(r.a)}},o=function(t){var r,u=n(t.r),h=n(t.g),o=n(t.b);return{x:a((r={x:100*(.4124564*u+.3575761*h+.1804375*o),y:100*(.2126729*u+.7151522*h+.072175*o),z:100*(.0193339*u+.119192*h+.9503041*o),a:t.a}).x,0,95.047),y:a(r.y,0,100),z:a(r.z,0,108.883),a:a(r.a)}},c=.0088564517,e=7.787037037,i=function(t){return{l:a(t.l,0,100),c:t.c,h:a(t.h,0,360),a:t.a}},l=function(t){return{l:r(t.l,2),c:r(t.c,2),h:r(t.h,2),a:r(t.a,2)}},b=function(r){var a=r.l,n=r.c,u=r.h,h=r.a,o=void 0===h?1:h;if(!t(a)||!t(n)||!t(u))return null;var c=i({l:Number(a),c:Number(n),h:Number(u),a:Number(o)});return f(c)},p=function(t){var r=function(t){var r=o(t),a=r.x/95.047,n=r.y/100,u=r.z/108.883;return a=a>c?Math.cbrt(a):e*a+16/116,{l:116*(n=n>c?Math.cbrt(n):e*n+16/116)-16,a:500*(a-n),b:200*(n-(u=u>c?Math.cbrt(u):e*u+16/116)),alpha:r.a}}(t),a=180*Math.atan2(r.b,r.a)/Math.PI;return{l:r.l,c:Math.sqrt(r.a*r.a+r.b*r.b),h:a<0?a+360:a,a:r.alpha}},f=function(t){return r={l:t.l,a:t.c*Math.cos(t.h*Math.PI/180),b:t.c*Math.sin(t.h*Math.PI/180),alpha:t.a},n=r.a/500+(a=(r.l+16)/116),u=a-r.b/200,h({x:95.047*(Math.pow(n,3)>c?Math.pow(n,3):(n-16/116)/e),y:100*(Math.pow(a,3)>c?Math.pow(a,3):(a-16/116)/e),z:108.883*(Math.pow(u,3)>c?Math.pow(u,3):(u-16/116)/e),a:r.alpha});var r,a,n,u},M=/lcha?\(?\s*(-?\d+\.?\d*)%?[,\s]+(-?\d+\.?\d*)[,\s]+(-?\d+\.?\d*),?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i,v=function(t){var r=M.exec(t);if(!r)return null;var a=i({l:Number(r[1]),c:Number(r[2]),h:Number(r[3]),a:void 0===r[4]?1:Number(r[4])/(r[5]?100:1)});return f(a)};module.exports=function(t,r){t.prototype.toLch=function(){return l(p(this.rgba))},t.prototype.toLchString=function(){return t=l(p(this.rgba)),r=t.l,a=t.c,n=t.h,(u=t.a)<1?"lch("+r+"% "+a+" "+n+" / "+u+")":"lch("+r+"% "+a+" "+n+")";var t,r,a,n,u},r.string.push(v),r.object.push(b)};
+var t=function(t){return"string"==typeof t?t.length>0:"number"==typeof t},r=function(t,r,a){return void 0===r&&(r=0),void 0===a&&(a=Math.pow(10,r)),Math.round(a*t)/a},a=function(t,r,a){return void 0===r&&(r=0),void 0===a&&(a=1),t>a?a:t>r?t:r},n=function(t){var r=t/255;return r<.04045?r/12.92:Math.pow((r+.055)/1.055,2.4)},u=function(t){return 255*(t>.0031308?1.055*Math.pow(t,1/2.4)-.055:12.92*t)},o=96.422,h=100,c=82.521,e=function(t){var r,n=function(t){return{x:.9555766*t.x+-.0230393*t.y+.0631636*t.z,y:-.0282895*t.x+1.0099416*t.y+.0210077*t.z,z:.0122982*t.x+-.020483*t.y+1.3299098*t.z,a:t.a}}(t),o=n.x/100,h=n.y/100,c=n.z/100;return r={r:u(3.2404542*o-1.5371385*h-.4985314*c),g:u(-.969266*o+1.8760108*h+.041556*c),b:u(.0556434*o-.2040259*h+1.0572252*c),a:n.a},{r:a(r.r,0,255),g:a(r.g,0,255),b:a(r.b,0,255),a:a(r.a)}},i=function(t){var r=n(t.r),u=n(t.g),e=n(t.b);return function(t){return{x:a(t.x,0,o),y:a(t.y,0,h),z:a(t.z,0,c),a:a(t.a)}}(function(t){return{x:1.0478112*t.x+.0228866*t.y+-.050127*t.z,y:.0295424*t.x+.9904844*t.y+-.0170491*t.z,z:-.0092345*t.x+.0150436*t.y+.7521316*t.z,a:t.a}}({x:100*(.4124564*r+.3575761*u+.1804375*e),y:100*(.2126729*r+.7151522*u+.072175*e),z:100*(.0193339*r+.119192*u+.9503041*e),a:t.a}))},l=216/24389,f=24389/27,b=function(t){return{l:a(t.l,0,100),c:t.c,h:a(t.h,0,360),a:t.a}},p=function(t){return{l:r(t.l,2),c:r(t.c,2),h:r(t.h,2),a:r(t.a,2)}},M=function(r){var a=r.l,n=r.c,u=r.h,o=r.a,h=void 0===o?1:o;if(!t(a)||!t(n)||!t(u))return null;var c=b({l:Number(a),c:Number(n),h:Number(u),a:Number(h)});return y(c)},v=function(t){var a=function(t){var r=i(t),a=r.x/o,n=r.y/h,u=r.z/c;return a=a>l?Math.cbrt(a):(f*a+16)/116,{l:116*(n=n>l?Math.cbrt(n):(f*n+16)/116)-16,a:500*(a-n),b:200*(n-(u=u>l?Math.cbrt(u):(f*u+16)/116)),alpha:r.a}}(t),n=r(a.a,3)+0,u=r(a.b,3)+0,e=Math.atan2(u,n)/Math.PI*180;return{l:a.l,c:Math.sqrt(n*n+u*u),h:e<0?e+360:e,a:a.alpha}},y=function(t){return r={l:t.l,a:t.c*Math.cos(t.h*Math.PI/180),b:t.c*Math.sin(t.h*Math.PI/180),alpha:t.a},n=r.a/500+(a=(r.l+16)/116),u=a-r.b/200,e({x:(Math.pow(n,3)>l?Math.pow(n,3):(116*n-16)/f)*o,y:(r.l>8?Math.pow((r.l+16)/116,3):r.l/f)*h,z:(Math.pow(u,3)>l?Math.pow(u,3):(116*u-16)/f)*c,a:r.alpha});var r,a,n,u},d=/lcha?\(?\s*(-?\d+\.?\d*)%?[,\s]+(-?\d+\.?\d*)[,\s]+(-?\d+\.?\d*),?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i,s=function(t){var r=d.exec(t);if(!r)return null;var a=b({l:Number(r[1]),c:Number(r[2]),h:Number(r[3]),a:void 0===r[4]?1:Number(r[4])/(r[5]?100:1)});return y(a)};module.exports=function(t,r){t.prototype.toLch=function(){return p(v(this.rgba))},t.prototype.toLchString=function(){return t=p(v(this.rgba)),r=t.l,a=t.c,n=t.h,(u=t.a)<1?"lch("+r+"% "+a+" "+n+" / "+u+")":"lch("+r+"% "+a+" "+n+")";var t,r,a,n,u},r.string.push(s),r.object.push(M)};

plugins/xyz.js

@@ -1,1 +0,1 @@
-var r=function(r){return"string"==typeof r?r.length>0:"number"==typeof r},n=function(r,n,t){return void 0===n&&(n=0),void 0===t&&(t=Math.pow(10,n)),Math.round(t*r)/t},t=function(r,n,t){return void 0===n&&(n=0),void 0===t&&(t=1),r>t?t:r>n?r:n},u=function(r){var n=r/255;return n<.04045?n/12.92:Math.pow((n+.055)/1.055,2.4)},o=function(r){return 255*(r>.0031308?1.055*Math.pow(r,1/2.4)-.055:12.92*r)},a=function(r){return{x:t(r.x,0,95.047),y:t(r.y,0,100),z:t(r.z,0,108.883),a:t(r.a)}},e=function(n){var t=n.x,u=n.y,o=n.z,e=n.a,f=void 0===e?1:e;if(!r(t)||!r(u)||!r(o))return null;var y=a({x:Number(t),y:Number(u),z:Number(o),a:Number(f)});return i(y)},i=function(r){var n,u=r.x/100,a=r.y/100,e=r.z/100;return n={r:o(3.2404542*u-1.5371385*a-.4985314*e),g:o(-.969266*u+1.8760108*a+.041556*e),b:o(.0556434*u-.2040259*a+1.0572252*e),a:r.a},{r:t(n.r,0,255),g:t(n.g,0,255),b:t(n.b,0,255),a:t(n.a)}};module.exports=function(r,t){r.prototype.toXyz=function(){return o=u((t=this.rgba).r),e=u(t.g),i=u(t.b),r=a({x:100*(.4124564*o+.3575761*e+.1804375*i),y:100*(.2126729*o+.7151522*e+.072175*i),z:100*(.0193339*o+.119192*e+.9503041*i),a:t.a}),{x:n(r.x,3),y:n(r.y,3),z:n(r.z,3),a:n(r.a,2)};var r,t,o,e,i},t.object.push(e)};
+var r=function(r){return"string"==typeof r?r.length>0:"number"==typeof r},n=function(r,n,t){return void 0===n&&(n=0),void 0===t&&(t=Math.pow(10,n)),Math.round(t*r)/t},t=function(r,n,t){return void 0===n&&(n=0),void 0===t&&(t=1),r>t?t:r>n?r:n},u=function(r){var n=r/255;return n<.04045?n/12.92:Math.pow((n+.055)/1.055,2.4)},o=function(r){return 255*(r>.0031308?1.055*Math.pow(r,1/2.4)-.055:12.92*r)},a=96.422,e=100,i=82.521,y=function(r){return{x:t(r.x,0,a),y:t(r.y,0,e),z:t(r.z,0,i),a:t(r.a)}},x=function(n){var t=n.x,u=n.y,o=n.z,a=n.a,e=void 0===a?1:a;if(!r(t)||!r(u)||!r(o))return null;var i=y({x:Number(t),y:Number(u),z:Number(o),a:Number(e)});return z(i)},z=function(r){var n,u=function(r){return{x:.9555766*r.x+-.0230393*r.y+.0631636*r.z,y:-.0282895*r.x+1.0099416*r.y+.0210077*r.z,z:.0122982*r.x+-.020483*r.y+1.3299098*r.z,a:r.a}}(r),a=u.x/100,e=u.y/100,i=u.z/100;return n={r:o(3.2404542*a-1.5371385*e-.4985314*i),g:o(-.969266*a+1.8760108*e+.041556*i),b:o(.0556434*a-.2040259*e+1.0572252*i),a:u.a},{r:t(n.r,0,255),g:t(n.g,0,255),b:t(n.b,0,255),a:t(n.a)}};module.exports=function(r,t){r.prototype.toXyz=function(){return function(r){return{x:n(r.x,2),y:n(r.y,2),z:n(r.z,2),a:n(r.a,2)}}((t=u((r=this.rgba).r),o=u(r.g),a=u(r.b),y({x:1.0478112*(e={x:100*(.4124564*t+.3575761*o+.1804375*a),y:100*(.2126729*t+.7151522*o+.072175*a),z:100*(.0193339*t+.119192*o+.9503041*a),a:r.a}).x+.0228866*e.y+-.050127*e.z,y:.0295424*e.x+.9904844*e.y+-.0170491*e.z,z:-.0092345*e.x+.0150436*e.y+.7521316*e.z,a:e.a})));var r,t,o,a,e},t.object.push(x)};

README.md

@@ -381,2 +381,23 @@ <div align="center">
 
+<details>
+  <summary><b><code>mix(color2, ratio = 0.5)</code></b> (<b>mix</b> plugin)</summary>
+
+Produces a mixture of two colors and returns the result of mixing them (new Colord instance).
+
+In contrast to other libraries that perform RGB values mixing, Colord mixes colors through LCH color space — same way the new CSS [`color-mix` function](https://drafts.csswg.org/css-color-5/#funcdef-color-mix) works. This approach produces better results and doesn't have the drawbacks the legacy way has.
+
+```js
+import { colord, extend } from "colord";
+import mixPlugin from "colord/plugins/mix";
+
+extend([mixPlugin]);
+
+colord("#ffffff").mix("#000000").toHex(); // "#777777"
+colord("#800080").mix("#dda0dd").toHex(); // "#af5cae"
+colord("#cd853f").mix("#eee8aa", 0.6).toHex(); // "#dfc279"
+colord("#008080").mix("#808000", 0.35).toHex(); // "#14865f"
+```
+
+</details>
+
 ### Color analysis
@@ -550,3 +571,3 @@
 <details>
-  <summary><b><code>lab</code> (CIE LAB color space)</b> <i>0.78 KB</i></summary>
+  <summary><b><code>lab</code> (CIE LAB color space)</b> <i>0.9 KB</i></summary>
 
@@ -568,3 +589,3 @@ Adds support of [CIE LAB](https://en.wikipedia.org/wiki/CIELAB_color_space) color model. The conversion logic is ported from [CSS Color Module Level 4 Specification](https://www.w3.org/TR/css-color-4/#color-conversion-code).
 <details>
-  <summary><b><code>lch</code> (CIE LCH color space)</b> <i>1 KB</i></summary>
+  <summary><b><code>lch</code> (CIE LCH color space)</b> <i>1.2 KB</i></summary>
 
@@ -589,2 +610,23 @@ Adds support of [CIE LCH](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/) color space. The conversion logic is ported from [CSS Color Module Level 4 Specification](https://www.w3.org/TR/css-color-4/#color-conversion-code).
 <details>
+  <summary><b><code>mix</code> (Color mixing)</b> <i>0.97 KB</i></summary>
+
+A plugin adding a color mixing utility.
+
+In contrast to other libraries that perform RGB values mixing, Colord mixes colors through LCH color space — same way the new CSS [`color-mix` function](https://drafts.csswg.org/css-color-5/#funcdef-color-mix) works. This approach produces better results and doesn't have the drawbacks the legacy way has.
+
+```js
+import { colord, extend } from "colord";
+import mixPlugin from "colord/plugins/mix";
+
+extend([mixPlugin]);
+
+colord("#ffffff").mix("#000000").toHex(); // "#777777"
+colord("#800080").mix("#dda0dd").toHex(); // "#af5cae"
+colord("#cd853f").mix("#eee8aa", 0.6).toHex(); // "#dfc279"
+colord("#008080").mix("#808000", 0.35).toHex(); // "#14865f"
+```
+
+</details>
+
+<details>
   <summary><b><code>names</code> (CSS color keywords)</b> <i>1.29 KB</i></summary>
@@ -609,3 +651,3 @@
 <details>
-  <summary><b><code>xyz</code> (CIE XYZ color space)</b> <i>0.6 KB</i></summary>
+  <summary><b><code>xyz</code> (CIE XYZ color space)</b> <i>0.7 KB</i></summary>
 
@@ -661,3 +703,3 @@ Adds support of [CIE XYZ](https://www.sttmedia.com/colormodel-xyz) color model. The conversion logic is ported from [CSS Color Module Level 4 Specification](https://www.w3.org/TR/css-color-4/#color-conversion-code).
 - [x] [LCH](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/) color space (via plugin)
+- [x] Mix colors (via plugin)
 - [ ] CMYK color space (via plugin)
-- [ ] Mix colors (via plugin)

No alert changes

Improved metrics

Total package byte prevSize

80665

increased by12.14%

Number of package files

33

increased by10%

Lines of code

458

increased by10.36%

Number of lines in readme file

700

increased by6.38%

No dependency changes