Menu
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.
499
Use the color picker by clicking and dragging your cursor inside the picker area to highlight a color on the right. Input Hex, RGB, HSL or CMYK values to search for a particular color in the fields below the color swatch; click the swatch to add it to your palette.
Note that the default keyboard shortcut used to activate Color Picker is Windows Key+Shift+C.
<FONT COLOR= > To change some of the text in the HTML document to another color use the FONT COLOR Tag. To change the color of the font to red add the following attribute to the code to the <FONT COLOR=" "> tag. #ff0000 is the color code for red.
You can specify colors on page level using <body> tag or you can set colors for individual tags using bgcolor attribute. bgcolor − sets a color for the background of the page. text − sets a color for the body text. alink − sets a color for active links or selected links.
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>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/
42
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
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
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.
Find a Color-Wheel image that will be your picker, for example:
(a more complex colors-wheel probable needed in real application)
In your .html file, create a canvas element.
<canvas id="colorCanvas" class="color-canvas" width="250" height="250"></canvas>
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).
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] + ")");
}
}
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
