diff --git a/makeAllGlobs.js b/makeAllGlobs.js
new file mode 100644
index 0000000..d39d2dd
--- /dev/null
+++ b/makeAllGlobs.js
@@ -0,0 +1,51 @@
+const Jimp = require("jimp")
+
+let base, bottom, middle, top
+
+async function generateGlob(hue) {
+
+  const constructed = await base
+      .clone()
+      .composite(
+        bottom.clone().color([
+          {apply: 'hue', params: [hue]}
+        ]),
+        0,
+        0,
+        { mode: Jimp.BLEND_SOURCE_OVER }
+      )
+      .composite(
+        middle.clone().color([
+          {apply: 'hue', params: [hue]}
+        ]),
+        0,
+        0,
+        { mode: Jimp.BLEND_SOURCE_OVER }
+      )
+      .composite(
+        top.clone().color([
+          {apply: 'hue', params: [hue]}
+        ]),
+        0,
+        0,
+        { mode: Jimp.BLEND_SOURCE_OVER }
+      )
+    return constructed
+}
+
+async function main() {
+  base = await Jimp.read('./web/public/img/base.png')
+  bottom = await Jimp.read('./web/public/img/bottom.png')
+  middle = await Jimp.read('./web/public/img/middle.png')
+  top = await Jimp.read('./web/public/img/top.png')
+  for (let i=0; i<1800; i++) {
+    if ( i%100 === 0) {
+      process.stdout.write('x')
+    } else { process.stdout.write('.') }
+    const hue = i/5
+    const result = await generateGlob(hue)
+    await result.write('./allGlobs/' + i + '.png')
+  }
+}
+
+main()
diff --git a/package.json b/package.json
index b40911c..92437bb 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
   "packageManager": "yarn@3.6.1",
   "dependencies": {
     "browserify-zlib": "^0.2.0",
+    "color-convert": "^2.0.1",
     "https-browserify": "^1.0.0",
     "jimp": "^0.16.2",
     "js-file-download": "^0.4.12",
diff --git a/saturationBoost.js b/saturationBoost.js
new file mode 100644
index 0000000..fe8a416
--- /dev/null
+++ b/saturationBoost.js
@@ -0,0 +1,52 @@
+const Jimp = require("jimp")
+
+let base, bottom, middle, top
+
+async function generateGlob(hue, satBoost) {
+
+  const constructed = await base
+      .clone()
+      .composite(
+        bottom.clone().color([
+          {apply: 'hue', params: [hue]}, {apply: 'saturate', params: [satBoost]}
+        ]),
+        0,
+        0,
+        { mode: Jimp.BLEND_SOURCE_OVER }
+      )
+      .composite(
+        middle.clone().color([
+          {apply: 'hue', params: [hue]}, {apply: 'saturate', params: [satBoost]}
+        ]),
+        0,
+        0,
+        { mode: Jimp.BLEND_SOURCE_OVER }
+      )
+      .composite(
+        top.clone().color([
+          {apply: 'hue', params: [hue]}, {apply: 'saturate', params: [satBoost]}
+        ]),
+        0,
+        0,
+        { mode: Jimp.BLEND_SOURCE_OVER }
+      )
+    return constructed
+}
+
+async function main() {
+  base = await Jimp.read('./web/public/img/base.png')
+  bottom = await Jimp.read('./web/public/img/bottom.png')
+  middle = await Jimp.read('./web/public/img/middle.png')
+  top = await Jimp.read('./web/public/img/top.png')
+  for (let i=0; i<1800; i++) {
+    if ( i%100 === 0) {
+      process.stdout.write('x')
+    } else { process.stdout.write('.') }
+    const hue = i/5
+    const satBoost = i % 100
+    const result = await generateGlob(hue,satBoost)
+    await result.write('./allGlobs/' + i + '.png')
+  }
+}
+
+main()
diff --git a/web/src/pages/HomePage/HomePage.tsx b/web/src/pages/HomePage/HomePage.tsx
index 0ff1d06..f75dbba 100644
--- a/web/src/pages/HomePage/HomePage.tsx
+++ b/web/src/pages/HomePage/HomePage.tsx
@@ -19,10 +19,12 @@ import {
 
 import Jimp from 'jimp'
 import fileDownload from 'js-file-download'
+import convert from 'color-convert'
 
 const HomePage = () => {
 
   const [h, setH] = useState(100.0)
+  const [s, setS] = useState(0)
   const [iconB64, setIconB64] = useState("data:image/png;base64,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AAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAMIAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAMIAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACABhAAAAMIAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACABhAAAAMIAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAMIASAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEAAAAwgAgAEEADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEAAAAwgAgAEEADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEAAAAwgAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEAAAAwgAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAMIAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAMIAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACABhAAAAMIAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACABhAAAAMIAAABhAAAAMIAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAMIASAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEAAAAwgAgAEEADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEAAAAwgAgAEEADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEAAAAwgAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEAAAAwgAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAAAGEADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAIABBADAAAIAYAABADCAAAAYQAAADCAAAAYQAAADCACAAQQAwAACAGAAAQAwgAAAGEAAAAwgAMA9C1TgCKSLscS8AAAAAElFTkSuQmCC")
   let base, bottom, middle, top
 
@@ -33,7 +35,7 @@ const HomePage = () => {
       bottom = await Jimp.read('/img/bottom.png')
       middle = await Jimp.read('/img/middle.png')
       top = await Jimp.read('/img/top.png')
-      updateIcon(h).then( (val) => {
+      updateIcon(h, s).then( (val) => {
         setIconB64(val)
       })
     }
@@ -41,13 +43,13 @@ const HomePage = () => {
   }, [])
 
   useEffect(() => {
-    updateIcon(h).then( (string) => {
+    updateIcon(h, s).then( (string) => {
       console.log("Changing iconB64")
       setIconB64(string)
       })
-  }, [h])
+  }, [h, s])
   
-  const updateIcon = async (hue) => {
+  const updateIcon = async (hue, sat) => {
     const base = await Jimp.read('/img/base.png')
     const bottom = await Jimp.read('/img/bottom.png')
     const middle = await Jimp.read('/img/middle.png')
@@ -55,25 +57,31 @@ const HomePage = () => {
     const constructed = await base
       .clone()
       .composite(
-        bottom.color([
-          {apply: 'hue', params: [hue]}
-        ]),
+        bottom
+          .color([
+            {apply: 'hue', params: [hue]},
+            {apply: 'saturate', params: [sat]}
+          ]),
         0,
         0,
         { mode: Jimp.BLEND_SOURCE_OVER }
       )
       .composite(
-        middle.color([
-          {apply: 'hue', params: [hue]}
-        ]),
+        middle
+          .color([
+            {apply: 'hue', params: [hue]},
+            {apply: 'saturate', params: [sat]}
+          ]),
         0,
         0,
         { mode: Jimp.BLEND_SOURCE_OVER }
       )
       .composite(
-        top.color([
-          {apply: 'hue', params: [hue]}
-        ]),
+        top
+          .color([
+            {apply: 'hue', params: [hue]},
+            {apply: 'saturate', params: [sat]}
+          ]),
         0,
         0,
         { mode: Jimp.BLEND_SOURCE_OVER }
@@ -92,6 +100,15 @@ const HomePage = () => {
     })
   }
 
+  function gradient(hue) {
+    const offset = 210
+    const start = convert.hsv.hex((hue + offset) % 360, 27.3, 64.7)
+    const end = convert.hsv.hex((hue + offset) % 360, 100, 100)
+    const string = 'linear(to-r, #' + start + ', #' + end + ')'
+    console.log(string)
+    return string
+  }
+
   return (
     <>
       <MetaTags title="Home" description="Home page" />
@@ -132,6 +149,18 @@ const HomePage = () => {
                 <SliderThumb />
               </Slider>
             </Center>
+            <Center id="hues" h='40px' w='490px' bgGradient={ gradient(h) }>
+              <Slider 
+                aria-label='slider-ex-1'
+                defaultValue={ s }
+                min={0} max={100} step={1}
+                onChangeEnd={(val) => setS(val)}
+              >
+                <SliderTrack>
+                </SliderTrack>
+                <SliderThumb />
+              </Slider>
+            </Center>
             <Flex>
               <Square size='104px' bg='teal'>
                 <Image