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
<label>Color Picker:</label>
<input type="color" id="colorpicker" value="#000000">
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>
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr@1.8.1/dist/themes/nano.min.css" />
</head>
<body>
<!-- Your HTML content here -->
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr@1.8.1/dist/pickr.min.js"></script>
<script>
// Initialize Pickr
const pickr = Pickr.create({
el: '.color-picker', // Selector for the element where color picker will be displayed
theme: 'nano', // Choose a theme, e.g., classic, monolith, nano
default: '#FF0000', // Default color value
swatches: [ // Predefined swatch color options
'rgba(244, 67, 54, 1)',
'rgba(233, 30, 99, 0.95)',
'rgba(156, 39, 176, 0.9)',
'rgba(103, 58, 183, 0.85)',
'rgba(63, 81, 181, 0.8)',
'rgba(33, 150, 243, 0.75)',
'rgba(3, 169, 244, 0.7)',
'rgba(0, 188, 212, 0.7)',
'rgba(0, 150, 136, 0.75)',
'rgba(76, 175, 80, 0.8)',
'rgba(139, 195, 74, 0.85)',
'rgba(205, 220, 57, 0.9)',
'rgba(255, 235, 59, 0.95)',
'rgba(255, 193, 7, 1)',
],
components: {
preview: true, // Display color preview element
opacity: true, // Display opacity control
hue: true, // Display hue control
interaction: {
input: true, // Display manual input field
clear: true, // Display clear button
save: true // Display save button
}
}
});
// Handle color change event
pickr.on('change', (color) => {
const selectedColor = color.toRGBA().toString();
console.log(`Selected color: ${selectedColor}`);
// Use the selected color for your CSS styling or any other purpose
});
</script>
</body>
</html>