diff --git a/src/app/Utils.ts b/src/app/Utils.ts
index 41d70eca..8e1189f4 100644
--- a/src/app/Utils.ts
+++ b/src/app/Utils.ts
@@ -51,6 +51,19 @@ export function generateColor() {
 	return Math.floor(Math.random() * 16777215)
 }
 
+function intToUnsigned(n: number) {
+	n |= 0; // Force to signed 32-bit integer
+	return n < 0 ? n + 0x100000000 : n;
+}
+
+export function intToHexRgb(c: number | undefined) {
+	return c ? '#' + (c & 0xFFFFFF).toString(16).padStart(6, '0') : '#000000';
+}
+
+export function intToDisplayHexRgb(c: number | undefined) {
+	return c ? '#' + intToUnsigned(c).toString(16).toUpperCase().padStart(6, '0') : '#000000';
+}
+
 export function htmlEncode(str: string) {
 	return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
 		.replace(/"/g, '&quot;').replace(/'/g, '&#x27;').replace(/\//g, '&#x2F;')
diff --git a/src/app/components/ItemTooltip.tsx b/src/app/components/ItemTooltip.tsx
index 433ee63d..2342ca2f 100644
--- a/src/app/components/ItemTooltip.tsx
+++ b/src/app/components/ItemTooltip.tsx
@@ -2,7 +2,7 @@ import type { MobEffectInstance, NbtTag } from 'deepslate'
 import { ItemStack, NbtCompound, NbtList, PotionContents } from 'deepslate'
 import { Identifier } from 'deepslate/core'
 import type { ResolvedItem } from '../services/ResolvedItem.js'
-import { makeDescriptionId, mergeTextComponentStyles } from '../Utils.js'
+import { intToDisplayHexRgb, makeDescriptionId, mergeTextComponentStyles } from '../Utils.js'
 import { TextComponent } from './TextComponent.jsx'
 
 interface Props {
@@ -107,7 +107,7 @@ export function ItemTooltip({ item, advanced, resolver }: Props) {
 			<EnchantmentsTooltip data={item.get('enchantments', tag => tag)} />
 		)}
 		{item.showInTooltip('dyed_color') && (advanced
-			? <TextComponent component={{ translate: 'item.color', with: [`#${item.get('dyed_color', tag => tag.isCompound() ? tag.getNumber('rgb') : tag.getAsNumber())?.toString(16).padStart(6, '0')}`], color: 'gray' }} />
+			? <TextComponent component={{ translate: 'item.color', with: [intToDisplayHexRgb(item.get('dyed_color', tag => tag.isCompound() ? tag.getNumber('rgb') : tag.getAsNumber()))], color: 'gray' }} />
 			: <TextComponent component={{ translate: 'item.dyed', color: 'gray' }} />
 		)}
 		{item.getLore().map((component) =>
diff --git a/src/app/components/ItemTooltip1204.tsx b/src/app/components/ItemTooltip1204.tsx
index ca7a0741..103da565 100644
--- a/src/app/components/ItemTooltip1204.tsx
+++ b/src/app/components/ItemTooltip1204.tsx
@@ -5,7 +5,7 @@ import { useLocale } from '../contexts/Locale.jsx'
 import { useVersion } from '../contexts/Version.jsx'
 import { useAsync } from '../hooks/useAsync.js'
 import { getLanguage, getTranslation } from '../services/Resources.js'
-import { message } from '../Utils.js'
+import { intToDisplayHexRgb, message } from '../Utils.js'
 import { TextComponent } from './TextComponent.jsx'
 
 interface Props {
@@ -107,7 +107,7 @@ export function ItemTooltip1204({ item, advanced }: Props) {
 		})}
 		{item.tag.hasCompound('display') && <>
 			{shouldShow(item, 'dye') && item.tag.getCompound('display').hasNumber('color') && (advanced
-				? <TextComponent component={{ translate: 'item.color', with: [`#${item.tag.getCompound('display').getNumber('color').toString(16).padStart(6, '0')}`], color: 'gray' }} />
+				? <TextComponent component={{ translate: 'item.color', with: [intToDisplayHexRgb(item.tag.getCompound('display').getNumber('color'))], color: 'gray' }} />
 				: <TextComponent component={{ translate: 'item.dyed', color: 'gray' }} />)}
 			{lore.map((component) => <TextComponent component={component} base={{ color: 'dark_purple', italic: true }} />)}
 		</>}
diff --git a/src/app/components/generator/McdocRenderer.tsx b/src/app/components/generator/McdocRenderer.tsx
index b1b6f1e2..c69d3d1e 100644
--- a/src/app/components/generator/McdocRenderer.tsx
+++ b/src/app/components/generator/McdocRenderer.tsx
@@ -14,7 +14,7 @@ import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
 import config from '../../Config.js'
 import { useLocale } from '../../contexts/Locale.jsx'
 import { useFocus } from '../../hooks/useFocus.js'
-import { generateColor, hexId, randomInt, randomSeed } from '../../Utils.js'
+import { generateColor, hexId, intToHexRgb, randomInt, randomSeed } from '../../Utils.js'
 import { Btn } from '../Btn.jsx'
 import { ItemDisplay } from '../ItemDisplay.jsx'
 import { Octicon } from '../Octicon.jsx'
@@ -196,7 +196,7 @@ function StringHead({ type, optional, excludeStrings, node, ctx }: Props<StringT
 
 	const onRandomColor = useCallback(() => {
 		const color = generateColor()
-		onChangeValue('#' + (color.toString(16).padStart(6, '0') ?? '000000'))
+		onChangeValue(intToHexRgb(color))
 	}, [onChangeValue])
 
 	return <>
@@ -341,7 +341,7 @@ function NumericHead({ type, node, ctx }: Props<NumericType>) {
 	return <>
 		<input class="short-input" type="number" value={value} onInput={(e) => setValue((e.target as HTMLInputElement).value)} onBlur={onCommitValue} onSubmit={onCommitValue} onKeyDown={(e) => {if (e.key === 'Enter') onCommitValue()}} />
 		{colorKind && <>
-			<input class="short-input" type="color" value={'#' + (nodeValue?.toString(16).padStart(6, '0') ?? '000000')} onChange={(e) => onChangeColor((e.target as HTMLInputElement).value)} />
+			<input class="short-input" type="color" value={intToHexRgb(nodeValue)} onChange={(e) => onChangeColor((e.target as HTMLInputElement).value)} />
 			<button class="tooltipped tip-se" aria-label={locale('generate_new_color')} onClick={onRandomColor}>{Octicon.sync}</button>
 		</>}
 		{random && <>