CaveOps | Snippets: Design Color Generator

CSS Before Head

<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Generator</title>
    <!-- <link rel="shortcut icon" href="https://hotodogo.com/favicon.ico" type="image/x-icon"> -->
    <link rel="stylesheet" href="style.css">

HTML Head

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
:root {
    --ff: "Montserrat", sans-serif;
    --ff2: "Fira Code", monospace;
    --h1: 800 2rem/1.2em var(--ff);
    --p: 400 1rem/1.5em var(--ff);
    --p-code: 300 .7rem/2em var(--ff2);
    --hue: 0;
    --tertiary-hue: calc(var(--hue) + 300);
    --accent-hue: calc(var(--hue) + 60);
    --primary-color: hsl(var(--hue), 50%, 90%);
    --pre-primary-color: hsl(var(--hue), 50%, 95%);
    --secondary-color: hsl(var(--hue), 50%, 10%);
    --tertiary-color: hsl(var(--tertiary-hue), 80%, 20%);
    --accent-color: hsl(var(--accent-hue), 80%, 20%);
}

.dark {
    --primary-color: hsl(var(--hue), 50%, 10%);
    --pre-primary-color: hsl(var(--hue), 50%, 15%);
    --secondary-color: hsl(var(--hue), 50%, 90%);
    --tertiary-color: hsl(var(--tertiary-hue), 80%, 80%);
    --accent-color: hsl(var(--accent-hue), 80%, 80%);
}

body {
    background: var(--primary-color);
    color: var(--secondary-color);
    font-family: var(--ff);
    font: var(--p);
}

header{
    width: 90%;
    max-width: 1080px;
    margin: 20px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#dark {
    width: 12px;
    fill: var(--secondary-color);
    cursor: pointer;
    background: var(--pre-primary-color);
    padding: 8px 11px;
    border-radius: 20px;
    box-shadow: 0 2px 2px hsla(var(--hue), 50%, 10%, .3), 0 4px 4px hsla(var(--hue), 50%, 10%, .15);
}
section{
width: 90%;
max-width: 1080px;
margin: 40px auto;
display: flex;
align-items: center;
gap: 20px;
}
.c1{flex: 1;}

a{
    font: 600 1rem/1em var(--ff);
    color: var(--accent-color);
    text-decoration: none;
}
.btn{
    display: inline-block;
    color: var(--primary-color);
    
background: var(--accent-color);
border-radius: 4px;
margin: 8px 8px 8px 0px;
padding: 12px 20px;
border: solid 2px var(--accent-color);
}
.secondary{
    border: solid 2px var(--accent-color);
    color: var(--accent-color);
    background: var(--primary-color);
}


h1{
    font: var(--h1);
    margin: 0px;
}
span{
    color: var(--accent-color);
}
.controls{
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 20px;
}
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 70%;
    height: 4px;
    background: var(--tertiary-color);
    border-radius: 5px;
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 24px;
    background: var(--tertiary-color);
    border-radius: 4px;
}
input[type="number"] {
    -webkit-appearance: none;
    appearance: none;
    color: var(--secondary-color);
    font: var(--p);
    padding: 8px;
    width: 40px;
    height: 20px;
    border: solid 1px var(--tertiary-color);
    border-radius: 4px;
    background: transparent;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.c2{
    position: relative;
    flex: 1;
    font: var(--p-code);
    background: var(--pre-primary-color);
    color: var(--secondary-color);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 2px 2px hsla(var(--hue), 50%, 10%, .3), 0 4px 4px hsla(var(--hue), 50%, 10%, .15);
}
.copy-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    border-radius: 8px;
    background: var(--primary-color);
    color: var(--accent-color);
    width: 60px;
    height: 30px;
    border: none;
    cursor: pointer;
}
@media (max-width: 800px) {
    section {
        flex-direction: column;
    }
    .c2{
        width: 90%;
        padding: 20px;
    }
}

CSS After Head

JS Before HTML Body

<header>
        <a href="/">Hotodogo</a>
        <svg onclick="dark()" id="dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
            <path
                d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z" />
        </svg>
    </header>
    <section>
        <div class="c1">
            <h1>You need <span>4</span> colors</h1>
            <p>2 for text and background(primary & secondary colors). 1 accent color to highlight important elements(number 4 & buttons). And an optional tertiary color to add a bit of personality(the hue slider).</p>
            <!-- <a class="btn" href="https://hotodogo.com/" target="_blank">How it works?</a> -->
            <!-- <a class="btn secondary" href="https://hotodogo.com/snippets/" target="_blank">Snippets</a> -->
            
        <div class="controls">
            <p>Hue</p>
            <input type="range" id="hue-slider" min="0" max="360" value="0">
            <input type="number" id="hue-value" value="0">
        </div>
        </div>
        <div class="c2">
            <pre id="code">:root {
        --color-primary: hsl(0, 50%, 90%);
        --color-primary-pre: hsl(0, 50%, 95%);
        --color-secondary: hsl(0, 50%, 10%);
        --color-tertiary: hsl(60, 80%, 20%);
        --color-accent: hsl(300, 80%, 20%);
    }
.dark {
        --color-primary: hsl(0, 50%, 10%);
        --color-primary-pre: hsl(0, 50%, 5%);
        --color-secondary: hsl(0, 50%, 90%);
        --color-tertiary: hsl(60, 80%, 80%);
        --color-accent: hsl(300, 80%, 80%);
    }</pre><button class="copy-btn">Copy</button>
        </div>
    </section>

HTML Body

HTML Foot

const hueSlider = document.getElementById('hue-slider');
const hueValueInput = document.getElementById('hue-value');
function updateHue(hue) {
            hueSlider.value = hue;
            hueValueInput.value = hue;
            document.documentElement.style.setProperty('--hue', hue);
            hue = Number(hue);
            let ahue = hue + 60; ;
            let a2hue = hue + 300;
            if (hue > 300) {
                ahue = hue + 60 - 360;
            }
            if (hue > 60) {
                a2hue = hue + 300 - 360;
            }
            code.textContent = `:root {
        --color-primary: hsl(${hue}, 50%, 90%);
        --color-primary-pre: hsl(${hue}, 50%, 95%);
        --color-secondary: hsl(${hue}, 50%, 10%);
        --color-tertiary: hsl(${ahue}, 80%, 20%);
        --color-accent: hsl(${a2hue}, 80%, 20%);
    }
.dark {
        --color-primary: hsl(${hue}, 50%, 10%);
        --color-primary-pre: hsl(${hue}, 50%, 5%);
        --color-secondary: hsl(${hue}, 50%, 90%);
        --color-tertiary: hsl(${ahue}, 80%, 80%);
        --color-accent: hsl(${a2hue}, 80%, 80%);
    }`  
        }
        hueSlider.addEventListener('input', function () {
            updateHue(hueSlider.value);
        });
        hueValueInput.addEventListener('input', function () {
            const hue = hueValueInput.value;
            if (hue >= 0 && hue <= 360) {
                updateHue(hue);
            }
        });
        function dark() {
                document.body.classList.toggle("dark");
}
// copy button
document.addEventListener("DOMContentLoaded", function () {
  const copyButton = document.querySelector(".copy-btn");
    copyButton.addEventListener("click", () => {
      const preElement = copyButton.parentElement;
      const code = preElement.textContent.trim().replace("Copy", "").trim();

      navigator.clipboard.writeText(code).then(() => {
        copyButton.textContent = "Copied";
        setTimeout(() => {
          copyButton.textContent = "Copy";
        }, 2000);
      });
    });
  });

JS After HTML Body