diff --git a/colorfield.module b/colorfield.module
index 2c21d40..956c950 100755
--- a/colorfield.module
+++ b/colorfield.module
@@ -43,6 +43,97 @@ function colorfield_field_info() {
 }
 
 /**
+ * Implements hook_element_info().
+ */
+function colorfield_element_info() {
+  $type['colorfield_picker'] = array(
+    '#input' => TRUE,
+    '#tree' => TRUE,
+    '#process' => array('colorfield_picker_element_process'),
+    '#theme_wrappers' => array('form_element'),
+  );
+  $type['colorfield_rgb'] = array(
+    '#input' => TRUE,
+    '#tree' => TRUE,
+    '#process' => array('colorfield_rgb_element_process'),
+    '#theme_wrappers' => array('form_element'),
+  );
+
+  return $type;
+}
+
+/**
+ * Define the colour picker with Javascript popup element processing.
+ * Add popup attributes to $element.
+ */
+function colorfield_picker_element_process($element, &$form_state, $form) {
+  $element['colorfield_picker'] = array(
+    '#type' => 'textfield',
+    '#size' => 7,
+    '#maxlength' => 7,
+    '#default_value' => isset($element['#default_value']['colorfield_picker']) ? $element['#default_value']['colorfield_picker'] : NULL,
+    '#attributes' => array('class' => array('colorfield-colorpicker')),
+    '#attached' => array(
+      'library' => array(array('system', 'farbtastic')),
+      'js' => array(drupal_get_path('module', 'colorfield') . '/js/colorfield-farbtastic.js'),
+    ),
+    '#suffix' => '<div class="colorfield-picker"></div>',
+  );
+
+  return $element;
+}
+
+/**
+ * Define the RGB field element.
+ */
+function colorfield_rgb_element_process($element, &$form_state, $form) {
+  $element['colorfield_rgb'] = array(
+    '#type' => 'fieldset',
+    '#title' => t('Select your color'),
+    '#description' => '<p>' . t('The 2-digit hexadecimal representation of the color saturation, like "44", "C2" or "FF".') . '</p>',
+    '#attributes' => array('class' => array('colorfield-split-field')),
+    '#attached' => array(
+      'css' => array(drupal_get_path('module', 'colorfield') . '/styles/colorfield.css'),
+    ),
+    '#suffix' => '<div class="clearfix"></div>',
+  );
+
+  if (isset($element['#default_value']['colorfield_rgb'])) {
+    $color = $element['#default_value']['colorfield_rgb'];
+    if (is_string($element['#default_value']['colorfield_rgb'])) {
+      if (strlen($color) == '7') {
+        $raw_value = substr($color, 1);
+        $color = array(
+          'r' => $raw_value{0} . $raw_value{1},
+          'g' => $raw_value{2} . $raw_value{3},
+          'b' => $raw_value{4} . $raw_value{5},
+        );
+      }
+    }
+  }
+  else {
+    $color = array(
+      'r' => '',
+      'g' => '',
+      'b' => '',
+    );
+  }
+
+  // Create a textfield for saturation values for Red, Green, and Blue.
+  foreach (array('r' => t('Red'), 'g' => t('Green'), 'b' => t('Blue')) as $key => $title) {
+    $element[$key] = array(
+      '#type' => 'textfield',
+      '#title' => $title,
+      '#size' => 2,
+      '#maxlength' => 2,
+      '#default_value' => $color[$key],
+    );
+  }
+
+  return $element;
+}
+
+/**
  * Implements hook_field_validate().
  *
  * Validates that the inputed value matchs a hexadecimal color.