diff --git a/src/components/HighlightedName/index.tsx b/src/components/HighlightedName/index.tsx
index 360e7248..8ed0522b 100644
--- a/src/components/HighlightedName/index.tsx
+++ b/src/components/HighlightedName/index.tsx
@@ -6,7 +6,7 @@ import { Typography, TypographyProps, useTheme } from '@mui/material';
 
 const colorHash = new ColorHash();
 
-export const generateColorFromString = memoize((text: string): string => {
+export const generateHexColorFromString = memoize((text: string): string => {
 	return colorHash.hex(text.replace(/\s/g, ''));
 });
 
@@ -25,7 +25,10 @@ export const HighlightedName = ({
 	...props
 }: HighlightedNameProps) => {
 	const theme = useTheme();
-	const bgColor = useMemo(() => generateColorFromString(children), [children]);
+	const bgColor = useMemo(
+		() => generateHexColorFromString(children),
+		[children],
+	);
 
 	return (
 		<Typography
diff --git a/src/index.tsx b/src/index.tsx
index f5c6cb0b..cbfc8eba 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -65,7 +65,10 @@ export type {
 export { Announcement } from './components/Announcement';
 export type { OrderedListItemProps } from './components/OrderedListItem';
 export { OrderedListItem } from './components/OrderedListItem';
-export { HighlightedName } from './components/HighlightedName';
+export {
+	generateHexColorFromString,
+	HighlightedName,
+} from './components/HighlightedName';
 export type { RouterLinkWithTrackingProps } from './components/RouterLinkWithTracking';
 export { RouterLinkWithTracking } from './components/RouterLinkWithTracking';
 export { SnackbarProviderBase as SnackbarProvider } from './components/SnackbarProvider';