         @.style["border-color"] = (if /^#/.test(colour) then colour else "#" + colour)
         @.parentNode.className += " is-approximate"
         @.parentNode.className += " is-exact icon--tick--before"  if proximity is 0
+        $(@).closest(".styleguide__colours").addClass("has-match")
       else
         @.parentNode.className += " isnt-approximate"
 
+    sections.filter(".has-match").css
+      backgroundColor: "#"+colour.replace("#", "")
+      paddingRight: 10
+      paddingTop: 10
 
-  # Mostly ripped from here: http://stackoverflow.com/questions/13586999/color-difference-similarity-between-two-values-with-js 
+
+  # Mostly ripped from here: http://stackoverflow.com/questions/13586999/color-difference-similarity-between-two-values-with-js
   colourProximity = (v1, v2) ->
     i = undefined
     d = 0


  matchProximity = ->
    colour = document.getElementById("proximityMatch").value
    colourBlocks = $(".styleguide-block__item--colour")
    colourBlocks.each ->
      proximity = colourProximity(colour, @.innerHTML)
      
      # Remove previous classes
      @.parentNode.removeAttribute "style"
      @.parentNode.className = @.parentNode.className.replace(" is-approximate", "").replace(" isnt-approximate", "")


  hexToRGB = (colour) ->
    colour = colour.replace(/^#/, "").match(/[0-9a-z]{2}/gi)
    [parseInt(colour[0], 16), parseInt(colour[1], 16), parseInt(colour[2], 16)]
