How to create a color picker in html?

Question

How to make a color picker, like we see in different websites where users can scroll down different colors and on click can get the color code?

I have tried of making a rows and columns but it was not so comfortable so want it to be like a color picker

You can take a look at the color box how i am trying it to be:

I have gone through different questions but I'm not able to solve this issue.

Answer 1

Option #1 - Native HTML Color Picker

As mentioned in the previous answers you can use Native HTML color picker element:

<input type="color" />

For more info see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color

Option #2 - 3rd party Color Picker

If the Native color picker not meet your criteria, since it has an obsolete look and not look as slick as modern Color-Pickers, you can use one of literally hundreds of color pickers on the web. Even a simple search on the NPM packages page will return a few hundreds results to pick from.
https://www.npmjs.com/search?q=color%20picker

Option #3 - Build your own Color-Picker

If you like me, and after a long search of color-picker library, you didn't find a picker that meet your criteria, you can build you color picker, which not take too long as I will demonstrate.

1. Find a Color-Wheel image that will be your picker, for example:
   (a more complex colors-wheel probable needed in real application)
   

2. In your .html file, create a canvas element.
   
   

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

3. Give the canvas element border-radius: 50%, this will make the canvas round, so only clicks inside the circle will be fired, and clicks in the edge will be ignored (we will need click event in the next steps).

4. In your JavaScript, init the canvas with your color-picker image, and listen to click events

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] + ")");
    }
}

Answer 2

You can simply create a color picker by <input> with type as color. But it works only in modern browsers.

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

Preview at https://jsfiddle.net/itsselvam/9sL7s7ox/

Answer 3

In addition for answer of Gil Epshtain, if you do not wanna load an image you can fill the canvas with gradients

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>

Answer 4

You can simply create a color picker by with type as color. But it works only in modern browsers.

DON'T USE Color Picker. It is ultra random as to what it does, older browsers turn it into a regular input, newer ones are random as it gets. Your best bet is to do as I am and either pick a Javascript color picker or create your own. I am forced to create my own because all of the current pickers are too project specific.

Answer 5

Try the following:

<input name="clr" type="color">