web-dev-qa-db-fra.com

Comment créer un sélecteur de couleurs en html?

Comment faire un sélecteur de couleurs, comme on le voit sur différents sites Web où les utilisateurs peuvent faire défiler différentes couleurs et en un clic obtenir le code couleur?

J'ai essayé de faire des rangées et des colonnes mais ce n'était pas si confortable donc je veux que ce soit comme un sélecteur de couleur

Vous pouvez jeter un oeil à la boîte de couleur comment j'essaie de le faire:

enter image description here

J'ai traversé différentes questions mais je ne suis pas en mesure de résoudre ce problème.

htmlcolorscolorboxcolor-picker
11
Rakesh Ram

Vous pouvez simplement créer un sélecteur de couleurs par <input> avec le type comme couleur. Mais cela ne fonctionne que dans les navigateurs modernes.

<input name="Color Picker" type="color"/>

Aperçu sur https://jsfiddle.net/itsselvam/9sL7s7ox/

10
Selvam

Option 1 - Sélecteur de couleurs HTML natif

Comme mentionné dans les réponses précédentes, vous pouvez utiliser l'élément sélecteur de couleur HTML natif:

<input type="color" />

Option 2 - Sélecteur de couleurs tiers

Si le sélecteur de couleurs natif ne répond pas à vos critères, car il a un aspect obsolète et n'est pas aussi lisse que les sélecteurs de couleurs modernes, vous pouvez utiliser l'un des centaines de sélecteurs de couleurs sur le Web. Même une simple recherche sur la page des packages NPM renverra quelques centaines de résultats.
https://www.npmjs.com/search?q=color%20picker

Option n ° 3 - Créez votre propre sélecteur de couleurs

Si vous m'aimez, et après une longue recherche dans la bibliothèque de sélecteurs de couleurs, vous n'avez pas trouvé de sélecteur correspondant à vos critères, vous pouvez construire votre sélecteur de couleurs, ce qui ne prendra pas trop de temps comme je vais le démontrer.

  1. Trouvez une image de roue chromatique qui sera votre sélecteur, par exemple:
    (une roue chromatique plus complexe probablement nécessaire dans une application réelle)
    enter image description here

  2. Dans votre fichier .html, créez un élément canvas.

<canvas id="colorCanvas" class="color-canvas" width="250" height="250"></canvas>

  1. Donnez l'élément canvas border-radius: 50%, cela rendra le canevas rond, donc seuls les clics à l'intérieur du cercle seront tirés et les clics dans le bord seront ignorés (nous aurons besoin d'un événement de clic dans les étapes suivantes).

  2. Dans votre JavaScript, lancez le canevas avec votre image de sélection de couleurs et écoutez les événements de clic


function initColorPicker()
{
    var canvasEl = document.getElementById('colorCanvas');
    var canvasContext = canvasEl.getContext('2d');

    var image = new Image(250, 250);
    image.onload = () => canvasContext.drawImage(image, 0, 0, image.width, image.height); 
    image.src = "./images/myColorPickerImage.png";

    canvasEl.onclick = function(mouseEvent) 
    {
      var imgData = canvasContext.getImageData(mouseEvent.offsetX, mouseEvent.offsetY, 1, 1);
      var rgba = imgData.data;

      alert("rgba(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ", " + rgba[3] + ")");
    }
}
8
Gil Epshtain

Vous pouvez simplement créer un sélecteur de couleurs avec le type comme couleur. Mais cela ne fonctionne que dans les navigateurs modernes.

N'UTILISEZ PAS Color Picker. Il est ultra aléatoire quant à ce qu'il fait, les anciens navigateurs le transforment en une entrée régulière, les plus récents sont aléatoires. Votre meilleur pari est de faire comme je suis et de choisir un sélecteur de couleurs Javascript ou de créer le vôtre. Je suis obligé de créer le mien car tous les sélecteurs actuels sont trop spécifiques au projet.

1
Robert Jackson

De plus pour la réponse de Gil Epshtain , si vous ne voulez pas charger une image, vous pouvez remplir la toile avec des dégradés

function initColorPicker() {
  var canvas = document.getElementById('colorCanvas');
  var canvasContext = canvas.getContext('2d');

  let gradient = canvas.getContext('2d').createLinearGradient(0, 0, canvas.width, 0)
  gradient.addColorStop(0, '#ff0000')
  gradient.addColorStop(1 / 6, '#ffff00')
  gradient.addColorStop((1 / 6) * 2, '#00ff00')
  gradient.addColorStop((1 / 6) * 3, '#00ffff')
  gradient.addColorStop((1 / 6) * 4, '#0000ff')
  gradient.addColorStop((1 / 6) * 5, '#ff00ff')
  gradient.addColorStop(1, '#ff0000')
  canvas.getContext('2d').fillStyle = gradient
  canvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height)

  gradient = canvas.getContext('2d').createLinearGradient(0, 0, 0, canvas.height)
  gradient.addColorStop(0, 'rgba(255, 255, 255, 1)')
  gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0)')
  gradient.addColorStop(1, 'rgba(255, 255, 255, 0)')
  canvas.getContext('2d').fillStyle = gradient
  canvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height)

  gradient = canvas.getContext('2d').createLinearGradient(0, 0, 0, canvas.height)
  gradient.addColorStop(0, 'rgba(0, 0, 0, 0)')
  gradient.addColorStop(0.5, 'rgba(0, 0, 0, 0)')
  gradient.addColorStop(1, 'rgba(0, 0, 0, 1)')
  canvas.getContext('2d').fillStyle = gradient
  canvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height)


  canvas.onclick = function(e) {
        console.log()
    var imgData = canvasContext.getImageData((e.offsetX / canvas.clientWidth) * canvas.width, (e.offsetY / canvas.clientHeight) * canvas.height, 1, 1)
    var rgba = imgData.data;
    var color = "rgba(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ", " + rgba[3] + ")";
    console.log("%c" + color, "color:" + color)
  }
}

initColorPicker()
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
}

canvas {
  height: 100%;
  width: 100%;
}
<html>

  <body>
    <canvas id="colorCanvas" class="color-canvas" width="100%" height="100%"></canvas>
  </body>

</html>
0
Богуслав Павлишинець