diff --git a/src/docs/docs-components/ThemeBuilder/Customiser/Value.jsx b/src/docs/docs-components/ThemeBuilder/Customiser/Value.jsx
index cfc69786..9076b3d4 100644
--- a/src/docs/docs-components/ThemeBuilder/Customiser/Value.jsx
+++ b/src/docs/docs-components/ThemeBuilder/Customiser/Value.jsx
@@ -24,6 +24,8 @@ const Value = ({ value, name, map, themeName, theme, setTheme }) => {
     setTheme(mutableTheme);
   };
 
+  const isColour = !/var\(.*\)/i.test(value) && CSS.supports('color', value);
+
   return (
     <div className="value">
       <label>
@@ -31,7 +33,7 @@ const Value = ({ value, name, map, themeName, theme, setTheme }) => {
           <button className={isOpen ? 'open' : ''} onClick={() => setIsOpen(o => !o)}>
             <div>
               <span className="material-symbols-outlined">{isOpen ? 'expand_less' : 'expand_more'}</span>
-            </div> {name}
+            </div> {isColour && (<div style={{ background: value }}></div>)} {name}
           </button>
         </div>
       </label>
diff --git a/src/docs/docs-components/ThemeBuilder/NewTheme/NewTheme.jsx b/src/docs/docs-components/ThemeBuilder/NewTheme/NewTheme.jsx
index 884d1efe..4e2fca0e 100644
--- a/src/docs/docs-components/ThemeBuilder/NewTheme/NewTheme.jsx
+++ b/src/docs/docs-components/ThemeBuilder/NewTheme/NewTheme.jsx
@@ -15,7 +15,6 @@ SyntaxHighlighter.registerLanguage('svelte', svelteSyntax);
 SyntaxHighlighter.registerLanguage('scss', scss);
 
 const NewTheme = ({ theme, themeName }) => {
-  console.log('rerenders NewTheme');
   const originalTheme = themeName === 'light' ? lightTheme : darkTheme;
   const updates = updatedDiff(originalTheme, theme);