Add GIMP palette exporter for palette
This commit is contained in:
parent
c73df51221
commit
c3838bae6a
1 changed files with 50 additions and 15 deletions
|
@ -14,7 +14,7 @@
|
||||||
<section style="--base-hue: 280deg; --saturation: 50%; --offset: calc(360deg / 6)">
|
<section style="--base-hue: 280deg; --saturation: 50%; --offset: calc(360deg / 6)">
|
||||||
<h2>Primary</h2>
|
<h2>Primary</h2>
|
||||||
<!-- Only override values here for slight tweaking -->
|
<!-- Only override values here for slight tweaking -->
|
||||||
<div class="colors" style="--hue: var(--base-hue);">
|
<colour-palette style="--hue: var(--base-hue);">
|
||||||
<button style="--lightness: 05%"></button>
|
<button style="--lightness: 05%"></button>
|
||||||
<button style="--lightness: 15%"></button>
|
<button style="--lightness: 15%"></button>
|
||||||
<button style="--lightness: 30%"></button>
|
<button style="--lightness: 30%"></button>
|
||||||
|
@ -24,7 +24,7 @@
|
||||||
<button style="--lightness: 70%"></button>
|
<button style="--lightness: 70%"></button>
|
||||||
<button style="--lightness: 80%"></button>
|
<button style="--lightness: 80%"></button>
|
||||||
<button style="--lightness: 95%"></button>
|
<button style="--lightness: 95%"></button>
|
||||||
</div>
|
</colour-palette>
|
||||||
|
|
||||||
<section class="hint box">
|
<section class="hint box">
|
||||||
Modify as needed by changing the <code>--hue</code> attribute in the inlined CSS.<br>
|
Modify as needed by changing the <code>--hue</code> attribute in the inlined CSS.<br>
|
||||||
|
@ -32,7 +32,7 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<h2>Secondary</h2>
|
<h2>Secondary</h2>
|
||||||
<div class="colors" style="--hue: calc(var(--base-hue) + var(--offset));">
|
<colour-palette style="--hue: calc(var(--base-hue) + var(--offset));">
|
||||||
<button style="--lightness: 05%"></button>
|
<button style="--lightness: 05%"></button>
|
||||||
<button style="--lightness: 15%"></button>
|
<button style="--lightness: 15%"></button>
|
||||||
<button style="--lightness: 30%"></button>
|
<button style="--lightness: 30%"></button>
|
||||||
|
@ -42,7 +42,7 @@
|
||||||
<button style="--lightness: 70%"></button>
|
<button style="--lightness: 70%"></button>
|
||||||
<button style="--lightness: 80%"></button>
|
<button style="--lightness: 80%"></button>
|
||||||
<button style="--lightness: 95%"></button>
|
<button style="--lightness: 95%"></button>
|
||||||
</div>
|
</colour-palette>
|
||||||
|
|
||||||
<section class="hint box">
|
<section class="hint box">
|
||||||
You can copy any colour to the clipboard by just clicking on its box.
|
You can copy any colour to the clipboard by just clicking on its box.
|
||||||
|
@ -51,7 +51,7 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<h2>Tertiary</h2>
|
<h2>Tertiary</h2>
|
||||||
<div class="colors" style="--hue: calc(var(--base-hue) - var(--offset));">
|
<colour-palette style="--hue: calc(var(--base-hue) - var(--offset));">
|
||||||
<button style="--lightness: 05%"></button>
|
<button style="--lightness: 05%"></button>
|
||||||
<button style="--lightness: 15%"></button>
|
<button style="--lightness: 15%"></button>
|
||||||
<button style="--lightness: 30%"></button>
|
<button style="--lightness: 30%"></button>
|
||||||
|
@ -61,7 +61,7 @@
|
||||||
<button style="--lightness: 70%"></button>
|
<button style="--lightness: 70%"></button>
|
||||||
<button style="--lightness: 80%"></button>
|
<button style="--lightness: 80%"></button>
|
||||||
<button style="--lightness: 95%"></button>
|
<button style="--lightness: 95%"></button>
|
||||||
</div>
|
</colour-palette>
|
||||||
|
|
||||||
<section class="hint box">
|
<section class="hint box">
|
||||||
By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated.
|
By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated.
|
||||||
|
@ -69,7 +69,7 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<h2>Neutral</h2>
|
<h2>Neutral</h2>
|
||||||
<div class="colors" style="--hue: 210deg; --saturation: 5%;">
|
<colour-palette style="--hue: 210deg; --saturation: 5%;">
|
||||||
<button style="--lightness: 05%"></button>
|
<button style="--lightness: 05%"></button>
|
||||||
<button style="--lightness: 15%"></button>
|
<button style="--lightness: 15%"></button>
|
||||||
<button style="--lightness: 30%"></button>
|
<button style="--lightness: 30%"></button>
|
||||||
|
@ -79,7 +79,7 @@
|
||||||
<button style="--lightness: 70%"></button>
|
<button style="--lightness: 70%"></button>
|
||||||
<button style="--lightness: 80%"></button>
|
<button style="--lightness: 80%"></button>
|
||||||
<button style="--lightness: 95%"></button>
|
<button style="--lightness: 95%"></button>
|
||||||
</div>
|
</colour-palette>
|
||||||
|
|
||||||
<section class="hint box">
|
<section class="hint box">
|
||||||
By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated.
|
By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated.
|
||||||
|
@ -87,6 +87,8 @@
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<button id="export">Export as GIMP Palette</button>
|
||||||
|
|
||||||
<!-- ======================================== -->
|
<!-- ======================================== -->
|
||||||
<!-- ===== STYLES AND APPLICATION LOGIC ===== -->
|
<!-- ===== STYLES AND APPLICATION LOGIC ===== -->
|
||||||
<!-- ======================================== -->
|
<!-- ======================================== -->
|
||||||
|
@ -136,21 +138,22 @@
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.colors {
|
colour-palette {
|
||||||
--separation2: .6em; /* Halved separation */
|
--separation2: .6em; /* Halved separation */
|
||||||
display: flex;
|
display: flex;
|
||||||
/* padding: var(--separation2); */
|
/* padding: var(--separation2); */
|
||||||
}
|
}
|
||||||
|
|
||||||
div.colors button {
|
colour-palette button {
|
||||||
--radius: 50%;
|
--radius: 50%;
|
||||||
all: unset;
|
all: unset;
|
||||||
margin: var(--separation2);
|
margin: var(--separation2);
|
||||||
|
background: hsl(var(--hue), var(--saturation, 50%), var(--lightness, 50%));
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: box-shadow 0.3s;
|
transition: box-shadow 0.3s;
|
||||||
} div.colors button::before {
|
} colour-palette button::before {
|
||||||
content: '';
|
content: '';
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
background: hsl(var(--hue), var(--saturation, 50%), var(--lightness, 50%));
|
background: hsl(var(--hue), var(--saturation, 50%), var(--lightness, 50%));
|
||||||
|
@ -161,13 +164,13 @@
|
||||||
transition: box-shadow 0.3s;
|
transition: box-shadow 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.colors button:hover {
|
colour-palette button:hover {
|
||||||
box-shadow: .4em .4em .6em #0004;
|
box-shadow: .4em .4em .6em #0004;
|
||||||
}
|
}
|
||||||
div.colors button:hover::before {
|
colour-palette button:hover::before {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
body.dark div.colors button:hover {
|
body.dark colour-palette button:hover {
|
||||||
box-shadow: .0em .0em .6em hsla(var(--hue), calc(var(--saturation) + 30%), 80%, 60%);
|
box-shadow: .0em .0em .6em hsla(var(--hue), calc(var(--saturation) + 30%), 80%, 60%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -232,6 +235,18 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#export {
|
||||||
|
all: unset;
|
||||||
|
font-size: 1.2em;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: .4em 1.2em;
|
||||||
|
border-radius: 1.8em;
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: hsl(340deg, 50%, 40%);
|
||||||
|
color: hsl(210deg, 5%, 95%);
|
||||||
|
margin: .4em;
|
||||||
|
}
|
||||||
|
|
||||||
/* === Utility === */
|
/* === Utility === */
|
||||||
|
|
||||||
[center] { text-align: center; }
|
[center] { text-align: center; }
|
||||||
|
@ -255,7 +270,7 @@
|
||||||
box.addEventListener("animationend", ({box: target}) => box.parentElement.removeChild(box))
|
box.addEventListener("animationend", ({box: target}) => box.parentElement.removeChild(box))
|
||||||
}
|
}
|
||||||
|
|
||||||
document.querySelectorAll('div.colors button').forEach(button => {
|
document.querySelectorAll('colour-palette button').forEach(button => {
|
||||||
button.addEventListener('click', event => {
|
button.addEventListener('click', event => {
|
||||||
const prop = name => getComputedStyle(button)
|
const prop = name => getComputedStyle(button)
|
||||||
.getPropertyValue(name)
|
.getPropertyValue(name)
|
||||||
|
@ -294,4 +309,24 @@
|
||||||
document.body.classList.remove("dark")
|
document.body.classList.remove("dark")
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
customElements.define("colour-palette", class extends HTMLElement {
|
||||||
|
get colours() {
|
||||||
|
return Array.from(this.querySelectorAll("button"))
|
||||||
|
.map(button => getComputedStyle(button).backgroundColor)
|
||||||
|
.map(colour => colour.match(/\d+/g))
|
||||||
|
.map(match => `${match[0]} ${match[1]} ${match[2]}`)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
const exportButton = document.querySelector("#export")
|
||||||
|
exportButton.addEventListener("click", event => {
|
||||||
|
const colours = Array.from(document.querySelectorAll("colour-palette")).map(palette => palette.colours)
|
||||||
|
const template = `GIMP Palette\nName: Palette\nColumns: 1\n#\n${colours.map(c => c.join("\n")).join("\n")}`
|
||||||
|
const link = document.createElement("a")
|
||||||
|
link.href = `data:text/plain;base64,${btoa(template)}`
|
||||||
|
link.download = "palette.gpl"
|
||||||
|
link.click()
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in a new issue