So choosing the right background colour can be tricky, especially when it comes to dark colours where some subtlety is required in getting just the right shade. I don’t like oversaturated dark colours but the saturation and lightness values will always vary with the hue since each hue varies in both of these repescts anyway.
You can change link colours using the gradient options above then opening the colour picker tool below.
This uses the <input type="color"> to get the colour picker.
An event listener is added to this listening for input. A function uses the chosen colour to change the background colour with an inline style on the <body> tag.
<form>
<label for="color-picker">Choose a color</label>
<input type="color" id="color-picker">
</form>
The JS is:
const colorPicker = document.getElementById('color-picker');
colorPicker.addEventListener('input', (e) => {
e.preventDefault();
document.body.style.background = e.target.value;
});