diff --git a/src/color-scale/README.md b/src/color-scale/README.md
index b4e746c3..0da93281 100644
--- a/src/color-scale/README.md
+++ b/src/color-scale/README.md
@@ -67,6 +67,98 @@ You can also create compact color scales, by simply setting `--details-style: co
 
 Issue: How to make them focusable??
 
+### The `editable` attribute
+
+The `editable` attribute allows you to make the color scale editable: adding new colors and editing, reordering, or removing existing ones.
+
+Use `editable` as a boolean attribute to make the color scale editable:
+
+```html
+<color-scale editable space="oklch" colors="
+	Gray 300: #d1d5db,
+	Gray 400: #9ca3af,
+	Gray 500: #6b7280
+"></color-scale>
+```
+
+You can specify whether the color names, color values, or both should be editable.
+
+Editing colors:
+
+```html
+<color-scale editable="color" space="oklch" colors="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd, Blue: #7bd3ea"></color-scale>
+```
+
+Editing color names:
+
+```html
+<color-scale editable="name" space="oklch" colors="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd, Blue: #7bd3ea"></color-scale>
+```
+
+Or both:
+
+```html
+<color-scale editable="name color" space="oklch" colors="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd, Blue: #7bd3ea"></color-scale>
+```
+
+Add `list` to enable all list operations (add, delete, reorder) in one go:
+
+```html
+<color-scale editable="name color list" space="oklch" colors="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd, Blue: #7bd3ea"></color-scale>
+```
+
+For more granular control, specify operations to be enabled:
+
+```html
+<color-scale editable="add reorder" space="oklch" colors="#c5f6fa, #99e9f2, #3bc9db"></color-scale>
+```
+
+Keep in mind that interpolated colors are generated automatically, are not editable, and cannot be reordered or deleted:
+
+```html
+<color-scale editable="color reorder delete" colors="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd" steps="1" space="oklch"></color-scale>
+```
+
+The `editable` attribute is reactive and can be set programmatically:
+
+```html
+<label>
+	<input type="checkbox" onchange="this.parentElement.nextElementSibling.editable = this.checked">Editable
+</label>
+<color-scale space="oklch" colors="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd"></color-scale>
+```
+
+You can also add colors programmatically with the `addColor()` method, providing the color to add and, optionally, its name:
+
+```html
+<button onclick="this.nextElementSibling.addColor('#7bd3ea', 'Blue')">Add blue color</button>
+<color-scale space="oklch" colors="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd"></color-scale>
+```
+
+Or don't provide any of them. In that case, the added swatch will get the color of the last one:
+
+```html
+<button onclick="this.nextElementSibling.addColor()">Add default color</button>
+<color-scale space="oklch" colors="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd"></color-scale>
+```
+
+Don't want added swatches to get the color of the last one? No problem. You can change that, too.
+Set the `defaultColor` property of the color scale to the desired color. If the value of the property is a color object,
+you can give the color a name by adding the `name` property to it:
+
+```html
+<button onclick="this.nextElementSibling.addColor()">Add my color</button>
+<color-scale id="custom_color" space="oklch" colors="Peach: #f6d6d6, Yellow: #f6f7c4, Mint: #a1eebd"></color-scale>
+
+<script type="module">
+	import Color from "https://colorjs.io/dist/color.js";
+
+	let color = new Color("#f06");
+	color.name = "My awesome color";
+	custom_color.defaultColor = color;
+</script>
+```
+
 <!--
 If you want to insert interpolated colors only in specific places, you can use empty values:
 
diff --git a/src/color-scale/color-scale.css b/src/color-scale/color-scale.css
index 29b7198a..75268cb6 100644
--- a/src/color-scale/color-scale.css
+++ b/src/color-scale/color-scale.css
@@ -1,26 +1,94 @@
-:host {
+[part="wrapper"] {
+	display: grid;
 	gap: .3em;
+	grid-auto-flow: row;
+	grid-template-rows: auto auto;
+	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
 }
 
 #swatches {
-	display: flex;
-	gap: inherit;
+	display: contents;
+}
+
+[part~="button"] {
+	/* Common styles */
+	all: unset;
+
+	display: grid;
+	place-items: center;
+
+	color: var(--_foreground-color, canvastext);
+	background-color: var(--_background-color, canvas);
+
+	border: 3px solid color-mix(in oklab, oklab(50% 0 0) 20%, oklab(none none none / 0%));
+	border-radius: 50%;
+
+	cursor: pointer;
+
+	&:is(:hover, :focus) {
+		color: var(--_background-color, canvas);
+		background-color: var(--_foreground-color, canvastext);
+	}
 }
 
 color-swatch {
+	position: relative;
 	margin: 0;
 	flex: 1;
+
+	&:not(:hover, :focus-within) {
+		[part="delete button"] {
+			opacity: 0;
+			transition-duration: 0ms;
+		}
+	}
+
+	&::part(color) {
+		flex-direction: column;
+	}
+
+	&::part(label) {
+		min-inline-size: initial;
+
+		word-break: break-all;
+		overscroll-behavior: contain;
+	}
+
+	input {
+		min-inline-size: initial;
+	}
+
+	[part="delete button"] {
+		--_foreground-color: red;
+
+		position: absolute;
+		inset-block-start: .3em;
+		inset-inline-end: .3em;
+
+		inline-size: 1.2em;
+		padding: .2em;
+
+		box-shadow: 0 .05em 1em -.7em black;
+
+		transition: opacity .2s;
+	}
+}
+
+[part="add button"] {
+	--_foreground-color: deeppink;
+
+	padding: .18em;
+
+	border-style: dashed;
+	border-radius: .2rem;
+
+	font: inherit;
+	font-size: 200%;
+	font-weight: bold;
 }
 
 @supports (grid-template-columns: subgrid) {
 	/* Avoid uneven swatch heights */
-	#swatches {
-		display: grid;
-		grid-auto-flow: row;
-		grid-template-rows: auto auto;
-		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-	}
-
 	color-swatch {
 		width: 100%;
 		grid-row: 1 / span 2;
@@ -37,4 +105,4 @@ color-swatch {
 			grid-row: 1;
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/src/color-scale/color-scale.js b/src/color-scale/color-scale.js
index e874d394..0e7e9f5e 100644
--- a/src/color-scale/color-scale.js
+++ b/src/color-scale/color-scale.js
@@ -7,7 +7,10 @@ const Self = class ColorScale extends ColorElement {
 	static dependencies = new Set(["color-swatch"]);
 	static shadowStyle = true;
 	static shadowTemplate = `
-		<div id=swatches></div>
+		<div part="wrapper">
+			<div id=swatches></div>
+			<slot name="add-button"></slot>
+		</div>
 		<slot></slot>`;
 
 	constructor () {
@@ -17,31 +20,255 @@ const Self = class ColorScale extends ColorElement {
 			slot: this.shadowRoot.querySelector("slot"),
 			swatches: this.shadowRoot.getElementById("swatches"),
 		};
+
+		this._slots = {
+			add_button: this.shadowRoot.querySelector("slot[name=add-button]"),
+		};
 	}
 
 	connectedCallback () {
 		super.connectedCallback?.();
+		this._el.swatches.addEventListener("labelchange", this, {capture: true});
 		this._el.swatches.addEventListener("colorchange", this, {capture: true});
+		this._el.swatches.addEventListener("click", this, {capture: true});
+		this._slots.add_button.addEventListener("click", this);
 	}
 
 	disconnectedCallback () {
 		this.#swatches = [];
+		this._el.swatches.removeEventListener("labelchange", this, {capture: true});
 		this._el.swatches.removeEventListener("colorchange", this, {capture: true});
+		this._el.swatches.removeEventListener("click", this, {capture: true});
+		this._slots.add_button.removeEventListener("click", this);
 	}
 
 	handleEvent (event) {
+		let source = event.target;
+
+		if (event.type === "click" && source === this._el.add_button || this._slots.add_button.assignedElements().includes(source)) {
+			this.addColor();
+			return;
+		}
+
+		if (event.type === "colorchange" && source.matches("color-swatch:not(.intermediate, .ignore-updates)")) {
+			this.updateColor(source);
+		}
+		else if (event.type === "labelchange" && source.matches("color-swatch:not(.intermediate, .ignore-updates)")) {
+			this.updateColorName(source);
+		}
+		else if (event.type === "click" && source.closest(`button[part="delete button"]`)) {
+			this.deleteColor(source.closest("color-swatch"));
+		}
+
 		this.dispatchEvent(new event.constructor(event.type, {...event}));
 	}
 
 	propChangedCallback ({name, prop, detail: change}) {
-		if (name === "computedColors") {
+		if (name === "computedColors" && this !== document.activeElement) {
 			// Re-render swatches
+			// Only if nothing is being edited, otherwise the input would be lost
+			// or, e.g., "red" would be converted to "rgb(100%, 0%, 0%)" right after the typing is done
+			this.render();
+		}
+
+		if (name === "editable") {
+			if (this.editable?.add) {
+				if (!this._el.add_button) {
+					this._el.add_button = Object.assign(document.createElement("button"), {part: "add button", title: "Add color", textContent: "+"});
+					this._slots.add_button.append(this._el.add_button);
+				}
+			}
+			else {
+				this._el.add_button?.remove();
+				this._el.add_button = null;
+			}
+
 			this.render();
 		}
 	}
 
 	#swatches = [];
 
+	#validIndex (index) {
+		if (!this._el.swatches.children.length) {
+			console.warn("There are no colors to work with.");
+			return false;
+		}
+
+		if (index < 0 || index >= this._el.swatches.children.length) {
+			console.warn(`No color with index "${ index }". The index should be from 0 up to but not including ${ this._el.swatches.children.length }.`);
+			return false;
+		}
+
+		return true;
+	}
+
+	addColor (color, name) {
+		color ??= this.defaultColor;
+		name ??= color?.name || "New color";
+
+		if (this.colors[name]) {
+			// Name already exists
+			// Append a number to the name
+			let i = 1;
+			while (this.colors[`${ name } ${ i }`]) {
+				i++;
+			}
+			name = `${ name } ${ i }`;
+		}
+
+		this.colors = {...this.colors, [name]: color};
+		if (this === document.activeElement) {
+			this.render();
+		}
+
+		if (this.editable?.color) {
+			// Focus the new color input and select its content
+			let swatch = this._el.swatches.lastElementChild;
+			let input = swatch.querySelector("input.color.editable");
+			input?.focus();
+			input?.select();
+		}
+	}
+
+	updateColor (swatch, color = swatch?.color) {
+		if (swatch === undefined || swatch === null) {
+			return;
+		}
+
+		if (typeof swatch === "number") {
+			// The index of a swatch is passed
+			if (!this.#validIndex(swatch)) {
+				return;
+			}
+
+			swatch = this._el.swatches.children[swatch];
+
+			if (!color) {
+				console.warn("You should provide a new color for the color swatch.");
+				return;
+			}
+			else if (swatch.color.equals(color)) {
+				// Nothing to change
+				return;
+			}
+		}
+
+		if (swatch.matches(".intermediate")) {
+			console.warn("Cannot update intermediate colors. They are calculated automatically and will be overwritten when the color scale is re-rendered the next time.");
+			return;
+		}
+
+		if (this.colors[swatch.label].equals(color)) {
+			// Nothing to update
+			return;
+		}
+
+		this.colors = {...this.colors, [swatch.label]: color};
+
+		if (this.steps) {
+			// Update the UI to reflect the new intermediate colors
+			// If there are no intermediate colors, the UI is already up-to-date
+			if (this === document.activeElement) {
+				this.render();
+			}
+
+			// Preserve the cursor position — set it to the end of the input
+			let input = swatch.querySelector("input.color.editable");
+			let end = input?.value.length;
+			input?.setSelectionRange(end, end);
+			input?.focus();
+		}
+	}
+
+	updateColorName (swatch, newName = swatch?.label) {
+		if (swatch === undefined || swatch === null) {
+			return;
+		}
+
+		if (typeof swatch === "number") {
+			// The index of a swatch is passed
+			if (!this.#validIndex(swatch)) {
+				return;
+			}
+
+			swatch = this._el.swatches.children[swatch];
+
+			if (newName === undefined) {
+				console.warn("You should provide a new name for the color.");
+				return;
+			}
+			else if (swatch.label === newName) {
+				// Nothing to change
+				return;
+			}
+		}
+
+		if (swatch.matches(".intermediate")) {
+			console.warn("Cannot update names of intermediate colors. They are calculated automatically and will be overwritten when the color scale is re-rendered the next time.");
+			return;
+		}
+
+		// In color scales, colors must have names: either the provided one or the default.
+		// If they are not supposed to be shown, they can be hidden with CSS.
+		newName ||= swatch.color.toString();
+
+		if (this.colors[newName]) {
+			// Name already exists
+			// Append a number to the name
+			// Why? Objects cannot have duplicate keys
+			let i = 1;
+			while (this.colors[`${ newName } ${ i }`]) {
+				i++;
+			}
+			newName = `${ newName } ${ i }`;
+		}
+
+		if (swatch.label !== newName) {
+			// This will trigger the labelchange event again, and the colors will be updated on the next tick
+			swatch.label = newName;
+		}
+		else {
+			// Update the name of the existing color preserving the colors order
+			this.colors = Object.fromEntries([...this._el.swatches.children].map(swatch => [swatch.label, swatch.color]));
+		}
+	}
+
+	deleteColor (swatch) {
+		if (swatch === undefined || swatch === null) {
+			return;
+		}
+
+		if (typeof swatch === "number") {
+			// The index of a swatch is passed
+			if (!this.#validIndex(swatch)) {
+				return;
+			}
+
+			swatch = this._el.swatches.children[swatch];
+		}
+
+		if (swatch.matches(".intermediate")) {
+			console.warn("Cannot delete intermediate colors. They are calculated automatically and will be re-added when the color scale is re-rendered the next time.");
+			return;
+		}
+
+		let colorName = swatch.label;
+
+		if (!this.steps) {
+			swatch.remove();
+		}
+
+		let colors = {...this.colors};
+		delete colors[colorName];
+		this.colors = colors;
+
+		if (this === document.activeElement) {
+			// If we are in the edit mode, we need to force re-render the swatches
+			this.render();
+		}
+	}
+
 	render () {
 		let colors = this.computedColors;
 
@@ -53,17 +280,57 @@ const Self = class ColorScale extends ColorElement {
 
 		let i = 0;
 		let newSwatches = [];
-		for (let {name, color} of colors) {
+		for (let {name, color, intermediate} of colors) {
 			let swatch = this.#swatches[i] = this._el.swatches.children[i];
 
 			if (!swatch) {
 				this.#swatches[i] = swatch = document.createElement("color-swatch");
 				swatch.setAttribute("size", "large");
 				swatch.setAttribute("part", "color-swatch");
-				swatch.setAttribute("exportparts", "swatch, info, gamut");
+				swatch.setAttribute("exportparts", "swatch, info, gamut, label");
 				newSwatches.push(swatch);
 			}
 
+			// We should ignore all labelchange and colorchange events until the color scale is fully rendered
+			swatch.classList.add("ignore-updates");
+
+			swatch.classList[intermediate ? "add" : "remove"]("intermediate");
+
+			if (!intermediate) {
+				// Make the swatch editable, if needed
+				let editable;
+				if (this.editable?.name) {
+					(editable ??= {}).label = true;
+				}
+				if (this.editable?.color) {
+					(editable ??= {}).color = true;
+				}
+
+				if (editable) {
+					swatch.editable = editable;
+				}
+				else {
+					swatch.editable = false;
+				}
+
+				let deleteButton = swatch.querySelector(`[part="delete button"]`);
+				if (this.editable?.delete) {
+					if (!deleteButton) {
+						// The icon is from https://iconify.design/
+						swatch.insertAdjacentHTML("beforeend", `
+							<button part="delete button" title="Delete color">
+								<svg viewBox="0 0 24 24">
+									<path fill="currentColor" fill-rule="evenodd" d="m18.412 6.5l-.801 13.617A2 2 0 0 1 15.614 22H8.386a2 2 0 0 1-1.997-1.883L5.59 6.5H3.5v-1A.5.5 0 0 1 4 5h16a.5.5 0 0 1 .5.5v1zM10 2.5h4a.5.5 0 0 1 .5.5v1h-5V3a.5.5 0 0 1 .5-.5M9 9l.5 9H11l-.4-9zm4.5 0l-.5 9h1.5l.5-9z" />
+								</svg>
+							</button>
+						`);
+					}
+				}
+				else {
+					deleteButton?.remove();
+				}
+			}
+
 			swatch.color = color;
 			swatch.label = name;
 			if (this.info) {
@@ -79,6 +346,9 @@ const Self = class ColorScale extends ColorElement {
 			// Remove but keep them around in this.#swatches
 			[...this._el.swatches.children].slice(colorCount).forEach(child => child.remove());
 		}
+
+		// The scale is fully rendered, so we no longer need to ignore labelchange and colorchange events from the swatches
+		[...this._el.swatches.children].forEach(swatch => swatch.classList.remove("ignore-updates"));
 	}
 
 	static props = {
@@ -131,7 +401,7 @@ const Self = class ColorScale extends ColorElement {
 
 						steps.shift();
 						steps.pop();
-						steps = steps.map(color => ({name: color + "", color}));
+						steps = steps.map(color => ({name: color + "", color, intermediate: true}));
 
 						tessellated.push(start, ...steps);
 
@@ -149,6 +419,56 @@ const Self = class ColorScale extends ColorElement {
 			},
 			additionalDependencies: ["info"],
 		},
+		editable: {
+			parse (value) {
+				if (value === undefined || value === null || value === false || value === "false") {
+					return;
+				}
+
+				if (value === "" || value === "editable" || value === true || value === "true") {
+					// Boolean attribute
+					return {
+						name: true,
+						color: true,
+						list: true,
+					};
+				}
+
+				if (typeof value === "string") {
+					// Convert to object
+					let entries = value.split(/\s*[,\s]\s*/).map(key => [key.trim(), true]);
+					return Object.fromEntries(entries);
+				}
+
+				if (typeof value === "object") {
+					return value;
+				}
+
+				console.warn(`The specified value "${ value }" cannot be used as a value of the "editable" property.`);
+				return;
+			},
+			convert (value) {
+				if (value?.list) {
+					// Enable the list operations: add, delete, reorder, etc.
+					delete value.list;
+					return {...value, add: true, delete: true, reorder: true};
+				}
+
+				return value;
+			},
+			reflect: {
+				from: true,
+			},
+		},
+		defaultColor: {
+			get type () {
+				return Self.Color;
+			},
+			default () {
+				return this.computedColors.at(-1)?.color ?? new Self.Color("oklab", [0.5, 0, 0]);
+			},
+			reflect: false,
+		},
 		info: {},
 	};
 
diff --git a/src/color-swatch/README.md b/src/color-swatch/README.md
index d95c4182..aa55767c 100644
--- a/src/color-swatch/README.md
+++ b/src/color-swatch/README.md
@@ -213,6 +213,24 @@ The `info` attribute plays quite nicely with the `--details-style: compact` styl
 <color-swatch size="large" info="oklch.l, oklch.c, oklch.h" style="--details-style: compact">oklch(70% 0.25 138)</color-swatch>
 ```
 
+### The `editable` attribute
+
+Make static swatches editable by adding the `editable` boolean attribute:
+
+```html
+<color-swatch editable label="Turquoise" value="oklch(65% 0.15 210)" size="large"></color-swatch>
+```
+
+You can also specify whether the color itself or its label should be editable:
+
+```html
+<color-swatch editable="color" label="Turquoise" value="oklch(65% 0.15 210)" size="large"></color-swatch>
+```
+
+```html
+<color-swatch editable="label" label="Turquoise" value="oklch(65% 0.15 210)" size="large"></color-swatch>
+```
+
 ### With slot content
 
 Before and after:
@@ -320,6 +338,7 @@ If you don’t, the `<html>` element will be used.
 | `scope` | `scope` | `string` | `:root` | CSS selector to use as the scope for the specified CSS property. |
 | `gamuts` | `gamuts` | `string` | `srgb, p3, rec2020: P3+, prophoto: PP` | Comma-separated list of gamuts to be used by the gamut indicator. |
 | `open` | `open` | | `null` | Force the details popup open or closed. |
+| `editable` | `editable` | `boolean` &#124; `object`  | `undefined` | Force the static swatch (or its parts, e.g., label) to be editable. |
 
 ### Getters
 
@@ -356,4 +375,5 @@ These properties are read-only.
 |------|-------------|
 | `valuechange` | Fired when the value changes for any reason, and once during initialization. |
 | `colorchange` | Fired when the color changes for any reason, and once during initialization. |
-| `gamutchange` | Fired when the gamut changes for any reason, and once during initialization. |
\ No newline at end of file
+| `gamutchange` | Fired when the gamut changes for any reason, and once during initialization. |
+| `labelchange` | Fired when the label changes for any reason, and once during initialization. |
\ No newline at end of file
diff --git a/src/color-swatch/color-swatch.css b/src/color-swatch/color-swatch.css
index 6ae2ddb5..c7b32373 100644
--- a/src/color-swatch/color-swatch.css
+++ b/src/color-swatch/color-swatch.css
@@ -176,6 +176,40 @@ slot {
 	gap: .2em;
 }
 
+[part=label] {
+	display: grid;
+	grid-template-areas: "label";
+
+	& > * {
+		box-sizing: border-box;
+		inline-size: 100%;
+		font: inherit;
+
+		grid-area: label;
+
+		&:is(input:not(:focus)) {
+			border-color: transparent;
+		}
+	}
+
+	&:has(input:not(:focus))::after {
+		/* Icon from https://iconify.design/ */
+		content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><title>Click to edit</title><path fill="canvastext" d="m53.922 16.202l1.404-1.423c.674-.692.674-1.61.019-2.246l-.45-.449c-.598-.599-1.534-.543-2.17.094l-1.404 1.385Zm-21.505 19.39l3.818-1.703l16.303-16.283l-2.62-2.602l-16.285 16.283l-1.796 3.688c-.15.318.225.767.58.617M5.484 47.908h36.834c3.538 0 5.465-1.853 5.465-5.39V27.02l-3.013 3.013v12.634c0 1.554-.88 2.433-2.433 2.433H5.447c-1.554 0-2.434-.88-2.434-2.433v-15.74c0-1.554.88-2.434 2.434-2.434h30.302l2.826-2.807H5.484C1.947 21.686 0 23.539 0 27.076v15.441c0 3.538 1.947 5.39 5.484 5.39m4.735-10.706c1.33 0 2.415-1.086 2.415-2.396a2.404 2.404 0 0 0-2.415-2.396a2.39 2.39 0 0 0-2.395 2.396a2.4 2.4 0 0 0 2.395 2.396m7.524 0c1.33 0 2.415-1.086 2.415-2.396a2.404 2.404 0 0 0-2.415-2.396a2.393 2.393 0 0 0-2.414 2.396a2.404 2.404 0 0 0 2.414 2.396m7.506 0a2.413 2.413 0 0 0 2.395-2.396a2.4 2.4 0 0 0-2.395-2.396a2.404 2.404 0 0 0-2.415 2.396c0 1.31 1.086 2.396 2.415 2.396"/></svg>');
+		grid-area: label;
+		align-self: center;
+		justify-self: end;
+
+		--_icon-size: 1.3em;
+		inline-size: var(--_icon-size);
+		block-size: var(--_icon-size);
+		padding: 0 .2em .3em 1em;
+		background: linear-gradient(to right, transparent, canvas .8em);
+
+		/* Don't block interactions with the underlying element */
+		pointer-events: none;
+	}
+}
+
 slot:not([name]) {
 	&::slotted(input) {
 		display: flex;
diff --git a/src/color-swatch/color-swatch.js b/src/color-swatch/color-swatch.js
index 10694d6d..8988cfe2 100644
--- a/src/color-swatch/color-swatch.js
+++ b/src/color-swatch/color-swatch.js
@@ -23,6 +23,8 @@ const Self = class ColorSwatch extends ColorElement {
 			<slot name="after"></slot>
 		</div>`;
 
+	#initiallyStatic;
+
 	constructor () {
 		super();
 
@@ -37,6 +39,7 @@ const Self = class ColorSwatch extends ColorElement {
 		};
 
 		this.#updateStatic();
+		this.#initiallyStatic = this.static;
 		this._slots.default.addEventListener("slotchange", evt => this.#updateStatic());
 	}
 
@@ -108,7 +111,38 @@ const Self = class ColorSwatch extends ColorElement {
 			}
 		}
 
-		if (name === "label") {
+		if (name === "editable") {
+			if (this.editable?.label) {
+				let input = Object.assign(document.createElement("input"), {value: this.label});
+				this._el.label.innerHTML = "";
+				this._el.label.append(input);
+				input.addEventListener("input", evt => {
+					this.label = evt.target.value;
+				});
+			}
+
+			if (this.editable?.color) {
+				input ??= this.querySelector("input.color.editable");
+				if (!input) {
+					input = document.createElement("input");
+					input.classList.add("color", "editable");
+					input.value = this.value;
+
+					// TODO: If the value comes from the swatch content, move it to <input>.
+					// But how can it be restored afterward (when <input> is removed) without breaking (slotted) swatch content?
+					// if (this.value === this.swatchTextContent) {
+					// 	[...this.childNodes].filter(n => !n.slot).forEach(n => n.remove());
+					// }
+
+					this.append(input);
+				}
+			}
+			else if (this.#initiallyStatic) {
+				input?.remove();
+			}
+		}
+
+		if ((name === "label" || name === "editable") && !this.editable?.label) {
 			if (this.label.length && this.label !== this.swatchTextContent) {
 				this._el.label.textContent = this.label;
 			}
@@ -183,7 +217,7 @@ const Self = class ColorSwatch extends ColorElement {
 				return this.swatchTextContent;
 			},
 			convert (value) {
-				return value.trim();
+				return value?.trim();
 			},
 		},
 		color: {
@@ -235,6 +269,38 @@ const Self = class ColorSwatch extends ColorElement {
 				return ret;
 			},
 		},
+		editable: {
+			parse (value) {
+				if (value === undefined || value === null || value === false || value === "false") {
+					return;
+				}
+
+				if (value === "" || value === "editable" || value === true || value === "true") {
+					// Boolean attribute
+					return {
+						label: true,
+						color: true,
+					};
+				}
+
+				if (typeof value === "string") {
+					// Convert to object
+					let entries = value.split(/\s*[,\s]\s*/).map(key => [key.trim(), true]);
+					return Object.fromEntries(entries);
+				}
+
+				if (typeof value === "object") {
+					return value;
+				}
+
+				console.warn(`The specified value "${ value }" cannot be used as a value of the "editable" property.`);
+				return;
+			},
+			dependencies: ["label", "color"],
+			reflect: {
+				from: true,
+			},
+		},
 	};
 
 	static events = {
@@ -244,6 +310,9 @@ const Self = class ColorSwatch extends ColorElement {
 		valuechange: {
 			propchange: "value",
 		},
+		labelchange: {
+			propchange: "label",
+		},
 	};
 };