Fix My Computer, Mark! - Color Picker and HEX Display

Color Picker and HEX Display

Here is the script:

<!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>

Select the Base Color first. Then put your mouse pointer off to the side and click on an area that is not in the pop up color picker.

Color Slider with Picker and HEX Display

Base Color: Lightness: 100% Darkness: 0%

HEX Value: #ffffff

Scripts

Color Picker and HEX Display