diff --git a/field_example/config/schema/field_example.schema.yml b/field_example/config/schema/field_example.schema.yml
new file mode 100644
index 0000000..6b63036
--- /dev/null
+++ b/field_example/config/schema/field_example.schema.yml
@@ -0,0 +1,10 @@
+field.field_example_rgb.value:
+  type: sequence
+  label: 'Default value'
+  sequence:
+    - type: mapping
+      label: 'Default'
+      mapping:
+        value:
+          type: string
+          label: 'Value'
diff --git a/field_example/field_example.info.yml b/field_example/field_example.info.yml
new file mode 100644
index 0000000..2ba15b6
--- /dev/null
+++ b/field_example/field_example.info.yml
@@ -0,0 +1,5 @@
+name: Field Example
+type: module
+description: An implementation of a field to show the Field API
+package: Example modules
+core: 8.x
diff --git a/field_example/field_example.js b/field_example/field_example.js
new file mode 100644
index 0000000..58e5339
--- /dev/null
+++ b/field_example/field_example.js
@@ -0,0 +1,24 @@
+/**
+ * @file
+ * Javascript for Field Example.
+ */
+
+/**
+ * Provides a farbtastic colorpicker for the fancier widget.
+ */
+(function($) {
+    Drupal.behaviors.field_example_colorpicker = {
+        attach: function() {
+            $(".edit-field-example-colorpicker").on("focus", function(event) {
+                var edit_field = this;
+                var picker = $(this).closest('div').parent().find(".field-example-colorpicker");
+                // Hide all color pickers except this one.
+                $(".field-example-colorpicker").hide();
+                $(picker).show();
+                $.farbtastic(picker, function(color) {
+                    edit_field.value = color;
+                }).setColor(edit_field.value);
+            });
+        }
+    };
+})(jQuery);
diff --git a/field_example/field_example.module b/field_example/field_example.module
new file mode 100644
index 0000000..78900be
--- /dev/null
+++ b/field_example/field_example.module
@@ -0,0 +1,120 @@
+<?php
+
+/**
+ * @file
+ * An example field using the Field Types API.
+ */
+/**
+ * @defgroup field_example Example: Field Types API
+ * @ingroup examples
+ * @{
+ * Examples using Field Types API.
+ *
+ * Providing a field requires:
+ * - Defining a field:
+ *   - config/schema/[module_name].schema.yml
+ *   - A field_type plugin
+ *   - One or more widget plugins
+ *   - One or more formatter plugins
+ *
+ * - Defining a formatter for the field (the portion that outputs the field for
+ *   display):
+ *   - hook_field_formatter_info()
+ *   - hook_field_formatter_view()
+ *
+ * - Defining a widget for the edit form:
+ *   - hook_field_widget_info()
+ *   - hook_field_widget_form()
+ *
+ * Our module defines the field in field_example_field_info(),
+ * field_example_field_validate() and field_example_field_is_empty().
+ * field_example_field_schema() is implemented in field_example.install.
+ *
+ * Our module sets up a formatter in field_example_field_formatter_info() and
+ * field_example_field_formatter_view(). These are the API hooks that present
+ * formatted and themed output to the user.
+
+ * And finally, our module defines the widet in
+ * field_example_field_widget_info() and field_example_field_widget_form().
+ * The widget is the form element used to receive input from the user
+ * when the field is being populated.
+ *
+ * @see field_types
+ * @see field
+ */
+
+/**
+ * Implements hook_menu().
+ *
+ * Provides a simple user interface that tells the developer where to go.
+ */
+function field_example_menu() {
+  $items['examples/field_example'] = array(
+    'title' => 'Field Example',
+    'route_name' => 'field_example_page',
+  );
+  return $items;
+}
+
+/**
+ * Validate and clean up the input on single text field entry.
+ */
+function field_example_text_validate($element, &$form_state) {
+  $value = $element['#value'];
+  // Nothing to do if input is empty.
+  if (empty($value)) {
+    form_set_value($element, '', $form_state);
+    return;
+  }
+
+  // Strip preceding pound sign for analysis.
+  if (substr($value, 0, 1) == '#') {
+    $value = substr($value, 1);
+  }
+
+  // Convert to lower-case for consistency.
+  $value = strtolower($value);
+
+  // Keeping it simple, only 6-digit hex values accepted.
+  if (strlen($value) != 6) {
+    form_error($element, t("Please enter a 6-digit hexadecimal value."));
+    return;
+  }
+
+  // Validate that this is a legit hex value.
+  if (!ctype_xdigit($value)) {
+    form_error($element, t("Please enter a valid hexadecimal value."));
+  }
+
+  // Add a preceding pound sign.
+  $value = "#$value";
+  form_set_value($element, $value, $form_state);
+}
+
+/**
+ * Validate the individual fields and then convert them into a single HTML RGB
+ * value as text.
+ */
+function field_example_3text_validate($element, &$form_state) {
+  // Validate each of the textfield entries.
+  foreach (array('r', 'g', 'b') as $colorfield) {
+    $values[$colorfield] = $element[$colorfield]['#value'];
+    // If they left any empty, we'll set the value empty and quit.
+    if (strlen($values[$colorfield]) == 0) {
+      form_set_value($element, '', $form_state);
+      return;
+    }
+    // If they gave us anything that's not hex, reject it.
+    if ((strlen($values[$colorfield]) != 2) || !ctype_xdigit($values[$colorfield])) {
+      form_error($element[$colorfield], t("Saturation value must be a 2-digit hexadecimal value between 00 and ff."));
+    }
+  }
+
+  // Set the value of the entire form element.
+  $value = strtolower(sprintf('#%02s%02s%02s', $values['r'], $values['g'], $values['b']));
+  form_set_value($element, $value, $form_state);
+}
+
+/**
+ * @} End of "defgroup field_example".
+ */
diff --git a/field_example/field_example.routing.yml b/field_example/field_example.routing.yml
new file mode 100644
index 0000000..1450fb1
--- /dev/null
+++ b/field_example/field_example.routing.yml
@@ -0,0 +1,6 @@
+field_example_page:
+  pattern: 'examples/field_example'
+  defaults:
+    _content: '\Drupal\field_example\Controller\FieldExampleController::page'
+  requirements:
+    _access: 'TRUE'
diff --git a/field_example/lib/Drupal/field_example/Controller/FieldExampleController.php b/field_example/lib/Drupal/field_example/Controller/FieldExampleController.php
new file mode 100644
index 0000000..c1c4b11
--- /dev/null
+++ b/field_example/lib/Drupal/field_example/Controller/FieldExampleController.php
@@ -0,0 +1,33 @@
+<?php
+
+/**
+ * @file
+ * Contains \Drupal\field_example\Controller\FieldExampleController.
+ */
+
+namespace Drupal\field_example\Controller;
+
+use Drupal\Core\Controller\ControllerBase;
+use Drupal\Core\DependencyInjection\ContainerInjectionInterface;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+
+/**
+ * Returns responses for dblog routes.
+ */
+class FieldExampleController extends ControllerBase implements ContainerInjectionInterface {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container) {
+    return new static();
+  }
+
+  /**
+   * A simple page to explain to the developer what to do.
+   */
+  public function page() {
+    return t("The Field Example provides a field composed of an HTML RGB value, like #ff00ff. To use it, add the field to a content type.");
+  }
+
+}
diff --git a/field_example/lib/Drupal/field_example/Plugin/field/field_type/RgbItem.php b/field_example/lib/Drupal/field_example/Plugin/field/field_type/RgbItem.php
new file mode 100644
index 0000000..bbeec67
--- /dev/null
+++ b/field_example/lib/Drupal/field_example/Plugin/field/field_type/RgbItem.php
@@ -0,0 +1,62 @@
+<?php
+
+/**
+ * @file
+ * Contains \Drupal\field_example\Plugin\field\field_type\RgbItem.
+ */
+
+namespace Drupal\field_example\Plugin\field\field_type;
+
+use Drupal\field\Plugin\Type\FieldType\ConfigFieldItemBase;
+use Drupal\Core\Entity\Annotation\FieldType;
+use Drupal\Core\Annotation\Translation;
+use Drupal\field\FieldInterface;
+
+/**
+ * Plugin implementation of the 'field_example_rgb' field type.
+ *
+ * @FieldType(
+ *   id = "field_example_rgb",
+ *   label = @Translation("Example Color RGB"),
+ *   description = @Translation("Demonstrates a field composed of an RGB color."),
+ *   default_widget = "field_example_3text",
+ *   default_formatter = "field_example_simple_text"
+ * )
+ */
+class RgbItem extends ConfigFieldItemBase {
+
+  /**
+   * Definitions of the contained properties.
+   *
+   * @var array
+   */
+  static $propertyDefinitions;
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getPropertyDefinitions() {
+    if (!isset(static::$propertyDefinitions)) {
+      static::$propertyDefinitions['value'] = array(
+        'type' => 'string',
+        'label' => t('Hex value'),
+      );
+    }
+    return static::$propertyDefinitions;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function schema(FieldInterface $field) {
+    return array(
+      'columns' => array(
+        'value' => array(
+          'type' => 'text',
+          'size' => 'tiny',
+        ),
+      ),
+    );
+  }
+
+}
diff --git a/field_example/lib/Drupal/field_example/Plugin/field/formatter/ColorBackgroudFormatter.php b/field_example/lib/Drupal/field_example/Plugin/field/formatter/ColorBackgroudFormatter.php
new file mode 100644
index 0000000..0c1645d
--- /dev/null
+++ b/field_example/lib/Drupal/field_example/Plugin/field/formatter/ColorBackgroudFormatter.php
@@ -0,0 +1,54 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\field_example\Plugin\field\formatter\ColorBackgroudFormatter.
+ */
+
+namespace Drupal\field_example\Plugin\field\formatter;
+
+use Drupal\field\Annotation\FieldFormatter;
+use Drupal\Core\Annotation\Translation;
+use Drupal\field\Plugin\Type\Formatter\FormatterBase;
+use Drupal\Core\Entity\EntityInterface;
+use Drupal\Core\Entity\Field\FieldInterface;
+
+/**
+ * Plugin implementation of the 'field_example_color_background' formatter.
+ *
+ * @FieldFormatter(
+ *   id = "field_example_color_background",
+ *   label = @Translation("Change the background of the output text"),
+ *   field_types = {
+ *     "field_example_rgb"
+ *   }
+ * )
+ */
+class ColorBackgroudFormatter extends FormatterBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function viewElements(EntityInterface $entity, $langcode, FieldInterface $items) {
+    $elements = array();
+
+    foreach ($items as $delta => $item) {
+        $elements[$delta] = array(
+        '#type' => 'html_tag',
+        '#tag' => 'p',
+        '#value' => t('The content area color has been changed to @code', array('@code' => $item->value)),
+        '#attached' => array(
+          'css' => array(
+            array(
+              'data' => 'main { background-color:' . $item->value . ';}',
+              'type' => 'inline',
+            ),
+          ),
+        ),
+      );
+    }
+
+    return $elements;
+  }
+
+}
diff --git a/field_example/lib/Drupal/field_example/Plugin/field/formatter/SimpleTextFormatter.php b/field_example/lib/Drupal/field_example/Plugin/field/formatter/SimpleTextFormatter.php
new file mode 100644
index 0000000..0c771c5
--- /dev/null
+++ b/field_example/lib/Drupal/field_example/Plugin/field/formatter/SimpleTextFormatter.php
@@ -0,0 +1,52 @@
+<?php
+
+/**
+ * @file
+ * Definition of Drupal\field_example\Plugin\field\formatter\SimpleTextFormatter.
+ */
+
+namespace Drupal\field_example\Plugin\field\formatter;
+
+use Drupal\field\Annotation\FieldFormatter;
+use Drupal\Core\Annotation\Translation;
+use Drupal\field\Plugin\Type\Formatter\FormatterBase;
+use Drupal\Core\Entity\EntityInterface;
+use Drupal\Core\Entity\Field\FieldInterface;
+
+/**
+ * Plugin implementation of the 'field_example_simple_text' formatter.
+ *
+ * @FieldFormatter(
+ *   id = "field_example_simple_text",
+ *   label = @Translation("Simple text-based formatter"),
+ *   field_types = {
+ *     "field_example_rgb"
+ *   }
+ * )
+ */
+class SimpleTextFormatter extends FormatterBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function viewElements(EntityInterface $entity, $langcode, FieldInterface $items) {
+    $elements = array();
+
+    foreach ($items as $delta => $item) {
+      $elements[$delta] = array(
+        // We create a render array to produce the desired markup,
+        // "<p style="color: #hexcolor">The color code ... #hexcolor</p>".
+        // See theme_html_tag().
+        '#type' => 'html_tag',
+        '#tag' => 'p',
+        '#attributes' => array(
+          'style' => 'color: ' . $item->value,
+        ),
+        '#value' => t('The color code in this field is @code', array('@code' => $item->value)),
+      );
+    }
+
+    return $elements;
+  }
+
+}
diff --git a/field_example/lib/Drupal/field_example/Plugin/field/widget/ColorPickerWidget.php b/field_example/lib/Drupal/field_example/Plugin/field/widget/ColorPickerWidget.php
new file mode 100644
index 0000000..27b3aac
--- /dev/null
+++ b/field_example/lib/Drupal/field_example/Plugin/field/widget/ColorPickerWidget.php
@@ -0,0 +1,48 @@
+<?php
+
+/**
+ * @file
+ * Contains \Drupal\field_example\Plugin\field\widget\ColorPickerWidget.
+ */
+
+namespace Drupal\field_example\Plugin\field\widget;
+
+use Drupal\field\Annotation\FieldWidget;
+use Drupal\Core\Annotation\Translation;
+use Drupal\Core\Entity\Field\FieldInterface;
+use Drupal\field_example\Plugin\field\widget\TextWidget;
+
+/**
+ * Plugin implementation of the 'field_example_colorpicker' widget.
+ *
+ * @FieldWidget(
+ *   id = "field_example_colorpicker",
+ *   label = @Translation("Color Picker"),
+ *   field_types = {
+ *     "field_example_rgb"
+ *   }
+ * )
+ */
+class ColorPickerWidget extends TextWidget {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function formElement(FieldInterface $items, $delta, array $element, $langcode, array &$form, array &$form_state) {
+    $element = parent::formElement($items, $delta, $element, $langcode, $form, $form_state);
+    $element += array(
+      '#suffix' => '<div class="field-example-colorpicker"></div>',
+      '#attributes' => array('class' => array('edit-field-example-colorpicker')),
+      '#attached' => array(
+        // Add Farbtastic color picker.
+        'library' => array(
+          array('system', 'jquery.farbtastic'),
+        ),
+        // Add javascript to trigger the colorpicker.
+        'js' => array(drupal_get_path('module', 'field_example') . '/field_example.js'),
+      ),
+    );
+    return $element;
+  }
+
+}
diff --git a/field_example/lib/Drupal/field_example/Plugin/field/widget/Text3Widget.php b/field_example/lib/Drupal/field_example/Plugin/field/widget/Text3Widget.php
new file mode 100644
index 0000000..9ff0e86
--- /dev/null
+++ b/field_example/lib/Drupal/field_example/Plugin/field/widget/Text3Widget.php
@@ -0,0 +1,66 @@
+<?php
+
+/**
+ * @file
+ * Contains \Drupal\field_example\Plugin\field\widget\Text3Widget.
+ */
+
+namespace Drupal\field_example\Plugin\field\widget;
+
+use Drupal\field\Annotation\FieldWidget;
+use Drupal\Core\Annotation\Translation;
+use Drupal\Core\Entity\Field\FieldInterface;
+use Drupal\field\Plugin\Type\Widget\WidgetBase;
+
+/**
+ * Plugin implementation of the 'field_example_3text' widget.
+ *
+ * @FieldWidget(
+ *   id = "field_example_3text",
+ *   label = @Translation("RGB text field"),
+ *   field_types = {
+ *     "field_example_rgb"
+ *   }
+ * )
+ */
+class Text3Widget extends WidgetBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function formElement(FieldInterface $items, $delta, array $element, $langcode, array &$form, array &$form_state) {
+    $value = isset($items[$delta]->value) ? $items[$delta]->value : '';
+    // Parse the single hex string into RBG values.
+    if (!empty($value)) {
+      preg_match_all('@..@', substr($value, 1), $match);
+    }
+    else {
+      $match = array(array());
+    }
+
+    // Set up the form element for this widget.
+    $element += array(
+      '#type' => 'fieldset',
+      '#element_validate' => array('field_example_3text_validate'),
+    );
+
+    // Add in the RGB textfield elements.
+    foreach (array('r' => t('Red'), 'g' => t('Green'), 'b' => t('Blue')) as $key => $title) {
+      $element[$key] = array(
+        '#type' => 'textfield',
+        '#title' => $title,
+        '#size' => 2,
+        '#default_value' => array_shift($match[0]),
+        '#attributes' => array('class' => array('rgb-entry')),
+        '#description' => t('The 2-digit hexadecimal representation of @color saturation, like "a1" or "ff"', array('@color' => $title)),
+      );
+      // Since Form API doesn't allow a fieldset to be required, we
+      // have to require each field element individually.
+      if ($element['#required']) {
+        $element[$key]['#required'] = TRUE;
+      }
+    }
+    return $element;
+  }
+
+}
diff --git a/field_example/lib/Drupal/field_example/Plugin/field/widget/TextWidget.php b/field_example/lib/Drupal/field_example/Plugin/field/widget/TextWidget.php
new file mode 100644
index 0000000..1f2fb6f
--- /dev/null
+++ b/field_example/lib/Drupal/field_example/Plugin/field/widget/TextWidget.php
@@ -0,0 +1,45 @@
+<?php
+
+/**
+ * @file
+ * Contains \Drupal\field_example\Plugin\field\widget\TextWidget.
+ */
+
+namespace Drupal\field_example\Plugin\field\widget;
+
+use Drupal\field\Annotation\FieldWidget;
+use Drupal\Core\Annotation\Translation;
+use Drupal\Core\Entity\Field\FieldInterface;
+use Drupal\field\Plugin\Type\Widget\WidgetBase;
+
+/**
+ * Plugin implementation of the 'field_example_text' widget.
+ *
+ * @FieldWidget(
+ *   id = "field_example_text",
+ *   label = @Translation("RGB value as #ffffff"),
+ *   field_types = {
+ *     "field_example_rgb"
+ *   }
+ * )
+ */
+class TextWidget extends WidgetBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function formElement(FieldInterface $items, $delta, array $element, $langcode, array &$form, array &$form_state) {
+    $value = isset($items[$delta]->value) ? $items[$delta]->value : '';
+    $element += 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,
+      '#element_validate' => array('field_example_text_validate'),
+    );
+    return $element;
+  }
+
+}