Color Fields

Color fields give you a hexadecimal color input with a preview of the current color, and on browsers that support <input type="color">, clicking on the preview will open the browser’s color picker.

# Development

Calling a Color field in your templates will return a craft\fields\data\ColorData (opens new window) object, or null if no color was selected.

{% if entry.myFieldHandle %}
  <style type="text/css">
    .content a {
      color: {{ entry.myFieldHandle.getHex() }};
    }
  </style>
{% endif %}