diff --git a/core/modules/color/color.js b/core/modules/color/color.js
index 014ea2b..5183a0b 100644
--- a/core/modules/color/color.js
+++ b/core/modules/color/color.js
@@ -11,8 +11,8 @@ Drupal.behaviors.color = {
   attach: function (context, settings) {
     var i, j, colors;
     // This behavior attaches by ID, so is only valid once on a page.
-    var form = $(context).find('#system-theme-settings .color-form').once('color');
-    if (form.length === 0) {
+    var $form = $('#system-theme-settings').find('.color-form').once('color');
+    if ($form.length === 0) {
       return;
     }
     var inputs = [];
@@ -21,7 +21,7 @@ Drupal.behaviors.color = {
     var focused = null;
 
     // Add Farbtastic.
-    $('<div id="placeholder"></div>').once('color').prependTo(form);
+    $('<div id="placeholder"></div>').once('color').prependTo($form);
     var farb = $.farbtastic('#placeholder');
 
     // Decode reference colors to HSL.
@@ -33,36 +33,37 @@ Drupal.behaviors.color = {
     }
 
     // Build a preview.
+    var $preview = $('#preview');
     var height = [];
     var width = [];
     // Loop through all defined gradients.
     for (i in settings.gradients) {
       if (settings.gradients.hasOwnProperty(i)) {
         // Add element to display the gradient.
-        $('#preview').once('color').append('<div id="gradient-' + i + '"></div>');
-        var gradient = $('#preview #gradient-' + i);
+        $preview.once('color').append('<div id="gradient-' + i + '"></div>');
+        var $gradient = $preview.find('#gradient-' + i);
         // Add height of current gradient to the list (divided by 10).
-        height.push(parseInt(gradient.css('height'), 10) / 10);
+        height.push(parseInt($gradient.css('height'), 10) / 10);
         // Add width of current gradient to the list (divided by 10).
-        width.push(parseInt(gradient.css('width'), 10) / 10);
+        width.push(parseInt($gradient.css('width'), 10) / 10);
         // Add rows (or columns for horizontal gradients).
         // Each gradient line should have a height (or width for horizontal
         // gradients) of 10px (because we divided the height/width by 10 above).
         for (j = 0; j < (settings.gradients[i].direction === 'vertical' ? height[i] : width[i]); ++j) {
-          gradient.append('<div class="gradient-line"></div>');
+          $gradient.append('<div class="gradient-line"></div>');
         }
       }
     }
 
     // Set up colorScheme selector.
-    form.find('#edit-scheme').change(function () {
+    $form.find('#edit-scheme').on('change', function () {
       var schemes = settings.color.schemes, colorScheme = this.options[this.selectedIndex].value;
       if (colorScheme !== '' && schemes[colorScheme]) {
         // Get colors of active scheme.
         colors = schemes[colorScheme];
         for (var fieldName in colors) {
           if (colors.hasOwnProperty(fieldName)) {
-            callback($('#edit-palette-' + fieldName), colors[fieldName], false, true);
+            callback($form.find('#edit-palette-' + fieldName), colors[fieldName], false, true);
           }
         }
         preview();
@@ -73,7 +74,7 @@ Drupal.behaviors.color = {
      * Renders the preview.
      */
     function preview() {
-      Drupal.color.callback(context, settings, form, farb, height, width);
+      Drupal.color.callback(context, settings, $form, farb, height, width);
     }
 
     /**
@@ -129,15 +130,16 @@ Drupal.behaviors.color = {
      */
     function callback(input, color, propagate, colorScheme) {
       var matched;
+      var $input = $(input);
       // Set background/foreground colors.
-      $(input).css({
+      $input.css({
         backgroundColor: color,
         'color': farb.RGBToHSL(farb.unpack(color))[2] > 0.5 ? '#000' : '#fff'
       });
 
       // Change input value.
-      if ($(input).val() && $(input).val() !== color) {
-        $(input).val(color);
+      if ($input.val() && $input.val() !== color) {
+        $input.val(color);
 
         // Update locked values.
         if (propagate) {
@@ -172,7 +174,7 @@ Drupal.behaviors.color = {
      * Resets the color scheme selector.
      */
     function resetScheme() {
-      form.find('#edit-scheme').each(function () {
+      $form.find('#edit-scheme').each(function () {
         this.selectedIndex = this.options.length - 1;
       });
     }
@@ -198,8 +200,9 @@ Drupal.behaviors.color = {
     }
 
     // Initialize color fields.
-    form.find('#palette input.form-text')
+    $form.find('#palette input.form-text')
     .each(function () {
+      var $this = $(this);
       // Extract palette field name
       this.key = this.id.substring(13);
 
@@ -229,22 +232,20 @@ Drupal.behaviors.color = {
             );
           }
         );
-        $(this).after(lock);
+        $this.after(lock);
         locks.push(lock);
       }
 
       // Add hook.
       var hook = $('<div class="hook"></div>');
-      $(this).after(hook);
+      $this.after(hook);
       hooks.push(hook);
 
-      $(this).parent().find('.lock').click();
+      $this.parent().find('.lock').click();
       this.i = i;
       inputs.push(this);
     })
-    .focus(focus);
-
-    form.find('#palette label');
+    .on('focus', focus);
 
     // Focus first color.
     inputs[0].focus();
diff --git a/core/modules/color/preview.js b/core/modules/color/preview.js
index b15a7b6..ce27359 100644
--- a/core/modules/color/preview.js
+++ b/core/modules/color/preview.js
@@ -8,13 +8,15 @@
   "use strict";
 
   Drupal.color = {
-    callback: function(context, settings, form, farb, height, width) {
+    callback: function(context, settings, $form, farb, height, width) {
+      var $palette = $form.find('#palette');
       // Solid background.
-      form.find('#preview').css('backgroundColor', form.find('#palette input[name="palette[base]"]').val());
+      $form.find('#preview').css('backgroundColor', $palette.find('input[name="palette[base]"]').val());
 
       // Text preview
-      form.find('#text').css('color', form.find('#palette input[name="palette[text]"]').val());
-      form.find('#text a, #text h2').css('color', form.find('#palette input[name="palette[link]"]').val());
+      var $text = $form.find('#text');
+      $text.css('color', $palette.find('input[name="palette[text]"]').val());
+      $text.find('a, h2').css('color', $palette.find('input[name="palette[link]"]').val());
 
       function gradientLineColor(i, element) {
         for (var k in accum) {
@@ -29,8 +31,8 @@
       var color_start, color_end;
       for (var i in settings.gradients) {
         if (settings.gradients.hasOwnProperty(i)) {
-          color_start = farb.unpack(form.find('#palette input[name="palette[' + settings.gradients[i].colors[0] + ']"]').val());
-          color_end = farb.unpack(form.find('#palette input[name="palette[' + settings.gradients[i].colors[1] + ']"]').val());
+          color_start = farb.unpack($palette.find('input[name="palette[' + settings.gradients[i].colors[0] + ']"]').val());
+          color_end = farb.unpack($palette.find('input[name="palette[' + settings.gradients[i].colors[1] + ']"]').val());
           if (color_start && color_end) {
             var delta = [];
             for (var j in color_start) {
@@ -40,7 +42,7 @@
             }
             var accum = color_start;
             // Render gradient lines.
-            form.find('#gradient-' + i + ' > div').each(gradientLineColor);
+            $form.find('#gradient-' + i + ' > div').each(gradientLineColor);
           }
         }
       }