Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

For a software dev like me who has no idea how to create a cute hand-drawn dashed line, this course just 100% works.

— Ira Zayats, Developer

Color Fieldtype

A simple color picker with support for pre-defined swatches as well as entering a color by hex code.

Color Fieldtype UI
The Color Fieldtype in action!

Overview

If you want work with colors, this is the way to do it. You could combine it with Bard or Replicator to create page "page builders", use it to choose background colors for headers or hero blocks, or even image overlays with mix-blend-mode: multiply. Go get creative!

Data Structure

The color fieldtype stores the color values as a hex string.

header_color: "#FF269E"

Templating

The color is output as a simple string. Most often you'll use this in an inline style tag to style elements of your front-end site.

<div class="hero" style="background-color: {{ header_color }}">
<h1>Bay Side High's Sweetheart Dance</h1>
<h2>This Friday Night!</h2>
</div>
<div class="hero" style="background-color: {{ $header_color }}">
<h1>Bay Side High's Sweetheart Dance</h1>
<h2>This Friday Night!</h2>
</div>

Options

swatches

array

Pre-define colors that can be selected from a list. Supports all color mode formats.

allow_any

boolean

Allow entering any color value via picker or hex code.

Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →