diff --git a/lib/misc/colors.js b/lib/misc/colors.js
index 9a01c912..6dd3e83b 100644
--- a/lib/misc/colors.js
+++ b/lib/misc/colors.js
@@ -1,44 +1,68 @@
 'use babel'
 
+/**
+ *
+ * @param {{ [P: string]: string }} selectors
+ */
 export function getColors(selectors) {
-  let grammar = atom.grammars.grammarForScopeName("source.julia")
-
-  let styled = {}
-  let color = {}
-  let div = document.createElement('div')
+  // const grammar = atom.grammars.grammarForScopeName("source.julia") // TODO ?
+  const div = document.createElement('div')
   div.classList.add('editor', 'editor-colors', 'julia-syntax-color-selector')
 
-  for (let style in selectors) {
-    let child = document.createElement('span')
+  /**
+   * @type { [P: string]: HTMLSpanElement }
+   */
+  const styled = {}
+  /**
+   * { [P: string]: string }
+   */
+  const color = {}
+  for (const style in selectors) {
+    const child = document.createElement('span')
     child.innerText = 'foo'
     child.classList.add(...selectors[style])
     div.appendChild(child)
     styled[style] = child
   }
-
   document.body.appendChild(div)
   // wait till rendered?
-  for (let style in selectors) {
+  for (const style in selectors) {
+    // TODO do we need try catch
     try {
-      color[style] = rgb2hex(window.getComputedStyle(styled[style])['color'])
+      color[style] = rgb2hex(window.getComputedStyle(styled[style]).color)
     } catch (e) {
       console.error(e)
     }
   }
-  color['background'] = rgb2hex(window.getComputedStyle(div)['backgroundColor'])
+  color.background = rgb2hex(window.getComputedStyle(div).backgroundColor)
   document.body.removeChild(div)
-
   return color
 }
 
+/**
+ *
+ * @param {string} rgb
+ * @return {string}
+ */
 function rgb2hex(rgb) {
-  if (rgb.search("rgb") == -1) {
+  if (rgb.search('rgb') === -1) {
     return rgb
   } else {
-    rgb = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/)
-    function hex(x) {
-      return ("0" + parseInt(x).toString(16)).slice(-2);
+    const rgb_match = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/)
+    if (rgb_match) {
+      return hex(rgb_match[1]) + hex(rgb_match[2]) + hex(rgb_match[3])
+    } else {
+      // TODO should we check for this error?
+      console.error(rgb.concat(" isn't a rgb string!"))
+      return '#000000' // black
     }
-    return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
   }
 }
+
+/**
+ *
+ * @param {string} x
+ */
+function hex(x) {
+  return ('0' + parseInt(x, 10).toString(16)).slice(-2)
+}
diff --git a/lib_src/misc/colors.ts b/lib_src/misc/colors.ts
new file mode 100644
index 00000000..86e6d70e
--- /dev/null
+++ b/lib_src/misc/colors.ts
@@ -0,0 +1,73 @@
+'use babel'
+
+/**
+ *
+ * @param {{ [P: string]: string }} selectors
+ */
+export function getColors(selectors: { [P: string]: string }) {
+  // const grammar = atom.grammars.grammarForScopeName("source.julia") // TODO ?
+
+  const div = document.createElement('div')
+  div.classList.add('editor', 'editor-colors', 'julia-syntax-color-selector')
+
+  /**
+   * @type { [P: string]: HTMLSpanElement }
+   */
+  const styled: { [P: string]: HTMLSpanElement } = {}
+  /**
+   * { [P: string]: string }
+   */
+  const color: { [P: string]: string } = {}
+
+  for (const style in selectors) {
+    const child = document.createElement('span')
+    child.innerText = 'foo'
+    child.classList.add(...selectors[style])
+    div.appendChild(child)
+    styled[style] = child
+  }
+
+  document.body.appendChild(div)
+  // wait till rendered?
+  for (const style in selectors) {
+    // TODO do we need try catch
+    try {
+      color[style] = rgb2hex(window.getComputedStyle(styled[style]).color)
+    } catch (e) {
+      console.error(e)
+    }
+  }
+  color.background = rgb2hex(window.getComputedStyle(div).backgroundColor)
+  document.body.removeChild(div)
+
+  return color
+}
+
+/**
+ *
+ * @param {string} rgb
+ * @return {string}
+ */
+function rgb2hex(rgb: string): string {
+  if (rgb.search("rgb") === -1) {
+    return rgb
+  } else {
+    const rgb_match = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/)
+
+    if (rgb_match) {
+      return hex(rgb_match[1]) + hex(rgb_match[2]) + hex(rgb_match[3])
+    } else {
+      // TODO should we check for this error?
+      console.error(rgb.concat(" isn't a rgb string!"))
+      return "#000000" // black
+    }
+  }
+}
+
+/**
+ *
+ * @param {string} x
+ */
+function hex(x: string) {
+  return ("0" + parseInt(x, 10).toString(16)).slice(-2)
+}