tools/.hta_slug/color-shades-generator.php

<div class="color-shades-container">
    <div class="color-shades-generator">
        <h1>Color Shades Generator</h1>
        <div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
            <label for="colorInput">Choose Color</label>
            <input type="color" id="colorInput" class="color-input" value="#ff0000" />
        </div>
        <div id="colorShades" class="color-shades"></div>
    </div>
</div>

<script>
  function generateShades(hex) {
    const shades = [];
    for (let i = 0; i <= 90; i += 10) { // Adjust the increment value here
      const shade = lightenDarkenColor(hex, -i);
      shades.push(shade);
    }
    return shades;
  }

  // Function to lighten or darken a color
  function lightenDarkenColor(col, amt) {
    let usePound = false;
    if (col[0] === "#") {
      col = col.slice(1);
      usePound = true;
    }
    const num = parseInt(col, 16);
    let r = (num >> 16) + amt;
    if (r > 255) r = 255;
    else if (r < 0) r = 0;
    let b = ((num >> 8) & 0x00FF) + amt;
    if (b > 255) b = 255;
    else if (b < 0) b = 0;
    let g = (num & 0x0000FF) + amt;
    if (g > 255) g = 255;
    else if (g < 0) g = 0;
    return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);
  }

  // Function to display color shades
  function displayColorShades(hex) {
    const colorShadesDiv = document.getElementById("colorShades");
    colorShadesDiv.innerHTML = "";
    const shades = generateShades(hex);
    shades.forEach(shade => {
      const colorBox = document.createElement("div");
      colorBox.style.backgroundColor = shade;
      colorBox.classList.add("color-box");
      const hexCode = document.createElement("p");
      hexCode.textContent = `HEX: ${shade}`;
      const copyHexButton = createCopyButton(shade);
      colorBox.appendChild(hexCode);
      colorBox.appendChild(copyHexButton);
      colorShadesDiv.appendChild(colorBox);
    });
  }

  // Function to create a copy button
  function createCopyButton(text) {
    const button = document.createElement('button');
    button.classList.add('copy-button');
    button.textContent = 'Copy HEX';
    button.addEventListener('click', () => {
      navigator.clipboard.writeText(text);
      button.textContent = 'Copied';
      setTimeout(() => {
        button.textContent = 'Copy HEX';
      }, 2000); // Reset button text after 2 seconds
    });
    return button;
  }

  // Event listener for input change
  const colorInput = document.getElementById("colorInput");
  colorInput.addEventListener("input", function() {
    const hex = this.value;
    displayColorShades(hex);
  });

  // Initial display
  const initialColor = colorInput.value;
  displayColorShades(initialColor);
</script>
<style>
  .color-shades-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* background-color: #f4f4f4; */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    /* height: 100vh; */
  }
  .color-shades-generator {
    max-width: 600px;
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .color-shades-generator h1 {
    font-size: 36px;
    margin-bottom: 20px;
  }
  .color-input {
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    /* padding: 10px; */
    border: 1px solid #ddd;
    border-radius: 50%;
  }
  .color-shades {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .color-box {
    width: 100px;
    height: 100px;
    margin: 10px;
    border-radius: 5px;
    display: inline-block;
    position: relative;
  }
  .color-box .copy-button {
    position: absolute;
    color: #000;
    top: 60px;
    right: 18px;
    font-size: 12px;
    padding: 5px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
  }
  .color-info {
    font-size: 14px;
    margin-top: 5px;
    color: #666;
  }
</style>