diff --git a/.changeset/few-coats-smash.md b/.changeset/few-coats-smash.md
new file mode 100644
index 00000000..012d5d63
--- /dev/null
+++ b/.changeset/few-coats-smash.md
@@ -0,0 +1,5 @@
+---
+'playroom': patch
+---
+
+Replace `polished` dependency with CSS relative color syntax and `color-mix`
diff --git a/package.json b/package.json
index d7e94316..0f77b664 100644
--- a/package.json
+++ b/package.json
@@ -99,7 +99,6 @@
     "memoize-one": "^6.0.0",
     "mini-css-extract-plugin": "^2.7.2",
     "parse-prop-types": "^0.3.0",
-    "polished": "^4.2.2",
     "portfinder": "^1.0.32",
     "prettier": "^2.8.1",
     "prop-types": "^15.8.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0eb6ae7a..7fb7b6a0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -110,9 +110,6 @@ dependencies:
   parse-prop-types:
     specifier: ^0.3.0
     version: 0.3.0(prop-types@15.8.1)
-  polished:
-    specifier: ^4.2.2
-    version: 4.2.2
   portfinder:
     specifier: ^1.0.32
     version: 1.0.32
@@ -8284,13 +8281,6 @@ packages:
       pathe: 1.1.2
     dev: false
 
-  /polished@4.2.2:
-    resolution: {integrity: sha512-Sz2Lkdxz6F2Pgnpi9U5Ng/WdWAUZxmHrNPoVlm3aAemxoy2Qy7LGjQg4uf8qKelDAUW94F4np3iH2YPf2qefcQ==}
-    engines: {node: '>=10'}
-    dependencies:
-      '@babel/runtime': 7.20.6
-    dev: false
-
   /portfinder@1.0.32:
     resolution: {integrity: sha512-on2ZJVVDXRADWE6jnQaX0ioEylzgBpQk8r55NE4wjXW1ZxO+BgDlY6DXwj20i0V8eB4SenDQ00WEaxfiIQPcxg==}
     engines: {node: '>= 0.12.0'}
diff --git a/src/Playroom/palettes.ts b/src/Playroom/palettes.ts
index 98d4a9c1..82dda3b3 100644
--- a/src/Playroom/palettes.ts
+++ b/src/Playroom/palettes.ts
@@ -1,5 +1,3 @@
-import { transparentize, mix, darken } from 'polished';
-
 const originalPalette = {
   blue0: '#e5f3ff',
   blue1: '#0088ff',
@@ -22,6 +20,44 @@ const originalPalette = {
   black: '#000',
 };
 
+const guard = (amount: number) => {
+  if (amount > 1 || amount < 0) {
+    throw new Error('Amount must be between 0 and 1 inclusive');
+  }
+
+  return amount;
+};
+
+/**
+ * Subtracts `amount` from the alpha channel of `color`.
+ * Amount must be between 0 and 1 inclusive.
+ *
+ * Similar to `transparentize` from polished but uses CSS
+ * @see https://polished.js.org/docs/#transparentize
+ */
+const transparentize = (amount: number, color: string) =>
+  `rgb(from ${color} r g b / calc(alpha - ${guard(amount)}))`;
+
+/**
+ * Subtracts `amount` from the lightness of `color`.
+ * Amount must be between 0 and 1 inclusive.
+ *
+ * Similar to `darken` from polished but uses CSS
+ * @see https://polished.js.org/docs/#darken
+ */
+const darken = (amount: number, color: string) =>
+  `hsl(from ${color} h s calc(l - ${guard(amount) * 100}))`;
+
+/**
+ * Mixes `amount` of `color1` into `color2`.
+ * Amount must be between 0 and 1 inclusive.
+ *
+ * Similar to `mix` from polished but uses CSS
+ * @see https://polished.js.org/docs/#mix
+ */
+const mix = (amount: number, color1: string, color2: string) =>
+  `color-mix(in srgb, ${color1} ${guard(amount) * 100}%, ${color2})`;
+
 export const light = {
   code: {
     text: originalPalette.black,
@@ -42,7 +78,7 @@ export const light = {
     positive: originalPalette.green2,
   },
   background: {
-    transparent: 'rgba(0, 0, 0, .05)',
+    transparent: 'rgb(0, 0, 0, .05)',
     accent: originalPalette.blue2,
     positive: originalPalette.green1,
     critical: originalPalette.red1,
@@ -56,7 +92,7 @@ export const light = {
     standard: originalPalette.gray2,
   },
   shadows: {
-    small: '0 2px 8px rgba(18, 21, 26, 0.3)',
+    small: '0 2px 8px rgb(18, 21, 26, 0.3)',
     focus: `0 0 0 5px ${originalPalette.blue0}`,
   },
 };
@@ -144,7 +180,7 @@ export const dark = {
     positive: seekPalette.mint[500],
   },
   background: {
-    transparent: 'rgba(255, 255, 255, .07)',
+    transparent: 'rgb(255, 255, 255, .07)',
     accent: seekPalette.blue[500],
     positive: mix(0.6, seekPalette.grey[900], seekPalette.mint[500]),
     critical: mix(0.7, seekPalette.grey[900], seekPalette.red[600]),