xxxxxxxxxx
<label>Color Picker:</label>
<input type="color" id="colorpicker" value="#000000">
xxxxxxxxxx
<input type="color" id="colorPicker">
<input type="text" id="cssCode" readonly>
<script>
const colorPicker = document.getElementById('colorPicker');
const cssCode = document.getElementById('cssCode');
colorPicker.addEventListener('input', () => {
const selectedColor = colorPicker.value;
cssCode.value = `background-color: ${selectedColor};`;
});
</script>
xxxxxxxxxx
For anyone wondering, hex color is just in base 16. So 255 (max color) is FF.
The 6 long string of characters is just the Red Green and Blue channels (RRGGBB).
Which means you shouldn't have to look it up unless you're going for an exact color.
Hex numbers: 0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F 20 21.. etc.
xxxxxxxxxx
<input type="color" value="#ffffff"> <!-- value="#ffffff" defines the default value -->
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<title>Hex Color Picker</title>
<style>
#colorPicker {
width: 200px;
height: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="colorPicker"></div>
<input type="text" id="hexColor" readonly>
<script>
var colorPicker = document.getElementById('colorPicker');
var hexColor = document.getElementById('hexColor');
colorPicker.addEventListener('click', function(event) {
var rect = colorPicker.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
var canvas = document.createElement('canvas');
canvas.width = 1;
canvas.height = 1;
var context = canvas.getContext('2d');
context.drawImage(colorPicker, x, y, 1, 1, 0, 0, 1, 1);
var pixelData = context.getImageData(0, 0, 1, 1).data;
var hex = "#" + ((1 << 24) | (pixelData[0] << 16) | (pixelData[1] << 8) | pixelData[2]).toString(16).slice(1);
hexColor.value = hex;
});
</script>
</body>
</html>