TGUI Color Picker (#26326)

* Init

* Implements `tgui_input_color`

* Implements most color wheel conversions to TGUI

* Iteration two, went over titles and made sure most color inputs are functional.

* Implements preferences for large buttons, swapped buttons, and disabled TGUI

* Iteration three... the weird ones. (as null|color)

* Removes `as color|null` and `as null|color`

* Merge conflict resolution, again.

* Color input bundle and panel bundle

* CSLint being picky.

* Picky `while ()` instead of `while()`

* Apply suggestions from code review

Co-authored-by: Aylong <69762909+AyIong@users.noreply.github.com>
Signed-off-by: Spaghetti-bit <yumyumkillkill@gmail.com>

* WIP

* de-bri'ish colour into color

Co-authored-by: Burzah <116982774+Burzah@users.noreply.github.com>
Signed-off-by: Spaghetti-bit <yumyumkillkill@gmail.com>

* Aylong review applied.
- Removed an extra space in machine.dm
- UI_STATE

+ Runechat color now uses TGUI_INPUT_COLOR

* Apply suggestions from code review

Co-authored-by: Contrabang <91113370+Contrabang@users.noreply.github.com>
Signed-off-by: Spaghetti-bit <yumyumkillkill@gmail.com>

* Removes an unintentional space to `paradise.scss`

* Update code/modules/tgui/tgui_input/color_input.dm

Co-authored-by: Contrabang <91113370+Contrabang@users.noreply.github.com>
Signed-off-by: Spaghetti-bit <yumyumkillkill@gmail.com>

* Adds "is_color" regex from TG

* Fixes a few conflicting files

* TGUI Merge conflict moment v3

* V4?

* V5....

* God please don't explode. Builds TGUI like the linter wants.

* Update code/modules/tgui/tgui_input/color_input.dm

Co-authored-by: Contrabang <91113370+Contrabang@users.noreply.github.com>
Signed-off-by: Spaghetti-bit <yumyumkillkill@gmail.com>

* Rebuilds TGUI, again <3

* Lint be damned

---------

Signed-off-by: Spaghetti-bit <yumyumkillkill@gmail.com>
Co-authored-by: Aylong <69762909+AyIong@users.noreply.github.com>
Co-authored-by: Burzah <116982774+Burzah@users.noreply.github.com>
Co-authored-by: Contrabang <91113370+Contrabang@users.noreply.github.com>

code/modules/admin/admin_verbs.dm

@@ -1103,8 +1103,8 @@ GLOBAL_LIST_INIT(view_runtimes_verbs, list(
 				return
 			message = strip_html(message, 500)
 
-			var/message_color = input(src, "Input your message color:", "Color Selector") as color|null
-			if(!message_color)
+			var/message_color = tgui_input_color(src, "Input your message color:", "Admin Message - Color Selector")
+			if(isnull(message_color))
 				return
 
 			show_blurb(about_to_be_banned, 15, message, null, "center", "center", message_color, null, null, 1)

code/modules/client/preference/link_processing.dm

@@ -329,17 +329,16 @@
 
 				if("hair")
 					if(!(S.bodyflags & BALD))
-						var/input = "Choose your character's hair colour:"
-						var/new_hair = input(user, input, "Character Preference", active_character.h_colour) as color|null
-						if(new_hair)
+						var/new_hair = tgui_input_color(user, "Choose your character's hair color.", "Character Preference", active_character.h_colour)
+						if(!isnull(new_hair))
 							active_character.h_colour = new_hair
 
 				if("secondary_hair")
 					if(!(S.bodyflags & BALD))
 						var/datum/sprite_accessory/hair_style = GLOB.hair_styles_public_list[active_character.h_style]
 						if(hair_style.secondary_theme && !hair_style.no_sec_colour)
-							var/new_hair = input(user, "Choose your character's secondary hair colour:", "Character Preference", active_character.h_sec_colour) as color|null
-							if(new_hair)
+							var/new_hair = tgui_input_color(user, "Choose your character's secondary hair color.", "Character Preference", active_character.h_sec_colour)
+							if(!isnull(new_hair))
 								active_character.h_sec_colour = new_hair
 
 				if("h_style")
@@ -387,9 +386,10 @@
 						active_character.h_grad_offset_y = clamp(text2num(expl[2]) || 0, -16, 16)
 
 				if("h_grad_colour")
-					var/result = input(user, "Choose your character's hair gradient colour:", "Character Preference", active_character.h_grad_colour) as color|null
-					if(result)
-						active_character.h_grad_colour = result
+					var/result = tgui_input_color(user, "Choose your character's hair gradient color:", "Character Preference", active_character.h_grad_colour)
+					if(isnull(result))
+						return
+					active_character.h_grad_colour = result
 
 				if("h_grad_alpha")
 					var/result = tgui_input_number(user, "Choose your character's hair gradient alpha (0-255):", "Character Preference", active_character.h_grad_alpha, 255)
@@ -398,16 +398,17 @@
 					active_character.h_grad_alpha = clamp(result, 0, 255)
 
 				if("runechat_color")
-					var/result = input(user, "Choose your character's runechat color:", "Character Preference", active_character.runechat_color) as color|null
-					if(result)
-						active_character.runechat_color = result
+					var/result = tgui_input_color(user, "Choose your character's runechat color:", "Character Preference", active_character.runechat_color)
+					if(isnull(result))
+						return
+					active_character.runechat_color = result
 
 				if("headaccessory")
 					if(S.bodyflags & HAS_HEAD_ACCESSORY) //Species with head accessories.
-						var/input = "Choose the colour of your your character's head accessory:"
-						var/new_head_accessory = input(user, input, "Character Preference", active_character.hacc_colour) as color|null
-						if(new_head_accessory)
-							active_character.hacc_colour = new_head_accessory
+						var/new_head_accessory = tgui_input_color(user, "Choose the color of your your character's head accessory.", "Character Preference", active_character.hacc_colour)
+						if(isnull(new_head_accessory))
+							return
+						active_character.hacc_colour = new_head_accessory
 
 				if("ha_style")
 					if(S.bodyflags & HAS_HEAD_ACCESSORY) //Species with head accessories.
@@ -485,10 +486,10 @@
 
 				if("m_head_colour")
 					if(S.bodyflags & HAS_HEAD_MARKINGS) //Species with head markings.
-						var/input = "Choose the colour of your your character's head markings:"
-						var/new_markings = input(user, input, "Character Preference", active_character.m_colours["head"]) as color|null
-						if(new_markings)
-							active_character.m_colours["head"] = new_markings
+						var/new_markings = tgui_input_color(user, "Choose the color of your your character's head markings.", "Character Preference", active_character.m_colours["head"])
+						if(isnull(new_markings))
+							return
+						active_character.m_colours["head"] = new_markings
 
 				if("m_style_body")
 					if(S.bodyflags & HAS_BODY_MARKINGS) //Species with body markings/tattoos.
@@ -508,10 +509,10 @@
 
 				if("m_body_colour")
 					if(S.bodyflags & HAS_BODY_MARKINGS) //Species with body markings/tattoos.
-						var/input = "Choose the colour of your your character's body markings:"
-						var/new_markings = input(user, input, "Character Preference", active_character.m_colours["body"]) as color|null
-						if(new_markings)
-							active_character.m_colours["body"] = new_markings
+						var/new_markings = tgui_input_color(user, "Choose the color of your your character's body markings.", "Character Preference", active_character.m_colours["body"])
+						if(isnull(new_markings))
+							return
+						active_character.m_colours["body"] = new_markings
 
 				if("m_style_tail")
 					if(S.bodyflags & HAS_TAIL_MARKINGS) //Species with tail markings.
@@ -537,10 +538,10 @@
 
 				if("m_tail_colour")
 					if(S.bodyflags & HAS_TAIL_MARKINGS) //Species with tail markings.
-						var/input = "Choose the colour of your your character's tail markings:"
-						var/new_markings = input(user, input, "Character Preference", active_character.m_colours["tail"]) as color|null
-						if(new_markings)
-							active_character.m_colours["tail"] = new_markings
+						var/new_markings = tgui_input_color(user, "Choose the color of your your character's tail markings.", "Character Preference", active_character.m_colours["tail"])
+						if(isnull(new_markings))
+							return
+						active_character.m_colours["tail"] = new_markings
 
 				if("body_accessory")
 					var/list/possible_body_accessories = list()
@@ -565,17 +566,19 @@
 
 				if("facial")
 					if(!(S.bodyflags & SHAVED))
-						var/new_facial = input(user, "Choose your character's facial-hair colour:", "Character Preference", active_character.f_colour) as color|null
-						if(new_facial)
-							active_character.f_colour = new_facial
+						var/new_facial = tgui_input_color(user, "Choose your character's facial-hair color:", "Character Preference", active_character.f_colour)
+						if(isnull(new_facial))
+							return
+						active_character.f_colour = new_facial
 
 				if("secondary_facial")
 					if(!(S.bodyflags & SHAVED))
 						var/datum/sprite_accessory/facial_hair_style = GLOB.facial_hair_styles_list[active_character.f_style]
 						if(facial_hair_style.secondary_theme && !facial_hair_style.no_sec_colour)
-							var/new_facial = input(user, "Choose your character's secondary facial-hair colour:", "Character Preference", active_character.f_sec_colour) as color|null
-							if(new_facial)
-								active_character.f_sec_colour = new_facial
+							var/new_facial = tgui_input_color(user, "Choose your character's secondary facial-hair color:", "Character Preference", active_character.f_sec_colour)
+							if(isnull(new_facial))
+								return
+							active_character.f_sec_colour = new_facial
 
 				if("f_style")
 					var/list/valid_facial_hairstyles = list()
@@ -658,34 +661,37 @@
 						active_character.socks = new_socks
 
 				if("eyes")
-					var/new_eyes = input(user, "Choose your character's eye colour:", "Character Preference", active_character.e_colour) as color|null
-					if(new_eyes)
-						active_character.e_colour = new_eyes
+					var/new_eyes = tgui_input_color(user, "Choose your character's eye color:", "Character Preference", active_character.e_colour)
+					if(isnull(new_eyes))
+						return
+					active_character.e_colour = new_eyes
 
 				if("s_tone")
 					if(S.bodyflags & HAS_SKIN_TONE)
 						var/new_s_tone = input(user, "Choose your character's skin-tone:\n(Light 1 - 220 Dark)", "Character Preference")  as num|null
-						if(!new_s_tone)
+						if(isnull(new_s_tone))
 							return
 						active_character.s_tone = 35 - max(min(round(new_s_tone), 220), 1)
 					else if(S.bodyflags & HAS_ICON_SKIN_TONE)
 						var/const/MAX_LINE_ENTRIES = 4
 						var/prompt = "Choose your character's skin tone: 1-[length(S.icon_skin_tones)]\n(Light to Dark)"
 						var/skin_c = tgui_input_number(user, prompt, "Character Preference", active_character.s_tone, length(S.icon_skin_tones), 1)
-						if(!skin_c)
+						if(isnull(skin_c))
 							return
 						active_character.s_tone = skin_c
 
 				if("skin")
 					if((S.bodyflags & HAS_SKIN_COLOR) || GLOB.body_accessory_by_species[active_character.species] || check_rights(R_ADMIN, 0, user))
-						var/new_skin = input(user, "Choose your character's skin colour: ", "Character Preference", active_character.s_colour) as color|null
-						if(new_skin)
-							active_character.s_colour = new_skin
+						var/new_skin = tgui_input_color(user, "Choose your character's skin color: ", "Character Preference", active_character.s_colour)
+						if(isnull(new_skin))
+							return
+						active_character.s_colour = new_skin
 
 				if("ooccolor")
-					var/new_ooccolor = input(user, "Choose your OOC colour:", "Game Preference", ooccolor) as color|null
-					if(new_ooccolor)
-						ooccolor = new_ooccolor
+					var/new_ooccolor = tgui_input_color(user, "Choose your OOC color:", "Game Preference", ooccolor)
+					if(isnull(new_ooccolor))
+						return
+					ooccolor = new_ooccolor
 
 				if("bag")
 					var/new_backbag = tgui_input_list(user, "Choose your character's style of bag", "Character Preference", GLOB.backbaglist)
@@ -1015,8 +1021,9 @@
 					toggles2 ^= PREFTOGGLE_2_AFKWATCH
 
 				if("UIcolor")
-					var/UI_style_color_new = input(user, "Choose your UI color, dark colors are not recommended!", UI_style_color) as color|null
-					if(!UI_style_color_new) return
+					var/UI_style_color_new = tgui_input_color(user, "Choose your UI color, dark colors are not recommended!", "Game Preference", UI_style_color)
+					if(isnull(UI_style_color_new))
+						return
 					UI_style_color = UI_style_color_new
 
 					if(ishuman(usr)) //mid-round preference changes, for aesthetics
@@ -1151,9 +1158,10 @@
 					screentip_mode = desired_screentip_mode
 
 				if("screentip_color")
-					var/screentip_color_new = input(user, "Choose your screentip color", screentip_color) as color|null
-					if(screentip_color_new)
-						screentip_color = screentip_color_new
+					var/screentip_color_new = tgui_input_color(user, "Choose your screentip color", "Game Preference", screentip_color)
+					if(isnull(screentip_color_new))
+						return
+					screentip_color = screentip_color_new
 
 				if("edit_2fa")
 					// Do this async so we arent holding up a topic() call

code/modules/client/preference/loadout/gear_tweaks.dm

@@ -33,7 +33,7 @@
 /datum/gear_tweak/color/get_metadata(user, metadata)
 	if(valid_colors)
 		return input(user, "Choose an item color.", "Character Preference", metadata) as null|anything in valid_colors
-	return input(user, "Choose an item color.", "Global Preference", metadata) as color|null
+	return tgui_input_color(user, "Choose an item color.", "Global Preference", metadata)
 
 /datum/gear_tweak/color/tweak_item(obj/item/I, metadata)
 	if(valid_colors && !(metadata in valid_colors))

code/modules/client/preference/preferences_toggles.dm

@@ -510,8 +510,8 @@
 	blackbox_message = "Set Own OOC"
 
 /datum/preference_toggle/special_toggle/set_ooc_color/set_toggles(client/user)
-	var/new_ooccolor = input(usr, "Please select your OOC color.", "OOC color", user.prefs.ooccolor) as color|null
-	if(new_ooccolor)
+	var/new_ooccolor = tgui_input_color(usr, "Please select your OOC color.", "OOC Color", user.prefs.ooccolor)
+	if(!isnull(new_ooccolor))
 		user.prefs.ooccolor = new_ooccolor
 		to_chat(usr, "Your OOC color has been set to [new_ooccolor].")
 	else

code/modules/customitems/item_defines.dm

@@ -100,8 +100,8 @@
 
 /obj/item/fluff/tattoo_gun/elliot_cybernetic_tat/attack_self(mob/user as mob)
 	if(!used)
-		var/ink_color = input("Please select an ink color.", "Tattoo Ink Color", rgb(tattoo_r, tattoo_g, tattoo_b)) as color|null
-		if(ink_color && !(user.incapacitated() || used))
+		var/ink_color = tgui_input_color(user, "Please select an ink color.", "Tattoo Ink Color", rgb(tattoo_r, tattoo_g, tattoo_b))
+		if(!isnull(ink_color) && !(user.incapacitated() || used))
 			tattoo_r = color2R(ink_color)
 			tattoo_g = color2G(ink_color)
 			tattoo_b = color2B(ink_color)

code/modules/mob/living/carbon/human/species/machine.dm

@@ -152,11 +152,11 @@
 	if(!head_organ)
 		return
 	if(!robohead.is_monitor) //If they've got a prosthetic head and it isn't a monitor, they've no screen to adjust. Instead, let them change the colour of their optics!
-		var/optic_colour = input(H, "Select optic colour", H.m_colours["head"]) as color|null
+		var/optic_colour = tgui_input_color(H, "Please select an optic color", "Select Optic Color", H.m_colours["head"])
 		if(H.incapacitated(TRUE, TRUE))
-			to_chat(H, "<span class='warning'>You were interrupted while changing the colour of your optics.</span>")
+			to_chat(H, "<span class='warning'>You were interrupted while changing the color of your optics.</span>")
 			return
-		if(optic_colour)
+		if(!isnull(optic_colour))
 			H.change_markings(optic_colour, "head")
 
 	else if(robohead.is_monitor) //Means that the character's head is a monitor (has a screen). Time to customize.
@@ -175,7 +175,7 @@
 		var/new_style = tgui_input_list(H, "Select a monitor display", "Monitor Display", hair)
 		if(!new_style)
 			return
-		var/new_color = input("Please select hair color.", "Monitor Color", head_organ.hair_colour) as null|color
+		var/new_color = tgui_input_color(H, "Please select hair color.", "Monitor Color", head_organ.hair_colour)
 
 		if(H.incapacitated(TRUE, TRUE))
 			to_chat(H, "<span class='warning'>You were interrupted while changing your monitor display.</span>")
@@ -183,7 +183,7 @@
 
 		if(new_style)
 			H.change_hair(new_style, 1)							// The 1 is to enable custom sprites
-		if(new_color)
+		if(!isnull(new_color))
 			H.change_hair_color(new_color)
 
 /datum/species/machine/spec_electrocute_act(mob/living/carbon/human/H, shock_damage, source, siemens_coeff, flags)

code/modules/mod/modules/modules_general.dm

@@ -251,8 +251,8 @@
 /obj/item/mod/module/flashlight/configure_edit(key, value)
 	switch(key)
 		if("light_color")
-			value = input(usr, "Pick new light color", "Flashlight Color") as color|null
-			if(!value)
+			value = tgui_input_color(usr, "Pick new light color", "Flashlight Color", light_color)
+			if(isnull(value))
 				return
 			if(is_color_dark(value, 50))
 				to_chat(mod.wearer, ("<span class='warning'>That is too dark</span>"))

code/modules/projectiles/guns/energy/kinetic_accelerator.dm

@@ -657,4 +657,4 @@
 	desc = "Causes kinetic accelerator bolts to have an adjustable-colored tracer trail and explosion. Use in-hand to change color."
 
 /obj/item/borg/upgrade/modkit/tracer/adjustable/attack_self(mob/user)
-	bolt_color = input(user,"","Choose Color",bolt_color) as color|null
+	bolt_color = tgui_input_color(user, "Please select a tracer color", "PKA Tracer Color", bolt_color)

code/modules/tgui/modules/appearance_changer.dm

@@ -72,8 +72,8 @@
 
 		if("skin_color")
 			if(can_change_skin_color())
-				var/new_skin = input(usr, "Choose your character's skin colour: ", "Skin Color", owner.skin_colour) as color|null
-				if(new_skin && (!..()) && owner.change_skin_color(new_skin))
+				var/new_skin = tgui_input_color(usr, "Choose your character's skin colour: ", "Skin Color", owner.skin_colour)
+				if(!isnull(new_skin) && (!..()) && owner.change_skin_color(new_skin))
 					update_dna()
 
 		if("hair")
@@ -83,32 +83,32 @@
 
 		if("hair_color")
 			if(can_change(APPEARANCE_HAIR_COLOR))
-				var/new_hair = input("Please select hair color.", "Hair Color", head_organ.hair_colour) as color|null
-				if(new_hair && (!..()) && owner.change_hair_color(new_hair))
+				var/new_hair = tgui_input_color(usr, "Please select hair color.", "Hair Color", head_organ.hair_colour)
+				if(!isnull(new_hair) && (!..()) && owner.change_hair_color(new_hair))
 					update_dna()
 
 		if("secondary_hair_color")
 			if(can_change(APPEARANCE_SECONDARY_HAIR_COLOR))
-				var/new_hair = input("Please select secondary hair color.", "Secondary Hair Color", head_organ.sec_hair_colour) as color|null
-				if(new_hair && (!..()) && owner.change_hair_color(new_hair, 1))
+				var/new_hair = tgui_input_color(usr, "Please select secondary hair color.", "Secondary Hair Color", head_organ.sec_hair_colour)
+				if(!isnull(new_hair) && (!..()) && owner.change_hair_color(new_hair, 1))
 					update_dna()
 
 		if("hair_gradient")
 			if(can_change(APPEARANCE_HAIR) && length(valid_hairstyles))
 				var/new_style = tgui_input_list(usr, "Please select gradient style", "Hair Gradient", GLOB.hair_gradients_list)
-				if(new_style)
+				if(!isnull(new_style))
 					owner.change_hair_gradient(style = new_style)
 
 		if("hair_gradient_offset")
 			if(can_change(APPEARANCE_HAIR) && length(valid_hairstyles))
 				var/new_offset = input("Please enter gradient offset as a comma-separated value (x,y). Example:\n0,0 (no offset)\n5,0 (5 pixels to the right)", "Hair Gradient", "[head_organ.h_grad_offset_x],[head_organ.h_grad_offset_y]") as null|text
-				if(new_offset)
+				if(!isnull(new_offset))
 					owner.change_hair_gradient(offset_raw = new_offset)
 
 		if("hair_gradient_colour")
 			if(can_change(APPEARANCE_HAIR) && length(valid_hairstyles))
-				var/new_color = input("Please select gradient color.", "Hair Gradient", head_organ.h_grad_colour) as null|color
-				if(new_color)
+				var/new_color = tgui_input_color(usr, "Please select gradient color.", "Hair Gradient", head_organ.h_grad_colour)
+				if(!isnull(new_color))
 					owner.change_hair_gradient(color = new_color)
 
 		if("hair_gradient_alpha")
@@ -124,26 +124,26 @@
 
 		if("facial_hair_color")
 			if(can_change(APPEARANCE_FACIAL_HAIR_COLOR))
-				var/new_facial = input("Please select facial hair color.", "Facial Hair Color", head_organ.facial_colour) as color|null
-				if(new_facial && (!..()) && owner.change_facial_hair_color(new_facial))
+				var/new_facial = tgui_input_color(usr, "Please select facial hair color.", "Facial Hair Color", head_organ.facial_colour)
+				if(!isnull(new_facial) && (!..()) && owner.change_facial_hair_color(new_facial))
 					update_dna()
 
 		if("secondary_facial_hair_color")
 			if(can_change(APPEARANCE_SECONDARY_FACIAL_HAIR_COLOR))
-				var/new_facial = input("Please select secondary facial hair color.", "Secondary Facial Hair Color", head_organ.sec_facial_colour) as color|null
-				if(new_facial && (!..()) && owner.change_facial_hair_color(new_facial, 1))
+				var/new_facial = tgui_input_color(usr, "Please select secondary facial hair color.", "Secondary Facial Hair Color", head_organ.sec_facial_colour)
+				if(!isnull(new_facial) && (!..()) && owner.change_facial_hair_color(new_facial, 1))
 					update_dna()
 
 		if("eye_color")
 			if(can_change(APPEARANCE_EYE_COLOR))
 				var/obj/item/organ/internal/eyes/eyes_organ = owner.get_int_organ(/obj/item/organ/internal/eyes)
-				var/new_eyes = input("Please select eye color.", "Eye Color", eyes_organ.eye_color) as color|null
-				if(new_eyes && (!..()) && owner.change_eye_color(new_eyes))
+				var/new_eyes = tgui_input_color(usr, "Please select eye color.", "Eye Color", eyes_organ.eye_color)
+				if(!isnull(new_eyes) && (!..()) && owner.change_eye_color(new_eyes))
 					update_dna()
 
 		if("runechat_color")
-			var/new_runechat_color = input("Please select runechat color.", "Runechat Color", owner.dna.chat_color) as color|null
-			if(new_runechat_color && (!..()))
+			var/new_runechat_color = tgui_input_color("Please select runechat color.", "Runechat Color", owner.dna.chat_color)
+			if(!isnull(new_runechat_color) && (!..()))
 				owner.change_runechat_color(new_runechat_color)
 
 		if("head_accessory")
@@ -153,8 +153,8 @@
 
 		if("head_accessory_color")
 			if(can_change_head_accessory())
-				var/new_head_accessory = input("Please select head accessory color.", "Head Accessory Color", head_organ.headacc_colour) as color|null
-				if(new_head_accessory && (!..()) && owner.change_head_accessory_color(new_head_accessory))
+				var/new_head_accessory = tgui_input_color(usr, "Please select head accessory color.", "Head Accessory Color", head_organ.headacc_colour)
+				if(!isnull(new_head_accessory) && (!..()) && owner.change_head_accessory_color(new_head_accessory))
 					update_dna()
 
 		if("head_marking")
@@ -164,7 +164,7 @@
 
 		if("head_marking_color")
 			if(can_change_markings("head"))
-				var/new_markings = input("Please select head marking color.", "Marking Color", owner.m_colours["head"]) as color|null
+				var/new_markings = tgui_input_color(usr, "Please select head marking color.", "Marking Color", owner.m_colours["head"])
 				if(new_markings && (!..()) && owner.change_marking_color(new_markings, "head"))
 					update_dna()
 
@@ -175,7 +175,7 @@
 
 		if("body_marking_color")
 			if(can_change_markings("body"))
-				var/new_markings = input("Please select body marking color.", "Marking Color", owner.m_colours["body"]) as color|null
+				var/new_markings = tgui_input_color(usr, "Please select body marking color.", "Marking Color", owner.m_colours["body"])
 				if(new_markings && (!..()) && owner.change_marking_color(new_markings, "body"))
 					update_dna()
 
@@ -186,7 +186,7 @@
 
 		if("tail_marking_color")
 			if(can_change_markings("tail"))
-				var/new_markings = input("Please select tail marking color.", "Marking Color", owner.m_colours["tail"]) as color|null
+				var/new_markings = tgui_input_color(usr, "Please select tail marking color.", "Marking Color", owner.m_colours["tail"])
 				if(new_markings && (!..()) && owner.change_marking_color(new_markings, "tail"))
 					update_dna()
 

code/modules/tgui/tgui_input/color_input.dm

@@ -0,0 +1,132 @@
+/**
+ * Creates a TGUI color picker window and returns the user's response.
+ *
+ * This proc should be used to create a color picker that the caller will wait for a response from.
+ * Arguments:
+ * * user - The user to show the picker to.
+ * * title - The of the picker modal, shown on the top of the TGUI window.
+ * * timeout - The timeout of the picker, after which the modal will close and qdel itself. Set to zero for no timeout.
+ * * autofocus - The bool that controls if this picker should grab window focus.
+ */
+/proc/tgui_input_color(mob/user, message, title, default = "#000000", timeout = 0, autofocus = TRUE, ui_state = GLOB.always_state)
+	if(!user)
+		user = usr
+	if(!istype(user))
+		if(!isclient(user))
+			CRASH("We passed something that wasn't a user/client in a TGUI Input Color! The passed thing was [user]!")
+		var/client/client = user
+		user = client.mob
+
+	if(isnull(user.client))
+		return
+
+	// Client does NOT have tgui_input on: Returns regular input
+	if(user.client?.prefs?.toggles2 & PREFTOGGLE_2_DISABLE_TGUI_INPUT)
+		return input(user, message, title, default) as color|null
+
+	var/datum/tgui_input_color/picker = new(user, message, title, default, timeout, autofocus, ui_state)
+	picker.ui_interact(user)
+	picker.wait()
+	if(picker)
+		. = picker.choice
+		qdel(picker)
+
+/**
+ * tgui_input_color
+ *
+ * Datum used for instantiating and using a TGUI-controlled color picker.
+ */
+/datum/tgui_input_color
+	/// The title of the TGUI window
+	var/title
+	/// The message to show the user
+	var/message
+	/// The default choice, used if there is an existing value
+	var/default
+	/// The color the user selected, null if no selection has been made
+	var/choice
+	/// The time at which the tgui_input_color was created, for displaying timeout progress.
+	var/start_time
+	/// The lifespan of the tgui_input_color, after which the window will close and delete itself.
+	var/timeout
+	/// The bool that controls if this modal should grab window focus
+	var/autofocus
+	/// Boolean field describing if the tgui_input_color was closed by the user.
+	var/closed
+	/// The attached timer that handles this objects timeout deletion
+	var/deletion_timer
+	/// The TGUI UI state that will be returned in ui_state(). Default: always_state
+	var/datum/ui_state/state
+
+/datum/tgui_input_color/New(mob/user, message, title, default, timeout, autofocus, ui_state)
+	src.autofocus = autofocus
+	src.title = title
+	src.default = default
+	src.message = message
+	src.state = ui_state
+
+	if(timeout)
+		src.timeout = timeout
+		start_time = world.time
+		deletion_timer = QDEL_IN(src, timeout)
+
+/datum/tgui_input_color/Destroy(force, ...)
+	SStgui.close_uis(src)
+	state = null
+	deltimer(deletion_timer)
+	return ..()
+
+/**
+ * Waits for a user's response to the tgui_input_color's prompt before returning. Returns early if
+ * the window was closed by the user.
+ */
+/datum/tgui_input_color/proc/wait()
+	while(!choice && !closed && !QDELETED(src))
+		stoplag(1)
+
+/datum/tgui_input_color/ui_interact(mob/user, datum/tgui/ui)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, "ColorPickerModal")
+		ui.open()
+		ui.set_autoupdate(timeout > 0)
+
+/datum/tgui_input_color/ui_close(mob/user)
+	closed = TRUE
+
+/datum/tgui_input_color/ui_state(mob/user)
+	return state
+
+/datum/tgui_input_color/ui_static_data(mob/user)
+	var/list/data = list()
+	data["autofocus"] = autofocus
+	data["large_buttons"] = !user.client?.prefs || (user.client.prefs.toggles2 & PREFTOGGLE_2_LARGE_INPUT_BUTTONS)
+	data["swapped_buttons"] = !user.client?.prefs || (user.client.prefs.toggles2 & PREFTOGGLE_2_SWAP_INPUT_BUTTONS)
+	data["title"] = title
+	data["default_color"] = default
+	data["message"] = message
+	return data
+
+/datum/tgui_input_color/ui_data(mob/user)
+	var/list/data = list()
+	if(timeout)
+		data["timeout"] = CLAMP01((timeout - (world.time - start_time) - 1 SECONDS) / (timeout - 1 SECONDS))
+	return data
+
+/datum/tgui_input_color/ui_act(action, list/params)
+	. = ..()
+	if(.)
+		return
+
+	switch(action)
+		if("submit")
+			if(!findtext(params["entry"], GLOB.is_color))
+				return
+			choice = params["entry"]
+			closed = TRUE
+			SStgui.close_uis(src)
+			return TRUE
+		if("cancel")
+			closed = TRUE
+			SStgui.close_uis(src)
+			return TRUE