Color picker In HTML CSS

Color picker In HTML CSS. HTML, as everybody knows, is called HyperText Markup Language, which is used to display texts, images. Color coding is part of improving your HTML web page.

Color picker code In HTML works as an identifier that knows and mirrors that color on the web. The usually used color coding is of HEX that signifies ‘Hexadecimal’ code for that color. Similarly, there are other color codes like RGB short for ‘Red, black, Blu’’. Different color codes are called HSL, short for ‘Hue, Saturation, Lightness’. The HSL is an added benefit when picking the color of your choice.

Since normally the use of hexadecimal codes is favored, we have described the hexadecimal codes to our best. The Hexadecimal color picker codes hold a symbol, a hash ( # ), and a set of six digits or numbers. They are in the hexadecimal number system So an ‘FF’ is the highest number and represents ‘255’ from the hexadecimal number system.

These six digits or numbers hold three pairs describing the RB color code. Out of these six digits, the first pair of two digits represents the strength of your ‘Red’ color. So an ‘FF’ for the point of our first pair will represent the red color with maximum strength. ’00’ is used for the slightest intensity and ‘FF’ for the highest. For getting a ‘Green’ color, the middle pair represents the intensity.

Color picker In HTML CSS:)

Simple Example:

<form action="color.html">
Select your favorite color:
<input type="color" name="favcolor" id="color" >
</form>

Color picker In HTML CSS. Added Some Style with CSS and JavaScript.

<canvas id = "color">
  </canvas>
<p>
<input type = "color" value = "#000000" id = "clr" onchange = "docolor()">
  <input type = "range" min = "10" max = "100" value = "10" id = "soft" oninput = "dosquare()">
  </p>
  <style type="text/css">
  #color {
  width: 200pt;
  height: 50pt;
  border: 2px solid #000;
}
.btn{padding: 10px; color: #fff;background:#000;cursor: pointer;}
.yellowback {
  background-color: yellow;
}
  </style>
  <script type="text/javascript">
    function changecolor() {
  var cc1 = document.getElementById("color");
  cc1.style.backgroundColor = "#ff3399";
}
function docolor() {
  var cc1 = document.getElementById("color");
  var colorinput = document.getElementById("clr");
  var pickcol = colorinput.value;
  cc1.style.backgroundColor = pickcol;
}
function dosquare() {
  var cc1 = document.getElementById("color");
  var rangeinput = document.getElementById("soft");
  var sizesoft = rangeinput.value;
  var ctx = cc1.getContext("2d");
  ctx.clearRect(0, 0, cc1.width, cc1.height);
  ctx.fillStyle = "pink";
  ctx.fillRect(0, 0, sizesoft, sizesoft);
}
  </script>

Conclusion

There are several ways and many combinations that can help you to create a color picker HTML CSS, that too smart one. For example, with the combination of HTML5 and CSS along with JavaScript, you can use yet another element called ‘canvas’ that has its own libraries that helps to create a bungler, small and cross-browser color picker. So, you can choose as you want.