From 8f9c3f6e8273c79b81f1d9221d0778cf4cc8b4c5 Mon Sep 17 00:00:00 2001
From: lew <82828093+Llywelwyn@users.noreply.github.com>
Date: Wed, 3 Jun 2026 16:14:36 +0100
Subject: [PATCH] Fixes colour preview chips in character setup (#22576)

fixes #22289

- bugfix: "Colour chips in character setup are correctly coloured
again."

this only worked previously because byond's ie version was so old it
didn't care, afaik

also the circles in the loadout i just didnt get a picture

<img width="336" height="304" alt="image"
src="https://github.com/user-attachments/assets/f43912d6-22eb-452a-bac1-fff100a2f7b0"
/>
---
 code/modules/client/preference_setup/loadout/gear_tweaks.dm | 4 ++--
 code/modules/client/preference_setup/preference_setup.dm    | 2 +-
 html/changelogs/llywelwyn-loadout-colour-preview.yml        | 4 ++++
 3 files changed, 7 insertions(+), 3 deletions(-)
 create mode 100644 html/changelogs/llywelwyn-loadout-colour-preview.yml

diff --git a/code/modules/client/preference_setup/loadout/gear_tweaks.dm b/code/modules/client/preference_setup/loadout/gear_tweaks.dm
index 998ac37606b..825bbb91554 100644
--- a/code/modules/client/preference_setup/loadout/gear_tweaks.dm
+++ b/code/modules/client/preference_setup/loadout/gear_tweaks.dm
@@ -58,7 +58,7 @@ Color adjustment
 	..()
 
 /datum/gear_tweak/color/get_contents(var/metadata)
-	return "Color: <font color='[metadata]'>&#9899;</font>"
+	return "Color: <span style=\"color:[metadata];font-size:150%\">&#9679;</span>"
 
 /datum/gear_tweak/color/get_default()
 	return valid_colors ? valid_colors[1] : COLOR_GRAY
@@ -104,7 +104,7 @@ Alpha adjustment
 GLOBAL_DATUM_INIT(gear_tweak_accent_color, /datum/gear_tweak/color/accent, new())
 
 /datum/gear_tweak/color/accent/get_contents(var/metadata)
-	return "Accent Color: <font color='[metadata]'>&#9899;</font>"
+	return "Accent Color: <span style=\"color:[metadata];font-size:150%\">&#9679;</span>"
 
 /datum/gear_tweak/color/accent/tweak_item(var/obj/item/I, var/metadata, var/mob/living/carbon/human/H)
 	if(valid_colors && !(metadata in valid_colors))
diff --git a/code/modules/client/preference_setup/preference_setup.dm b/code/modules/client/preference_setup/preference_setup.dm
index 46f4ef5d959..e677108ab8b 100644
--- a/code/modules/client/preference_setup/preference_setup.dm
+++ b/code/modules/client/preference_setup/preference_setup.dm
@@ -9,7 +9,7 @@
 #define SQL_PREFERENCES	0x2
 
 // General-purpose helper for drawing a colored box.
-#define HTML_RECT(color) "&nbsp;<div style=\"display:inline;height:10px;width:30px;background:'[color || "#FFFFFF"]'\"></div>&nbsp;"
+#define HTML_RECT(color) "&nbsp;<div style=\"display:inline-block;height:10px;width:30px;background:[color || "#FFFFFF"]\"></div>&nbsp;"
 
 // A bit of a hack to allow unit testing of category items.
 #ifdef UNIT_TEST
diff --git a/html/changelogs/llywelwyn-loadout-colour-preview.yml b/html/changelogs/llywelwyn-loadout-colour-preview.yml
new file mode 100644
index 00000000000..24f6e683bfc
--- /dev/null
+++ b/html/changelogs/llywelwyn-loadout-colour-preview.yml
@@ -0,0 +1,4 @@
+author: Llywelwyn
+delete-after: True
+changes:
+  - bugfix: "Colour chips in character setup are correctly coloured again."