ColorPicker for Umbraco Grid DataType Settings/Style sections

colorpicker.html

<div ng-controller="Umbraco.PropertyEditors.ColorPickerController">
    <ul class="thumbnails color-picker">
        <li ng-repeat="preval in model.prevalues" ng-class="{active: model.value === preval.value}">
            <a ng-click="toggleItem(preval)" class="thumbnail" hex-bg-color="{{preval.color}}">

            </a>
            <span class="color-label" ng-bind="preval.key"></span>
        </li>
    </ul>
    <input type="hidden" name="modelValue" ng-model="model.value" val-property-validator="validateMandatory"/>
</div>

settings.json

[{
    "label": "Row Background Color",
    "description": "Set a background color for the row",
    "key": "class",
    "view": "colorpicker",
    "applyTo": "row",
    "modifier": "bg-{0}",
    "value": "",
    "prevalues": [{
        "key": "None",
        "value": "",
        "color": ""
    }, {
        "key": "Dark Blue",
        "value": "primary",
        "color": "116b8c"
    }, {
        "key": "Light Grey",
        "value": "lighter",
        "color": "f1f1f1"
    }],
    "validation": []
}]

1. Copy colorpicker.html to ~/Umbraco/Views/prevalueeditors.
2. Copy settings.json into Settings section of a Grid Data Type. This will add a class to the row which could apply pre-defined CSS.

Thanks Charlie. Much appreciated update.

This is exactly what I was looking for, thanks for this! Gave you a star :D

This doesn't work anymore on 7.13.2.