The Color-field is used to select a color via either a color picker, by selecting a preset (hidden in screenshot), or by supplying a hex-code (Figure 1.1).

You can then render this color in frontend – or indeed variations of this color when using ViewModels, as this field exposes a ColorViewModel with some nifty built-in methods like Darken and Lighten:

<div class="col-md-12"> <h3>Color Field</h3> @{ var colorfield = Model.Item.GetColor("Color"); } <table class="table table-striped"> <tr> <th>Field</th> <th>Value</th> <th>Comments</th> </tr> <!--Color--> <tr> <td>Color</td> <td> Hex: <div style="background-color:@colorfield.Hex">@colorfield.Hex</div> <br /> Lighten 20%: <div style="background-color:@colorfield.Lighten(20)">@colorfield.Lighten(20)</div> <br /> Darken 20%: <div style="background-color:@colorfield.Darken(20)">@colorfield.Darken(20)</div> <br /> Contrast 30% Light: <div style="background-color:@colorfield.Contrast(30, 1)">@colorfield.Contrast(30, 1)</div> <br /> Contrast 30% Dark: <div style="background-color:@colorfield.Contrast(30, 0)">@colorfield.Contrast(30, 0)</div> <br /> </td> <td></td> </tr> </table> </div>

In this manner you can generate a color scheme based on the selected color (Figure 1.3).

When you add this field to an item type, you can define presets by supplying a comma-separated list of values in the Presets field (Figure 2.1).