pixel-editor/views/popups/palette.hbs

<!-- PALETTE -->
<div id = "palette-block">
	<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
	
	<h1>Edit palette</h1>
	
	<div id = "colour-picker">
		<div id = "cp-modes">
			<button id="cp-rgb" class="cp-selected-mode">RGB</button>
			<button id="cp-hsv">HSV</button>
			<button id="cp-hsl">HSL</button>
			
			<div id="cp-colour-preview" class="cp-colour-preview"></div>
			<input id="cp-hex" type="text" value="#123456"/>
		</div>

		<div id = "sliders-container">
			<div class = "cp-slider-entry">
				<label for = "first-slider">R</label>
				<input type="range" min="0" max="255" class="colour-picker-slider" id="first-slider"/>
				<input type = "text" value = "128" id="cp-sliderText1"/>
			</div>

			<div class = "cp-slider-entry">
				<label for = "second-slider">G</label>
				<input type="range" min="0" max ="255" class="colour-picker-slider" id="second-slider"/>
				<input type = "text" value = "128" id="cp-sliderText2"/>
			</div>

			<div class = "cp-slider-entry">
				<label for = "third-slider">B</label>
				<input type="range" min = "0" max = "255" class = "colour-picker-slider" id = "third-slider"/>
				<input type = "text" value = "128" id="cp-sliderText3"/>
			</div>
		</div>

		<div id = "cp-minipicker">
			<input type = "range" min = "0" max = "100" id = "cp-minipicker-slider"/>
			<div id="cp-canvas-container">
				<canvas id = "cp-spectrum"></canvas>
				<div id="cp-active-icon" class="cp-picker-icon"></div>
			</div>

			<div id = "cp-colours-previews">
				<div class = "cp-colour-preview">
					#123456
				</div>
			</div>

			<div id = "cp-colour-picking-modes">
				<button id="cp-mono" class="cp-selected-mode">Mono</button>
				<button id="cp-analog">Nlgs</button>
				<button id="cp-cmpt">Cmpt</button>
				<button id="cp-tri">Tri</button>
				<button id="cp-scmpt">Scm</button>
				<button id="cp-tetra">Tetra</button>
			</div>
		</div>
	</div>

	<div id = "palette-container">
		<ul id = "palette-list">
			<li style = "background-color:rgb(255,0,0);width:40px;height:40px;" onmousedown="PaletteBlock.startRampSelection(event)"
			onmousemove="PaletteBlock.updateRampSelection(event)" onmouseup="PaletteBlock.endRampSelection(event)"></li>
			<li style = "background-color:rgb(0,255,0);width:40px;height:40px;"onmousedown="PaletteBlock.startRampSelection(event)"
			onmousemove="PaletteBlock.updateRampSelection(event)" onmouseup="PaletteBlock.endRampSelection(event)"></li>
		</ul>
	</div>

	<div id="pb-options">
		<button title="Add colours to palette" id="pb-addcolours">Add colours</button>
		<button title="Remove colours from palette" id="pb-removecolours">Remove colours</button>
	</div>
</div>