diff --git a/src/components/color_input/color_input.scss b/src/components/color_input/color_input.scss
index 8e9923cf..3451c5d9 100644
--- a/src/components/color_input/color_input.scss
+++ b/src/components/color_input/color_input.scss
@@ -28,7 +28,7 @@
         flex: 0 0 2em;
         min-width: 2em;
         align-self: center;
-        height: 100%;
+        height: 2em;
       }
     }
     .computedIndicator,
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 7e1da7ab..969984c1 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -51,8 +51,11 @@ const v1OnlyNames = [
   'cOrange'
 ].map(_ => _ + 'ColorLocal')
 
+// if color doesn't match regex, it's not a color
+const isColor = (color) => /^#[0-9a-f]{6}$/i.test(color)
+
 const colorConvert = (color) => {
-  if (color.startsWith('--') || color === 'transparent') {
+  if (color.startsWith('--') || color === 'transparent' || !isColor(color)) {
     return color
   } else {
     return hex2rgb(color)
@@ -246,6 +249,7 @@ export default {
         const colors = this.previewTheme.colors
         const opacity = this.previewTheme.opacity
         if (!colors.bg) return {}
+        if (!isColor(colors.bg)) return {}
         const hints = (ratio) => ({
           text: ratio.toPrecision(3) + ':1',
           // AA level, AAA level