diff --git a/web/src/lib/components/repo/BlobHeader.svelte b/web/src/lib/components/repo/BlobHeader.svelte
index 9066f06cc..b7b83b416 100644
--- a/web/src/lib/components/repo/BlobHeader.svelte
+++ b/web/src/lib/components/repo/BlobHeader.svelte
@@ -7,6 +7,7 @@
 	import Button from "$lib/components/ui/Button.svelte";
 	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
 	import Checkbox from "$lib/components/ui/Checkbox.svelte";
+	import ColorBall from "$lib/components/ui/ColorBall.svelte";
 	import { LANGUAGE_COLORS, LANGUAGE_COLOR_FALLBACK } from "./language-colors";
 	import RefChip from "./RefChip.svelte";
 	import RepoCrumbs from "./RepoCrumbs.svelte";
@@ -58,7 +59,7 @@
 	};
 </script>
 
-<div class="flex flex-wrap items-center justify-between gap-2 typography-paragraph-regular mb-2">
+<div class="mb-2 flex flex-wrap items-center justify-between gap-2 typography-paragraph-regular">
 	<div class="flex min-w-0 items-center gap-3">
 		<RepoCrumbs {ownerHandle} {repoName} {ref} {path} />
 
@@ -84,11 +85,7 @@
 			<div
 				class="flex w-fit items-center gap-2 rounded border border-border-default bg-background-canvas px-2 py-1 whitespace-nowrap"
 			>
-				<div
-					class="size-2 rounded-full"
-					style:background="radial-gradient(circle at 35% 35%, color-mix(in srgb, {languageColor} 70%,
-					white), {languageColor} 30%, color-mix(in srgb, {languageColor} 85%, black))"
-				></div>
+				<ColorBall color={languageColor} />
 				{language}
 			</div>
 		{/if}
diff --git a/web/src/lib/components/repo/LanguageBar.svelte b/web/src/lib/components/repo/LanguageBar.svelte
index 2bb5d4702..47cef4632 100644
--- a/web/src/lib/components/repo/LanguageBar.svelte
+++ b/web/src/lib/components/repo/LanguageBar.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import ColorBall from "$lib/components/ui/ColorBall.svelte";
 	import { LANGUAGE_COLORS, LANGUAGE_COLOR_FALLBACK } from "./language-colors";
 	import type { LanguageSlice } from "./types";
 
@@ -30,10 +31,7 @@
 	>
 		{#each languages as language (language.name)}
 			<div class="flex items-center gap-2 typography-paragraph-small">
-				<span
-					class="inline-block size-2.5 shrink-0 rounded-full"
-					style={`background-color: ${colorFor(language.name)}`}
-				></span>
+				<ColorBall color={colorFor(language.name)} class="size-2.5" />
 				<span>
 					{language.name}
 					<span class="text-foreground-subtle">{percent(language)}%</span>
diff --git a/web/src/lib/components/ui/ColorBall.stories.svelte b/web/src/lib/components/ui/ColorBall.stories.svelte
new file mode 100644
index 000000000..974a508ca
--- /dev/null
+++ b/web/src/lib/components/ui/ColorBall.stories.svelte
@@ -0,0 +1,25 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import ColorBall from "./ColorBall.svelte";
+
+	const { Story } = defineMeta({
+		title: "UI/ColorBall",
+		component: ColorBall,
+		tags: ["autodocs"],
+		argTypes: {
+			size: {
+				control: { type: "inline-radio" },
+				options: ["sm", "md", "lg"]
+			}
+		},
+		args: {
+			color: "#3178c6",
+			size: "sm"
+		}
+	});
+</script>
+
+<Story name="Default" />
+<Story name="Medium" args={{ size: "md" }} />
+<Story name="Large" args={{ size: "lg" }} />
+<Story name="Rust" args={{ color: "#dea584", size: "lg" }} />
diff --git a/web/src/lib/components/ui/ColorBall.svelte b/web/src/lib/components/ui/ColorBall.svelte
new file mode 100644
index 000000000..7f2459afe
--- /dev/null
+++ b/web/src/lib/components/ui/ColorBall.svelte
@@ -0,0 +1,37 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const colorBall = tv({
+		base: "shrink-0 rounded-full",
+		variants: {
+			size: {
+				sm: "size-2",
+				md: "size-4",
+				lg: "size-8"
+			}
+		},
+		defaultVariants: {
+			size: "sm"
+		}
+	});
+
+	export type ColorBallVariants = VariantProps<typeof colorBall>;
+</script>
+
+<script lang="ts">
+	interface Props {
+		/** any CSS colour, e.g. a language colour or a label's hex */
+		color: string;
+		size?: ColorBallVariants["size"];
+		class?: string;
+	}
+
+	let { color, size = "sm", class: className }: Props = $props();
+
+	const classes = $derived(colorBall({ size, class: className }));
+	const sphere = $derived(
+		`radial-gradient(circle at 35% 35%, color-mix(in srgb, ${color} 70%, white), ${color} 30%, color-mix(in srgb, ${color} 85%, black))`
+	);
+</script>
+
+<div class={classes} style:background={sphere}></div>