diff --git a/src/colors.ts b/src/colors.ts
new file mode 100644
index 00000000..a9305390
--- /dev/null
+++ b/src/colors.ts
@@ -0,0 +1,57 @@
+// https://yeun.github.io/open-color/
+export default {
+  // Shade 0
+  canvasBackground: [
+    "#ffffff",
+    "#f8f9fa",
+    "#f1f3f5",
+    "#fff5f5",
+    "#fff0f6",
+    "#f8f0fc",
+    "#f3f0ff",
+    "#edf2ff",
+    "#e7f5ff",
+    "#e3fafc",
+    "#e6fcf5",
+    "#ebfbee",
+    "#f4fce3",
+    "#fff9db",
+    "#fff4e6",
+  ],
+  // Shade 6
+  elementBackground: [
+    "transparent",
+    "#ced4da",
+    "#868e96",
+    "#fa5252",
+    "#e64980",
+    "#be4bdb",
+    "#7950f2",
+    "#4c6ef5",
+    "#228be6",
+    "#15aabf",
+    "#12b886",
+    "#40c057",
+    "#82c91e",
+    "#fab005",
+    "#fd7e14",
+  ],
+  // Shade 9
+  elementStroke: [
+    "#000000",
+    "#343a40",
+    "#495057",
+    "#c92a2a",
+    "#a61e4d",
+    "#862e9c",
+    "#5f3dc4",
+    "#364fc7",
+    "#1864ab",
+    "#0b7285",
+    "#087f5b",
+    "#2b8a3e",
+    "#5c940d",
+    "#e67700",
+    "#d9480f",
+  ],
+};
diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
index 3f3247a4..8a1b0e1e 100644
--- a/src/components/ColorPicker.tsx
+++ b/src/components/ColorPicker.tsx
@@ -5,6 +5,7 @@ import "./ColorPicker.css";
 import { KEYS } from "../keys";
 import { t } from "../i18n";
 import { isWritableElement } from "../utils";
+import colors from "../colors";
 
 // This is a narrow reimplementation of the awesome react-color Twitter component
 // https://github.com/casesandberg/react-color/blob/master/src/components/twitter/Twitter.js
@@ -263,61 +264,3 @@ export function ColorPicker({
     </div>
   );
 }
-
-// https://yeun.github.io/open-color/
-const colors = {
-  // Shade 0
-  canvasBackground: [
-    "#ffffff",
-    "#f8f9fa",
-    "#f1f3f5",
-    "#fff5f5",
-    "#fff0f6",
-    "#f8f0fc",
-    "#f3f0ff",
-    "#edf2ff",
-    "#e7f5ff",
-    "#e3fafc",
-    "#e6fcf5",
-    "#ebfbee",
-    "#f4fce3",
-    "#fff9db",
-    "#fff4e6",
-  ],
-  // Shade 6
-  elementBackground: [
-    "transparent",
-    "#ced4da",
-    "#868e96",
-    "#fa5252",
-    "#e64980",
-    "#be4bdb",
-    "#7950f2",
-    "#4c6ef5",
-    "#228be6",
-    "#15aabf",
-    "#12b886",
-    "#40c057",
-    "#82c91e",
-    "#fab005",
-    "#fd7e14",
-  ],
-  // Shade 9
-  elementStroke: [
-    "#000000",
-    "#343a40",
-    "#495057",
-    "#c92a2a",
-    "#a61e4d",
-    "#862e9c",
-    "#5f3dc4",
-    "#364fc7",
-    "#1864ab",
-    "#0b7285",
-    "#087f5b",
-    "#2b8a3e",
-    "#5c940d",
-    "#e67700",
-    "#d9480f",
-  ],
-};
diff --git a/src/renderer/renderScene.ts b/src/renderer/renderScene.ts
index 13666be9..c7997b62 100644
--- a/src/renderer/renderScene.ts
+++ b/src/renderer/renderScene.ts
@@ -16,6 +16,13 @@ import { getZoomTranslation } from "../scene/zoom";
 import { getSelectedElements } from "../scene/selection";
 
 import { renderElement, renderElementToSvg } from "./renderElement";
+import colors from "../colors";
+
+function colorForClientId(clientId: string) {
+  // Naive way of getting an integer out of the clientId
+  const sum = clientId.split("").reduce((a, str) => a + str.charCodeAt(0), 0);
+  return colors.elementBackground[sum % colors.elementBackground.length];
+}
 
 export function renderScene(
   elements: readonly ExcalidrawElement[],
@@ -177,6 +184,13 @@ export function renderScene(
   // Paint remote pointers
   for (const clientId in sceneState.remotePointerViewportCoords) {
     const { x, y } = sceneState.remotePointerViewportCoords[clientId];
+
+    const color = colorForClientId(clientId);
+
+    const strokeStyle = context.strokeStyle;
+    const fillStyle = context.fillStyle;
+    context.strokeStyle = color;
+    context.fillStyle = color;
     context.beginPath();
     context.moveTo(x, y);
     context.lineTo(x + 1, y + 14);
@@ -185,6 +199,8 @@ export function renderScene(
     context.lineTo(x, y);
     context.fill();
     context.stroke();
+    context.strokeStyle = strokeStyle;
+    context.fillStyle = fillStyle;
   }
 
   // Paint scrollbars