HEX Colorpicker with mobile support

Inspect the full details and code of a selected snippet

body { background-color: #e8ebee; }
a:hover { text-decoration: none; }

.uk-colorpicker-dropdown {
  padding: 12px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 240px;
  position: absolute;
  z-index: 1000;
}
.uk-colorpicker-spectrum {
  width: 100%;
  border-radius: 3px;
  cursor: crosshair;
  display: block;
  margin-bottom: 10px;
  touch-action: none;
}
.uk-colorpicker-slider {
  width: 100%;
  border-radius: 3px;
  cursor: crosshair;
  display: block;
  touch-action: none;
}
.uk-colorpicker-spectrum-indicator,
.uk-colorpicker-slider-indicator {
  position: absolute;
  border: 2px solid white;
  box-shadow: 0 0 0 1px black;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.uk-colorpicker-spectrum-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.uk-colorpicker-slider-indicator {
  height: 100%;
  width: 6px;
  border-radius: 3px;
  top: -1px;
  transform: translateX(-50%);
}
.hide-cursor {
  cursor: none;
}

(function (UIkit) {
  if (!UIkit) {
    throw new Error('UIkit not found. Make sure UIkit is loaded before this plugin.');
  }
  
  UIkit.util.$$('[uk-colorpicker]').forEach(function (input) {
    let dropdown, spectrum, hueSlider, indicator, sliderIndicator;
    let ctxSpectrum, ctxHue;
    let hue = 0; // current hue in degrees [0..360]

// We'll track if user is interacting with spectrum or hue slider via pointer
    let pointerDownOnSpectrum = false;
    let pointerDownOnHue = false;

// Convert RGB to #RRGGBB
    function rgbToHex(r, g, b) {
      return '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
    }

// Safely parse hex -> [h, s, l]
    function hexToHSL(hex) {
      const safeHex = (hex && /^#[0-9A-Fa-f]{6}$/.test(hex)) ? hex : '#ffffff';
      let r = parseInt(safeHex.slice(1, 3), 16) / 255;
      let g = parseInt(safeHex.slice(3, 5), 16) / 255;
      let b = parseInt(safeHex.slice(5, 7), 16) / 255;

let max = Math.max(r, g, b);
      let min = Math.min(r, g, b);
      let h, s, l = (max + min) / 2;

if (max === min) {
        h = s = 0;
      } else {
        let d = max - min;
        s = (l > 0.5) ? d / (2 - max - min) : d / (max + min);
        switch (max) {
          case r: h = (g - b) / d + (g < b ? 6 : 0); break;
          case g: h = (b - r) / d + 2; break;
          case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
      }
      return [h * 360, s, l];
    }

// Draw hue gradient across hueSlider
    function drawHue() {
      const gradient = ctxHue.createLinearGradient(0, 0, hueSlider.width, 0);
      const colors = ['red','yellow','lime','cyan','blue','magenta','red'];
      colors.forEach((clr, i) => gradient.addColorStop(i / (colors.length - 1), clr));
      ctxHue.fillStyle = gradient;
      ctxHue.fillRect(0, 0, hueSlider.width, hueSlider.height);
    }

// Draw saturation/brightness in the spectrum for the given hue
    function drawSpectrum(hueVal) {
      ctxSpectrum.fillStyle = '#fff';
      ctxSpectrum.fillRect(0, 0, spectrum.width, spectrum.height);

const hueGradient = ctxSpectrum.createLinearGradient(0, 0, spectrum.width, 0);
      hueGradient.addColorStop(0, 'rgba(255,255,255,0)');
      hueGradient.addColorStop(1, `hsl(${hueVal}, 100%, 50%)`);
      ctxSpectrum.fillStyle = hueGradient;
      ctxSpectrum.fillRect(0, 0, spectrum.width, spectrum.height);

const blackGradient = ctxSpectrum.createLinearGradient(0, 0, 0, spectrum.height);
      blackGradient.addColorStop(0, 'rgba(0,0,0,0)');
      blackGradient.addColorStop(1, '#000');
      ctxSpectrum.fillStyle = blackGradient;
      ctxSpectrum.fillRect(0, 0, spectrum.width, spectrum.height);
    }

// Recompute color from the spectrum indicator's position + current hue
    function updateColorFromIndicator() {
      const x = parseFloat(indicator.style.left) || 0;
      const y = parseFloat(indicator.style.top) || 0;

const rect = spectrum.getBoundingClientRect();
      const sat = Math.min(Math.max(x, 0), rect.width) / rect.width;
      const bri = 1 - (Math.min(Math.max(y, 0), rect.height) / rect.height);

const sPct = sat * 100;
      const lPct = bri * 50 + 50 * (1 - sat * bri);

const color = `hsl(${hue}, ${sPct}%, ${lPct}%)`;
      ctxSpectrum.fillStyle = color;
      ctxSpectrum.fillRect(0, 0, 1, 1);
      const pixel = ctxSpectrum.getImageData(0, 0, 1, 1).data;

input.value = rgbToHex(pixel[0], pixel[1], pixel[2]);
    }

// pick color from the spectrum pointer event
    function pickSpectrumColor(evt) {
      const rect = spectrum.getBoundingClientRect();
      const x = Math.min(Math.max(evt.clientX - rect.left, 0), rect.width);
      const y = Math.min(Math.max(evt.clientY - rect.top, 0), rect.height);
      indicator.style.left = `${x}px`;
      indicator.style.top = `${y}px`;
      updateColorFromIndicator();
    }

// pick hue from the slider pointer event
    function pickHue(evt) {
      const rect = hueSlider.getBoundingClientRect();
      const x = Math.min(Math.max(evt.clientX - rect.left, 0), rect.width);

hue = (x / rect.width) * 360;
      sliderIndicator.style.left = `${x}px`;
      drawSpectrum(hue);
      updateColorFromIndicator();
    }

// init positions from input's color
    function initializePositions(hexColor) {
      const [initH, initS, initL] = hexToHSL(hexColor);

hue = initH;
      drawHue();
      drawSpectrum(hue);

// place hue slider
      const hueX = (hue / 360) * hueSlider.width;
      sliderIndicator.style.left = `${hueX}px`;

let brightness;
      if (initS < 1.0) {
        brightness = (initL - 0.5) / (0.5 - initS * (initL - 0.5));
        if (isNaN(brightness) || !isFinite(brightness)) brightness = 0.5;
        if (brightness < 0) brightness = 0;
        if (brightness > 1) brightness = 1;
      } else {
        brightness = initL >= 0.5 ? 1 : 0;
      }

const x = initS * spectrum.width;
      const y = (1 - brightness) * spectrum.height;
      indicator.style.left = `${x}px`;
      indicator.style.top = `${y}px`;
    }

function createDropdown() {
      dropdown = document.createElement('div');
      dropdown.className = 'uk-colorpicker-dropdown';
      dropdown.innerHTML = `
            <div style="position: relative;">
              <canvas class="uk-colorpicker-spectrum" width="200" height="150"></canvas>
              <div class="uk-colorpicker-spectrum-indicator"></div>
            </div>
            <div style="position: relative;">
              <canvas class="uk-colorpicker-slider" width="200" height="20"></canvas>
              <div class="uk-colorpicker-slider-indicator"></div>
            </div>`;
      document.body.appendChild(dropdown);

spectrum = dropdown.querySelector('.uk-colorpicker-spectrum');
      hueSlider = dropdown.querySelector('.uk-colorpicker-slider');
      indicator = dropdown.querySelector('.uk-colorpicker-spectrum-indicator');
      sliderIndicator = dropdown.querySelector('.uk-colorpicker-slider-indicator');
      ctxSpectrum = spectrum.getContext('2d');
      ctxHue = hueSlider.getContext('2d');

drawHue();
      drawSpectrum(hue);

// place indicators from current input color (no override)
      initializePositions(input.value);

// pointer events to handle both mouse + touch
      spectrum.addEventListener('pointerdown', evt => {
        // Hide mouse cursor if pointer is a mouse
        if (evt.pointerType === 'mouse') {
          spectrum.classList.add('hide-cursor');
        }
        pointerDownOnSpectrum = true;
        spectrum.setPointerCapture(evt.pointerId);
        pickSpectrumColor(evt);
      });
      spectrum.addEventListener('pointermove', evt => {
        if (pointerDownOnSpectrum) {
          pickSpectrumColor(evt);
        }
      });
      spectrum.addEventListener('pointerup', evt => {
        // Restore cursor if pointer is a mouse
        if (evt.pointerType === 'mouse') {
          spectrum.classList.remove('hide-cursor');
        }
        pointerDownOnSpectrum = false;
        spectrum.releasePointerCapture(evt.pointerId);
      });

hueSlider.addEventListener('pointerdown', evt => {
        // Hide mouse cursor if pointer is a mouse
        if (evt.pointerType === 'mouse') {
          hueSlider.classList.add('hide-cursor');
        }
        pointerDownOnHue = true;
        hueSlider.setPointerCapture(evt.pointerId);
        pickHue(evt);
      });
      hueSlider.addEventListener('pointermove', evt => {
        if (pointerDownOnHue) {
          pickHue(evt);
        }
      });
      hueSlider.addEventListener('pointerup', evt => {
        // Restore cursor if pointer is a mouse
        if (evt.pointerType === 'mouse') {
          hueSlider.classList.remove('hide-cursor');
        }
        pointerDownOnHue = false;
        hueSlider.releasePointerCapture(evt.pointerId);
      });

// single clicks also pick color/hue
      spectrum.addEventListener('click', pickSpectrumColor);
      hueSlider.addEventListener('click', pickHue);
    }

// close if click outside
    document.addEventListener('mousedown', e => {
      if (dropdown && !dropdown.contains(e.target) && e.target !== input) {
        dropdown.remove();
        dropdown = null;
      }
    });

input.addEventListener('focus', () => {
      if (!dropdown) {
        createDropdown();
      }
      const rect = input.getBoundingClientRect();
      dropdown.style.top = `${rect.bottom + window.scrollY}px`;
      dropdown.style.left = `${rect.left + window.scrollX}px`;
    });

// while typing in input, update color in dropdown if present
    input.addEventListener('input', () => {
      if (dropdown) {
        initializePositions(input.value);
      }
    });
  });
})(window.UIkit);

Information

Detailed overview of a selected code snippet

yaneony

103

25.03.2025, 16:28:24

28.03.2025, 11:00:50

uk-border, uk-card, uk-colorpicker, uk-container, uk-flex, uk-form, uk-input, uk-margin, uk-padding

Comments

Browse user feedback and discussions in detail

Currently in development and will be available soon. Stay tuned for updates!