<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"> -->
@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;
}
}
<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>
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);
});
});
});