diff --git a/README.md b/README.md
index 79f3e1d..c0cb470 100644
--- a/README.md
+++ b/README.md
@@ -506,7 +506,7 @@ module.exports = {
     variables: {
       DEFAULT: {
         colors: {
-          primary: '#ffffff',
+          primary: '#ff0',
           secondary: '#000000',
           gray: '#6B7280'
         },
@@ -515,7 +515,9 @@ module.exports = {
     },
   },
   plugins: [
-    require('@mertasan/tailwindcss-variables')
+    require('@mertasan/tailwindcss-variables'){
+      colorVariables: true
+    }
   ]
 }
 ```
@@ -524,19 +526,22 @@ module.exports = {
 
 ```css
 :root {
-   --colors-primary: #ffffff;
-   --colors-secondary: #000000;
-   --colors-gray: #6B7280
+  --colors-primary: #ff0;
+  --colors-secondary: #000000;
+  --colors-gray: #6B7280;
+  --colors-primary-rgb: 255,255,0;
+  --colors-secondary-rgb: 0,0,0;
+  --colors-gray-rgb: 107,114,128
 }
 
 .text-primary {
   --tw-text-opacity: 1;
-  color: rgba(var(--colors-primary), var(--tw-text-opacity))
+  color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))
 }
 
 .bg-secondary {
   --tw-bg-opacity: 1;
-  background-color: rgba(var(--colors-secondary), var(--tw-bg-opacity))
+  background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))
 }
 
 .bg-gray {
diff --git a/README.tr.md b/README.tr.md
index f8647c1..89539ed 100644
--- a/README.tr.md
+++ b/README.tr.md
@@ -507,7 +507,7 @@ module.exports = {
     variables: {
       DEFAULT: {
         colors: {
-          primary: '#ffffff',
+          primary: '#ff0',
           secondary: '#000000',
           gray: '#6B7280'
         },
@@ -516,7 +516,9 @@ module.exports = {
     },
   },
   plugins: [
-    require('@mertasan/tailwindcss-variables')
+    require('@mertasan/tailwindcss-variables'){
+      colorVariables: true
+    }
   ]
 }
 ```
@@ -525,19 +527,22 @@ module.exports = {
 
 ```css
 :root {
-   --colors-primary: #ffffff;
-   --colors-secondary: #000000;
-   --colors-gray: #6B7280
+  --colors-primary: #ff0;
+  --colors-secondary: #000000;
+  --colors-gray: #6B7280;
+  --colors-primary-rgb: 255,255,0;
+  --colors-secondary-rgb: 0,0,0;
+  --colors-gray-rgb: 107,114,128
 }
 
 .text-primary {
   --tw-text-opacity: 1;
-  color: rgba(var(--colors-primary), var(--tw-text-opacity))
+  color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))
 }
 
 .bg-secondary {
   --tw-bg-opacity: 1;
-  background-color: rgba(var(--colors-secondary), var(--tw-bg-opacity))
+  background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))
 }
 
 .bg-gray {
diff --git a/__tests__/color-variable-helper.test.html b/__tests__/color-variable-helper.test.html
index b04e561..d8eb742 100644
--- a/__tests__/color-variable-helper.test.html
+++ b/__tests__/color-variable-helper.test.html
@@ -1,3 +1,5 @@
-<div class="text-primary text-opacity-50"></div>
-<div class="bg-secondary bg-opacity-50"></div>
-<div class="bg-gray bg-opacity-50"></div>
+<div class="text-primary text-opacity-50">tailwindcss-variables</div>
+<div class="bg-secondary bg-opacity-50">tailwindcss-variables</div>
+<div class="bg-gray bg-opacity-50">tailwindcss-variables</div>
+<div class="bg-red bg-opacity-50">tailwindcss-variables</div>
+<div class="bg-white bg-opacity-50">tailwindcss-variables</div>
diff --git a/__tests__/color-variable-helper.test.js b/__tests__/color-variable-helper.test.js
index 5822fef..4d3940c 100644
--- a/__tests__/color-variable-helper.test.js
+++ b/__tests__/color-variable-helper.test.js
@@ -17,32 +17,48 @@ test('colorVariable helper', async () => {
           primary: colorVariable('--colors-primary'),
           secondary: colorVariable('var(--colors-secondary)'),
           gray: 'var(--colors-gray)',
+          white: '#ffffff',
         },
         variables: {
           DEFAULT: {
             colors: {
-              primary: '#ffffff',
+              primary: '#ff0',
               secondary: '#000000',
               gray: '#6B7280',
             },
+            sizes: {
+              small: '10px',
+              medium: '2rem',
+              large: '100%',
+            },
           },
         },
       },
-      plugins: [tailwindcssVariables],
+      plugins: [
+        tailwindcssVariables({
+          colorVariables: true,
+        }),
+      ],
     })
   ).toMatchInlineSnapshot(`
     "
 
       
       + :root {
-      +   --colors-primary: #ffffff;
+      +   --colors-primary: #ff0;
       +   --colors-secondary: #000000;
-      +   --colors-gray: #6B7280
+      +   --colors-gray: #6B7280;
+      +   --colors-primary-rgb: 255,255,0;
+      +   --colors-secondary-rgb: 0,0,0;
+      +   --colors-gray-rgb: 107,114,128;
+      +   --sizes-small: 10px;
+      +   --sizes-medium: 2rem;
+      +   --sizes-large: 100%
       + }
       +
       + .text-primary {
       +   --tw-text-opacity: 1;
-      +   color: rgba(var(--colors-primary), var(--tw-text-opacity))
+      +   color: rgba(var(--colors-primary-rgb), var(--tw-text-opacity))
       + }
       +
       + .text-opacity-50 {
@@ -51,13 +67,18 @@ test('colorVariable helper', async () => {
       +
       + .bg-secondary {
       +   --tw-bg-opacity: 1;
-      +   background-color: rgba(var(--colors-secondary), var(--tw-bg-opacity))
+      +   background-color: rgba(var(--colors-secondary-rgb), var(--tw-bg-opacity))
       + }
       +
       + .bg-gray {
       +   background-color: var(--colors-gray)
       + }
       +
+      + .bg-white {
+      +   --tw-bg-opacity: 1;
+      +   background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
+      + }
+      +
       + .bg-opacity-50 {
       +   --tw-bg-opacity: 0.5
       + }
diff --git a/src/helpers.js b/src/helpers.js
index e912f44..d58362b 100644
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -1,15 +1,17 @@
 const startsWith = require('lodash/startsWith')
 
+const withRgb = (variable) => {
+  return startsWith(variable, 'var') ? variable.replace(')', '-rgb)') : 'var(' + variable + '-rgb)'
+}
 const colorVariable = (variable) => {
   return function ({ opacityVariable, opacityValue }) {
-    variable = startsWith(variable, 'var') ? variable : 'var(' + variable + ')'
     if (opacityValue !== undefined) {
-      return `rgba(${variable}, ${opacityValue})`
+      return `rgba(${withRgb(variable)}, ${opacityValue})`
     }
     if (opacityVariable !== undefined) {
-      return `rgba(${variable}, var(${opacityVariable}, 1))`
+      return `rgba(${withRgb(variable)}, var(${opacityVariable}, 1))`
     }
-    return `rgb(${variable})`
+    return `rgb(${withRgb(variable)})`
   }
 }
 module.exports.colorVariable = colorVariable
diff --git a/src/utils.js b/src/utils.js
index 5b860f4..d61cbf2 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -8,6 +8,9 @@ const isPlainObject = require('lodash/isPlainObject')
 const hasOwn = require('lodash/has')
 const _forEach = require('lodash/forEach')
 const _replace = require('lodash/replace')
+const startsWith = require('lodash/startsWith')
+const trimStart = require('lodash/trimStart')
+const trimEnd = require('lodash/trimEnd')
 const get = require('lodash/get')
 
 const setComponent = (component, modifier, options) => {
@@ -75,8 +78,50 @@ const parseVariables = (object, varPrefix) => {
   return results
 }
 
+const hexToRGB = (key, h) => {
+  if (startsWith(h, 'rgba') || !startsWith(h, '#')) {
+    return [key, h]
+  } else if (startsWith(h, 'rgb')) {
+    h = trimStart(h, 'rgb(')
+    h = trimEnd(h, ')')
+  }
+
+  let r = 0,
+    g = 0,
+    b = 0
+
+  // 3 digits
+  if (h.length === 4) {
+    r = '0x' + h[1] + h[1]
+    g = '0x' + h[2] + h[2]
+    b = '0x' + h[3] + h[3]
+
+    // 6 digits
+  } else if (h.length === 7) {
+    r = '0x' + h[1] + h[2]
+    g = '0x' + h[3] + h[4]
+    b = '0x' + h[5] + h[6]
+  }
+
+  return [key + '-rgb', '' + +r + ',' + +g + ',' + +b + '']
+}
+
+const setColorVariables = (source) => {
+  return merge(
+    source,
+    ...toPairs(source).map(([keys, value]) => {
+      const flattenValue = isPlainObject(value) ? setColorVariables(value) : value
+      return fromPairs(keys.split(', ').map((key) => hexToRGB(key, flattenValue)))
+    })
+  )
+}
+
 const build = (options, source) => {
   let varPrefix = formatVariableKey(get(options, 'variablePrefix', ''))
+  let colorVariables = get(options, 'colorVariables', false)
+  if (colorVariables) {
+    source = setColorVariables(source)
+  }
   if (!varPrefix) {
     varPrefix = ''
   }
@@ -99,6 +144,10 @@ const darkBuild = (options, darkMode, source) => {
   if (!varPrefix) {
     varPrefix = ''
   }
+  let colorVariables = get(options, 'colorVariables', false)
+  if (colorVariables) {
+    source = setColorVariables(source)
+  }
   let darkSelector = get(options, 'darkSelector', '.dark')
   if (!darkSelector) {
     darkSelector = '.dark'