hugo-test-site/content/colors.html

---
title: "Colors"
date: 2024-06-13T21:02:17-07:00
draft: true
---

<h2>Colors</h2>

<div class="colors">
    <input type="color" id="color1" data-index="0">
    <input type="color" id="color2">
    <input type="color" id="color3">
    <input type="color" id="color4">
    <input type="color" id="color5">
    <input type="color" id="color6">
</div>

<script>
    const colors = [
    ];
    document.addEventListener("DOMContentLoaded", () => {
        document.querySelectorAll("input.color").forEach(() => {
        });
    });
</script>

<div class="colors">
    <div class="box  dark-blue"></div>
    <div class="box  purple"></div>
    <div class="box" style="background-color: #9DE200"></div>
</div>

<input type="color" value="#ff6600">

<h2>Grayscale</h2>

<div class="colors  grayscale">
    <div class="box  gray1"></div>
    <div class="box  gray2"></div>
    <div class="box  gray3"></div>
    <div class="box  gray4"></div>
    <div class="box  gray5"></div>
    <div class="box  gray6"></div>
    <div class="box  gray7"></div>
</div>

<style>
:root {
  --light-blue: 69 212 243;
  --mid-blue: 26 169 239;
  --dark-blue: 63 46 231;
  --purple: 161 49 232;
  --lilac: 187 121 245;
  --orange: orange;
}

.colors {
    display: flex;
    gap: var(--space-xxs);
    margin-block: var(--space-l);
}

.box, input[type=color] {
    width: 50px;
    height: 50px;
}

.box {
    border: 1px solid black;
}

.light-blue { background-color: rgb(var(--light-blue)); }
.mid-blue { background-color: rgb(var(--mid-blue)); }
.dark-blue { background-color: rgb(var(--dark-blue)); }
.purple { background-color: rgb(var(--purple)); }
.lilac { background-color: rgb(var(--lilac)); }
.orange { background-color: orange; }

.gray1 { background-color: black; }
.gray2 { background-color: #222; }
.gray3 { background-color: #444; }
.gray4 { background-color: #888; }
.gray5 { background-color: #aaa; }
.gray6 { background-color: #ddd; }
.gray7 { background-color: white; }
</style>