<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/dariocorsi/pen/WwOWPE?limit=all&page=4&q=color" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="cp-pen-styles">body {
background: #1F232A;
font-family: 'Proxima Nova', sans-serif;
color: #8B949A;
letter-spacing: .05em;
transition: background .5s ease;
}
.color-picker-panel {
background: #1F232A;
width: 310px;
border-radius: 8px;
border: 2px solid #364347;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.panel-row {
position: relative;
margin: 0 10px 10px;
}
.panel-row:first-child {
margin-top: 10px;
margin-bottom: 6px;
}
.panel-row:after {
content: "";
display: table;
clear: both;
}
.panel-header {
background: #15191C;
padding: 8px;
margin: 0 -10px 10px;
text-align: center;
}
.swatch {
display: inline-block;
width: 32px;
height: 32px;
background: #ccc;
border-radius: 4px;
margin-left: 4px;
margin-bottom: 4px;
box-sizing: border-box;
border: 2px solid #364347;
cursor: pointer;
}
.default-swatches {
width: 212px;
}
.default-swatches .swatch:nth-child(6n + 1) {
margin-left: 0;
}
.color-cursor {
border-radius: 100%;
background: #ccc;
box-sizing: border-box;
position: absolute;
pointer-events: none;
z-index: 2;
border: 2px solid #fff;
transition: all .2s ease;
}
.color-cursor.dragging {
transition: none;
}
.color-cursor#spectrum-cursor {
width: 30px;
height: 30px;
margin-left: -15px;
margin-top: -15px;
top: 0;
left: 0;
}
.color-cursor#hue-cursor {
top: 0;
left: 50%;
height: 20px;
width: 20px;
margin-top: -10px;
margin-left: -10px;
pointer-events: none;
}
.spectrum-map {
position: relative;
width: 212px;
height: 200px;
overflow: hidden;
}
#spectrum-canvas {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #ccc;
}
.hue-map {
position: absolute;
top: 5px;
bottom: 5px;
right: 29px;
width: 10px;
}
#hue-canvas {
border-radius: 8px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: #ccc;
}
.button {
background: #2A3137;
border: 0;
border-radius: 4px;
color: #8B949A;
font-size: 1rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
outline: none;
cursor: pointer;
padding: 4px;
}
.button:active {
background: #262c31;
}
.button.eyedropper {
position: absolute;
right: 0;
top: 0;
width: 68px;
height: 68px;
display: block;
}
.button.add-swatch {
display: block;
padding: 6px;
width: 200px;
margin: 10px auto 0;
}
.button.mode-toggle {
position: absolute;
top: 0;
right: 0;
width: 68px;
height: 40px;
}
.value-fields {
display: none;
align-items: center;
}
.value-fields.active {
display: flex;
}
.value-fields .field-label {
margin-right: 6px;
}
.value-fields .field-input {
background: #15191C;
border: 1px solid #364347;
box-sizing: border-box;
border-radius: 2px;
line-height: 38px;
padding: 0 4px;
text-align: center;
color: #8B949A;
font-size: 1rem;
display: block;
}
.rgb-fields .field-group {
display: flex;
align-items: center;
}
.rgb-fields .field-input {
width: 42px;
margin-right: 10px;
}
.hex-field .field-input {
width: 170px;
}
.color-indicator {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
width: 20px;
height: 20px;
border-radius: 4px;
background: #ccc;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0;
/* <-- Apparently some margin are still there even though it's hidden */
}
</style></head><body>
<div class="color-picker-panel">
<div class="panel-row">
<div class="swatches default-swatches"></div>
<button class="button eyedropper">Get Color</button>
</div>
<div class="panel-row">
<div class="spectrum-map">
<button id="spectrum-cursor" class="color-cursor"></button>
<canvas id="spectrum-canvas"></canvas>
</div>
<div class="hue-map">
<button id="hue-cursor" class="color-cursor"></button>
<canvas id="hue-canvas"></canvas>
</div>
</div>
<div class="panel-row">
<div id="rgb-fields" class="field-group value-fields rgb-fields active">
<div class="field-group">
<label for="" class="field-label">R:</label>
<input type="number" max="255" min="0" id="red" class="field-input rgb-input"/>
</div>
<div class="field-group">
<label for="" class="field-label">G:</label>
<input type="number" max="255" min="0" id="green" class="field-input rgb-input"/>
</div>
<div class="field-group">
<label for="" class="field-label">B:</label>
<input type="number" max="255" min="0" id="blue" class="field-input rgb-input"/>
</div>
</div>
<div id="hex-field" class="field-group value-fields hex-field">
<label for="" class="field-label">Hex:</label>
<input type="text" id="hex" class="field-input"/>
</div>
<button id="mode-toggle" class="button mode-toggle">Mode</button>
</div>
<div class="panel-row">
<h2 class="panel-header">User Colors</h2>
<div id="user-swatches" class="swatches custom-swatches">
</div>
<button id="add-swatch" class="button add-swatch">
<span id="color-indicator" class="color-indicator"></span><span>Add to Swatches</span>
</button>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.3.0/tinycolor.min.js'></script>
<script >//https://github.com/bgrins/TinyColor
var addSwatch = document.getElementById('add-swatch');
var modeToggle = document.getElementById('mode-toggle');
var swatches = document.getElementsByClassName('default-swatches')[0];
var colorIndicator = document.getElementById('color-indicator');
var userSwatches = document.getElementById('user-swatches');
var spectrumCanvas = document.getElementById('spectrum-canvas');
var spectrumCtx = spectrumCanvas.getContext('2d');
var spectrumCursor = document.getElementById('spectrum-cursor');
var spectrumRect = spectrumCanvas.getBoundingClientRect();
var hueCanvas = document.getElementById('hue-canvas');
var hueCtx = hueCanvas.getContext('2d');
var hueCursor = document.getElementById('hue-cursor');
var hueRect = hueCanvas.getBoundingClientRect();
var currentColor = '';
var hue = 0;
var saturation = 1;
var lightness = .5;
var rgbFields = document.getElementById('rgb-fields');
var hexField = document.getElementById('hex-field');
var red = document.getElementById('red');
var blue = document.getElementById('blue');
var green = document.getElementById('green');
var hex = document.getElementById('hex');
function ColorPicker(){
this.addDefaultSwatches();
createShadeSpectrum();
createHueSpectrum();
};
ColorPicker.prototype.defaultSwatches = [
'#FFFFFF',
'#FFFB0D',
'#0532FF',
'#FF9300',
'#00F91A',
'#FF2700',
'#000000',
'#686868',
'#EE5464',
'#D27AEE',
'#5BA8C4',
'#E64AA9'
];
function createSwatch(target, color){
var swatch = document.createElement('button');
swatch.classList.add('swatch');
swatch.setAttribute('title', color);
swatch.style.backgroundColor = color;
swatch.addEventListener('click', function(){
var color = tinycolor(this.style.backgroundColor);
colorToPos(color);
setColorValues(color);
});
target.appendChild(swatch);
refreshElementRects();
};
ColorPicker.prototype.addDefaultSwatches = function() {
for(var i = 0; i < this.defaultSwatches.length; ++i){if (window.CP.shouldStopExecution(1)){break;}
createSwatch(swatches, this.defaultSwatches[i]);
}
window.CP.exitedLoop(1);
}
function refreshElementRects(){
spectrumRect = spectrumCanvas.getBoundingClientRect();
hueRect = hueCanvas.getBoundingClientRect();
}
function createShadeSpectrum(color) {
canvas = spectrumCanvas;
ctx = spectrumCtx;
ctx.clearRect(0, 0, canvas.width, canvas.height);
if(!color) color = '#f00';
ctx.fillStyle = color;
ctx.fillRect(0, 0, canvas.width, canvas.height);
var whiteGradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
whiteGradient.addColorStop(0, "#fff");
whiteGradient.addColorStop(1, "transparent");
ctx.fillStyle = whiteGradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
var blackGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
blackGradient.addColorStop(0, "transparent");
blackGradient.addColorStop(1, "#000");
ctx.fillStyle = blackGradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
canvas.addEventListener('mousedown', function(e){
startGetSpectrumColor(e);
});
};
function createHueSpectrum() {
var canvas = hueCanvas;
var ctx = hueCtx;
var hueGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
hueGradient.addColorStop(0.00, "hsl(0,100%,50%)");
hueGradient.addColorStop(0.17, "hsl(298.8, 100%, 50%)");
hueGradient.addColorStop(0.33, "hsl(241.2, 100%, 50%)");
hueGradient.addColorStop(0.50, "hsl(180, 100%, 50%)");
hueGradient.addColorStop(0.67, "hsl(118.8, 100%, 50%)");
hueGradient.addColorStop(0.83, "hsl(61.2,100%,50%)");
hueGradient.addColorStop(1.00, "hsl(360,100%,50%)");
ctx.fillStyle = hueGradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
canvas.addEventListener('mousedown', function(e){
startGetHueColor(e);
});
};
function colorToHue(color){
var color = tinycolor(color);
var hueString = tinycolor('hsl '+ color.toHsl().h + ' 1 .5').toHslString();
return hueString;
};
function colorToPos(color){
var color = tinycolor(color);
var hsl = color.toHsl();
hue = hsl.h;
var hsv = color.toHsv();
var x = spectrumRect.width * hsv.s;
var y = spectrumRect.height * (1 - hsv.v);
var hueY = hueRect.height - ((hue / 360) * hueRect.height);
updateSpectrumCursor(x,y);
updateHueCursor(hueY);
setCurrentColor(color);
createShadeSpectrum(colorToHue(color));
};
function setColorValues(color){
//convert to tinycolor object
var color = tinycolor(color);
var rgbValues = color.toRgb();
var hexValue = color.toHex();
//set inputs
red.value = rgbValues.r;
green.value = rgbValues.g;
blue.value = rgbValues.b;
hex.value = hexValue;
};
function setCurrentColor(color){
color = tinycolor(color);
currentColor = color;
colorIndicator.style.backgroundColor = color;
document.body.style.backgroundColor = color;
spectrumCursor.style.backgroundColor = color;
hueCursor.style.backgroundColor = 'hsl('+ color.toHsl().h +', 100%, 50%)';
};
function updateHueCursor(y){
hueCursor.style.top = y + 'px';
}
function updateSpectrumCursor(x, y){
//assign position
spectrumCursor.style.left = x + 'px';
spectrumCursor.style.top = y + 'px';
};
var startGetSpectrumColor = function(e) {
getSpectrumColor(e);
spectrumCursor.classList.add('dragging');
window.addEventListener('mousemove', getSpectrumColor);
window.addEventListener('mouseup', endGetSpectrumColor);
};
function getSpectrumColor(e) {
// got some help here - http://stackoverflow.com/questions/23520909/get-hsl-value-given-x-y-and-hue
e.preventDefault();
//get x/y coordinates
var x = e.pageX - spectrumRect.left;
var y = e.pageY - spectrumRect.top;
//constrain x max
if(x > spectrumRect.width){ x = spectrumRect.width}
if(x < 0){ x = 0}
if(y > spectrumRect.height){ y = spectrumRect.height}
if(y < 0){ y = .1}
//convert between hsv and hsl
var xRatio = x / spectrumRect.width * 100;
var yRatio = y / spectrumRect.height * 100;
var hsvValue = 1 - (yRatio / 100);
var hsvSaturation = xRatio / 100;
lightness = (hsvValue / 2) * (2 - hsvSaturation);
saturation = (hsvValue * hsvSaturation) / (1 - Math.abs(2 * lightness - 1));
var color = tinycolor('hsl ' + hue + ' ' + saturation + ' ' + lightness);
setCurrentColor(color);
setColorValues(color);
updateSpectrumCursor(x,y);
};
function endGetSpectrumColor(e){
spectrumCursor.classList.remove('dragging');
window.removeEventListener('mousemove', getSpectrumColor);
};
function startGetHueColor(e) {
getHueColor(e);
hueCursor.classList.add('dragging');
window.addEventListener('mousemove', getHueColor);
window.addEventListener('mouseup', endGetHueColor);
};
function getHueColor(e){
e.preventDefault();
var y = e.pageY - hueRect.top;
if (y > hueRect.height){ y = hueRect.height};
if (y < 0){ y = 0};
var percent = y / hueRect.height;
hue = 360 - (360 * percent);
var hueColor = tinycolor('hsl '+ hue + ' 1 .5').toHslString();
var color = tinycolor('hsl '+ hue + ' ' + saturation + ' ' + lightness).toHslString();
createShadeSpectrum(hueColor);
updateHueCursor(y, hueColor)
setCurrentColor(color);
setColorValues(color);
};
function endGetHueColor(e){
hueCursor.classList.remove('dragging');
window.removeEventListener('mousemove', getHueColor);
};
// Add event listeners
red.addEventListener('change', function(){
var color = tinycolor('rgb ' + red.value + ' ' + green.value + ' ' + blue.value );
colorToPos(color);
});
green.addEventListener('change', function(){
var color = tinycolor('rgb ' + red.value + ' ' + green.value + ' ' + blue.value );
colorToPos(color);
});
blue.addEventListener('change', function(){
var color = tinycolor('rgb ' + red.value + ' ' + green.value + ' ' + blue.value );
colorToPos(color);
});
addSwatch.addEventListener('click', function(){
createSwatch(userSwatches, currentColor);
});
modeToggle.addEventListener('click', function(){
if(rgbFields.classList.contains('active') ? rgbFields.classList.remove('active') : rgbFields.classList.add('active'));
if(hexField.classList.contains('active') ? hexField.classList.remove('active') : hexField.classList.add('active'));
});
window.addEventListener('resize', function(){
refreshElementRects();
});
new ColorPicker();
//# sourceURL=pen.js
</script>
</body></html>
