jcunews

ColorPicker.html

Apr 1st, 2019
190
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.   <title>Color Picker</title>
  6.   <style>
  7. .section {
  8.   margin-top: .5rem;
  9.   border-radius: 5px;
  10.   width: 25ex;
  11.   background-color: #ddd;
  12. }
  13. .section div {
  14.   clear: both;
  15.   padding: .3em .3em .3em 0;
  16. }
  17. .picker {
  18.   padding-bottom: .1em;
  19. }
  20. input {
  21.   box-sizing: border-box;
  22.   width: 17ex;
  23.   text-align: right;
  24. }
  25. #picker {
  26.   padding: 0;
  27. }
  28. .section ~ .section {
  29.   display: inline-block;
  30.   margin-right: .5ex;
  31. }
  32. .section .header {
  33.   border-radius: 5px;
  34.   height: 3.2em;
  35.   background-color: black;
  36.   color: white;
  37.   font-size: bold;
  38. }
  39. .section span {
  40.   vertical-align: middle;
  41.   padding-left: .5ex;
  42. }
  43. .section input {
  44.   float: right;
  45. }
  46. .header > input {
  47.   margin-left: .5ex;
  48. }
  49. .section .header~div input {
  50.   width: 7ex;
  51. }
  52. #rgbh {
  53.   clear: both;
  54.   margin-top: .3rem;
  55.   width: 9ex;
  56. }
  57.   </style>
  58.   <script>
  59. var vRed, vGreen, vBlue, vHue, vSaturation, vLightness;
  60. function rgbToHSL(r, g, b) {
  61.   r = (vRed === 255) ? 1 : (vRed / 255);
  62.   g = (vGreen === 255) ? 1 : (vGreen / 255);
  63.   b = (vBlue === 255) ? 1 : (vBlue / 255);
  64.   var max = Math.max(r, g, b);
  65.   var min = Math.min(r, g, b);
  66.   var h, s, l = (max + min) / 2;
  67.   if (max === min) {
  68.     h = s = 0;
  69.   } else {
  70.     var d = max - min;
  71.     s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
  72.     switch (max) {
  73.       case r:
  74.         h = (g - b) / d + (g < b ? 6 : 0);
  75.        break;
  76.      case g:
  77.        h = (b - r) / d + 2;
  78.        break;
  79.      case b:
  80.        h = (r - g) / d + 4;
  81.        break;
  82.    }
  83.    h /= 6;
  84.  }
  85.  vHue = Math.round(h * 360);
  86.  vSaturation = Math.round(s * 240);
  87.  vLightness = Math.round(l * 240);
  88. }
  89. function hueToRGB(p, q, t) {
  90.  if (t < 0) t += 1;
  91.  if (t > 1) t -= 1;
  92.   if (t < 1 / 6) return p + (q - p) * 6 * t;
  93.  if (t < 1 / 2) return q;
  94.  if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
  95.  return p
  96. }
  97. function hslToRGB(h, s, l, r, g, b) {
  98.  h = (vHue % 360 + 360) % 360;
  99.  h = (h === 360) ? 1 : (h / 360);
  100.  s = (vSaturation === 240) ? 1 : (vSaturation / 240);
  101.  l = (vLightness === 240) ? 1 : (vLightness / 240);
  102.  if (s === 0) {
  103.    r = g = b = l;
  104.  } else {
  105.    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
  106.    var p = 2 * l - q;
  107.    r = hueToRGB(p, q, h + 1 / 3);
  108.    g = hueToRGB(p, q, h);
  109.    b = hueToRGB(p, q, h - 1 / 3);
  110.  }
  111.  vRed = Math.round(r * 255);
  112.  vGreen = Math.round(g * 255);
  113.  vBlue = Math.round(b * 255);
  114. }
  115. function updateAll(e, s) {
  116.  s = "#" +
  117.    ("0" + vRed.toString(16).toUpperCase()).slice(-2) +
  118.    ("0" + vGreen.toString(16).toUpperCase()).slice(-2) +
  119.    ("0" + vBlue.toString(16).toUpperCase()).slice(-2);
  120.  if (e !== picker) picker.value = s;
  121.  if (e !== rgb) {
  122.    rgb.value = `rgb(${vRed}, ${vGreen}, ${vBlue})`;
  123.    rgb.style.backgroundColor = "";
  124.  }
  125.  if (e !== rgbh) {
  126.    rgbh.value = s;
  127.    rgbh.style.backgroundColor = "";
  128.  }
  129.  if (e !== red) {
  130.    red.value = vRed;
  131.    red.style.backgroundColor = "";
  132.  }
  133.  if (e !== green) {
  134.    green.value = vGreen;
  135.    green.style.backgroundColor = "";
  136.  }
  137.  if (e !== blue) {
  138.    blue.value = vBlue;
  139.    blue.style.backgroundColor = "";
  140.  }
  141.  if (e !== hsl) {
  142.    hsl.value = `hsl(${vHue}, ${vSaturation}, ${vLightness})`;
  143.    hsl.style.backgroundColor = "";
  144.  }
  145.  if (e !== hue) {
  146.    hue.value = vHue;
  147.    hue.style.backgroundColor = "";
  148.  }
  149.  if (e !== saturation) {
  150.    saturation.value = vSaturation;
  151.    saturation.style.backgroundColor = "";
  152.  }
  153.  if (e !== lightness) {
  154.    lightness.value = vLightness;
  155.    lightness.style.backgroundColor = "";
  156.  }
  157. }
  158. function colorPicked(s) {
  159.  s = picker.value.toUpperCase();
  160.  vRed = parseInt(s.slice(1, 3), 16),
  161.  vGreen = parseInt(s.slice(3, 5), 16),
  162.  vBlue = parseInt(s.slice(5, 7), 16);
  163.  rgbToHSL(vRed, vGreen, vBlue);
  164.  updateAll();
  165. }
  166. function rgbChanged() {
  167.  var m = this.value.match(/^rgb\((\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\)$/i), r, g, b;
  168.  if (m) {
  169.    r = parseInt(m[1]);
  170.    g = parseInt(m[2]);
  171.    b = parseInt(m[3]);
  172.    if ((r < 256) && (g < 256) && (b < 256)) {
  173.      vRed = r;
  174.      vGreen = g;
  175.      vBlue = b;
  176.      rgbToHSL(vRed, vGreen, vBlue);
  177.      updateAll(this);
  178.      this.style.backgroundColor = "";
  179.    } else {
  180.      this.style.backgroundColor = "pink";
  181.    }
  182.  } else {
  183.    this.style.backgroundColor = "pink";
  184.  }
  185. }
  186. function rgbhChanged() {
  187.  var m = this.value.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i), r, g, b;
  188.  if (m) {
  189.    vRed = parseInt(m[1], 16);
  190.    vGreen = parseInt(m[2], 16);
  191.    vBlue = parseInt(m[3], 16);
  192.    rgbToHSL();
  193.    updateAll(this);
  194.    this.style.backgroundColor = "";
  195.  } else {
  196.    this.style.backgroundColor = "pink";
  197.  }
  198. }
  199. function componentChanged(n) {
  200.  n = parseInt(this.value);
  201.  if (!isNaN(n) && (n >= this.min) && (n <= this.max)) {
  202.    switch (this) {
  203.      case red:        vRed = n; rgbToHSL(); break;
  204.       case green:      vGreen = n; rgbToHSL(); break;
  205.       case blue:       vBlue = n; rgbToHSL(); break;
  206.       case hue:        vHue = n; hslToRGB(); break;
  207.       case saturation: vSaturation = n; hslToRGB(); break;
  208.       case lightness:  vLightness = n; hslToRGB(); break;
  209.     }
  210.     updateAll(this);
  211.     this.style.backgroundColor = "";
  212.   } else {
  213.     this.style.backgroundColor = "pink";
  214.   }
  215. }
  216. function hslChanged() {
  217.   var m = this.value.match(/^hsl\((\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\)$/i), h, s, l;
  218.   if (m) {
  219.     h = parseInt(m[1]);
  220.     s = parseInt(m[2]);
  221.     l = parseInt(m[3]);
  222.     if ((h <= 360) && (h <= 240) && (l <= 240)) {
  223.      vHue = h;
  224.      vSaturation = s;
  225.      vLightness = l;
  226.      hslToRGB();
  227.      updateAll(this);
  228.      this.style.backgroundColor = "";
  229.    } else {
  230.      this.style.backgroundColor = "pink";
  231.    }
  232.  } else {
  233.    this.style.backgroundColor = "pink";
  234.  }
  235. }
  236. onload = function() {
  237.  picker.onchange = colorPicked;
  238.  rgb.oninput = rgbChanged;
  239.  rgbh.oninput = rgbhChanged;
  240.  red.oninput = componentChanged;
  241.  green.oninput = componentChanged;
  242.  blue.oninput = componentChanged;
  243.  hsl.oninput = hslChanged;
  244.  hue.oninput = componentChanged;
  245.  saturation.oninput = componentChanged;
  246.  lightness.oninput = componentChanged;
  247.  colorPicked();
  248. };
  249.  </script>
  250. </head>
  251. <body>
  252.   <div class="section picker">
  253.     <div>
  254.       <label for="picker"><input value="#abcdef" id="picker" type="color"/><span>Color:</span></label>
  255.     </div>
  256.   </div>
  257.   <div class="section rgb">
  258.     <div class="header">
  259.       <label for="rgb"><input id="rgb" /><span>RGB</span></label>
  260.       <input id="rgbh" />
  261.     </div>
  262.     <div>
  263.       <label for="red"><input id="red" type="number" min="0" max="255" /><span>Red:</span></label>
  264.     </div>
  265.     <div>
  266.       <label for="green"><input id="green" type="number" min="0" max="255" /><span>Green:</span></label>
  267.     </div>
  268.     <div>
  269.       <label for="blue"><input id="blue" type="number" min="0" max="255" /><span>Blue:</span></label>
  270.     </div>
  271.   </div>
  272.   <div class="section hsl">
  273.     <div class="header">
  274.       <label for="hsl"><input id="hsl" /><span>HSL</span></label>
  275.     </div>
  276.     <div>
  277.       <label for="hue"><input id="hue" type="number" min="0" max="360" /><span>Hue:</span></label>
  278.     </div>
  279.     <div>
  280.       <label for="saturation"><input id="saturation" type="number" min="0" max="240" /><span>Saturation:</span></label>
  281.     </div>
  282.     <div>
  283.       <label for="lightness"><input id="lightness" type="number" min="0" max="240" /><span>Lightness:</span></label>
  284.     </div>
  285.   </div>
  286. </body>
  287. </html>
RAW Paste Data