"палитра цвета"
Bootstrap 4.1.1 Snippet by irbees2008

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <meta charset='UTF-8'> <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/huszerldani/pen/NAJREN?depth=everything&order=popularity&page=53&q=pack&show_forks=false" /> </head> <body> <div class="color_picker_dialog" draggable="false"> <div class="hue_bar"> <div class="hue_picker"></div> </div> <div class="sat_rect" draggable="false"> <div class="white"></div> <div class="black"></div> <div class="sat_picker"></div> </div> <div class="bottom"> <div class="color_preview"></div> <input type="text" onkeyup="changeHex(this.value)" value="#FF0000" /> </div> </div> </body> </html>
body { background: hsl(0, 100%, 50%); min-width: 98vw; min-height: 98vh; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } body:after { content: ""; pointer-events: none; z-index: -1; position: absolute; display: block; top: 0; right: 0; bottom: 0; left: 0; background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, .4) 100%); background: -webkit-radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, .4) 100%); } /*dev */ .color_picker_dialog p { -webkit-user-select: none; pointer-events: none; } .color_picker_dialog { display: inline-block; border-radius: 4px; background: #3b3e3e; position: relative; padding: 20px; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: white; box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .3); } .hue_bar { background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); width: 14px; height: 200px; position: relative; display: inline-block; cursor: pointer; } .hue_bar .hue_picker { position: absolute; left: 50%; border-radius: 50%; top: 0; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 14px; width: 14px; border: 2px solid white; /*pointer-events: none;*/ cursor: pointer; box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, .3); background: hsl(0, 100%, 50%); } .hue_bar .hue_picker.active { width: 18px; height: 18px; } .sat_rect { width: 200px; height: 200px; display: inline-block; margin-left: 8px; background: hsl(0, 100%, 50%); position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .sat_rect .sat_picker { position: absolute; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 12px; height: 12px; top: 0; left: 100%; border-radius: 50%; border: 2px solid white; z-index: 10; -webkit-transition: width .25s, height .25s; transition: width .25s, height .25s; background: hsl(0, 100%, 50%); box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, .3); } .sat_rect .sat_picker.active { width: 16px; height: 16px; } .sat_rect .black, .sat_rect .white { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .sat_rect .white { background: -webkit-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); background: linear-gradient(to right, #fff, rgba(204, 154, 129, 0)); } .sat_rect .black { background: -webkit-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); background: linear-gradient(to top, #000, rgba(204, 154, 129, 0)); } .bottom { display: flex; align-items: center; margin-top: 8px; } .color_preview { display: block; width: 30px; height: 30px; border-radius: 2px; background: hsl(0, 100%, 50%); display: inline-block; } .bottom input { margin-left: 10px; height: 28px; font-size: 20px; outline: none !important; width: 100px; border-radius: 2px; border: 0; padding: 0 4px; } .bottom img { margin-left: 10px; height: 30px; }
function rgbToHsv(r, g, b) { if (arguments.length === 1) { g = r.g, b = r.b, r = r.r; } var max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min, h, s = (max === 0 ? 0 : d / max), v = max / 255; switch (max) { case min: h = 0; break; case r: h = (g - b) + d * (g < b ? 6: 0); h /= 6 * d; break; case g: h = (b - r) + d * 2; h /= 6 * d; break; case b: h = (r - g) + d * 4; h /= 6 * d; break; } return [ h, s, v ]; } function hexToRgb(hex) { var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; } function rgbToHsl(rgbArr){ var r1 = rgbArr[0] / 255; var g1 = rgbArr[1] / 255; var b1 = rgbArr[2] / 255; var maxColor = Math.max(r1,g1,b1); var minColor = Math.min(r1,g1,b1); //Calculate L: var L = (maxColor + minColor) / 2 ; var S = 0; var H = 0; if(maxColor != minColor){ //Calculate S: if(L < 0.5){ S = (maxColor - minColor) / (maxColor + minColor); }else{ S = (maxColor - minColor) / (2.0 - maxColor - minColor); } //Calculate H: if(r1 == maxColor){ H = (g1-b1) / (maxColor - minColor); }else if(g1 == maxColor){ H = 2.0 + (b1 - r1) / (maxColor - minColor); }else{ H = 4.0 + (r1 - g1) / (maxColor - minColor); } } L = L * 100; S = S * 100; H = H * 60; if(H<0){ H += 360; } var result = [H, S, L]; return result; } function rgbToHex(red, green, blue) { var rgb = blue | (green << 8) | (red << 16); return '#' + (0x1000000 + rgb).toString(16).slice(1); } function isPercentage(n) { return typeof n === "string" && n.indexOf('%') != -1; } function isOnePointZero(n) { return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1; } function bound01(n, max) { if (isOnePointZero(n)) { n = "100%"; } var processPercent = isPercentage(n); n = Math.min(max, Math.max(0, parseFloat(n))); // Automatically convert percentage into number if (processPercent) { n = parseInt(n * max, 10) / 100; } // Handle floating point rounding errors if ((Math.abs(n - max) < 0.000001)) { return 1; } // Convert into [0, 1] range if it isn't already return (n % max) / parseFloat(max); } function hslToRgb(h, s, l) { var r, g, b; h = bound01(h, 360); s = bound01(s, 100); l = bound01(l, 100); function hue2rgb(p, q, t) { if(t < 0) t += 1; if(t > 1) t -= 1; if(t < 1/6) return p + (q - p) * 6 * t; if(t < 1/2) return q; if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; return p; } if(s === 0) { r = g = b = l; // achromatic } else { var q = l < 0.5 ? l * (1 + s) : l + s - l * s; var p = 2 * l - q; r = hue2rgb(p, q, h + 1/3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1/3); } return [r * 255, g * 255, b * 255]; } function rgbToHsl(rgbArr) { var r1 = rgbArr[0] / 255; var g1 = rgbArr[1] / 255; var b1 = rgbArr[2] / 255; var maxColor = Math.max(r1,g1,b1); var minColor = Math.min(r1,g1,b1); //Calculate L: var L = (maxColor + minColor) / 2 ; var S = 0; var H = 0; if (maxColor != minColor) { //Calculate S: if (L < 0.5) { S = (maxColor - minColor) / (maxColor + minColor); } else { S = (maxColor - minColor) / (2.0 - maxColor - minColor); } //Calculate H: if(r1 == maxColor) { H = (g1-b1) / (maxColor - minColor); } else if (g1 == maxColor) { H = 2.0 + (b1 - r1) / (maxColor - minColor); } else { H = 4.0 + (r1 - g1) / (maxColor - minColor); } } L = L * 100; S = S * 100; H = H * 60; if(H<0){ H += 360; } var result = [H, S, L]; return result; } function isWindow(obj) { return obj !== null && obj === obj.window; } function getWindow(elem) { return isWindow(elem) ? elem : elem.nodeType === 9 && elem.defaultView; } function offset(elem) { var docElem, win, box = { top: 0, left: 0 }, doc = elem && elem.ownerDocument; docElem = doc.documentElement; if (typeof elem.getBoundingClientRect !== typeof undefined) { box = elem.getBoundingClientRect(); } win = getWindow(doc); return { top: box.top + win.pageYOffset - docElem.clientTop, left: box.left + win.pageXOffset - docElem.clientLeft }; } function segmentNumber(number, min, max) { return Math.max(min, Math.min(number, max)); } // COLOR PICKER //---------------// var color = [0, 100, 50]; var elements = { hue_bar: document.querySelector(".hue_bar"), sat_rect: document.querySelector(".sat_rect"), color_preview: document.querySelector(".color_preview"), sat_picker: document.querySelector(".sat_picker"), hue_picker: document.querySelector(".hue_picker") }; var sat_width = elements.sat_rect.offsetWidth, sat_height = elements.sat_rect.offsetHeight; var hue_height = elements.hue_bar.offsetHeight; function returnPickedColor() { elements.hue_picker.style.background = "hsl( " + color[0] + ",100%, 50% )"; document.body.style.background = "hsl( " + color[0] + "," + color[1] + "%," + color[2] + "% )"; elements.sat_picker.style.background = "hsl( " + color[0] + "," + color[1] + "%," + color[2] + "% )"; elements.color_preview.style.background = "hsl( " + color[0] + "," + color[1] + "%," + color[2] + "% )"; var rgb_color = hslToRgb(color[0], color[1], color[2]), hex_color = rgbToHex(rgb_color[0], rgb_color[1], rgb_color[2]); console.log(hex_color); document.querySelector(".bottom input").value = hex_color.toUpperCase(); } function setHuePickerValue(e) { var hue_bar_position = { top: offset(elements.sat_rect).top }; color[0] = segmentNumber(Math.floor((((e.pageY - hue_bar_position.top) / hue_height) * 360)), 0, 360); elements.hue_picker.style.top = segmentNumber(((e.pageY - hue_bar_position.top) / hue_height) * 100, 0, hue_height / 2) + "%"; elements.sat_rect.style.background = "hsl(" + color[0] + ", 100%, 50%)"; returnPickedColor(); } var hue_drag_started = false, sat_drag_started = false; //LINE DRAG START elements.hue_bar.addEventListener('mousedown', function(e) { hue_drag_started = true; elements.hue_picker.classList.add("active"); setHuePickerValue(e); }); //---------------------------------// function setSatPickerValue(e) { var rect_position = { left: offset(elements.sat_rect).left, top: offset(elements.sat_rect).top }; var position = [ segmentNumber(e.pageX - rect_position.left, 0, sat_width), segmentNumber(e.pageY - rect_position.top, 0, sat_height) ]; elements.sat_picker.style.left = position[0] + "px"; elements.sat_picker.style.top = position[1] + "px"; color[1] = Math.floor(((position[0] / sat_width) * 100)); var x = e.pageX - offset(elements.sat_rect).left; var y = e.pageY - offset(elements.sat_rect).top; //constrain x max if (x > sat_width) { x = sat_width; } if (x < 0) { x = 0; } if (y > sat_height) { y = sat_height; } if (y < 0) { y = 0; } //convert between hsv and hsl var xRatio = x / sat_width * 100, yRatio = y / sat_height * 100, hsvValue = 1 - (yRatio / 100), hsvSaturation = xRatio / 100, lightness = (hsvValue / 2) * (2 - hsvSaturation); color[2] = Math.floor(lightness * 100); returnPickedColor(); } //COLOR DRAG START elements.sat_rect.addEventListener('mousedown', function(e) { sat_drag_started = true; elements.sat_picker.classList.add("active"); setSatPickerValue(e); }); document.addEventListener('mousemove', function(e) { //COLOR DRAG MOVE if (sat_drag_started) { setSatPickerValue(e); } //LINE DRAG MOVE if (hue_drag_started) { setHuePickerValue(e); } }); //MOUSE UP document.addEventListener('mouseup', function() { if (sat_drag_started) { elements.sat_picker.classList.remove("active"); sat_drag_started = false; } if (hue_drag_started) { elements.hue_picker.classList.remove("active"); hue_drag_started = false; } }); function changeHex(hex_val) { var rgb_val = hexToRgb(hex_val); if (rgb_val !== null) { var hsl_val = rgbToHsl([rgb_val.r,rgb_val.g,rgb_val.b]), hsv_val = rgbToHsv(rgb_val.r,rgb_val.g,rgb_val.b); color[0] = hsl_val[0]; elements.sat_rect.style.background = "hsl(" + color[0] + ", 100%, 50%)"; elements.hue_picker.style.top = hsl_val[0] / 360 * 100 + "%"; elements.hue_picker.style.background = "hsl("+hsl_val[0]+", 100%, 50%)"; elements.sat_picker.style.background = hex_val; document.querySelector(".color_preview").style.background = hex_val; elements.sat_picker.style.left = hsl_val[1] + "%"; elements.sat_picker.style.top = 100 - ( hsv_val[2] * 100 ) + "%"; } }

Related: See More


Questions / Comments: