diff --git a/packages/core/scripts/theme-builder/src/components/css-text/css-text.css b/packages/core/scripts/theme-builder/src/components/css-text/css-text.css
index cbb1cf9f4e..a927db425b 100644
--- a/packages/core/scripts/theme-builder/src/components/css-text/css-text.css
+++ b/packages/core/scripts/theme-builder/src/components/css-text/css-text.css
@@ -7,8 +7,8 @@ h1 {
 
 textarea {
   margin: 12px 0 0 0;
-  min-width: 280px;
-  height: 500px;
+  min-width: 300px;
+  height: 550px;
   font-family: Courier New, Courier, monospace;
 }
 
diff --git a/packages/core/scripts/theme-builder/src/components/css-text/css-text.tsx b/packages/core/scripts/theme-builder/src/components/css-text/css-text.tsx
index 290341ae0c..467a29ab83 100644
--- a/packages/core/scripts/theme-builder/src/components/css-text/css-text.tsx
+++ b/packages/core/scripts/theme-builder/src/components/css-text/css-text.tsx
@@ -1,5 +1,5 @@
 import { Component, Prop } from '@stencil/core';
-import { STORED_THEME_KEY, deleteCssUrl, getThemeUrl, saveCssUrl } from '../../theme-variables';
+import { STORED_THEME_KEY, deleteCssUrl, getThemeUrl, saveCssUrl } from '../helpers';
 
 
 @Component({
diff --git a/packages/core/scripts/theme-builder/src/components/helpers.ts b/packages/core/scripts/theme-builder/src/components/helpers.ts
new file mode 100644
index 0000000000..6daf8404c3
--- /dev/null
+++ b/packages/core/scripts/theme-builder/src/components/helpers.ts
@@ -0,0 +1,55 @@
+
+export const SERVER_DOMAIN = `http://localhost:5454`;
+export const DATA_URL = `${SERVER_DOMAIN}/data`;
+export const SAVE_CSS_URL = `${SERVER_DOMAIN}/save-css`;
+export const DELETE_CSS_URL = `${SERVER_DOMAIN}/delete-css`;
+export const CSS_THEME_FILE_PATH = `/src/themes/css`;
+
+export function saveCssUrl(themeName: string, cssText: string) {
+  cssText = encodeURIComponent(cssText);
+  return `${SAVE_CSS_URL}?theme=${themeName}&css=${cssText}`;
+}
+
+export function deleteCssUrl(themeName: string) {
+  return `${DELETE_CSS_URL}?theme=${themeName}`;
+}
+
+export function getThemeUrl(themeName: string) {
+  return `${CSS_THEME_FILE_PATH}/${themeName}.css`;
+}
+
+export const STORED_DEMO_URL_KEY = 'theme-builder-demo-url';
+export const STORED_DEMO_MODE_KEY = 'theme-builder-demo-mode';
+export const STORED_THEME_KEY = 'theme-builder-theme-url';
+
+
+export function cleanCssValue(value: string) {
+  if (typeof value === 'string') {
+    value = (value || '').trim().toLowerCase().replace(/ /g, '');
+
+    if (value.length) {
+      if (value.charAt(0) === '#') {
+        return cleanHexValue(value);
+      }
+
+      if (value.charAt(0) === 'r') {
+        return cleanRgb(value);
+      }
+    }
+  }
+
+  return '';
+}
+
+function cleanHexValue(value: string) {
+  return '#' + value.substr(1).split('').map(c => {
+    return /[a-f]|[0-9]/.test(c) ? c : '';
+  }).join('').substr(0, 6);
+}
+
+
+function cleanRgb(value: string) {
+  return value.split('').map(c => {
+    return /[rgba0-9\,\.\(\)]/.test(c) ? c : '';
+  }).join('');
+}
diff --git a/packages/core/scripts/theme-builder/src/components/theme-builder/theme-builder.tsx b/packages/core/scripts/theme-builder/src/components/theme-builder/theme-builder.tsx
index 64b77d3096..01a27e0e09 100644
--- a/packages/core/scripts/theme-builder/src/components/theme-builder/theme-builder.tsx
+++ b/packages/core/scripts/theme-builder/src/components/theme-builder/theme-builder.tsx
@@ -1,5 +1,5 @@
 import { Component, Listen, State } from '@stencil/core';
-import { DATA_URL, STORED_DEMO_MODE_KEY, STORED_DEMO_URL_KEY } from '../../theme-variables';
+import { DATA_URL, STORED_DEMO_MODE_KEY, STORED_DEMO_URL_KEY } from '../helpers';
 
 
 @Component({
diff --git a/packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.tsx b/packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.tsx
index d0f907eedf..cb8d5b507c 100644
--- a/packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.tsx
+++ b/packages/core/scripts/theme-builder/src/components/theme-selector/theme-selector.tsx
@@ -1,5 +1,6 @@
 import { Component, Event, EventEmitter, Listen, Prop, State } from '@stencil/core';
-import { STORED_THEME_KEY, THEME_VARIABLES, getThemeUrl } from '../../theme-variables';
+import { STORED_THEME_KEY, cleanCssValue, getThemeUrl } from '../helpers';
+import { THEME_VARIABLES } from '../../theme-variables';
 
 
 @Component({
@@ -71,7 +72,7 @@ export class ThemeSelector {
     c.push(':root {');
 
     this.themeVariables.forEach(themeVariable => {
-      themeVariable.value = (themeVariable.value || '').trim();
+      themeVariable.value = cleanCssValue(themeVariable.value);
       c.push(`  ${themeVariable.property}: ${themeVariable.value};`);
     });
 
diff --git a/packages/core/scripts/theme-builder/src/theme-variables.ts b/packages/core/scripts/theme-builder/src/theme-variables.ts
index af160c31ba..26f96cbf38 100644
--- a/packages/core/scripts/theme-builder/src/theme-variables.ts
+++ b/packages/core/scripts/theme-builder/src/theme-variables.ts
@@ -84,26 +84,3 @@ export const THEME_VARIABLES = [
   },
 
 ];
-
-export const SERVER_DOMAIN = `http://localhost:5454`;
-export const DATA_URL = `${SERVER_DOMAIN}/data`;
-export const SAVE_CSS_URL = `${SERVER_DOMAIN}/save-css`;
-export const DELETE_CSS_URL = `${SERVER_DOMAIN}/delete-css`;
-export const CSS_THEME_FILE_PATH = `/src/themes/css`;
-
-export function saveCssUrl(themeName: string, cssText: string) {
-  cssText = encodeURIComponent(cssText);
-  return `${SAVE_CSS_URL}?theme=${themeName}&css=${cssText}`;
-}
-
-export function deleteCssUrl(themeName: string) {
-  return `${DELETE_CSS_URL}?theme=${themeName}`;
-}
-
-export function getThemeUrl(themeName: string) {
-  return `${CSS_THEME_FILE_PATH}/${themeName}.css`;
-}
-
-export const STORED_DEMO_URL_KEY = 'theme-builder-demo-url';
-export const STORED_DEMO_MODE_KEY = 'theme-builder-demo-mode';
-export const STORED_THEME_KEY = 'theme-builder-theme-url';