diff --git a/src/lib/yarns/sandnes/tynn-peer-gynt/colorways.ts b/src/lib/yarns/sandnes/tynn-peer-gynt/colorways.ts
new file mode 100644
index 0000000..04a3f94
--- /dev/null
+++ b/src/lib/yarns/sandnes/tynn-peer-gynt/colorways.ts
@@ -0,0 +1,214 @@
+import type { Colorway } from '$lib/types';
+
+const colorways: Colorway[] = [
+  {
+    source: {
+      name: 'sandnesgarn.no',
+      href: 'https://www.sandnesgarn.no/tynn-peer-gynt',
+      accessed: '2024-09-27',
+    },
+    colors: [
+      {
+        hex: '#f2ede1',
+        name: 'Hvit 1002',
+      },
+      {
+        hex: '#d8d7cc',
+        name: 'Lys Gråmelert 1021',
+      },
+      {
+        hex: '#c7c4ba',
+        name: 'Lys Gråmelert Med Natur Tweed 1034',
+      },
+      {
+        hex: '#96938b',
+        name: 'Gråmelert 1042',
+      },
+      {
+        hex: '#615f5b',
+        name: 'Mørk Gråmelert 1053',
+      },
+      {
+        hex: '#2c2b2a',
+        name: 'Koksmelert 1088',
+      },
+      {
+        hex: '#181719',
+        name: 'Svart 1099',
+      },
+      {
+        hex: '#e8c969',
+        name: 'Solgul 2016',
+      },
+      {
+        hex: '#d6c5b7',
+        name: 'Marsipan 2321',
+      },
+      {
+        hex: '#e8e1cd',
+        name: 'Natur Tweed2523',
+      },
+      {
+        hex: '#dbd0c3',
+        name: 'Naturmelert 2641',
+      },
+      {
+        hex: '#b9ada1',
+        name: 'Gråbeige Melert 2650',
+      },
+      {
+        hex: '#71635d',
+        name: 'Mellombrun Melert 2652',
+      },
+      {
+        hex: '#c6bbae',
+        name: 'Gråbeige Tweed 2655',
+      },
+      {
+        hex: '#ab5f32',
+        name: 'Cognac 2745',
+      },
+      {
+        hex: '#5f4433',
+        name: 'Sjokolade 3073',
+      },
+      {
+        hex: '#f3dace',
+        name: 'Ballet Tutu 3509',
+      },
+      {
+        hex: '#a96754',
+        name: 'Lys Kobberbrun 3535',
+      },
+      {
+        hex: '#393335',
+        name: 'Bristol Black 3800',
+      },
+      {
+        hex: '#d74c37',
+        name: 'Spicy Orange 3819',
+      },
+      {
+        hex: '#473a36',
+        name: 'Mørk Sjokolade 3880',
+      },
+      {
+        hex: '#ce5052',
+        name: 'Poppy 4008',
+      },
+      {
+        hex: '#be3030',
+        name: 'Scarlet Red 4018',
+      },
+      {
+        hex: '#f3bbb6',
+        name: 'Blossom 4213',
+      },
+      {
+        hex: '#991e2c',
+        name: 'Rød 4219',
+      },
+      {
+        hex: '#7d2328',
+        name: 'Dyp Rød 4236',
+      },
+      {
+        hex: '#842135',
+        name: 'Rumba Red 4255',
+      },
+      {
+        hex: '#ec849a',
+        name: 'Bubblegum Pink 4315',
+      },
+      {
+        hex: '#962b58',
+        name: 'Jazzy Pink 4600',
+      },
+      {
+        hex: '#d2a6c1',
+        name: 'Rosa Peon 4623',
+      },
+      {
+        hex: '#bb5f86',
+        name: 'Magenta 4628',
+      },
+      {
+        hex: '#a78496',
+        name: 'Rosa Lavendel 4632',
+      },
+      {
+        hex: '#4c2b43',
+        name: 'Bjørnebærsaft 4672',
+      },
+      {
+        hex: '#ddb9d1',
+        name: 'Pink Lilac 4813',
+      },
+      {
+        hex: '#c3acc5',
+        name: 'Lilac 5023',
+      },
+      {
+        hex: '#1b1d31',
+        name: 'Marine 5575',
+      },
+      {
+        hex: '#d0dadf',
+        name: 'Arctic Ice 5811',
+      },
+      {
+        hex: '#2d4c99',
+        name: 'Dazzling Blue 5845',
+      },
+      {
+        hex: '#8b9eb7',
+        name: 'Blå Hortensia 6032',
+      },
+      {
+        hex: '#5c7caa',
+        name: 'Regatta Blå 6044',
+      },
+      {
+        hex: '#1d448d',
+        name: 'Jolly Blue 6046',
+      },
+      {
+        hex: '#64afc1',
+        name: 'Turkis 6315',
+      },
+      {
+        hex: '#293f3d',
+        name: 'Dyp Petrol 7281',
+      },
+      {
+        hex: '#2e3f32',
+        name: 'Skoggrønn 8082',
+      },
+      {
+        hex: '#9cb587',
+        name: 'Spring Green 8733',
+      },
+      {
+        hex: '#f7e287',
+        name: 'Lemon 9004',
+      },
+      {
+        hex: '#434b48',
+        name: 'Urban Chic 9080',
+      },
+      {
+        hex: '#4a4d3a',
+        name: 'Mørk Grønnmelert 9572',
+      },
+      {
+        hex: '#c1b467',
+        name: 'Sunny Lime 9825',
+      },
+      {
+        hex: '#605539',
+        name: 'Dark Olive 9873',
+      },
+    ],
+  },
+];
+export default colorways;
diff --git a/src/lib/yarns/sandnes/tynn-peer-gynt/yarn.ts b/src/lib/yarns/sandnes/tynn-peer-gynt/yarn.ts
new file mode 100644
index 0000000..87d3f2f
--- /dev/null
+++ b/src/lib/yarns/sandnes/tynn-peer-gynt/yarn.ts
@@ -0,0 +1,9 @@
+import type { Yarn } from '$lib/types';
+import colorways from './colorways';
+
+export const yarn: Yarn = {
+  colorways,
+  id: 'tynn_peer_gynt',
+  name: 'Tynn Peer Gynt',
+  weightId: 'f',
+};
diff --git a/src/routes/.dev-tools/+layout.js b/src/routes/.dev-tools/+layout.js
new file mode 100644
index 0000000..d43d0cd
--- /dev/null
+++ b/src/routes/.dev-tools/+layout.js
@@ -0,0 +1 @@
+export const prerender = false;
diff --git a/src/routes/.dev-tools/extract-yarn-colorways/+page.svelte b/src/routes/.dev-tools/extract-yarn-colorways/+page.svelte
new file mode 100644
index 0000000..0fc0060
--- /dev/null
+++ b/src/routes/.dev-tools/extract-yarn-colorways/+page.svelte
@@ -0,0 +1,287 @@
+<script lang="ts">
+  import { browser, dev } from '$app/environment';
+  import AppLogo from '$lib/components/AppLogo.svelte';
+  import AppShell from '$lib/components/AppShell.svelte';
+  import Expand from '$lib/components/Expand.svelte';
+  import Footer from '$lib/components/Footer.svelte';
+  import ToggleSwitch from '$lib/components/buttons/ToggleSwitch.svelte';
+  import { getTextColor } from '$lib/utils';
+  import chroma from 'chroma-js';
+  import { onMount } from 'svelte';
+
+  let content: string = '';
+  let showClearButton = false;
+
+  $: querySelector = '';
+  $: useElementAttribute = false;
+  $: querySelectorAttribute = '';
+  $: excludeBefore = false;
+  $: excludeBeforeString = '';
+  $: excludeAfter = false;
+  $: excludeAfterString = '';
+  $: removeNumbers = true;
+
+  let mounted = false;
+
+  onMount(() => {
+    if (localStorage.getItem('[/.dev-tools]querySelector') !== 'null')
+      querySelector = localStorage.getItem('[/.dev-tools]querySelector');
+    if (localStorage.getItem('[/.dev-tools]useElementAttribute') !== 'null')
+      useElementAttribute = localStorage.getItem(
+        '[/.dev-tools]useElementAttribute',
+      );
+    if (localStorage.getItem('[/.dev-tools]content') !== 'null')
+      content = JSON.parse(localStorage.getItem('[/.dev-tools]content'));
+    if (
+      localStorage.getItem('[/.dev-tools]names') !== 'null' &&
+      localStorage.getItem('[/.dev-tools]names') !== '[]'
+    )
+      names = JSON.parse(localStorage.getItem('[/.dev-tools]names'));
+
+    mounted = true;
+  });
+
+  $: names = [];
+
+  $: data = { querySelector, content, names };
+  $: data, setLocalStorage();
+
+  $: htmlObject = createHTMLObject(content);
+
+  function setLocalStorage() {
+    if (!browser || !mounted) return;
+    localStorage.setItem('[/.dev-tools]querySelector', querySelector);
+    localStorage.setItem(
+      '[/.dev-tools]useElementAttribute',
+      useElementAttribute,
+    );
+    localStorage.setItem('[/.dev-tools]content', JSON.stringify(content));
+    if (names)
+      localStorage.setItem('[/.dev-tools]names', JSON.stringify(names));
+  }
+
+  function createHTMLObject(content: string) {
+    if (!browser) return;
+    const html = document.createElement('div');
+    html.innerHTML = content;
+    return html;
+  }
+
+  async function getNames() {
+    // const fac = new FastAverageColor();
+    names = [];
+    let i = 1;
+    for (const element of [...htmlObject.querySelectorAll(querySelector)]) {
+      let name = useElementAttribute
+        ? element.getAttribute(querySelectorAttribute)
+        : element.innerText;
+      if (excludeBefore)
+        name = name.substring(
+          name.indexOf(excludeBeforeString) + excludeBeforeString?.length,
+        );
+      if (excludeAfter)
+        name = name.substring(0, name.indexOf(excludeAfterString));
+      name = name.toLowerCase(); // lowercase everything
+      name = name.replaceAll('\n', ' '); // remove new lines
+      name = name.replaceAll('  ', ''); // remove multiple spaces
+      if (removeNumbers) name = name.replace(/[0-9]/g, '');
+      name = name.trim(); // trim whitespace
+      name = name.split(' '); // split words
+      for (let i = 0; i < name?.length; i++) {
+        if (name[i]?.length !== 0) {
+          name[i] = name[i][0].toUpperCase() + name[i].substr(1); // capitalize first letter of each word
+        }
+      }
+      name = name.join(' '); // join words into one string
+
+      let colorHex = '';
+      // colorHex = chroma(color.hex).hex();
+      // await fac
+      //     .getColorAsync(encodeURIComponent(`/images/Layer ${i}.png`))
+      //     .then((color) => {
+      //     })
+      //     .catch((e) => {
+      //         // console.log(e);
+      //     });
+      names.push({ name, hex: colorHex });
+      i = Number(i);
+      i++;
+    }
+    names = names;
+  }
+</script>
+
+<svelte:head>
+  <title>Extract Yarn Colorways</title>
+  <meta name="description" content="Extract Yarn Colorways" />
+  <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" /> -->
+  <meta property="og:title" content="Extract Yarn Colorways" />
+  <meta property="og:description" content="Extract Yarn Colorways" />
+  <!-- <meta property="og:url" content="https://temperature-blanket.com" />
+    <meta property="og:type" content="website" />
+    <meta property="og:image" content="https://temperature-blanket.com/images/temperature-blanket-og-image-1.748.jpg" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" /> -->
+</svelte:head>
+
+<AppShell pageName="Extract Yarn Colorways">
+  <svelte:fragment slot="stickyHeader">
+    <div class="hidden lg:inline-flex mx-auto"><AppLogo /></div>
+  </svelte:fragment>
+  <main slot="main" class="max-w-screen-xl px-2 lg:px-0 text-left">
+    {#if dev}
+      <h2 class="text-3xl my-2 font-cursive">Input</h2>
+
+      <div class="px-2 flex flex-col gap-4">
+        <label class="text-sm"
+          >Paste HTML Here
+          <textarea
+            class="w-full grow textarea shadow-inner border-none"
+            bind:value={content}
+            rows="5"
+          />
+        </label>
+
+        <div class="tex-left flex flex-col items-start">
+          <label class="text-sm pl-[12px]">
+            Element Query Selector
+            <input
+              type="text"
+              placeholder="e.g., a, .description"
+              class="w-full grow bg-surface-50 placeholder-surface-400 dark:placeholder-surface-500 rounded-full cursor-text text-surface-800 dark:text-surface-50 shadow-inner dark:bg-surface-800 border-none"
+              bind:value={querySelector}
+            />
+          </label>
+        </div>
+
+        <div>
+          <ToggleSwitch bind:checked={removeNumbers} label="Remove Numbers" />
+        </div>
+
+        <div>
+          <ToggleSwitch
+            bind:checked={useElementAttribute}
+            label="Use Element Attribute"
+          />
+
+          {#if useElementAttribute}
+            <div class="tex-left flex flex-col items-start">
+              <label class="text-sm pl-[12px]">
+                Element Attribute
+                <input
+                  type="text"
+                  placeholder="e.g., title, data-name"
+                  class="w-full grow bg-surface-50 placeholder-surface-400 dark:placeholder-surface-500 rounded-full cursor-text text-surface-800 dark:text-surface-50 shadow-inner dark:bg-surface-800 border-none"
+                  bind:value={querySelectorAttribute}
+                />
+              </label>
+            </div>
+          {/if}
+        </div>
+
+        <div>
+          <ToggleSwitch bind:checked={excludeBefore} label="Exclude Before" />
+          {#if excludeBefore}
+            <div class="tex-left flex flex-col items-start">
+              <label class="text-sm pl-[12px]">
+                Exclude Before
+                <input
+                  type="text"
+                  class="w-full grow bg-surface-50 placeholder-surface-800 dark:placeholder-white rounded-full cursor-text text-surface-800 dark:text-surface-50 shadow-inner dark:bg-surface-800 border-none"
+                  bind:value={excludeBeforeString}
+                />
+              </label>
+            </div>
+          {/if}
+        </div>
+
+        <div>
+          <ToggleSwitch bind:checked={excludeAfter} label="Exclude After" />
+          {#if excludeAfter}
+            <div class="tex-left flex flex-col items-start">
+              <label class="text-sm pl-[12px]">
+                Exclude After
+                <input
+                  type="text"
+                  class="w-full grow bg-surface-50 placeholder-surface-800 dark:placeholder-white rounded-full cursor-text text-surface-800 dark:text-surface-50 shadow-inner dark:bg-surface-800 border-none"
+                  bind:value={excludeAfterString}
+                />
+              </label>
+            </div>
+          {/if}
+        </div>
+
+        <h2 class="text-3xl my-2 font-cursive">Output</h2>
+
+        <div class="">
+          <button
+            class="btn variant-filled-primary"
+            on:click={async () => await getNames()}
+            disabled={querySelector === '' || content === ''}
+            >Get Colorway Names</button
+          >
+          <Expand
+            bind:isExpanded={showClearButton}
+            less="Hide Clear Button"
+            more="Show Clear Button"
+          />
+          {#if showClearButton}
+            <button
+              class="btn variant-filled-primary"
+              on:click={() => (names = [])}>Clear</button
+            >
+          {/if}
+        </div>
+
+        {#if names?.length}
+          <p>{names.length} Colorways</p>
+          <div
+            class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 justify-start"
+          >
+            {#each names as { name, hex }, index}
+              <div
+                class="p-2 flex flex-col gap-1 shadow min-w-[100px]"
+                style="background:{hex};color:{getTextColor(hex)}"
+              >
+                <p class="text-sm">{index + 1}</p>
+                <div contenteditable="true" bind:innerHTML={name} class="">
+                  {name}
+                </div>
+                <div contenteditable="true" bind:innerHTML={hex} class="">
+                  {hex}
+                </div>
+              </div>
+            {/each}
+          </div>
+          <div>
+            <button
+              class="btn variant-filled-primary"
+              on:click={() => {
+                let namesToCopy = names.map((n) => {
+                  return {
+                    hex: chroma.valid(n.hex)
+                      ? chroma(n.hex).hex().toLowerCase()
+                      : '',
+                    name: n.name,
+                  };
+                });
+                window.navigator.clipboard.writeText(
+                  JSON.stringify(namesToCopy),
+                );
+                console.log(namesToCopy);
+              }}
+            >
+              Copy to Clipboard As Array
+            </button>
+          </div>
+        {/if}
+      </div>
+    {:else}
+      <div class="mb-4">
+        <p class="font-ornament text-8xl my-12">d</p>
+        <p class="">This page is not available to you.</p>
+      </div>
+    {/if}
+  </main>
+  <Footer slot="footer" />
+</AppShell>