diff --git a/src/pages/docs/customizing-colors.mdx b/src/pages/docs/customizing-colors.mdx
index 2e9c05da8..66d27548a 100644
--- a/src/pages/docs/customizing-colors.mdx
+++ b/src/pages/docs/customizing-colors.mdx
@@ -313,7 +313,7 @@ Again, we recommend sticking to the default naming convention for most projects,
 
 If you're using abstract color names because you want to support multiple themes in your project, there's a good chance you also want to use CSS variables to define your colors.
 
-The best way to do this is to define your CSS variables as just the color _channels_, without including the actual color function:
+The best way to do this is to define your CSS variables as just the color _channels_ separated by spaces, without including the actual color function *or* alpha value:
 
 ```css main.css
 @tailwind base;
@@ -322,40 +322,31 @@ The best way to do this is to define your CSS variables as just the color _chann
 
 .theme-startup {
   --color-primary: 255 115 179;
-  --color-secondary: 111 114 185;
+  --color-secondary: 238deg 35% 58%;
   /* ... */
 }
 
 .theme-boring {
   --color-primary: 2 82 204;
-  --color-secondary: 255 196 2;
+  --color-secondary: 46deg 100% 50%;
   /* ... */
 }
 
 .theme-elegant {
   --color-primary: 192 178 131;
-  --color-secondary: 220 208 192;
+  --color-secondary: 34deg 29% 81%;
   /* ... */
 }
 ```
 
-Then define your colors in your configuration file as _functions_, and apply the `opacityValue` if it's defined:
+Then define your colors using either the `rgb` or `hsl` helpers which wraps the variable with the color function and applies an alpha channel if needed:
 
 ```js tailwind.config.js
-function withOpacityValue(variable) {
-  return ({ opacityValue }) => {
-    if (opacityValue === undefined) {
-      return `rgb(var(${variable}))`
-    }
-    return `rgb(var(${variable}) / ${opacityValue})`
-  }
-}
-
 module.exports = {
   theme: {
-    colors: {
-      primary: withOpacityValue('--color-primary'),
-      secondary: withOpacityValue('--color-secondary'),
+    colors: ({ rgb, hsl }) => {
+      primary: rgb('--color-primary'),
+      secondary: hsl('--color-secondary'),
       // ...
     }
   }