hi,
I added a color picker and use the code in a template.
So if some body like it …
<style>
.icon-tile.colorize {
filter: invert(45%) sepia(100%) hue-rotate(15deg) saturate(1700%);
-webkit-filter: invert(45%) sepia(100%) hue-rotate(15deg) saturate(1700%);
}
.hue-controller-table {
width: 100%;
border-collapse: separate;
border-spacing: 8px;
border: 2px solid #76899e;
border-radius: 10px;
}
.hue-rounded-border {
border: 2px solid #76899e;
border-radius: 10px;
}
#dimmer-slider .rz-bubble {
color: #FFAA00;
}
#dimmer-slider .rz-pointer {
background-color: #FFAA00;
}
#dimmer-slider .rzslider .rz-bar.rz-selection {
background-color: #FFAA00;
}
.caret#hue-controller-caret {
position: absolute;
left: 95%;
top: 45%;
color: white;
}
.hue-select {
padding-right: 10px;
}
.action-button#single-button {
color: #FFAA00;
background-color: rgb(95,95,95);
border: 1px solid #76899e;
overflow: hidden;
width: 100%;
border-radius: 5px;
font-size: 18px;
font-weight: normal;
}
ul.dropdown-menu#hue-controller-dropdown {
background-color: rgb(200,200,200);
text-align: center;
border: 0px;
border-radius: 5px;
width: 100%;
}
ul.dropdown-menu#hue-controller-dropdown li {
color: #000;
border-collapse: separate;
padding: 5px;
border-radius: inherit;
}
</style>
<!-- Defined scenes -->
<div ng-init="sceneMap={
'180,1,100': 'Full',
'81,56,100': 'Normal',
'5,91,78': 'Savanna Sunset',
'37,47,48': 'Tropical Twilight',
'225,99,53': 'Arctic Aurora',
'320,57,84': 'Spring Blossom',
'74,78,56': 'Relax',
'84,47,100': 'Read',
'181,21,100': 'Concentrate',
'187,98,100': 'Energize',
'82,55,100': 'Bright',
'82,55,30': 'Dimmed',
'82,55,0': 'Nightlight'
}" />
<table class="hue-controller-table">
<tr>
<td style="padding: 0px; padding-top: 2px; padding-bottom: 2px;">
<div ng-init='onoff={"name": "OnOff", "item": "HueLeuchtband_Color", "hidelabel": true, "hideonoff": true, "iconset": "smarthome-set","icon": "bulb","icon_size": "36" }'>
<widget-switch ng-model="onoff" />
</div>
</td>
<td colspan="2">
<h3 style="color: #ffaa00; line-height: .5em;">Leuchtband</h3>
</td>
</tr>
<tr>
<td width="20%" class="hue-rounded-border">
<table style="width: 100%;">
<tr>
<td style="padding: 0px; padding-top: 10px; padding-bottom: 10px;">
<div class="col-sm-4">
<div ng-init='colorPickerModel = {"item":"HueLeuchtband_Color","style":"aCKolor"}'></div>
<widget-colorpicker ng-model="colorPickerModel" />
</div>
</td>
</tr>
</table>
</td>
<td width="80%" class="hue-rounded-border">
<div class="slider-div" ng-init='dimmerModel={"name": "dimmer", "item": "HueLeuchtband_Color",
"floor" : 0, "ceil": 100, "step": 1,
"hidelabel" : "true", "hidelimits": "true" }'>
<widget-slider ng-model="dimmerModel" id="dimmer-slider"/>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<table width="100%">
<tr>
<td>
<div style="font-size: 15px; color: #FFAA00; font-weight: bold;"><u>Szene</u></div>
</td>
</tr>
<tr>
<td>
<div style="width: 100%;" class="btn-group" uib-dropdown>
<button id="single-button" type="button" class="action-button" uib-dropdown-toggle>
<span id="hue-select">{{sceneMap[itemValue('HueLeuchtband_Color')]}}</span><span class="caret" id="hue-controller-caret"></span>
<span id="hue-select" ng-if="sceneMap[itemValue('HueLeuchtband_Color')]== NULL">UNKNOWN ({{itemValue('HueLeuchtband_Color')}})</span>
</button>
<ul class="dropdown-menu" id="hue-controller-dropdown" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem" ng-repeat="(state, label) in sceneMap">
<a ng-click="sendCmd('HueLeuchtband_Color', state)">{{label}}</a>
</li>
</ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
Of course you must replace the item name 
