Description:
Empower your creativity with ChromaSelect Pro, the advanced Color Picker tool. Choose colors effortlessly, view RGB values and Hex codes, and visualize your selections in real-time with the color preview. Perfect for designers, developers, and anyone passionate about colors.
Color Picker tool with options for selecting colors, RGB values, and hex codes. Write the code in HTML, CSS, and JavaScript
project tool free
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Picker</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
#color-picker-container {
text-align: center;
}
input {
margin-bottom: 10px;
padding: 8px;
font-size: 16px;
text-align: center;
}
#color-preview {
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="color-picker-container">
<h2>Color Picker</h2>
<label for="color-input">Select a Color:</label>
<input type="color" id="color-input" onchange="updateColor()">
<label for="rgb-input">RGB Value:</label>
<input type="text" id="rgb-input" readonly>
<label for="hex-input">Hex Code:</label>
<input type="text" id="hex-input" readonly>
<div id="color-preview"></div>
</div>
<script>
function updateColor() {
const colorInput = document.getElementById('color-input');
const rgbInput = document.getElementById('rgb-input');
const hexInput = document.getElementById('hex-input');
const colorPreview = document.getElementById('color-preview');
const selectedColor = colorInput.value;
// Update RGB input
const rgbArray = hexToRgb(selectedColor);
rgbInput.value = `RGB: ${rgbArray.join(', ')}`;
// Update Hex input
hexInput.value = `#${selectedColor.slice(1)}`;
// Update color preview
colorPreview.style.backgroundColor = selectedColor;
}
function hexToRgb(hex) {
// Convert hex to RGB
const bigint = parseInt(hex.slice(1), 16);
const r = (bigint >> 16) & 255;
const g = (bigint >> 8) & 255;
const b = bigint & 255;
return [r, g, b];
}
</script>
</body>
</html>
This code creates a simple Color Picker tool with options for selecting colors, displaying RGB values, and showing hex codes. The
updateColor function is called when the user selects a color, updating the RGB input, hex input, and color preview accordingly.
No comments:
Post a Comment