add hStartCenter to options

README.md

@@ -48,7 +48,7 @@ function generateHSLRamp  ({
   hStart  : Math.random() * 360,         // hue at the start of the ramp
   hCycles : 1,                           // number of full hue cycles 
                                          // (.5 = 180°, 1 = 360°, 2 = 720°, etc.)
-  hCenter : 0.5,                         // where in the ramp the hue should be centered
+  hStartCenter : 0.5,                    // where in the ramp the hue should be centered
   hEasing : (x, fr) => x,                // hue easing function
 
   sRange  : [0.4, 0.35],                 // saturation range
@@ -68,14 +68,14 @@ Function returns an array of colors in HSL format (`[0…360,0…1,0…1]`).
 
 - `total` int 3…∞           → Amount of base colors.
 - `hStart` float 0…360      → Starting point of the hue ramp. 0 Red, 180 Teal etc..
-- `hCenter`: float 0…1      → Center the hue in the color ramp.
+- `hStartCenter`: float 0…1      → Center the hue in the color ramp.
 - `hCycles` float -∞…0…+∞   → Number of hue cycles. (.5 = 180°, 1 = 360°, 2 = 720°, etc.)
 - `sRange` array [0…1,0…1]  → Saturation Range
 - `lRange` array [0…1,0…1]  → Lightness Range
 
 ##### Hue Start & Center
 
-The `hStart` sets the starting point of the hue ramp. The `hCenter` sets where in the hue in the ramp the  should be centered. If your ramp starts with a high or low lightness, you might want to center the hue in the middle of the ramp. Thats is way the default value for `hCenter` is `0.5`. (In the center of a given ramp).
+The `hStart` sets the starting point of the hue ramp. The `hStartCenter` sets where in the hue in the ramp the  should be centered. If your ramp starts with a high or low lightness, you might want to center the hue in the middle of the ramp. Thats is way the default value for `hStartCenter` is `0.5`. (In the center of a given ramp).
 
 ##### Easing Functions
 

dist/index.cjs

@@ -68,6 +68,10 @@ var generateHSLRampParams = {
     default: 1,
     props: { min: -1.25, max: 1.5, step: 1e-3 }
   },
+  hStartCenter: {
+    default: 0.5,
+    props: { min: 0, max: 1, step: 1e-3 }
+  },
   minLight: {
     default: 0.1,
     props: { min: 0, max: 1, step: 1e-3 }

dist/index.d.ts

@@ -39,6 +39,14 @@ export declare const generateHSLRampParams: {
             step: number;
         };
     };
+    hStartCenter: {
+        default: number;
+        props: {
+            min: number;
+            max: number;
+            step: number;
+        };
+    };
     minLight: {
         default: number;
         props: {

dist/index.html

@@ -923,6 +923,7 @@ <h2>Color Properties</h2>
         return {...{
           total: 5 + Math.floor(Math.random() * 5),
           hStart: Math.random() * 360,
+          hStartCenter: .5,
           hEasing: easingFunctions['linear'],
           hCycles: Math.random() * 1.25,
           sRange: [
@@ -1373,6 +1374,7 @@ <h2>Color Properties</h2>
           total: PARAMS.total,
           hStart: PARAMS.hStart,
           hCycles: PARAMS.hCycles,
+          hStartCenter: PARAMS.hStartCenter,
           hEasing: typeof PARAMS.hEasing === 'string' ? easingFunctions[PARAMS.hEasing] : PARAMS.hEasing,
           sRange: [PARAMS.minSaturation, PARAMS.maxSaturation],
           sEasing: typeof PARAMS.sEasing === 'string' ? easingFunctions[PARAMS.sEasing] : PARAMS.sEasing,

dist/index.js

@@ -70,6 +70,10 @@ var rampensau = (() => {
       default: 1,
       props: { min: -1.25, max: 1.5, step: 1e-3 }
     },
+    hStartCenter: {
+      default: 0.5,
+      props: { min: 0, max: 1, step: 1e-3 }
+    },
     minLight: {
       default: 0.1,
       props: { min: 0, max: 1, step: 1e-3 }

dist/index.min.cjs

@@ -1 +1 @@
-var x=Object.defineProperty;var M=n=>x(n,"__esModule",{value:!0});var y=(n,e)=>{M(n);for(var r in e)x(n,r,{get:e[r],enumerable:!0})};y(exports,{generateHSLRamp:()=>E,generateHSLRampParams:()=>L,hslColorsToCSS:()=>V,map:()=>d,scaleVector:()=>h});function E({total:n=9,hStart:e=Math.random()*360,hStartCenter:r=.5,hEasing:t=u=>Math.pow(u,2),hCycles:m=1,sRange:p=[.4,.35],sEasing:s=u=>Math.pow(u,2),lRange:o=[Math.random()*.1,.9],lEasing:b=u=>Math.pow(u,1.5)}={}){let u=o[1]-o[0],i=p[1]-p[0];return new Array(n).fill(0).map((C,a)=>{let f=a/(n-1);return[(360+e+(1-t(f,1/n)-r)*(360*m))%360,p[0]+i*s(f,1/n),o[0]+u*b(f,1/n)]})}function d(n,e,r,t,m){return(n-e)/(r-e)*(m-t)+t}function h(n,e=[[0,360],[0,1],[0,1]],r=[[0,360],[0,100],[0,100]]){return n.map((t,m)=>{var p,s,o,b;return d(t,((p=e==null?void 0:e[m])==null?void 0:p[0])||0,((s=e==null?void 0:e[m])==null?void 0:s[1])||1,((o=r==null?void 0:r[m])==null?void 0:o[0])||0,((b=r==null?void 0:r[m])==null?void 0:b[1])||100)})}function V(n){return n.map(e=>{let[r,t,m]=h(e);return`hsl(${r}, ${t}%, ${m}%)`})}var L={hStart:{default:0,props:{min:0,max:360,step:.1}},hCycles:{default:1,props:{min:-1.25,max:1.5,step:.001}},minLight:{default:.1,props:{min:0,max:1,step:.001}},maxLight:{default:.9,props:{min:0,max:1,step:.001}},total:{default:5,props:{min:4,max:50,step:1}},minSaturation:{default:.4,props:{min:0,max:1,step:.001}},maxSaturation:{default:.35,props:{min:0,max:1,step:.001}}};
+var x=Object.defineProperty;var M=n=>x(n,"__esModule",{value:!0});var y=(n,e)=>{M(n);for(var r in e)x(n,r,{get:e[r],enumerable:!0})};y(exports,{generateHSLRamp:()=>E,generateHSLRampParams:()=>C,hslColorsToCSS:()=>V,map:()=>d,scaleVector:()=>h});function E({total:n=9,hStart:e=Math.random()*360,hStartCenter:r=.5,hEasing:t=u=>Math.pow(u,2),hCycles:m=1,sRange:p=[.4,.35],sEasing:o=u=>Math.pow(u,2),lRange:s=[Math.random()*.1,.9],lEasing:b=u=>Math.pow(u,1.5)}={}){let u=s[1]-s[0],i=p[1]-p[0];return new Array(n).fill(0).map((L,a)=>{let f=a/(n-1);return[(360+e+(1-t(f,1/n)-r)*(360*m))%360,p[0]+i*o(f,1/n),s[0]+u*b(f,1/n)]})}function d(n,e,r,t,m){return(n-e)/(r-e)*(m-t)+t}function h(n,e=[[0,360],[0,1],[0,1]],r=[[0,360],[0,100],[0,100]]){return n.map((t,m)=>{var p,o,s,b;return d(t,((p=e==null?void 0:e[m])==null?void 0:p[0])||0,((o=e==null?void 0:e[m])==null?void 0:o[1])||1,((s=r==null?void 0:r[m])==null?void 0:s[0])||0,((b=r==null?void 0:r[m])==null?void 0:b[1])||100)})}function V(n){return n.map(e=>{let[r,t,m]=h(e);return`hsl(${r}, ${t}%, ${m}%)`})}var C={hStart:{default:0,props:{min:0,max:360,step:.1}},hCycles:{default:1,props:{min:-1.25,max:1.5,step:.001}},hStartCenter:{default:.5,props:{min:0,max:1,step:.001}},minLight:{default:.1,props:{min:0,max:1,step:.001}},maxLight:{default:.9,props:{min:0,max:1,step:.001}},total:{default:5,props:{min:4,max:50,step:1}},minSaturation:{default:.4,props:{min:0,max:1,step:.001}},maxSaturation:{default:.35,props:{min:0,max:1,step:.001}}};

dist/index.min.mjs

@@ -1 +1 @@
-function h({total:e=9,hStart:n=Math.random()*360,hStartCenter:t=.5,hEasing:m=u=>Math.pow(u,2),hCycles:r=1,sRange:p=[.4,.35],sEasing:s=u=>Math.pow(u,2),lRange:a=[Math.random()*.1,.9],lEasing:i=u=>Math.pow(u,1.5)}={}){let u=a[1]-a[0],b=p[1]-p[0];return new Array(e).fill(0).map((d,f)=>{let o=f/(e-1);return[(360+n+(1-m(o,1/e)-t)*(360*r))%360,p[0]+b*s(o,1/e),a[0]+u*i(o,1/e)]})}function x(e,n,t,m,r){return(e-n)/(t-n)*(r-m)+m}function c(e,n=[[0,360],[0,1],[0,1]],t=[[0,360],[0,100],[0,100]]){return e.map((m,r)=>x(m,n?.[r]?.[0]||0,n?.[r]?.[1]||1,t?.[r]?.[0]||0,t?.[r]?.[1]||100))}function l(e){return e.map(n=>{let[t,m,r]=c(n);return`hsl(${t}, ${m}%, ${r}%)`})}var g={hStart:{default:0,props:{min:0,max:360,step:.1}},hCycles:{default:1,props:{min:-1.25,max:1.5,step:.001}},minLight:{default:.1,props:{min:0,max:1,step:.001}},maxLight:{default:.9,props:{min:0,max:1,step:.001}},total:{default:5,props:{min:4,max:50,step:1}},minSaturation:{default:.4,props:{min:0,max:1,step:.001}},maxSaturation:{default:.35,props:{min:0,max:1,step:.001}}};export{h as generateHSLRamp,g as generateHSLRampParams,l as hslColorsToCSS,x as map,c as scaleVector};
+function h({total:e=9,hStart:n=Math.random()*360,hStartCenter:t=.5,hEasing:m=u=>Math.pow(u,2),hCycles:r=1,sRange:p=[.4,.35],sEasing:s=u=>Math.pow(u,2),lRange:a=[Math.random()*.1,.9],lEasing:i=u=>Math.pow(u,1.5)}={}){let u=a[1]-a[0],b=p[1]-p[0];return new Array(e).fill(0).map((d,f)=>{let o=f/(e-1);return[(360+n+(1-m(o,1/e)-t)*(360*r))%360,p[0]+b*s(o,1/e),a[0]+u*i(o,1/e)]})}function x(e,n,t,m,r){return(e-n)/(t-n)*(r-m)+m}function c(e,n=[[0,360],[0,1],[0,1]],t=[[0,360],[0,100],[0,100]]){return e.map((m,r)=>x(m,n?.[r]?.[0]||0,n?.[r]?.[1]||1,t?.[r]?.[0]||0,t?.[r]?.[1]||100))}function l(e){return e.map(n=>{let[t,m,r]=c(n);return`hsl(${t}, ${m}%, ${r}%)`})}var S={hStart:{default:0,props:{min:0,max:360,step:.1}},hCycles:{default:1,props:{min:-1.25,max:1.5,step:.001}},hStartCenter:{default:.5,props:{min:0,max:1,step:.001}},minLight:{default:.1,props:{min:0,max:1,step:.001}},maxLight:{default:.9,props:{min:0,max:1,step:.001}},total:{default:5,props:{min:4,max:50,step:1}},minSaturation:{default:.4,props:{min:0,max:1,step:.001}},maxSaturation:{default:.35,props:{min:0,max:1,step:.001}}};export{h as generateHSLRamp,S as generateHSLRampParams,l as hslColorsToCSS,x as map,c as scaleVector};

dist/index.mjs

@@ -50,6 +50,10 @@ var generateHSLRampParams = {
     default: 1,
     props: { min: -1.25, max: 1.5, step: 1e-3 }
   },
+  hStartCenter: {
+    default: 0.5,
+    props: { min: 0, max: 1, step: 1e-3 }
+  },
   minLight: {
     default: 0.1,
     props: { min: 0, max: 1, step: 1e-3 }

dist/index.umd.js

@@ -80,6 +80,10 @@ var rampensau = (() => {
       default: 1,
       props: { min: -1.25, max: 1.5, step: 1e-3 }
     },
+    hStartCenter: {
+      default: 0.5,
+      props: { min: 0, max: 1, step: 1e-3 }
+    },
     minLight: {
       default: 0.1,
       props: { min: 0, max: 1, step: 1e-3 }

src/index.ts

@@ -95,6 +95,10 @@ export const generateHSLRampParams = {
     default: 1,
     props: { min: -1.25, max: 1.5, step: 0.001 },
   },
+  hStartCenter: {
+    default: 0.5,
+    props: { min: 0, max: 1, step: 0.001 },
+  },
   minLight: {
     default: 0.1,
     props: { min: 0, max: 1, step: 0.001 },