diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index ea4b8cd20f..1a847dc96e 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -1,3 +1,4 @@
+import { convert } from 'chromatism'
 import allKeys from './theme2_keys'
 
 // keys that are meant to be used globally, i.e. what's the rest of the theme is based upon.
@@ -125,7 +126,8 @@ export const convertTheme2To3 = (data) => {
   data.colors.link = data.colors.link || data.colors.accent
   const generateRoot = () => {
     const directives = {}
-    basePaletteKeys.forEach(key => { directives['--' + key] = 'color | ' + data.colors[key] })
+    console.log(data.colors)
+    basePaletteKeys.forEach(key => { directives['--' + key] = 'color | ' + convert(data.colors[key]).hex })
     return {
       component: 'Root',
       directives