.profile/templates/palette.html

<h1>A colour palette in plain HTML</h1>

<label>
	<span>Background Colour:</span>
	<input value="#f2f2f3" type="color" id="background-color"></input>
</label>

<section class="box">
	A template colour palette written as a self-contained HTML file.
	New palettes can be created easily by copying the file and changing a few CSS variables.
</section>

<!-- TODO: Change the base hue and offset here -->
<section style="--base-hue: 280deg; --saturation: 50%; --offset: calc(360deg / 6)">
	<h2>Primary</h2>
	<!-- Only override values here for slight tweaking -->
	<colour-palette name="primary" style="--hue: var(--base-hue);"></colour-palette>

	<section class="hint box">
		Modify as needed by changing the <code>--hue</code> attribute in the inlined CSS.<br>
		Usage of a separate color picker tool for this step might be preferable.<br>
	</section>

	<h2>Secondary</h2>
	<colour-palette name="secondary" style="--hue: calc(var(--base-hue) + var(--offset));"></colour-palette>

	<section class="hint box">
		You can copy any colour to the clipboard by just clicking on its box.
		By default colours are copied as HSLA values.
		This can be changed in the script block at the bottom of the document.
	</section>

	<h2>Tertiary</h2>
	<colour-palette name="tertiary" style="--hue: calc(var(--base-hue) - var(--offset));"></colour-palette>

	<section class="hint box">
		By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated.
		This makes it easier and quicker to make adjustments.
	</section>

	<h2>Neutral</h2>
	<colour-palette name="neutral" style="--hue: 210deg; --saturation: 5%;"></colour-palette>

	<section class="hint box">
		By making use of <code>calc</code> and <code>var</code>, most of the colour palette can be automated.
		This makes it easier and quicker to make adjustments.
	</section>
</section>

<button id="export">Export as GIMP Palette</button>

<!-- ======================================== -->
<!-- ===== STYLES AND APPLICATION LOGIC ===== -->
<!-- ======================================== -->

<style>
	:root {
		font-size: 1em;
		color: hsl(220deg, 8%, 20%);
		font-family: "Open Sans", sans-serif;
	}
	body.dark {
		color: hsl(220deg, 8%, 80%);
	}

	* {
		box-sizing: border-box;
	}

	code {
		font-family: "Hack", monospace;
	}

	body {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		background: hsl(200deg, 5%, 95%);
	}
	/* The following only does font size shenanigans! */

	h1, h2 {
		text-align: center;
		font-weight: normal;
		font-family: "Raleway", "Quicksand", serif;
	}

	h1 {
		font-size: 2.4em;
		--border: dotted .08em currentcolor;
		border-bottom: var(--border);
		border-top: var(---border);
		width: calc((3rem + .6rem * 2) * 9);
		text-align: center;
		padding: .2em 0;
	}
	h2 {
		font-size: 2em;
	}

	colour-palette {
		--separation2: .6em; /* Halved separation */
		display: flex;
		/* padding: var(--separation2); */
	}

	colour-palette button {
		--radius: 50%;
		all: unset;
		margin: var(--separation2);
		background: hsl(var(--hue), var(--saturation, 50%), var(--lightness, 50%));
		cursor: pointer;
		border-radius: var(--radius);
		overflow: hidden;
		transition: box-shadow 0.3s;
	} colour-palette button::before {
		content: '';
		border-radius: var(--radius);
		background: hsl(var(--hue), var(--saturation, 50%), var(--lightness, 50%));
		box-shadow: .1em .1em .8em hsla(calc(var(--hue) + 30deg), calc(100% - var(--lightness) - 10%), calc(var(--lightness) - 40%), .4) inset;
		width: 3em;
		height: 3em;
		display: block;
		transition: box-shadow 0.3s;
	}

	colour-palette  button:hover {
		box-shadow: .4em .4em .6em #0004;
	}
	colour-palette  button:hover::before {
		box-shadow: none;
	}
	body.dark colour-palette  button:hover {
		box-shadow: .0em .0em .6em hsla(var(--hue), calc(var(--saturation) + 30%), 80%, 60%);
	}

	/* === Popup notification shenanigans === */

	div.notification {
		top: 0em;
		border: 1px solid currentcolor;
		background: hsla(0deg, 0%, 100%, .8);
		font-size: 1em;
		opacity: 0;
		position: fixed;
		padding: .4em; 1em;
		font-weight: bold;
		text-align: center;
	}

	/* === Info Boxes === */

	.box {
		--radius: .3em;
		width: calc((3rem + .6rem * 2) * 9);
		font-style: italic;
		border-radius: var(--radius);
		background: hsla(200deg, 5%, 92%, 1);
		box-shadow: .0em .1em .2em inset hsl(220deg, 8%, 80%);
		padding: 1em 2em;

		position: relative;
		margin: 2em 0em;
	}

	body.dark .box {
		background: hsla(200deg, 5%, 6%, 1);
		box-shadow: .0em .1em .2em inset #0006;
	}

	.hint, .info { --color: hsla(calc( 280deg -  calc(360deg / 6)), 50%, 50%, 1) }

	.box::after {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: .4em;
		background-color: var(--color, transparent);
		border-radius: var(--radius) 0 0 var(--radius);
		content: '';
	}

	.box.hint::before {
		content: "Hint: ";
		display: inline-block;
		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 === */

	[center] { text-align: center; }
</style>

<script type="module">
	const showMessage = function(message, color, x, y) {
		let box = document.createElement('div');
		box.innerHTML = message;
		box.classList.add('notification');

		if (x) box.style.left = x+"px";
		if (y) box.style.top = y+"px";

		document.querySelector("body").appendChild(box);

		box.animate([
			{ offset:  0, opacity: 1,  transform: "translate(-50%, -10%)"},
			{ offset: .3, opacity: 1 },
			{ offset:  1, opacity: 0,  transform: "translate(-50%, -200%)"},
		], {
			duration: 1e3
		}).finished.then(() => box.remove())

		box.style.setProperty('color', color);
	}

	const register = (type, name, initial=undefined) => CSS.registerProperty({
		name: `--${name}`,
		syntax: `<${type}>`,
		inherits: true,
		initialValue: initial,
	})

	register("angle", "hue", "0deg")
	register("percentage", "saturation", "100%")
	register("percentage", "lightness", "50%")

	const backgroundColourButton = document.getElementById("background-color")

	backgroundColourButton.addEventListener("input", event => {
		const rgb = backgroundColourButton.value
		document.body.style.background = rgb
		const channels = rgb
			.match(/[0-9a-f][0-9a-f]/g)
			.map(hex => parseInt(hex, 16))
			.map(num => num / 255)
		const luminosity = channels.reduce((a,b)=>a+b) / 3
		if (luminosity < 0.4) {
			document.body.classList.add("dark")
		} else {
			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, index)  => `${match[0]} ${match[1]} ${match[2]} ${this.name}-${index+1}`)
		}

		connectedCallback() {
			this.innerHTML = `
				<button style="--lightness: 05%"></button>
				<button style="--lightness: 15%"></button>
				<button style="--lightness: 30%"></button>
				<button style="--lightness: 40%"></button>
				<button style="--lightness: 50%"></button>
				<button style="--lightness: 60%"></button>
				<button style="--lightness: 70%"></button>
				<button style="--lightness: 80%"></button>
				<button style="--lightness: 95%"></button>
			`
			this.querySelectorAll('button').forEach(button => {
				button.addEventListener('click', event => {
					const prop = name => getComputedStyle(button)
						.getPropertyValue(name)
						.replace(/^ *| *$/g, "")
					const colour = `hsl(${prop("--hue")}, ${prop("--saturation")}, ${prop("--lightness")})`
					navigator.clipboard.writeText(colour).then(() => {
						const box = button.getBoundingClientRect()
						showMessage(`Copied to Clipboard:<br>${colour}`, colour, box.x+box.width/2, box.y+box.height/2);
					});
				});
			});
		}
		get name() {
			return this.getAttribute("name") || "Unnamed"
		}
	})

	
	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: ${colours.length}\n#\n${colours.map(c => c.join("\n")).join("\n#\n")}`
		const link = document.createElement("a")
		link.href = `data:text/plain;base64,${btoa(template)}`
		link.download = "palette.gpl"
		link.click()
	})
</script>