Color
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:
RAZOR
<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).
