https://hex-triplet-words.pages.dev/color-picker-mods.js

1const colorPreview = document.getElementsByClassName("color-preview")[0],
2  tripletInput = document.getElementsByClassName("triplet-input")[0],
3  pickerIO = document.getElementsByClassName("picker-io")[0];
4
5tripletInput.addEventListener("focus", function () {
6  pickerIO.classList.add("focus");
7});
8
9tripletInput.addEventListener("blur", function () {
10  pickerIO.classList.remove("focus");
11});
12
13if (window.matchMedia("(hover: hover)").matches) {
14  // primary input mechanism can hover
15  tripletInput.addEventListener("mouseover", function () {
16    pickerIO.classList.add("hover");
17  });
18
19  tripletInput.addEventListener("mouseout", function () {
20    pickerIO.classList.remove("hover");
21  });
22}
23
24let scalar = 1.5,
25  weightOn = 0.55, // 0 for approximate invert, 1/3 to desaturate, 1 to maintain color
26  weightOff = (1 - weightOn) / (2 * scalar);
27weightOn /= scalar;
28
29function liveColorPickerState(picker, container) {
30  picker.on("blur", () => {});
31  picker.on("focus", () => {});
32
33  // Add is-static and no-alpha classes to the color picker pane
34  picker.self.classList.add("is-static");
35  picker.self.classList.add("no-alpha");
36  // Put color picker pane to `container`
37  picker.enter(container);
38
39  picker.on("change", function (r, g, b) {
40    this.source.value = this.color(r, g, b, 1);
41    updateColorPreview(r, g, b);
42    pickerIO.classList.remove("invalid");
43  });
44
45  function onKeyboard(picker, e) {
46    picker.set.apply(picker, CP.HEX(e.target.value)).enter(container);
47    const [r, g, b] = CP.HEX(picker.source.value);
48    updateColorPreview(r, g, b);
49    if (tripletInput.validity.valid) {
50      pickerIO.classList.remove("invalid");
51    } else {
52      pickerIO.classList.add("invalid");
53    }
54  }
55
56  ["cut", "input", "keyup", "paste"].forEach((e) => {
57    picker.source.addEventListener(e, (event) => onKeyboard(picker, event));
58  });
59
60  function updateColorPreview(r, g, b) {
61    colorPreview.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
62    colorPreview.style.borderColor = `rgb(${
63      r * weightOn + weightOff * (b + g)
64    }, ${g * weightOn + weightOff * (r + b)}, ${
65      b * weightOn + weightOff * (r + g)
66    })`;
67  }
68}
69
70const picker = new CP(tripletInput);
71liveColorPickerState(picker, document.getElementsByClassName("picker-pane")[0]);