diff --git a/package.json b/package.json
index cf0bbb82..ff5c7896 100644
--- a/package.json
+++ b/package.json
@@ -41,9 +41,8 @@
   "dependencies": {
     "@google/generative-ai": "^0.1.1",
     "chroma-js": "^2.4.2",
-    "color-blind": "^0.1.3",
     "color-namer": "^1.4.0",
-    "colorjs.io": "^0.4.5",
+    "colorjs.io": "^0.5.0",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
     "fracturedjsonjs": "^3.1.0",
diff --git a/src/controls/AdjustColor.svelte b/src/controls/AdjustColor.svelte
index 3427b5c8..6ab702de 100644
--- a/src/controls/AdjustColor.svelte
+++ b/src/controls/AdjustColor.svelte
@@ -34,12 +34,12 @@
     {
       name: "Saturate",
       effect: (color) =>
-        color.toColorIO().set("lch.c", (c) => clamp(c ? c * 1.2 : 5, 0, 150))
+        color.toColorIO().set("hsl.s", (c) => clamp(c ? c * 1.2 : 5, 0, 100))
           .coords,
     },
     {
       name: "Desaturate",
-      effect: (color) => color.toColorIO().set("lch.c", (c) => c * 0.8).coords,
+      effect: (color) => color.toColorIO().set("hsl.s", (c) => c * 0.8).coords,
     },
     {
       name: "Convert To Opposing",
diff --git a/src/lib/Color.ts b/src/lib/Color.ts
index e357cc95..0d50bba3 100644
--- a/src/lib/Color.ts
+++ b/src/lib/Color.ts
@@ -5,22 +5,22 @@ type Channels = [number, number, number];
 const hexCache = new Map<string, string>();
 const stringChannelsCache = new Map<string, Channels>();
 export class Color {
-  name: string = "";
+  static name: string = "";
   channels: Record<string, number> = {};
   spaceName: keyof typeof colorDirectory = "rgb";
-  domains: Domain;
-  stepSize: Channels = [1, 1, 1];
-  channelNames: string[] = [];
-  dimensionToChannel: Record<"x" | "y" | "z", string> = { x: "", y: "", z: "" };
+  static domains: Domain;
+  static stepSize: Channels = [1, 1, 1];
+  static channelNames: string[] = [];
+  static dimensionToChannel: Record<"x" | "y" | "z", string> = {
+    x: "",
+    y: "",
+    z: "",
+  };
   axisLabel: (num: number) => string = (x) => x.toFixed(1).toString();
   isPolar = false;
   cachedColorIO: ColorIO | null = null;
   cachedInGamut: boolean | null = null;
 
-  constructor() {
-    this.domains = {};
-  }
-
   toHex(): string {
     const str = this.toString();
     if (hexCache.has(str)) {
@@ -218,13 +218,13 @@ function stringToChannels(spaceName: string, str: string) {
 }
 
 class CIELAB extends Color {
-  name = "CIELAB";
-  channelNames = ["L", "a", "b"];
+  static name = "CIELAB";
+  static channelNames = ["L", "a", "b"];
   channels = { L: 0, a: 0, b: 0 };
-  domains = { L: [100, 0], a: [-125, 125], b: [125, -125] } as Domain;
+  static domains = { L: [100, 0], a: [-125, 125], b: [125, -125] } as Domain;
   spaceName = "lab" as const;
-  stepSize: Channels = [1, 1, 1];
-  dimensionToChannel = { x: "a", y: "b", z: "L" };
+  static stepSize: Channels = [1, 1, 1];
+  static dimensionToChannel = { x: "a", y: "b", z: "L" };
   axisLabel = (num: number) => `${Math.round(num)}`;
 
   toString(): string {
@@ -237,13 +237,13 @@ class CIELAB extends Color {
   }
 }
 class HSV extends Color {
-  name = "HSV";
-  channelNames = ["h", "s", "v"];
+  static name = "HSV";
+  static channelNames = ["h", "s", "v"];
   isPolar = true;
   channels = { h: 0, s: 0, v: 0 };
-  domains = { h: [0, 360], s: [0, 100], v: [100, 0] } as Domain;
+  static domains = { h: [0, 360], s: [0, 100], v: [100, 0] } as Domain;
   spaceName = "hsv" as const;
-  dimensionToChannel = { x: "s", y: "h", z: "v" };
+  static dimensionToChannel = { x: "s", y: "h", z: "v" };
   toString(): string {
     const [h, s, v] = this.stringChannels();
     return `color(hsv ${h} ${s} ${v})`;
@@ -255,13 +255,13 @@ class HSV extends Color {
 }
 
 class RGB extends Color {
-  name = "RGB";
-  channelNames = ["r", "g", "b"];
+  static name = "RGB";
+  static channelNames = ["r", "g", "b"];
   channels = { r: 0, g: 0, b: 0 };
   spaceName = "srgb" as const;
-  domains = { r: [0, 255], g: [0, 255], b: [0, 255] } as Domain;
-  stepSize: Channels = [1, 1, 1];
-  dimensionToChannel = { x: "g", y: "b", z: "r" };
+  static domains = { r: [0, 255], g: [0, 255], b: [0, 255] } as Domain;
+  static stepSize: Channels = [1, 1, 1];
+  static dimensionToChannel = { x: "g", y: "b", z: "r" };
   axisLabel = (num: number) => `${Math.round(num)}`;
   toString(): string {
     const [r, g, b] = this.stringChannels();
@@ -274,13 +274,13 @@ class RGB extends Color {
 }
 
 class SRGB extends Color {
-  name = "sRGB";
-  channelNames = ["r", "g", "b"];
+  static name = "sRGB";
+  static channelNames = ["r", "g", "b"];
   channels = { r: 0, g: 0, b: 0 };
   spaceName = "srgb" as const;
-  domains = { r: [0, 1], g: [0, 1], b: [0, 1] } as Domain;
-  stepSize: Channels = [0.01, 0.01, 0.01];
-  dimensionToChannel = { x: "g", y: "b", z: "r" };
+  static domains = { r: [0, 1], g: [0, 1], b: [0, 1] } as Domain;
+  static stepSize: Channels = [0.01, 0.01, 0.01];
+  static dimensionToChannel = { x: "g", y: "b", z: "r" };
   axisLabel = (num: number) => `${Math.round(num)}`;
   toString(): string {
     const [r, g, b] = this.stringChannels();
@@ -293,13 +293,13 @@ class SRGB extends Color {
 }
 
 class HSL extends Color {
-  name = "HSL";
-  channelNames = ["h", "s", "l"];
+  static name = "HSL";
+  static channelNames = ["h", "s", "l"];
   channels = { h: 0, s: 0, l: 0 };
   spaceName = "hsl" as const;
-  domains = { h: [0, 360], s: [0, 100], l: [100, 0] } as Domain;
-  stepSize: Channels = [1, 1, 1];
-  dimensionToChannel = { x: "s", y: "h", z: "l" };
+  static domains = { h: [0, 360], s: [0, 100], l: [100, 0] } as Domain;
+  static stepSize: Channels = [1, 1, 1];
+  static dimensionToChannel = { x: "s", y: "h", z: "l" };
   isPolar = true;
 
   toString(): string {
@@ -312,45 +312,45 @@ class HSL extends Color {
   }
 }
 class LCH extends Color {
-  name = "LCH";
-  channelNames = ["l", "c", "h"];
+  static name = "LCH";
+  static channelNames = ["l", "c", "h"];
   channels = { l: 0, c: 0, h: 0 };
   spaceName = "lch" as const;
-  domains = { l: [100, 0], c: [0, 120], h: [360, 0] } as Domain;
-  stepSize: Channels = [1, 1, 1];
-  dimensionToChannel = { x: "c", y: "h", z: "l" };
+  static domains = { l: [100, 0], c: [0, 120], h: [360, 0] } as Domain;
+  static stepSize: Channels = [1, 1, 1];
+  static dimensionToChannel = { x: "c", y: "h", z: "l" };
   isPolar = true;
   axisLabel = (num: number) => `${Math.round(num)}`;
 }
 
 class OKLAB extends Color {
-  name = "OKLAB";
-  channelNames = ["l", "a", "b"];
+  static name = "OKLAB";
+  static channelNames = ["l", "a", "b"];
   channels = { l: 0, a: 0, b: 0 };
   spaceName = "oklab" as const;
-  domains = { l: [1, 0], a: [-0.4, 0.4], b: [0.4, -0.4] } as Domain;
-  stepSize: Channels = [0.01, 0.01, 0.01];
-  dimensionToChannel = { x: "a", y: "b", z: "l" };
+  static domains = { l: [1, 0], a: [-0.4, 0.4], b: [0.4, -0.4] } as Domain;
+  static stepSize: Channels = [0.01, 0.01, 0.01];
+  static dimensionToChannel = { x: "a", y: "b", z: "l" };
 }
 
 class OKLCH extends Color {
-  name = "OKLCH";
-  channelNames = ["l", "c", "h"];
+  static name = "OKLCH";
+  static channelNames = ["l", "c", "h"];
   channels = { l: 0, c: 0, h: 0 };
   spaceName = "oklch" as const;
-  domains = { l: [1, 0], c: [0, 0.4], h: [360, 0] } as Domain;
-  stepSize: Channels = [0.01, 0.01, 1];
-  dimensionToChannel = { x: "c", y: "h", z: "l" };
+  static domains = { l: [1, 0], c: [0, 0.4], h: [360, 0] } as Domain;
+  static stepSize: Channels = [0.01, 0.01, 1];
+  static dimensionToChannel = { x: "c", y: "h", z: "l" };
 }
 
 class JZAZBZ extends Color {
-  name = "JZAZBZ";
-  channelNames = ["jz", "az", "bz"];
+  static name = "JZAZBZ";
+  static channelNames = ["jz", "az", "bz"];
   channels = { jz: 0, az: 0, bz: 0 };
   spaceName = "jzazbz" as const;
-  domains = { jz: [1, 0], az: [-0.5, 0.5], bz: [0.5, -0.5] } as Domain;
-  stepSize: Channels = [0.01, 0.01, 0.01];
-  dimensionToChannel = { x: "az", y: "bz", z: "jz" };
+  static domains = { jz: [1, 0], az: [-0.5, 0.5], bz: [0.5, -0.5] } as Domain;
+  static stepSize: Channels = [0.01, 0.01, 0.01];
+  static dimensionToChannel = { x: "az", y: "bz", z: "jz" };
 
   toString(): string {
     const [jz, az, bz] = Object.values(this.channels);
@@ -428,26 +428,27 @@ type ColorSpace = keyof typeof colorDirectory | string;
 
 export const colorPickerConfig = Object.fromEntries(
   (Object.keys(colorDirectory) as ColorSpace[]).map((name: ColorSpace) => {
+    const space = (colorDirectory as any)[name] as typeof Color;
     const exampleColor = new (colorDirectory as any)[name]() as Color;
-    const { x, y, z } = exampleColor.dimensionToChannel;
+    const { x, y, z } = space.dimensionToChannel;
     return [
       name,
       {
         axisLabel: exampleColor.axisLabel,
         isPolar: exampleColor.isPolar,
-        title: exampleColor.name,
+        title: space.name,
         xChannel: x,
-        xChannelIndex: exampleColor.channelNames.indexOf(x),
-        xDomain: exampleColor.domains[x],
-        xStep: exampleColor.stepSize[1],
+        xChannelIndex: space.channelNames.indexOf(x),
+        xDomain: space.domains[x],
+        xStep: space.stepSize[1],
         yChannel: y,
-        yChannelIndex: exampleColor.channelNames.indexOf(y),
-        yDomain: exampleColor.domains[y],
-        yStep: exampleColor.stepSize[2],
+        yChannelIndex: space.channelNames.indexOf(y),
+        yDomain: space.domains[y],
+        yStep: space.stepSize[2],
         zChannel: z,
-        zChannelIndex: exampleColor.channelNames.indexOf(z),
-        zDomain: exampleColor.domains[z],
-        zStep: exampleColor.stepSize[0],
+        zChannelIndex: space.channelNames.indexOf(z),
+        zDomain: space.domains[z],
+        zStep: space.stepSize[0],
       },
     ];
   })
diff --git a/src/lib/lint-language/lint-language.ts b/src/lib/lint-language/lint-language.ts
index b629b733..284747e2 100644
--- a/src/lib/lint-language/lint-language.ts
+++ b/src/lib/lint-language/lint-language.ts
@@ -35,12 +35,15 @@ class Environment {
   get(name: string) {
     if (name === "colors") {
       const children = this.palette.colors
-        .map((x) => new LLColor(x))
+        .map((x) => new LLColor(x, x.toHex()))
         .map((x) => new LLValue(x));
       return new LLValueArray(children);
     }
     if (name === "background") {
-      return new LLColor(this.palette.background);
+      return new LLColor(
+        this.palette.background,
+        this.palette.background.toHex()
+      );
     }
     const val = this.variables[name];
     const definedVariables = [
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 0784ed9b..db920b33 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -52,8 +52,8 @@ export function deDup(arr: Color[]): Color[] {
 
 export function clipToGamut(color: Color): [number, number, number] {
   if (color.inGamut()) {
-    console.log("branch a");
-    const channels = Object.entries(color.domains).map(([key, domain]) => {
+    const space = color.constructor as typeof Color;
+    const channels = Object.entries(space.domains).map(([key, domain]) => {
       const [min, max] = domain.sort();
       return clamp(color.channels[key], min, max);
     });
diff --git a/yarn.lock b/yarn.lock
index 087f25af..307a3c61 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3354,10 +3354,10 @@ colorette@^2.0.20:
   resolved "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz"
   integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
 
-colorjs.io@^0.4.5:
-  version "0.4.5"
-  resolved "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.4.5.tgz"
-  integrity sha512-yCtUNCmge7llyfd/Wou19PMAcf5yC3XXhgFoAh6zsO2pGswhUPBaaUh8jzgHnXtXuZyFKzXZNAnyF5i+apICow==
+colorjs.io@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/colorjs.io/-/colorjs.io-0.5.0.tgz#b1034184b4812b54e28c5082029fbd8ca53aa532"
+  integrity sha512-qekjTiBLM3F/sXKks/ih5aWaHIGu+Ftel0yKEvmpbKvmxpNOhojKgha5uiWEUOqEpRjC1Tq3nJRT7WgdBOxIGg==
 
 colors-option@^3.0.0:
   version "3.0.0"