diff --git a/colorfield.module b/colorfield.module
index bcfa6d6..844c061 100644
--- a/colorfield.module
+++ b/colorfield.module
@@ -186,6 +186,10 @@ function colorfield_field_widget_info() {
        'label' => t('RGB text field'),
        'field types' => array('colorfield_rgb'),
     ),
+    'colorfield_farbtastic' => array(
+      'label' => t('Farbtastic color picker'),
+      'field types' => array('colorfield_rgb'),
+    ),
     'colorfield_colorpicker' => array(
       'label' => t('Color Picker'),
       'field types' => array('colorfield_rgb'),
@@ -220,17 +224,32 @@ function colorfield_field_widget_form(&$form, &$form_state, $field, $instance, $
 
   switch ($instance['widget']['type']) {
 
-    case 'colorfield_colorpicker':
+    case 'colorfield_farbtastic':
       $widget += array(
+        '#type' => 'textfield',
+        '#default_value' => $value,
+        // Allow a slightly larger size that the field length to allow for some
+        // configurations where all characters won't fit in input field.
+        '#size' => 7,
+        '#maxlength' => 7,
         '#suffix' => '<div class="colorfield-colorpicker"></div>',
         '#attributes' => array('class' => array('edit-colorfield-colorpicker')),
         '#attached' => array(
           // Add Farbtastic color picker.
-          /**
-            'library' => array(
+          'library' => array(
             array('system', 'farbtastic'),
-          ), 
-           */
+          ),
+          'js' => array(
+            drupal_get_path('module', 'colorfield') . '/lib/js/colorfield-farbtastic.js',
+          ),
+        ),
+      );
+      break;
+    case 'colorfield_colorpicker':
+      $widget += array(
+        '#suffix' => '<div class="colorfield-colorpicker"></div>',
+        '#attributes' => array('class' => array('edit-colorfield-colorpicker')),
+        '#attached' => array(
           // Add javascript to trigger the colorpicker.                    
           'js' => array(drupal_get_path('module', 'colorfield') . '/lib/js/colorpicker.js', drupal_get_path('module', 'colorfield') . '/colorfield.js'),
           // And the CSS
diff --git a/lib/js/colorfield-farbtastic.js b/lib/js/colorfield-farbtastic.js
new file mode 100644
index 0000000..a2b2ecc
--- /dev/null
+++ b/lib/js/colorfield-farbtastic.js
@@ -0,0 +1,53 @@
+/**
+ * @file
+ * Javascript for Farbtastic colorfield widget.
+ */
+
+/**
+ * Provides a farbtastic colorpicker for the widget.
+ */
+(function ($) {
+  Drupal.behaviors.field_example_colorpicker = {
+    attach: function(context) {
+      $(".edit-colorfield-colorpicker", context).bind("focus", function(event) {
+        var edit_field = this;
+        var picker = $(this).closest('div').parent().find(".colorfield-colorpicker");
+
+        // Hide all color pickers except this one.
+        $(".colorfield-colorpicker").hide();
+        $(picker).show();
+
+        var updateBackground = function() {
+          // Catch errors caused by invalid hex codes.
+          var unpacked = farb.unpack(this.value);
+          if (!unpacked) {
+            return;
+          }
+          // If a valid color, set background/foreground colors.
+          $(this).css({
+            backgroundColor: this.value,
+            'color': farb.RGBToHSL(unpacked)[2] > 0.5 ? '#000' : '#fff'
+          });
+        }
+
+        var updatePicker = function() {
+          farb.setColor(this.value);
+        }
+
+        // Adjust the background color on keyup and onload.
+        $(edit_field)
+          .unbind('keyup.colorfield')
+          .bind('keyup.colorfield', updateBackground)
+          .bind('keyup.colorfield', updatePicker);
+
+        // Attach Farbtastic.
+        var farb = $.farbtastic(picker);
+        farb.setColor(edit_field.value);
+        farb.linkTo(function(color) {
+          edit_field.value = color;
+          updateBackground.apply(edit_field);
+        });
+      });
+    }
+  }
+})(jQuery);