diff --git a/elements.module b/elements.module
index ed66a30..edd412a 100644
--- a/elements.module
+++ b/elements.module
@@ -51,6 +51,12 @@ function elements_element_info() {
     '#theme' => 'rangefield',
     '#theme_wrappers' => array('form_element'),
   );
+  $types['colorfield'] = array(
+    '#input' => TRUE,
+    '#process' => array('ajax_process_form'),
+    '#theme' => 'colorfield',
+    '#theme_wrappers' => array('form_element'),
+  );
 
   return $types;
 }
@@ -105,6 +111,11 @@ function elements_theme() {
       'render element' => 'element',
       'file' => 'elements.theme.inc',
     ),
+    'colorfield' => array(
+      'arguments' => array('element' => NULL),
+      'render element' => 'element',
+      'file' => 'elements.theme.inc',
+    ),
   );
 }
 
diff --git a/elements.theme.inc b/elements.theme.inc
index 12b1706..54e1a9e 100644
--- a/elements.theme.inc
+++ b/elements.theme.inc
@@ -142,3 +142,26 @@ function theme_rangefield($variables) {
 
   return $output;
 }
+
+/**
+ * Returns the HTML for a color form element
+ *
+ * @param array $variables
+ *   An associative array containing:
+ *   - element: An associative array container the properties for the element.
+ *     Properties used: #title, #value, #description, #attributes
+ * 
+ * @see http://www.whatwg.org/specs/web-apps/current-work/multipage/number-state.html#color-state
+ * @ingroup themeable
+ */
+function theme_colorfield($variables) {
+  // @todo verify the list of properties match those in the specification
+  $element = $variables['element'];
+  $element['#attributes']['type'] = 'color';
+  element_set_attributes($element, array('id', 'name', 'value'));
+  _form_set_class($element, array('form-text', 'form-color'));
+  
+  $output = '<input' . drupal_attributes($element['#attributes']) . ' />';
+  
+  return $output;
+}