hyperion.ng/assets/webconfig/lighttest.html

<script src="js/bootstrap-colorpicker.js"></script>
<link href="css/bootstrap-colorpicker.css" rel="stylesheet">

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header" lang="en" data-lang-token="main_menu_colors_token">Colors</h1>
			<div class="col-lg-1">
				<span lang="en" data-lang-token="remote_colors_label_color">Set color: </span>
			</div>
			<div class="col-lg-3">
				<div id="cp2" class="input-group colorpicker-component">
					<input type="text" value="#00AABB" class="form-control" />
					<span class="input-group-addon"><i></i></span>
				</div>
			</div>
			<div class="col-lg-8">
				<button lang="en" data-lang-token="remote_colors_button_reset" type="button" class="btn btn-warning" id="reset_color">Reset Color</button>
			</div>
		</div>
    </div>
</div>



<script>

	var webSocket = new WebSocket('ws://'+document.location.hostname+':19444');

	webSocket.onerror = function(event) {
		alert(event.data);
	};

	webSocket.onopen = function(event) {
		$(function() {
			$('#cp2').colorpicker({
				format: 'rgb',

				colorSelectors: {'default': '#777777',
					'primary': '#337ab7',
					'success': '#5cb85c',
					'info': '#5bc0de',
					'warning': '#f0ad4e',
					'danger': '#d9534f'
					},
				customClass: 'colorpicker-2x',
				sliders: {
					saturation: {
						maxLeft: 200,
						maxTop: 200
					},
					hue: {
						maxTop: 200
					},
					alpha: {
						maxTop: 200
					},
				}
			});

			$('#cp2').colorpicker().on('changeColor', function(e) {
				//console.log(e.color.toRGB());
				webSocket.send('{"command":"color", "color":['+e.color.toRGB().r+','+e.color.toRGB().g+','+e.color.toRGB().b+'], "priority":1}');
			});
		});


		$("#reset_color").on("click", function() {
			webSocket.send('{"command":"clear", "priority":1}');
		});

	};

	webSocket.onmessage = function(event){
	console.log(event.data);
	}
</script>