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

@@ -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))

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