Color Picker and HEX Display
To enhance the previous example with a color picker and a display for the HEX color value, you can follow the steps below:
1. Updated HTML: Include the Color Picker and HEX Display
You will add an input for the color picker and a text display to show the HEX value of the current color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Slider with Picker and HEX Display</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
#colorDisplay {
width: 200px;
height: 200px;
margin: 20px auto;
border: 1px solid #000;
background-color: #ffffff;
}
</style>
</head>
<body>
<div id="colorDisplay"></div>
<label for="colorPicker">Base Color:</label>
<input type="color" id="colorPicker" value="#ffffff">
<label for="lightness">Lightness: <span id="lightnessValue">100%</span></label>
<input type="range" id="lightness" min="0" max="100" value="100">
<label for="darkness">Darkness: <span id="darknessValue">0%</span></label>
<input type="range" id="darkness" min="0" max="100" value="0">
<p>HEX Value: <span id="hexValue">#ffffff</span></p>
<script>
const colorDisplay = document.getElementById('colorDisplay');
const colorPicker = document.getElementById('colorPicker');
const lightness = document.getElementById('lightness');
const darkness = document.getElementById('darkness');
const lightnessValue = document.getElementById('lightnessValue');
const darknessValue = document.getElementById('darknessValue');
const hexValue = document.getElementById('hexValue');
function componentToHex(c) {
const hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
function updateColor() {
const light = lightness.value;
const dark = darkness.value;
lightnessValue.textContent = light + '%';
darknessValue.textContent = dark + '%';
const lightFactor = light / 100;
const darkFactor = dark / 100;
// Get the base color from the color picker
const baseColor = colorPicker.value;
const rBase = parseInt(baseColor.substr(1, 2), 16);
const gBase = parseInt(baseColor.substr(3, 2), 16);
const bBase = parseInt(baseColor.substr(5, 2), 16);
// Adjust color based on lightness and darkness
let r = rBase * lightFactor * (1 - darkFactor);
let g = gBase * lightFactor * (1 - darkFactor);
let b = bBase * lightFactor * (1 - darkFactor);
// Update the color display
colorDisplay.style.backgroundColor = `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`;
// Update the HEX value display
const hex = rgbToHex(Math.round(r), Math.round(g), Math.round(b));
hexValue.textContent = hex;
}
colorPicker.addEventListener('input', updateColor);
lightness.addEventListener('input', updateColor);
darkness.addEventListener('input', updateColor);
// Initialize the color display
updateColor();
</script>
</body>
</html>
2. Explanation of the New Features:
- Color Picker:
- The `input` element with `type="color"` allows users to select a base color. The color picker is initialized with `#ffffff` (white) by default.
- HEX Display:
- The `HEX Value:` text will display the hexadecimal representation of the currently adjusted color. The color is calculated based on the base color, lightness, and darkness adjustments.
- JavaScript Enhancements:
- The `componentToHex` and `rgbToHex` functions are utility functions that convert RGB values to a HEX string.
- The `updateColor()` function now retrieves the base color from the color picker, applies the lightness and darkness adjustments, and updates the displayed color and HEX value.
3. Enhancements:
- Real-time Updates: As users adjust the sliders or change the color picker, the color display and HEX value are updated in real-time.
- Custom Styling: You can style the color picker and other elements further to match your design requirements.
This setup allows users to dynamically adjust the lightness and darkness of a color selected through a color picker, with the corresponding HEX value displayed for reference.
HEX Value: #ffffff
PLG_GSPEECH_SPEECH_BLOCK_TITLE