@famebot/hsl-gen
Advanced tools
@famebot/hsl-gen - npm Package Compare versions
Comparing version 0.4.0 to 0.6.0
@@ -0,1 +1,66 @@ | ||
| # [0.6.0](https://github.com/famebot/hsl-gen/compare/v0.5.1...v0.6.0) (2023-04-09) | ||
| ## [0.5.1](https://github.com/famebot/hsl-gen/compare/v0.5.0...v0.5.1) (2023-04-09) | ||
| # [0.5.0](https://github.com/famebot/hsl-gen/compare/v0.4.0...v0.5.0) (2023-04-09) | ||
| ### Features | ||
| * xlight, midrange, lowmid, swatch palette ([5b628a8](https://github.com/famebot/hsl-gen/commit/5b628a87ca4ee25cdaae49ee76592ce7ea6c6f3e)) | ||
| ### BREAKING CHANGES | ||
| * Deprecated huehslactive, huehslhover, huehslmuted, | ||
| darkhuehslactive, darkhuehslhover, and darkhuehslmuted | ||
| 🎲 All mixing values now randomly generated 👾 | ||
| - General reordering and organization of `src/index.js` | ||
| - mega update to `examples/browser-umd/index.html` | ||
| - now shows swatch palette and supports copying values | ||
| New raw mixing values | ||
| - `xlight`: 84-92 | ||
| - `midrange`: 48-64 | ||
| - `lowmid`: 28-36 | ||
| Usage | ||
| - `midrange` used for `analhslmid` and `comphslmid` lightness | ||
| DEPRECATED color scheme values | ||
| Goodbye | ||
| - `huehslactive` | ||
| - `huehslhover` | ||
| - `huehslmuted` | ||
| - `darkhuehslactive` | ||
| - `darkhuehslhover` | ||
| - `darkhuehslmuted` | ||
| Hello `huehslxlight` and `darkhuehsllowmid` | ||
| `huehslxlight` | ||
| Replaces `huehslactive` and `huehslhover` | ||
| - `xlight` for lightness | ||
| - `midrange` for saturation? | ||
| `darkhuehsllowmid` | ||
| Replaces `darkhuehslactive` and `darkhuehslhover` | ||
| - lowmid for lightness | ||
| # [0.4.0](https://github.com/famebot/hsl-gen/compare/v0.3.5...v0.4.0) (2023-04-06) | ||
@@ -2,0 +67,0 @@ |
@@ -1,2 +0,2 @@ | ||
| const h=(h,s)=>Math.floor(Math.random()*(s-h+1))+h;var s=()=>{const s=h(1,359);var l,e=s>180?s-180:s+179;switch(s){case s<135:l=s+224;break;case s>224:l=s-223;break;default:var $=s+225;l=$>359?$-359:$}const a=h(80,100),r=h(64,80),t=h(0,24);let u=t<8?16:0,o=r>76?68:84;return{hue:s,complement:e,analogous:l,saturation:a,lightness:r,darkness:t,darker:u,lighter:o,analhsl:`hsl(${l}, ${a}%, ${r}%)`,analhsldarker:`hsl(${l}, ${a}%, 48%)`,analhsltext:`hsl(${l}, ${a}%, ${u}%)`,comphsl:`hsl(${e}, ${a}%, ${r}%)`,comphsldarker:`hsl(${e}, ${a}%, 48%)`,comphsltext:`hsl(${e}, ${a}%, ${u}%)`,huehsl:`hsl(${s}, ${a}%, ${r}%)`,huehsllighter:`hsl(${s}, ${a}%, ${o}%)`,huehslactive:`hsl(${s}, 64%, 92%)`,huehslhover:`hsl(${s}, 64%, 84%)`,huehslmuted:`hsl(${s}, 64%, ${o}%)`,darkhuehsl:`hsl(${s}, ${a}%, ${t}%)`,darkhuehsldarker:`hsl(${s}, ${a}%, ${u}%)`,darkhuehslactive:`hsl(${s}, 64%, 36%)`,darkhuehslhover:`hsl(${s}, 64%, 28%)`,darkhuehslmuted:`hsl(${s}, 64%, ${u}%)`}};export{s as default}; | ||
| const l=(l,h)=>Math.floor(Math.random()*(h-l+1))+l;var h=()=>{const h=l(1,359);var s,$=h>180?h-180:h+179;switch(h){case h<135:s=h+224;break;case h>224:s=h-223;break;default:var a=h+225;s=a>359?a-359:a}const r=l(80,100),e=l(64,80),t=l(0,24);let d=t<8?16:0,o=e>76?68:84;const n=l(28,36),c=l(48,64),i=l(84,92);return{hue:h,complement:$,analogous:s,saturation:r,xlight:i,lighter:o,lightness:e,midrange:c,lowmid:n,darkness:t,darker:d,huehsl:`hsl(${h}, ${r}%, ${e}%)`,huehsllighter:`hsl(${h}, ${r}%, ${o}%)`,huehslxlight:`hsl(${h}, ${r}%, ${i}%)`,darkhuehsl:`hsl(${h}, ${r}%, ${t}%)`,darkhuehsldarker:`hsl(${h}, ${r}%, ${d}%)`,darkhuehsllowmid:`hsl(${h}, ${r}%, ${n}%)`,comphsl:`hsl(${$}, ${r}%, ${e}%)`,comphslmid:`hsl(${$}, ${r}%, ${c}%)`,comphsldark:`hsl(${$}, ${r}%, ${t}%)`,comphsldarker:`hsl(${$}, ${r}%, ${d}%)`,analhsl:`hsl(${s}, ${r}%, ${e}%)`,analhslmid:`hsl(${s}, ${r}%, ${c}%)`,analhsldark:`hsl(${s}, ${r}%, ${t}%)`,analhsldarker:`hsl(${s}, ${r}%, ${d}%)`}};export{h as default}; | ||
| //# sourceMappingURL=hsl-gen.modern.js.map |
@@ -1,2 +0,2 @@ | ||
| var h=function(h,l){return Math.floor(Math.random()*(l-h+1))+h},l=function(){var l,s=h(1,359),e=s>180?s-180:s+179;switch(s){case s<135:l=s+224;break;case s>224:l=s-223;break;default:var a=s+225;l=a>359?a-359:a}var r=h(80,100),t=h(64,80),u=h(0,24),d=u<8?16:0,n=t>76?68:84;return{hue:s,complement:e,analogous:l,saturation:r,lightness:t,darkness:u,darker:d,lighter:n,analhsl:"hsl("+l+", "+r+"%, "+t+"%)",analhsldarker:"hsl("+l+", "+r+"%, 48%)",analhsltext:"hsl("+l+", "+r+"%, "+d+"%)",comphsl:"hsl("+e+", "+r+"%, "+t+"%)",comphsldarker:"hsl("+e+", "+r+"%, 48%)",comphsltext:"hsl("+e+", "+r+"%, "+d+"%)",huehsl:"hsl("+s+", "+r+"%, "+t+"%)",huehsllighter:"hsl("+s+", "+r+"%, "+n+"%)",huehslactive:"hsl("+s+", 64%, 92%)",huehslhover:"hsl("+s+", 64%, 84%)",huehslmuted:"hsl("+s+", 64%, "+n+"%)",darkhuehsl:"hsl("+s+", "+r+"%, "+u+"%)",darkhuehsldarker:"hsl("+s+", "+r+"%, "+d+"%)",darkhuehslactive:"hsl("+s+", 64%, 36%)",darkhuehslhover:"hsl("+s+", 64%, 28%)",darkhuehslmuted:"hsl("+s+", 64%, "+d+"%)"}};export{l as default}; | ||
| var l=function(l,h){return Math.floor(Math.random()*(h-l+1))+l},h=function(){var h,s=l(1,359),a=s>180?s-180:s+179;switch(s){case s<135:h=s+224;break;case s>224:h=s-223;break;default:var r=s+225;h=r>359?r-359:r}var e=l(80,100),d=l(64,80),t=l(0,24),n=t<8?16:0,o=d>76?68:84,u=l(28,36),i=l(48,64),k=l(84,92);return{hue:s,complement:a,analogous:h,saturation:e,xlight:k,lighter:o,lightness:d,midrange:i,lowmid:u,darkness:t,darker:n,huehsl:"hsl("+s+", "+e+"%, "+d+"%)",huehsllighter:"hsl("+s+", "+e+"%, "+o+"%)",huehslxlight:"hsl("+s+", "+e+"%, "+k+"%)",darkhuehsl:"hsl("+s+", "+e+"%, "+t+"%)",darkhuehsldarker:"hsl("+s+", "+e+"%, "+n+"%)",darkhuehsllowmid:"hsl("+s+", "+e+"%, "+u+"%)",comphsl:"hsl("+a+", "+e+"%, "+d+"%)",comphslmid:"hsl("+a+", "+e+"%, "+i+"%)",comphsldark:"hsl("+a+", "+e+"%, "+t+"%)",comphsldarker:"hsl("+a+", "+e+"%, "+n+"%)",analhsl:"hsl("+h+", "+e+"%, "+d+"%)",analhslmid:"hsl("+h+", "+e+"%, "+i+"%)",analhsldark:"hsl("+h+", "+e+"%, "+t+"%)",analhsldarker:"hsl("+h+", "+e+"%, "+n+"%)"}};export{h as default}; | ||
| //# sourceMappingURL=hsl-gen.module.js.map |
@@ -1,2 +0,2 @@ | ||
| !function(e,h){"object"==typeof exports&&"undefined"!=typeof module?module.exports=h():"function"==typeof define&&define.amd?define(h):(e||self).hslGen=h()}(this,function(){var e=function(e,h){return Math.floor(Math.random()*(h-e+1))+e};return function(){var h,l=e(1,359),s=l>180?l-180:l+179;switch(l){case l<135:h=l+224;break;case l>224:h=l-223;break;default:var a=l+225;h=a>359?a-359:a}var r=e(80,100),t=e(64,80),n=e(0,24),o=n<8?16:0,u=t>76?68:84;return{hue:l,complement:s,analogous:h,saturation:r,lightness:t,darkness:n,darker:o,lighter:u,analhsl:"hsl("+h+", "+r+"%, "+t+"%)",analhsldarker:"hsl("+h+", "+r+"%, 48%)",analhsltext:"hsl("+h+", "+r+"%, "+o+"%)",comphsl:"hsl("+s+", "+r+"%, "+t+"%)",comphsldarker:"hsl("+s+", "+r+"%, 48%)",comphsltext:"hsl("+s+", "+r+"%, "+o+"%)",huehsl:"hsl("+l+", "+r+"%, "+t+"%)",huehsllighter:"hsl("+l+", "+r+"%, "+u+"%)",huehslactive:"hsl("+l+", 64%, 92%)",huehslhover:"hsl("+l+", 64%, 84%)",huehslmuted:"hsl("+l+", 64%, "+u+"%)",darkhuehsl:"hsl("+l+", "+r+"%, "+n+"%)",darkhuehsldarker:"hsl("+l+", "+r+"%, "+o+"%)",darkhuehslactive:"hsl("+l+", 64%, 36%)",darkhuehslhover:"hsl("+l+", 64%, 28%)",darkhuehslmuted:"hsl("+l+", 64%, "+o+"%)"}}}); | ||
| !function(l,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(l||self).hslGen=e()}(this,function(){var l=function(l,e){return Math.floor(Math.random()*(e-l+1))+l};return function(){var e,h=l(1,359),s=h>180?h-180:h+179;switch(h){case h<135:e=h+224;break;case h>224:e=h-223;break;default:var a=h+225;e=a>359?a-359:a}var r=l(80,100),n=l(64,80),o=l(0,24),t=o<8?16:0,d=n>76?68:84,i=l(28,36),u=l(48,64),f=l(84,92);return{hue:h,complement:s,analogous:e,saturation:r,xlight:f,lighter:d,lightness:n,midrange:u,lowmid:i,darkness:o,darker:t,huehsl:"hsl("+h+", "+r+"%, "+n+"%)",huehsllighter:"hsl("+h+", "+r+"%, "+d+"%)",huehslxlight:"hsl("+h+", "+r+"%, "+f+"%)",darkhuehsl:"hsl("+h+", "+r+"%, "+o+"%)",darkhuehsldarker:"hsl("+h+", "+r+"%, "+t+"%)",darkhuehsllowmid:"hsl("+h+", "+r+"%, "+i+"%)",comphsl:"hsl("+s+", "+r+"%, "+n+"%)",comphslmid:"hsl("+s+", "+r+"%, "+u+"%)",comphsldark:"hsl("+s+", "+r+"%, "+o+"%)",comphsldarker:"hsl("+s+", "+r+"%, "+t+"%)",analhsl:"hsl("+e+", "+r+"%, "+n+"%)",analhslmid:"hsl("+e+", "+r+"%, "+u+"%)",analhsldark:"hsl("+e+", "+r+"%, "+o+"%)",analhsldarker:"hsl("+e+", "+r+"%, "+t+"%)"}}}); | ||
| //# sourceMappingURL=hsl-gen.umd.js.map |
| { | ||
| "name": "@famebot/hsl-gen", | ||
| "version": "0.4.0", | ||
| "version": "0.6.0", | ||
| "description": "Generates a color scheme with HSL values", | ||
@@ -5,0 +5,0 @@ "type": "module", |
@@ -58,2 +58,3 @@ # HSL Gen | ||
| { | ||
| // raw mixing values | ||
| hue: hue, | ||
@@ -63,53 +64,58 @@ complement: complement, | ||
| saturation: saturation, | ||
| xlight: xlight, | ||
| lighter: lighter, | ||
| lightness: lightness, | ||
| midrange: midrange, | ||
| lowmid: lowmid, | ||
| darkness: darkness, | ||
| darker: darker, | ||
| lighter: lighter, | ||
| analhsl: `hsl(${analogous}, ${saturation}%, ${lightness}%)`, | ||
| analhsldarker: `hsl(${analogous}, ${saturation}%, 48%)`, | ||
| analhsltext: `hsl(${analogous}, ${saturation}%, ${darker}%)`, | ||
| comphsl: `hsl(${complement}, ${saturation}%, ${lightness}%)`, | ||
| comphsldarker: `hsl(${complement}, ${saturation}%, 48%)`, | ||
| comphsltext: `hsl(${complement}, ${saturation}%, ${darker}%)`, | ||
| // primary hue: light and dark | ||
| huehsl: `hsl(${hue}, ${saturation}%, ${lightness}%)`, | ||
| huehsllighter: `hsl(${hue}, ${saturation}%, ${lighter}%)`, | ||
| huehslactive: `hsl(${hue}, 64%, 92%)`, | ||
| huehslhover: `hsl(${hue}, 64%, 84%)`, | ||
| huehslmuted: `hsl(${hue}, 64%, ${lighter}%)`, | ||
| huehslxlight: `hsl(${hue}, ${saturation}%, ${xlight}%)`, | ||
| darkhuehsl: `hsl(${hue}, ${saturation}%, ${darkness}%)`, | ||
| darkhuehsldarker: `hsl(${hue}, ${saturation}%, ${darker}%)`, | ||
| darkhuehslactive: `hsl(${hue}, 64%, 36%)`, | ||
| darkhuehslhover: `hsl(${hue}, 64%, 28%)`, | ||
| darkhuehslmuted: `hsl(${hue}, 64%, ${darker}%)` | ||
| darkhuehsllowmid: `hsl(${hue}, ${saturation}%, ${lowmid}%)`, | ||
| // complement | ||
| comphsl: `hsl(${complement}, ${saturation}%, ${lightness}%)`, | ||
| comphslmid: `hsl(${complement}, ${saturation}%, ${midrange}%)`, | ||
| comphsldark: `hsl(${complement}, ${saturation}%, ${darkness}%)`, | ||
| comphsldarker: `hsl(${complement}, ${saturation}%, ${darker}%)`, | ||
| // analogous | ||
| analhsl: `hsl(${analogous}, ${saturation}%, ${lightness}%)`, | ||
| analhslmid: `hsl(${analogous}, ${saturation}%, ${midrange}%)`, | ||
| analhsldark: `hsl(${analogous}, ${saturation}%, ${darkness}%)`, | ||
| analhsldarker: `hsl(${analogous}, ${saturation}%, ${darker}%)` | ||
| } | ||
| ``` | ||
| We first seed the primary color, `hue` and `darkhue` for dark mode schemes. Next we set `complement` (secondary) and `analogous` (tertiary) values, then `saturation` and `lightness` and `darkness` within acceptable parameters for light and dark text, along with companion `lighter` and `darker` values. An example generated scheme looks like: | ||
| We first seed the primary color: `hue` and `darkhue` for dark mode schemes. Next we set `complement` (secondary) and `analogous` (tertiary) values, then `saturation` and `lightness` and `darkness` within acceptable parameters for light and dark text, along with companion `lighter` and `darker` values. Finally we create `xlight`, `midrange`, and `lowmid` give us more mixing options. An example generated scheme looks like: | ||
| ```js | ||
| { | ||
| hue: 33, | ||
| complement: 212, | ||
| analogous: 258, | ||
| saturation: 87, | ||
| lightness: 64, | ||
| darkness: 15, | ||
| darker: 0, | ||
| hue: 285, | ||
| complement: 105, | ||
| analogous: 151, | ||
| saturation: 88, | ||
| xlight: 91, | ||
| lighter: 84, | ||
| analhsl: 'hsl(258, 87%, 64%)', | ||
| analhsldarker: 'hsl(258, 87%, 48%)', | ||
| analhsltext: 'hsl(258, 87%, 0%)', | ||
| comphsl: 'hsl(212, 87%, 64%)', | ||
| comphsldarker: 'hsl(212, 87%, 48%)', | ||
| comphsltext: 'hsl(212, 87%, 0%)', | ||
| huehsl: 'hsl(33, 87%, 64%)', | ||
| huehsllighter: 'hsl(33, 87%, 84%)', | ||
| huehslactive: 'hsl(33, 64%, 92%)', | ||
| huehslhover: 'hsl(33, 64%, 84%)', | ||
| huehslmuted: 'hsl(33, 64%, 84%)', | ||
| darkhuehsl: 'hsl(33, 87%, 15%)', | ||
| darkhuehsldarker: 'hsl(33, 87%, 0%)', | ||
| darkhuehslactive: 'hsl(33, 64%, 36%)', | ||
| darkhuehslhover: 'hsl(33, 64%, 28%)', | ||
| darkhuehslmuted: 'hsl(33, 64%, 0%)' | ||
| lightness: 66, | ||
| midrange: 49, | ||
| lowmid: 35, | ||
| darkness: 5, | ||
| darker: 16, | ||
| huehsl: 'hsl(285, 88%, 66%)', | ||
| huehsllighter: 'hsl(285, 88%, 84%)', | ||
| huehslxlight: 'hsl(285, 88%, 91%)', | ||
| darkhuehsl: 'hsl(285, 88%, 5%)', | ||
| darkhuehsldarker: 'hsl(285, 88%, 16%)', | ||
| darkhuehsllowmid: 'hsl(285, 88%, 35%)', | ||
| comphsl: 'hsl(105, 88%, 66%)', | ||
| comphslmid: 'hsl(105, 88%, 49%)', | ||
| comphsldark: 'hsl(105, 88%, 5%)', | ||
| comphsldarker: 'hsl(105, 88%, 16%)', | ||
| analhsl: 'hsl(151, 88%, 66%)', | ||
| analhslmid: 'hsl(151, 88%, 49%)', | ||
| analhsldark: 'hsl(151, 88%, 5%)', | ||
| analhsldarker: 'hsl(151, 88%, 16%)' | ||
| } | ||
@@ -116,0 +122,0 @@ ``` |
@@ -30,9 +30,9 @@ // Returns a random integer between min (included) and max (included) | ||
| // Seed random saturtion and lightness within acceptable parameters for light and dark text. | ||
| const saturation = getRandomIntInclusive(80, 100); // 80, | ||
| // Seed random saturation and lightness within acceptable parameters for light and dark text. | ||
| const saturation = getRandomIntInclusive(80, 100); | ||
| // very light or white text | ||
| const lightness = getRandomIntInclusive(64, 80); // 80, | ||
| const lightness = getRandomIntInclusive(64, 80); | ||
| // very dark or black text | ||
| const darkness = getRandomIntInclusive(0, 24); | ||
| // typically a more extreme darkness/lightness unless the value is already | ||
@@ -43,3 +43,13 @@ // extreme then a moderate value to contrast well with the extreme value | ||
| // Create other mixing values | ||
| // dark highlight | ||
| const lowmid = getRandomIntInclusive(28, 36); | ||
| // mid value used for lightness and saturation | ||
| const midrange = getRandomIntInclusive(48, 64); | ||
| // highlight | ||
| const xlight = getRandomIntInclusive(84, 92); | ||
| return { | ||
| // raw mixing values | ||
| hue: hue, | ||
@@ -49,23 +59,27 @@ complement: complement, | ||
| saturation: saturation, | ||
| xlight: xlight, | ||
| lighter: lighter, | ||
| lightness: lightness, | ||
| midrange: midrange, | ||
| lowmid: lowmid, | ||
| darkness: darkness, | ||
| darker: darker, | ||
| lighter: lighter, | ||
| analhsl: `hsl(${analogous}, ${saturation}%, ${lightness}%)`, | ||
| analhsldarker: `hsl(${analogous}, ${saturation}%, 48%)`, | ||
| analhsltext: `hsl(${analogous}, ${saturation}%, ${darker}%)`, | ||
| comphsl: `hsl(${complement}, ${saturation}%, ${lightness}%)`, | ||
| comphsldarker: `hsl(${complement}, ${saturation}%, 48%)`, | ||
| comphsltext: `hsl(${complement}, ${saturation}%, ${darker}%)`, | ||
| // primary hue: light and dark | ||
| huehsl: `hsl(${hue}, ${saturation}%, ${lightness}%)`, | ||
| huehsllighter: `hsl(${hue}, ${saturation}%, ${lighter}%)`, | ||
| huehslactive: `hsl(${hue}, 64%, 92%)`, | ||
| huehslhover: `hsl(${hue}, 64%, 84%)`, | ||
| huehslmuted: `hsl(${hue}, 64%, ${lighter}%)`, | ||
| huehslxlight: `hsl(${hue}, ${saturation}%, ${xlight}%)`, | ||
| darkhuehsl: `hsl(${hue}, ${saturation}%, ${darkness}%)`, | ||
| darkhuehsldarker: `hsl(${hue}, ${saturation}%, ${darker}%)`, | ||
| darkhuehslactive: `hsl(${hue}, 64%, 36%)`, | ||
| darkhuehslhover: `hsl(${hue}, 64%, 28%)`, | ||
| darkhuehslmuted: `hsl(${hue}, 64%, ${darker}%)`, | ||
| darkhuehsllowmid: `hsl(${hue}, ${saturation}%, ${lowmid}%)`, | ||
| // complement | ||
| comphsl: `hsl(${complement}, ${saturation}%, ${lightness}%)`, | ||
| comphslmid: `hsl(${complement}, ${saturation}%, ${midrange}%)`, | ||
| comphsldark: `hsl(${complement}, ${saturation}%, ${darkness}%)`, | ||
| comphsldarker: `hsl(${complement}, ${saturation}%, ${darker}%)`, | ||
| // analogous | ||
| analhsl: `hsl(${analogous}, ${saturation}%, ${lightness}%)`, | ||
| analhslmid: `hsl(${analogous}, ${saturation}%, ${midrange}%)`, | ||
| analhsldark: `hsl(${analogous}, ${saturation}%, ${darkness}%)`, | ||
| analhsldarker: `hsl(${analogous}, ${saturation}%, ${darker}%)` | ||
| }; | ||
| }; |
| import hslGen from '../src/index.js'; | ||
| import assert from 'assert'; | ||
| const propCount = 24; | ||
| const propCount = 25; | ||
| const colorScheme = hslGen(); | ||
@@ -6,0 +6,0 @@ console.log(colorScheme); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by26.3%
50804
- Number of package files
- increased by10.53%
21
- Lines of code
- increased by11.76%
114
- Number of lines in readme file
- increased by4.96%
127
No dependency changes