diff --git a/app/components/vis-bug/vis-bug.element.js b/app/components/vis-bug/vis-bug.element.js
index 1ffbb8d3..ad9b8fec 100644
--- a/app/components/vis-bug/vis-bug.element.js
+++ b/app/components/vis-bug/vis-bug.element.js
@@ -23,12 +23,6 @@ import {
   constructibleStylesheetSupport
 } from '../../utilities/'
 
-const modemap = {
-  'hex':  'toHexString',
-  'hsla': 'toHslString',
-  'rgba': 'toRgbString',
-}
-
 export default class VisBug extends HTMLElement {
   constructor() {
     super()
@@ -63,7 +57,10 @@ export default class VisBug extends HTMLElement {
 
   setup() {
     this.$shadow.innerHTML = this.render()
-    this._colormode = modemap['hsla']
+
+    this.hasAttribute('color-mode')
+      ? this.getAttribute('color-mode')
+      : this.setAttribute('color-mode', 'hex')
 
     $('li[data-tool]', this.$shadow).on('click', e =>
       this.toolSelected(e.currentTarget) && e.stopPropagation())
@@ -246,14 +243,6 @@ export default class VisBug extends HTMLElement {
   get activeTool() {
     return this.active_tool.dataset.tool
   }
-
-  set colorMode(mode) {
-    this._colormode = modemap[mode]
-  }
-
-  get colorMode() {
-    return this._colormode
-  }
 }
 
 customElements.define('vis-bug', VisBug)
diff --git a/app/features/metatip.js b/app/features/metatip.js
index e2e05230..32943aa7 100644
--- a/app/features/metatip.js
+++ b/app/features/metatip.js
@@ -15,6 +15,12 @@ const state = {
   tips: new Map(),
 }
 
+const modemap = {
+  'hex': 'toHexString',
+  'hsl': 'toHslString',
+  'rgb': 'toRgbString',
+}
+
 const services = {}
 
 export function MetaTip(visbug) {
@@ -131,7 +137,7 @@ export function removeAll() {
 
 const render = (el, tip = document.createElement('visbug-metatip')) => {
   const { width, height } = el.getBoundingClientRect()
-  const colormode = $('vis-bug')[0].colorMode
+  const colormode = modemap[$('vis-bug').attr('color-mode')]
 
   const styles = getStyles(el)
     .map(style => Object.assign(style, {
diff --git a/extension/contextmenu/colormode.js b/extension/contextmenu/colormode.js
index b32de609..a593005e 100644
--- a/extension/contextmenu/colormode.js
+++ b/extension/contextmenu/colormode.js
@@ -1,10 +1,10 @@
 const storagekey = 'visbug-color-mode'
-const defaultcolormode = 'hsla'
+const defaultcolormode = 'hex'
 
 const color_options = [
-  'hsla',
+  'hsl',
   'hex',
-  'rgba',
+  'rgb',
   // 'hsv',
   // 'lch',
   // 'lab',
diff --git a/extension/toolbar/inject.js b/extension/toolbar/inject.js
index f3018ee0..de0ef072 100644
--- a/extension/toolbar/inject.js
+++ b/extension/toolbar/inject.js
@@ -15,5 +15,5 @@ document.body.prepend(visbug)
 
 platform.runtime.onMessage.addListener(request => {
   if (request.action === 'COLOR_MODE')
-    visbug.colorMode = request.params.mode
+   visbug.setAttribute('color-mode', request.params.mode)
 })