API tools faq
paste
Advertisement
jcunews

ColorPicker.html

jcunews
Apr 1st, 2019 (edited)
515
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.47 KB | None | 0 0
raw download clone embed print report
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!