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,63 +207,66 @@ 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) ->
+      if color.substr(0, 1) is '#'
+        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 ""
 
-    @rgb = @private_rgb.join ","
+      if /[0-9a-f]{3}/i.test color
+        return color if /[0-9a-f]{6}/i.test color
 
-    @isLight = ->
+        r = color.substr(0, 1)
-      rgb = @private_rgb
+        g = color.substr(1, 1)
-      return (rgb[0] + rgb[1] + rgb[2]) >= 400
+        b = color.substr(2, 1)
+        return [r,r,g,g,b,b].join ""
 
-    @shiftRGB = (shift, smart) ->
+      if digits = color.match /(.*?)rgba?\((\d+), ?(\d+), ?(\d+)(.*?)\)/
-      minmax = (base) ->
+        # [R, G, B] to 0xRRGGBB
-        Math.min Math.max(base, 0), 255
+        hex = (
-      rgb = @private_rgb.slice 0
+          (parseInt(digits[2], 10) << 16) |
+          (parseInt(digits[3], 10) << 8)  |
+          (parseInt(digits[4], 10))
+        ).toString 16
+
+        while hex.length < 6
+          hex = "0#{hex}"
+        return hex
+
+      else
+        "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
-          if @isLight rgb
-            -1
-          else
-            1
-        ) * Math.abs shift
       else
         shift
 
-      return [
+      return (minmax color + shift for color in rgb).join ","
-        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 digits = color.match /(.*?)rgba?\((\d+), ?(\d+), ?(\d+)(.*?)\)/
-      # [R, G, B] to 0xRRGGBB
-      hex = (
-        (parseInt(digits[2], 10) << 16) |
-        (parseInt(digits[3], 10) << 8)  |
-        (parseInt(digits[4], 10))
-      ).toString 16
-
-      while hex.length < 6
-        hex = "0#{hex}"
-
-      hex
-
-    else
-      false

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