86 lines
1.9 KiB
HTML
86 lines
1.9 KiB
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>
|