diff --git a/light9/web/lib/onecolor.d.ts b/light9/web/lib/onecolor.d.ts
new file mode 100644
--- /dev/null
+++ b/light9/web/lib/onecolor.d.ts
@@ -0,0 +1,13 @@
+type ColorFormat = "hex" | "rgb" | "hsl" | "hsv";
+interface Color {
+  clone(): this;
+  toString(format?: ColorFormat): string;
+  toJSON(): string;
+  value(): number;
+  value(v: number): this;
+  hex(): string;
+}
+
+declare function color(value: any): Color;
+
+export = color;
diff --git a/light9/web/light9-color-picker.ts b/light9/web/light9-color-picker.ts
--- a/light9/web/light9-color-picker.ts
+++ b/light9/web/light9-color-picker.ts
@@ -8,8 +8,8 @@ import { GraphToControls } from "./Graph
 import { DeviceAttrRow } from "./Light9DeviceControl";
 import { Choice } from "./Light9Listbox";
 import { SubEvent } from "sub-events";
+import color from "onecolor";
 
-//<script src="/lib/color/one-color.js"></script>
 const log = debug("control");
 
 @customElement("light9-color-picker-float")
diff --git a/package.json b/package.json
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "knockout": "^3.5.1",
     "lit": "^2.7.4",
     "n3": "^1.16.4",
+    "onecolor": "^4.0.0",
     "parse-prometheus-text-format": "^1.1.1",
     "reconnectingwebsocket": "^1.0.0",
     "sub-events": "^1.9.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,6 +18,7 @@ specifiers:
   knockout: ^3.5.1
   lit: ^2.7.4
   n3: ^1.16.4
+  onecolor: ^4.0.0
   parse-prometheus-text-format: ^1.1.1
   reconnectingwebsocket: ^1.0.0
   sub-events: ^1.9.0
@@ -45,6 +46,7 @@ dependencies:
   knockout: 3.5.1
   lit: 2.7.4
   n3: 1.16.4
+  onecolor: 4.0.0
   parse-prometheus-text-format: 1.1.1
   reconnectingwebsocket: 1.0.0
   sub-events: 1.9.0
@@ -1056,6 +1058,11 @@ packages:
     hasBin: true
     dev: false
 
+  /onecolor/4.0.0:
+    resolution: {integrity: sha512-DVekU/5RwE8iWt04loesYKLbePAi1KfWD3W0/7YySESLaMJnVNcdgnjEwA1SIvzqjxtYT52/cFC+tB8csFE1sA==}
+    engines: {node: '>=0.4.8'}
+    dev: false
+
   /parse-prometheus-text-format/1.1.1:
     resolution: {integrity: sha512-dBlhYVACjRdSqLMFe4/Q1l/Gd3UmXm8ruvsTi7J6ul3ih45AkzkVpI5XHV4aZ37juGZW5+3dGU5lwk+QLM9XJA==}
     dependencies:
diff --git a/tsconfig.json b/tsconfig.json
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -46,12 +46,13 @@
     "moduleResolution": "node"                      /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
     "baseUrl": "./"                                 /* Base directory to resolve non-absolute module names. */,
     "paths": {                                      /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-      "sylvester": ["light9/web/lib/sylvester.d.ts"]
+      "sylvester": ["light9/web/lib/sylvester.d.ts"],
+      "onecolor": ["light9/web/lib/onecolor.d.ts"]
     },
     // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": ["/my/proj/light9/light9/web/homepage"],                             /* List of folders to include type definitions from. */
     // "types": [],                                 /* Type declaration files to be included in compilation. */
-    // "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
     "esModuleInterop": true,                        /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
     // "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
     // "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */