My eventual goal is to move all of this into my JSColor

implementation.

src/General/css/theme.css

@@ -383,7 +383,7 @@ a .name {
 }
 .fourchan-banner-at-sidebar-top.icon-orientation-vertical.fourchan-ss-sidebar body::after,
 .fourchan-banner-at-sidebar-top.fourchan-ss-sidebar body::before {
-  background: rgba(#{if background = new Style.color Style.colorToHex theme["Reply Background"] then background.shiftRGB -18}, 0.8);
+  background: rgba(#{if background = new Style.color theme["Reply Background"] then background.shiftRGB -18}, 0.8);
 }
 .fourchan-ss-sidebar.sidebar-location-right body::before {
   border-left: 2px solid #{backgroundC};

src/Theming/Mascots.coffee

@@ -50,7 +50,7 @@ MascotTools =
       height: 100
     ctx = el.getContext('2d')
     ctx.font         = "50px #{Conf['Font']}"
-    ctx.fillStyle    = "#" + Style.colorToHex (Themes[Conf['theme']] or Themes['Yotsuba B'])['Text']
+    ctx.fillStyle    = (new Style.color (Themes[Conf['theme']] or Themes['Yotsuba B'])['Text']).hex
     ctx.textAlign    = 'center'
     ctx.textBaseline = 'middle'
     ctx.fillText "Mascot 404", 124, 50

src/Theming/Style.coffee

@@ -110,7 +110,7 @@ Style =
     colors = []
     rgb    = ['r', 'g', 'b']
     for arg in arguments
-      hex = Style.colorToHex(arg) or "ffffff"
+      hex = (new Style.color arg).raw
       color = {}
       i     = 0
       while val = rgb[i]
@@ -149,11 +149,11 @@ Style =
     """<%= grunt.file.read('src/General/css/dynamic.css').replace(/\s+/g, ' ').trim() %>"""
 
   theme: (theme) ->
-    bgColor  = new Style.color(Style.colorToHex(backgroundC = theme["Background Color"]) or 'aaaaaa')
+    bgColor  = new Style.color(backgroundC = theme["Background Color"])
-    replybg  = new Style.color Style.colorToHex theme["Reply Background"]
+    replybg  = new Style.color theme["Reply Background"]
     replyRGB = "rgb(#{replybg.shiftRGB parseInt(Conf['Silhouette Contrast'], 10), true})"
 
-    Style.lightTheme = bgColor.isLight()
+    Style.lightTheme = bgColor.isLight
     
     svgs = [
       ['captcha-filter', "values='#{Style.filter Style.matrix theme["Text"], theme["Input Background"]} 0 0 0 1 0'"]
@@ -207,50 +207,34 @@ Style =
         """<%= grunt.file.read('src/General/css/padding.pages.css').replace(/\s+/g, ' ').trim() %>"""
       else ''
 
-  color: (hex) ->
+  color: class
-    @hex = "#" + hex
+    minmax = (base) -> if base < 0 then 0 else if base > 255 then 255 else base
 
-    @calc_rgb = (hex) ->
+    calc_rgb = (value) ->
-      hex = parseInt hex, 16
+      hex = parseInt value, 16
-      [ # 0xRRGGBB to [R, G, B]
+      return [ # 0xRRGGBB to [R, G, B]
         (hex >> 16) & 0xFF
         (hex >> 8) & 0xFF
         hex & 0xFF
       ]
 
-    @private_rgb = @calc_rgb(hex)
+    colorToHex = (color) ->
-
-    @rgb = @private_rgb.join ","
-
-    @isLight = ->
-      rgb = @private_rgb
-      return (rgb[0] + rgb[1] + rgb[2]) >= 400
-
-    @shiftRGB = (shift, smart) ->
-      minmax = (base) ->
-        Math.min Math.max(base, 0), 255
-      rgb = @private_rgb.slice 0
-      shift = if smart
-        (
-          if @isLight rgb
-            -1
-          else
-            1
-        ) * Math.abs shift
-      else
-        shift
-
-      return [
-        minmax rgb[0] + shift
-        minmax rgb[1] + shift
-        minmax rgb[2] + shift
-      ].join ","
-
-    @hover = @shiftRGB 16, true
-
-  colorToHex: (color) ->
       if color.substr(0, 1) is '#'
-      return color.slice 1, color.length
+        if color.length isnt 4
+          return color[1..]
+        else 
+          r = color.substr(1, 1)
+          g = color.substr(2, 1)
+          b = color.substr(3, 1)
+          return [r,r,g,g,b,b].join ""
+
+      if /[0-9a-f]{3}/i.test color
+        return color if /[0-9a-f]{6}/i.test color
+
+        r = color.substr(0, 1)
+        g = color.substr(1, 1)
+        b = color.substr(2, 1)
+        return [r,r,g,g,b,b].join ""
 
       if digits = color.match /(.*?)rgba?\((\d+), ?(\d+), ?(\d+)(.*?)\)/
         # [R, G, B] to 0xRRGGBB
@@ -262,8 +246,27 @@ Style =
 
         while hex.length < 6
           hex = "0#{hex}"
-
+        return hex
-      hex
 
       else
-      false
+        "000000"
+
+    isLight = (rgb) ->
+      (rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114) > 125
+
+    constructor: (@value) ->
+      @raw         = colorToHex value
+      @hex         = "#" + @raw
+      @private_rgb = calc_rgb value
+      @isLight     = isLight @private_rgb
+      @rgb         = @private_rgb.join ","
+      @hover       = @shiftRGB 16, true
+
+    shiftRGB: (shift, smart) ->
+      rgb = [@private_rgb...]
+      shift = if smart
+        (if @isLight then -1 else 1) * Math.abs shift
+      else
+        shift
+
+      return (minmax color + shift for color in rgb).join ","

src/Theming/Themes.coffee

@@ -140,7 +140,7 @@ ThemeTools =
 
           colorInput = $.el 'input',
             className: 'color'
-            value: "##{Style.colorToHex(input.value) or 'aaaaaa'}"
+            value: "##{(new Style.color input.value).hex}"
 
           JSColor.bind colorInput
 
@@ -190,7 +190,7 @@ ThemeTools =
       return alert "Syntax error on #{@name}."
 
     if @className is "colorfield"
-      @nextSibling.value = '#' + (Style.colorToHex(@value) or 'aaaaaa')
+      @nextSibling.value = (new Style.color @value).hex
       @nextSibling.color.importColor()
 
     editTheme[@name] = @value