diff --git a/packages/widgets/Claviature.jsx b/packages/widgets/Claviature.jsx
index 0d78d242..e4ebfec6 100644
--- a/packages/widgets/Claviature.jsx
+++ b/packages/widgets/Claviature.jsx
@@ -37,14 +37,14 @@ registerWidget('claviature', 'strudel-claviature');
 
 Pattern.prototype.claviature = function (id, options = {}) {
   return this.onFrame((haps) => {
-    const keys = haps.map((h) => h.value.note);
+    const colorize = haps.map((h) => ({ keys: [h.value.note], color: h.context?.color || 'steelblue' }));
     let el = document.getElementById(id);
     el?.setAttribute(
       'options',
       JSON.stringify({
         ...options,
         range: options.range || ['A2', 'C6'],
-        colorize: [{ keys: keys, color: options.color || 'steelblue' }],
+        colorize,
       }),
     );
   });
diff --git a/packages/widgets/README.md b/packages/widgets/README.md
index a5c36193..53847c5d 100644
--- a/packages/widgets/README.md
+++ b/packages/widgets/README.md
@@ -19,9 +19,9 @@ Here is an example that uses all available options:
 
 ```js
 chord("<Em9 A7 D^7@2>").voicing().piano()
+.color('cyan')
 .claviature({
   range: ['C1', 'C6'], // rendered note range
-  color: 'yellow', // highlighting color
   palette: ['cyan', 'magenta'],
   stroke: 'black',
   scaleX: 1, scaleY: 1,
@@ -29,5 +29,3 @@ chord("<Em9 A7 D^7@2>").voicing().piano()
   lowerHeight: 50
 })
 ```
-
-Note: The `Pattern.claviature` method uses the `colorization` option internally, so don't override that and use the `color` option for changing the highlighting color.