diff --git a/frontend/src/utils/energyColors.ts b/frontend/src/utils/energyColors.ts
new file mode 100644
index 0000000..2406848
--- /dev/null
+++ b/frontend/src/utils/energyColors.ts
@@ -0,0 +1,47 @@
+/**
+ * Energy type color utilities.
+ *
+ * Provides color mappings for energy types matching the Pokemon type palette
+ * defined in the master plan design system.
+ */
+import type { EnergyType } from '@/types'
+
+/**
+ * Energy type to color mapping.
+ *
+ * Colors match the Pokemon type-inspired palette from PROJECT_PLAN_FRONTEND.json.
+ */
+export const ENERGY_COLORS: Record<EnergyType, string> = {
+  grass: '#78C850',
+  fire: '#F08030',
+  water: '#6890F0',
+  lightning: '#F8D030',
+  psychic: '#F85888',
+  fighting: '#C03028',
+  darkness: '#705848',
+  metal: '#B8B8D0',
+  dragon: '#7038F8',
+  colorless: '#A8A878',
+}
+
+/**
+ * Get the display color for an energy type.
+ *
+ * @param energyType - The energy type
+ * @returns Hex color string
+ */
+export function getEnergyColor(energyType: EnergyType): string {
+  return ENERGY_COLORS[energyType]
+}
+
+/**
+ * Get energy type display name.
+ *
+ * Converts the lowercase enum value to a capitalized display name.
+ *
+ * @param energyType - The energy type
+ * @returns Capitalized display name
+ */
+export function getEnergyTypeName(energyType: EnergyType): string {
+  return energyType.charAt(0).toUpperCase() + energyType.slice(1)
+}