diff --git a/src/js/utilsDOM.js b/src/js/utilsDOM.js
index a88f40879889c5bf3109b92e7a0fd2e79a8ddfa4..67f70fb1ec862bef704507e3312cc0340b297940 100644
--- a/src/js/utilsDOM.js
+++ b/src/js/utilsDOM.js
@@ -230,6 +230,23 @@ App.UI.DOM.makeTextBox = function(defaultValue, onEnter, numberOnly = false) {
 	return input;
 };
 
+/**
+ * @param {string|number} defaultValue
+ * @param {function(string):void} onEnter
+ * @returns {HTMLInputElement}
+ */
+App.UI.DOM.colorInput = function(defaultValue, onEnter) {
+	const input = document.createElement("input");
+	input.type = "color";
+	input.value = defaultValue;
+
+	let updateValue = e => { onEnter(e.target.value); };
+
+	input.addEventListener('change', updateValue);
+
+	return input;
+};
+
 /**
  * @param {string} text
  * @returns {HTMLElement}
diff --git a/src/js/wardrobeUse.js b/src/js/wardrobeUse.js
index 06b618bba34dd7a963a5c18a4ad9917480d17496..6989e58dffbda9f85e9dd5a9bf2bd48a55cfca62 100644
--- a/src/js/wardrobeUse.js
+++ b/src/js/wardrobeUse.js
@@ -76,6 +76,34 @@ App.UI.Wardrobe.clothes = function(slave) {
 	links.appendChild(App.UI.SlaveInteract.generateRows(harshOptionsArray, slave, "clothes", true));
 	el.appendChild(links);
 
+	// Color options
+	links = document.createElement('div');
+	links.className = "choices";
+	links.append(`Color: `);
+
+	let colorChoice = App.UI.DOM.colorInput(
+		slave.clothingBaseColor,
+		v => {
+			slave.clothingBaseColor = v,
+			App.UI.Wardrobe.refreshAll(slave);
+		}
+	);
+	links.appendChild(colorChoice);
+
+	if (slave.clothingBaseColor) {
+		links.appendChild(
+			App.UI.DOM.link(
+				` Reset`,
+				() => {
+					delete slave.clothingBaseColor,
+					App.UI.Wardrobe.refreshAll(slave);
+				},
+			)
+		);
+	}
+
+	el.appendChild(links);
+
 	return jQuery('#clothes').empty().append(el);
 };
 
@@ -148,6 +176,39 @@ App.UI.Wardrobe.collar = function(slave) {
 	links.appendChild(App.UI.SlaveInteract.generateRows(harshOptionsArray, slave, "collar", true));
 	el.appendChild(links);
 
+	if (slave.eyewear === "corrective glasses" || slave.eyewear === "glasses" || slave.eyewear === "blurring glasses" || slave.collar === "porcelain mask") {
+		// Color options
+		links = document.createElement('div');
+		links.className = "choices";
+		links.append(`Color: `);
+
+		let colorChoice = App.UI.DOM.colorInput(
+			slave.glassesColor,
+			v => {
+				slave.glassesColor = v,
+				App.UI.Wardrobe.refreshAll(slave);
+			}
+		);
+		links.appendChild(colorChoice);
+
+		if (slave.glassesColor) {
+			links.appendChild(
+				App.UI.DOM.link(
+					` Reset`,
+					() => {
+						delete slave.glassesColor,
+						App.UI.Wardrobe.refreshAll(slave);
+					},
+				)
+			);
+		}
+		let note = document.createElement('span');
+		note.className = "note";
+		note.textContent = ` Only glasses and porcelain masks support a custom color. If both are worn, they will share the same color.`;
+		links.appendChild(note);
+		el.appendChild(links);
+	}
+
 	return jQuery('#collar').empty().append(el);
 };
 
@@ -242,6 +303,35 @@ App.UI.Wardrobe.shoes = function(slave) {
 	links.appendChild(App.UI.SlaveInteract.generateRows(optionsArray, slave, "shoes", true));
 	el.appendChild(links);
 
+	if (V.seeImages == 1 && V.imageChoice == 1 && slave.shoes != "none") {
+		// Color options
+		links = document.createElement('div');
+		links.className = "choices";
+		links.append(`Color: `);
+
+		let colorChoice = App.UI.DOM.colorInput(
+			slave.shoeColor,
+			v => {
+				slave.shoeColor = v,
+				App.UI.Wardrobe.refreshAll(slave);
+			}
+		);
+		links.appendChild(colorChoice);
+
+		if (slave.shoeColor) {
+			links.appendChild(
+				App.UI.DOM.link(
+					` Reset`,
+					() => {
+						delete slave.shoeColor,
+						App.UI.Wardrobe.refreshAll(slave);
+					},
+				)
+			);
+		}
+		el.appendChild(links);
+	}
+
 	return jQuery('#shoes').empty().append(el);
 };