diff --git a/examples/ColorPicker.tsx b/examples/ColorPicker.tsx
new file mode 100644
index 00000000..a2814b9d
--- /dev/null
+++ b/examples/ColorPicker.tsx
@@ -0,0 +1,123 @@
+import React, { useState } from "react";
+import { SelectionEntry } from "../type-declarations/simularium/SelectionInterface";
+
+const ColorPicker = ({
+    uiDisplayData,
+    particleTypeNames,
+    agentColors,
+    setColorSelectionInfo,
+    updateAgentColorArray,
+}) => {
+    const [subAgents, setSubAgents] = useState([{ name: "", id: "" }]);
+    const [selectedAgent, setSelectedAgent] = useState("");
+    const [selectedColor, setSelectedColor] = useState("");
+    const [selectedSubagent, setSelectedSubAgent] = useState("");
+    const [colorToAppend, setColorToAppend] = useState("");
+
+    const getSubAgentsforAgent = (agentName: string) => {
+        const agent = uiDisplayData.find(
+            (element) => element.name === agentName
+        );
+        if (!agent) {
+            throw new Error("No agent found");
+        }
+        setSubAgents(agent.displayStates);
+    };
+
+    const handleAgentSelection = (event) => {
+        const value = event.target.value;
+        getSubAgentsforAgent(value);
+        setSelectedAgent(value);
+    };
+
+    const assignColorToAgent = () => {
+        if (!selectedAgent) {
+            throw new Error("No agent selected");
+        } else if (!selectedColor) {
+            throw new Error("No color selected");
+        } else {
+            let subAgent: string[] = selectedSubagent ? [selectedSubagent] : [];
+            // hooks doesn't save an empty string
+            // but an empty string is a possible tag
+            // that represents the unmodified state
+            if (selectedSubagent === "<unmodified>") {
+                subAgent = [""];
+            }
+            const entry: SelectionEntry[] = [
+                {
+                    name: selectedAgent,
+                    tags: subAgent,
+                },
+            ];
+            setColorSelectionInfo([{
+                agents: entry,
+                color: selectedColor,
+            }]);
+        }
+    };
+
+    const addColorToColorArray = (customColor: string) => {
+        const hexColorCodeRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+        const color = customColor;
+        if (hexColorCodeRegex.test(color)) {
+            updateAgentColorArray(color);
+        } else {
+            alert("Please enter a valid hex color code");
+        }
+    };
+
+    return (
+        <>
+            <span>Color change agent selections:</span>
+            <select id="agentSelect" onChange={handleAgentSelection}>
+                <option value=""> Select Agent</option>
+                {particleTypeNames.map((name) => (
+                    <option key={name} value={name}>
+                        {name}
+                    </option>
+                ))}
+            </select>
+            <select
+                id="subAgentSelect"
+                onChange={(event) => setSelectedSubAgent(event.target.value)}
+            >
+                <option value="">Select Sub-Agent</option>
+                {subAgents.map((subAgent) => (
+                    <option
+                        key={subAgent.name}
+                        value={subAgent.id || subAgent.name}
+                    >
+                        {subAgent.name}
+                    </option>
+                ))}
+            </select>
+            <select
+                id="colorSelect"
+                onChange={(event) => setSelectedColor(event.target.value)}
+                defaultValue={selectedColor}
+                style={{ backgroundColor: selectedColor }}
+            >
+                <option value="">Select Color</option>
+                {agentColors.map((name) => (
+                    <option key={name} value={name}>
+                        {name}
+                    </option>
+                ))}
+            </select>
+            <button onClick={assignColorToAgent}> Apply Color to Agent</button>
+            <input
+                id="colorAddition"
+                type="text"
+                placeholder="add Hex Color"
+                onChange={(event) => {
+                    console.log(event.target.value)
+                    setColorToAppend(event.target.value)}}
+            ></input>
+            <button onClick={() => addColorToColorArray(colorToAppend)}>
+                Add color to color array
+            </button>
+        </>
+    );
+};
+
+export default ColorPicker;
diff --git a/examples/Viewer.tsx b/examples/Viewer.tsx
index 7cd831bc..45db80fb 100644
--- a/examples/Viewer.tsx
+++ b/examples/Viewer.tsx
@@ -20,6 +20,7 @@ import PointSimulatorLive from "./PointSimulatorLive";
 import PdbSimulator from "./PdbSimulator";
 import SinglePdbSimulator from "./SinglePdbSimulator";
 import CurveSimulator from "./CurveSimulator";
+import ColorPicker from "./ColorPicker";
 import {
     SMOLDYN_TEMPLATE,
     UI_BASE_TYPES,
@@ -139,6 +140,7 @@ const initialState: ViewerState = {
     selectionStateInfo: {
         highlightedAgents: [],
         hiddenAgents: [],
+        colorChanges: [{ agents: [], color: "" }],
     },
     filePending: null,
     simulariumFile: null,
@@ -354,9 +356,8 @@ class Viewer extends React.Component<InputParams, ViewerState> {
     }
 
     public convertFile(obj: Record<string, any>, fileType: TrajectoryType) {
-        simulariumController.convertAndLoadTrajectory(
-            this.netConnectionSettings, obj, fileType
-        )
+        simulariumController
+            .convertAndLoadTrajectory(this.netConnectionSettings, obj, fileType)
             .then(() => {
                 this.clearPendingFile();
             })
@@ -590,6 +591,23 @@ class Viewer extends React.Component<InputParams, ViewerState> {
         URL.revokeObjectURL(downloadLink.href);
     }
 
+    public updateAgentColorArray = (color) => {
+        const agentColors = [...this.state.agentColors, color] as string[];
+        this.setState({ agentColors });
+    };
+
+    public setColorSelectionInfo = (colorChanges) => {
+        this.setState({
+            ...this.state,
+            selectionStateInfo: {
+                hiddenAgents: this.state.selectionStateInfo.hiddenAgents,
+                highlightedAgents:
+                    this.state.selectionStateInfo.highlightedAgents,
+                colorChanges: colorChanges,
+            },
+        });
+    };
+
     public render(): JSX.Element {
         if (this.state.filePending) {
             const fileType = this.state.filePending.type;
@@ -624,15 +642,33 @@ class Viewer extends React.Component<InputParams, ViewerState> {
                     <option value="microtubules30_1.h5">MT 30</option>
                     <option value="endocytosis.simularium">Endocytosis</option>
                     <option value="pc4covid19.simularium">COVIDLUNG</option>
-                    <option value="nanoparticle_wrapping.simularium">Nanoparticle wrapping</option>
-                    <option value="smoldyn_min1.simularium">Smoldyn min1</option>
-                    <option value="smoldyn_spine.simularium">Smoldyn spine</option>
-                    <option value="medyan_Chandrasekaran_2019_UNI_alphaA_0.1_MA_0.675.simularium">medyan 625</option>
-                    <option value="medyan_Chandrasekaran_2019_UNI_alphaA_0.1_MA_0.0225.simularium">medyan 0225</option>
-                    <option value="springsalad_condensate_formation_Below_Ksp.simularium">springsalad below ksp</option>
-                    <option value="springsalad_condensate_formation_At_Ksp.simularium">springsalad at ksp</option>
-                    <option value="springsalad_condensate_formation_Above_Ksp.simularium">springsalad above ksp</option>
-                    <option value="blood-plasma-1.0.simularium">blood plasma</option>
+                    <option value="nanoparticle_wrapping.simularium">
+                        Nanoparticle wrapping
+                    </option>
+                    <option value="smoldyn_min1.simularium">
+                        Smoldyn min1
+                    </option>
+                    <option value="smoldyn_spine.simularium">
+                        Smoldyn spine
+                    </option>
+                    <option value="medyan_Chandrasekaran_2019_UNI_alphaA_0.1_MA_0.675.simularium">
+                        medyan 625
+                    </option>
+                    <option value="medyan_Chandrasekaran_2019_UNI_alphaA_0.1_MA_0.0225.simularium">
+                        medyan 0225
+                    </option>
+                    <option value="springsalad_condensate_formation_Below_Ksp.simularium">
+                        springsalad below ksp
+                    </option>
+                    <option value="springsalad_condensate_formation_At_Ksp.simularium">
+                        springsalad at ksp
+                    </option>
+                    <option value="springsalad_condensate_formation_Above_Ksp.simularium">
+                        springsalad above ksp
+                    </option>
+                    <option value="blood-plasma-1.0.simularium">
+                        blood plasma
+                    </option>
                     <option value="TEST_SINGLE_PDB">TEST SINGLE PDB</option>
                     <option value="TEST_PDB">TEST PDB</option>
                     <option value="TEST_FIBERS">TEST FIBERS</option>
@@ -795,7 +831,9 @@ class Viewer extends React.Component<InputParams, ViewerState> {
                 <br />
                 <button
                     onClick={() =>
-                        simulariumController.getMetrics(this.netConnectionSettings)
+                        simulariumController.getMetrics(
+                            this.netConnectionSettings
+                        )
                     }
                 >
                     Get available metrics
@@ -828,6 +866,14 @@ class Viewer extends React.Component<InputParams, ViewerState> {
                     Tick interval length:{" "}
                     {simulariumController.tickIntervalLength}
                 </span>
+                <br></br>
+                <ColorPicker
+                    uiDisplayData={this.state.uiDisplayData}
+                    particleTypeNames={this.state.particleTypeNames}
+                    agentColors={this.state.agentColors}
+                    updateAgentColorArray={this.updateAgentColorArray}
+                    setColorSelectionInfo={this.setColorSelectionInfo}
+                />
                 <div className="viewer-container">
                     <SimulariumViewer
                         ref={this.viewerRef}
diff --git a/src/index.ts b/src/index.ts
index ec3664f9..7d473e33 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -4,6 +4,8 @@ export type {
     SelectionStateInfo,
     UIDisplayData,
     VisDataFrame,
+    ColorChanges,
+    SelectionEntry,
 } from "./simularium";
 export type { ISimulariumFile } from "./simularium/ISimulariumFile";
 
diff --git a/src/simularium/SelectionInterface.ts b/src/simularium/SelectionInterface.ts
index eebba453..7796c7e8 100644
--- a/src/simularium/SelectionInterface.ts
+++ b/src/simularium/SelectionInterface.ts
@@ -3,6 +3,8 @@ import { EncodedTypeMapping } from "./types";
 import { convertColorNumberToString } from "../visGeometry/color-utils";
 
 // An individual entry parsed from an encoded name
+// The encoded names can be just a name or a name plus a
+// state, such as "proteinA#bound"
 interface DecodedTypeEntry {
     id: number;
     name: string;
@@ -15,9 +17,15 @@ export interface SelectionEntry {
     tags: string[];
 }
 
+export interface ColorChanges {
+    agents: SelectionEntry[];
+    color: string;
+}
+
 export interface SelectionStateInfo {
     highlightedAgents: SelectionEntry[];
     hiddenAgents: SelectionEntry[];
+    colorChanges: ColorChanges[];
 }
 
 interface DisplayStateEntry {
@@ -79,6 +87,10 @@ class SelectionInterface {
     }
 
     public decode(encodedName: string, color: string, idParam?: number): void {
+        /**
+         * Takes an encoded name, the color and the agent id, and stores
+         * a decoded entry on the class mapped by the agent name
+         */
         let name = "";
         let tags: string[] = [];
         const id = idParam !== undefined ? idParam : -1;
@@ -185,14 +197,9 @@ class SelectionInterface {
         }
         return [];
     }
-    /*
-     * If an entity has both a name and all the tags specified in the
-     * selection state info, it will be considered highlighted
-     */
-    public getHighlightedIds(info: SelectionStateInfo): number[] {
-        const requests = info.highlightedAgents;
-        let indices: number[] = [];
 
+    public getAgentIdsByNamesAndTags(requests: SelectionEntry[]): number[] {
+        let indices: number[] = [];
         requests.forEach((r) => {
             const name = r.name;
             const tags = r.tags;
@@ -201,21 +208,22 @@ class SelectionInterface {
         return indices;
     }
 
+    /*
+     * If an entity has both a name and all the tags specified in the
+     * selection state info, it will be considered highlighted
+     */
+    public getHighlightedIds(info: SelectionStateInfo): number[] {
+        const requests = info.highlightedAgents;
+        return this.getAgentIdsByNamesAndTags(requests);
+    }
+
     /*
      * If an entry has a name specified in the selection state info
      * or a tag specified, it will be considered hidden
      */
     public getHiddenIds(info: SelectionStateInfo): number[] {
         const requests = info.hiddenAgents;
-        let indices: number[] = [];
-
-        requests.forEach((r) => {
-            const name = r.name;
-            const tags = r.tags;
-            indices = [...indices, ...this.getIds(name, tags)];
-        });
-
-        return indices;
+        return this.getAgentIdsByNamesAndTags(requests);
     }
 
     public clear(): void {
@@ -252,8 +260,7 @@ class SelectionInterface {
                     displayStates.push(displayState);
                 });
             });
-
-            const color = "";
+            const color = this.entries[name][0].color || "";
             return {
                 name,
                 displayStates,
@@ -263,19 +270,40 @@ class SelectionInterface {
     }
 
     private updateUiDataColor(
-        entry: UIDisplayEntry,
-        id: number,
+        agentName: string,
+        idsToUpdate: number[],
         color: number | string
-    ) {
-        const tagsToUpdate = this.getTags(entry.name, id);
-        entry.displayStates.forEach((displayState: DisplayStateEntry) => {
-            if (tagsToUpdate.includes(displayState.id)) {
-                displayState.color = convertColorNumberToString(color);
+    ): void {
+        const newColor = convertColorNumberToString(color);
+        const entry = this.entries[agentName];
+        // if no display state update parent color
+        entry.forEach((displayState) => {
+            if (idsToUpdate.includes(displayState.id)) {
+                displayState.color = newColor;
             }
         });
     }
 
-    public setAgentColors(
+    public updateAgentColors(
+        agentIds: number[],
+        colorChanges: ColorChanges,
+        uiDisplayData: UIDisplayData
+    ): void {
+        colorChanges.agents.forEach((agentToUpdate) => {
+            for (const group of uiDisplayData) {
+                if (group.name === agentToUpdate.name) {
+                    this.updateUiDataColor(
+                        group.name,
+                        agentIds,
+                        colorChanges.color
+                    );
+                    break;
+                }
+            }
+        });
+    }
+
+    public setInitialAgentColors(
         uiDisplayData: UIDisplayData,
         colors: (string | number)[],
         setColorForIds: (ids: number[], colorIndex: number) => void
@@ -295,6 +323,11 @@ class SelectionInterface {
                 // if no colors have been set by the user for this name,
                 // just give all states of this agent name the same color
                 setColorForIds(ids, defaultColorIndex);
+                this.updateUiDataColor(
+                    group.name,
+                    ids,
+                    colors[defaultColorIndex]
+                );
             } else {
                 // otherwise, we need to update any user defined colors
                 newColors.forEach((color, index) => {
@@ -314,8 +347,8 @@ class SelectionInterface {
                     } else {
                         // need update the display data with the default color being used
                         this.updateUiDataColor(
-                            group,
-                            ids[index],
+                            group.name,
+                            [ids[index]],
                             colors[groupColorIndex]
                         );
                     }
@@ -346,7 +379,6 @@ class SelectionInterface {
                 defaultColorIndex++;
             }
         });
-
         return colors;
     }
 }
diff --git a/src/test/SelectionInterface.test.ts b/src/test/SelectionInterface.test.ts
index 7bfc93cb..fe352ce9 100644
--- a/src/test/SelectionInterface.test.ts
+++ b/src/test/SelectionInterface.test.ts
@@ -23,6 +23,12 @@ const idMapping = {
 };
 
 const color = "";
+const initialColorChanges = [
+    {
+        agents: [],
+        color,
+    },
+];
 
 describe("SelectionInterface module", () => {
     describe("decode", () => {
@@ -231,6 +237,7 @@ describe("SelectionInterface module", () => {
                     { name: "D", tags: [] },
                 ],
                 hiddenAgents: [],
+                colorChanges: initialColorChanges,
             };
             const ids = si.getHighlightedIds(selectionStateHighlight);
             const allAs = [0, 1, 2, 3];
@@ -250,6 +257,7 @@ describe("SelectionInterface module", () => {
                     { name: "D", tags: [""] },
                 ],
                 hiddenAgents: [],
+                colorChanges: initialColorChanges,
             };
             const ids = si.getHighlightedIds(selectionStateHighlight);
 
@@ -266,6 +274,7 @@ describe("SelectionInterface module", () => {
                     { name: "E", tags: ["t1000"] },
                 ],
                 hiddenAgents: [],
+                colorChanges: initialColorChanges,
             };
             const ids = si.getHighlightedIds(selectionStateHighlight);
 
@@ -278,6 +287,7 @@ describe("SelectionInterface module", () => {
             const selectionStateHighlight = {
                 highlightedAgents: [{ name: "E", tags: [""] }],
                 hiddenAgents: [],
+                colorChanges: initialColorChanges,
             };
             const ids = si.getHighlightedIds(selectionStateHighlight);
 
@@ -295,6 +305,7 @@ describe("SelectionInterface module", () => {
                     { name: "A", tags: [] },
                     { name: "C", tags: [] },
                 ],
+                colorChanges: initialColorChanges,
             };
             const ids = si.getHiddenIds(selectionStateHide);
 
@@ -310,6 +321,7 @@ describe("SelectionInterface module", () => {
                     { name: "A", tags: ["t1", "t2"] },
                     { name: "B", tags: ["t1"] },
                 ],
+                colorChanges: initialColorChanges,
             };
             const ids = si.getHiddenIds(selectionStateHide);
             expect(ids).toEqual([1, 2, 3, 5, 7]);
@@ -325,6 +337,7 @@ describe("SelectionInterface module", () => {
                     { name: "A", tags: [""] },
                     { name: "C", tags: ["", "t1", "t2"] },
                 ],
+                colorChanges: initialColorChanges,
             };
             const ids = si.getHiddenIds(selectionStateHide);
 
@@ -406,7 +419,26 @@ describe("SelectionInterface module", () => {
         });
     });
 
-    describe("setAgentColors", () => {
+    describe("updateAgentColors", () => {
+        test("it will update the entries with a new color", () => {
+            const agentIds = [0];
+            const newColor = "#111111";
+            const colorChanges = {
+                agents: [{ name: "A", tags: [] }],
+                color: newColor,
+            };
+            const si = new SelectionInterface();
+            si.parse(idMapping);
+            const uiDisplayData = si.getUIDisplayData();
+            const oldColors = si.getColorsForName("A");
+            expect(oldColors).not.toContain(newColor);
+            si.updateAgentColors(agentIds, colorChanges, uiDisplayData);
+            const colors = si.getColorsForName("A");
+            expect(colors).toContain(newColor);
+        });
+    });
+
+    describe("setInitialAgentColors", () => {
         const defaultColor = "#0";
         const defaultColorListLength = 6;
         let si: SelectionInterface;
@@ -483,7 +515,7 @@ describe("SelectionInterface module", () => {
 
         test("it will create a new material for each of the use defined colors", () => {
             const numberOfNewColors = Object.keys(agentColors).length + 2; // two additional colors for G
-            const updatedColors = si.setAgentColors(
+            const updatedColors = si.setInitialAgentColors(
                 uiDisplayData,
                 colorList,
                 setColorForIds
@@ -496,33 +528,33 @@ describe("SelectionInterface module", () => {
 
         test("it set the entry color to the 'unmodified' state color if provided", () => {
             // initially should have no color
-            expect(uiDisplayDataForA?.color).toEqual("");
-            expect(uiDisplayDataForB?.color).toEqual("");
-            si.setAgentColors(uiDisplayData, colorList, setColorForIds);
+            expect(uiDisplayDataForA?.color).toEqual("#aaaaaa");
+            expect(uiDisplayDataForB?.color).toEqual("#bbbbbb");
+            si.setInitialAgentColors(uiDisplayData, colorList, setColorForIds);
             expect(uiDisplayDataForA?.color).toEqual("#aaaaaa");
             expect(uiDisplayDataForB?.color).toEqual("#bbbbbb");
         });
         test("If no user colors are provided entry will get a default color", () => {
             // initially should have no color
             expect(uiDisplayDataForE?.color).toEqual("");
-            si.setAgentColors(uiDisplayData, colorList, setColorForIds);
+            si.setInitialAgentColors(uiDisplayData, colorList, setColorForIds);
             expect(uiDisplayDataForE?.color).toEqual("#00");
             expect(setColorForIds).toHaveBeenCalledWith([13], 0);
         });
         test("If no user colors are provided all the ids for an entry will get a default color", () => {
-            si.setAgentColors(uiDisplayData, colorList, setColorForIds);
+            si.setInitialAgentColors(uiDisplayData, colorList, setColorForIds);
             expect(setColorForIds).toHaveBeenCalledWith([13], 0);
         });
         test("if all the colors are the same, the parent entry will also get that color, even if no unmodified color set", () => {
-            si.setAgentColors(uiDisplayData, colorList, setColorForIds);
+            si.setInitialAgentColors(uiDisplayData, colorList, setColorForIds);
             expect(uiDisplayDataForF?.color).toEqual("#ffffff");
         });
         test("If user defined colors are different, parent doesn't get a color", () => {
-            si.setAgentColors(uiDisplayData, colorList, setColorForIds);
+            si.setInitialAgentColors(uiDisplayData, colorList, setColorForIds);
             expect(uiDisplayDataForG?.color).toEqual("");
         });
         test("If user colors are provided each id will be set with the new color", () => {
-            si.setAgentColors(uiDisplayData, colorList, setColorForIds);
+            si.setInitialAgentColors(uiDisplayData, colorList, setColorForIds);
             // the first new user color will be appended to the end of the list
             const indexOfColorForA = defaultColorListLength;
             // these are all the agent A ids, each should get the first new color assigned
diff --git a/src/viewport/index.tsx b/src/viewport/index.tsx
index 5c7146f0..d1fd9865 100644
--- a/src/viewport/index.tsx
+++ b/src/viewport/index.tsx
@@ -17,6 +17,7 @@ import { TrajectoryFileInfoAny } from "../simularium/types";
 import { updateTrajectoryFileInfoFormat } from "../simularium/versionHandlers";
 import { FrontEndError, ErrorLevel } from "../simularium/FrontEndError";
 import { RenderStyle, VisGeometry, NO_AGENT } from "../visGeometry";
+import { ColorChanges } from "../simularium/SelectionInterface";
 
 export type PropColor = string | number | [number, number, number];
 
@@ -200,10 +201,11 @@ class Viewport extends React.Component<
                 console.log("error parsing 'typeMapping' data", e);
             }
         }
+        const uiDisplayData = this.selectionInterface.getUIDisplayData();
         onTrajectoryFileInfoChanged(trajectoryFileInfo);
         this.visGeometry.clearColorMapping();
-        const uiDisplayData = this.selectionInterface.getUIDisplayData();
-        const updatedColors = this.selectionInterface.setAgentColors(
+
+        const updatedColors = this.selectionInterface.setInitialAgentColors(
             uiDisplayData,
             agentColors,
             this.visGeometry.setColorForIds.bind(this.visGeometry)
@@ -211,8 +213,8 @@ class Viewport extends React.Component<
         if (!isEqual(updatedColors, agentColors)) {
             this.visGeometry.createMaterials(updatedColors);
         }
-        this.visGeometry.finalizeIdColorMapping();
-        onUIDisplayDataChanged(uiDisplayData);
+
+        onUIDisplayDataChanged(this.selectionInterface.getUIDisplayData());
     }
 
     public componentDidMount(): void {
@@ -315,6 +317,14 @@ class Viewport extends React.Component<
                     this.selectionInterface.getHiddenIds(selectionStateInfo);
                 this.visGeometry.setVisibleByIds(hiddenIds);
             }
+            if (
+                !isEqual(
+                    selectionStateInfo.colorChanges,
+                    prevProps.selectionStateInfo.colorChanges
+                )
+            ) {
+                this.changeAgentsColor(selectionStateInfo.colorChanges);
+            }
         }
 
         // note that if the system does not support the molecular render style, then
@@ -542,6 +552,32 @@ class Viewport extends React.Component<
         }
     }
 
+    private getColorId(color: string): number {
+        /**
+         * Check if the new color is in our current array of color options, if not,
+         * add it before returning the index
+         */
+        return this.visGeometry.addNewColor(color);
+    }
+
+    public changeAgentsColor(colorChanges: ColorChanges[]): void {
+        const {
+            onUIDisplayDataChanged,
+        } = this.props;
+        colorChanges.forEach((colorChange) => {
+            const { agents, color } = colorChange;
+            const uiDisplayData = this.selectionInterface.getUIDisplayData();
+            const agentIds =
+                this.selectionInterface.getAgentIdsByNamesAndTags(agents);
+       
+            this.selectionInterface.updateAgentColors(agentIds, colorChange, uiDisplayData);
+            const colorId = this.getColorId(color);
+            this.visGeometry.applyColorToAgents(agentIds, colorId);
+            const updatedUiDisplayData = this.selectionInterface.getUIDisplayData();
+            onUIDisplayDataChanged(updatedUiDisplayData);
+        });
+    }
+
     public stopAnimate(): void {
         if (this.animationRequestID !== 0) {
             cancelAnimationFrame(this.animationRequestID);
diff --git a/src/visGeometry/color-utils.ts b/src/visGeometry/color-utils.ts
index 89fbafea..8a234627 100644
--- a/src/visGeometry/color-utils.ts
+++ b/src/visGeometry/color-utils.ts
@@ -13,3 +13,11 @@ export function convertColorNumberToString(color: number | string): string {
     }
     return "#" + new Color(color).getHexString();
 }
+
+export const checkHexColor = (color: string): string => {
+    const hexColorCodeRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+    if (!hexColorCodeRegex.test(color)) {
+        throw new Error("Invalid color code");
+    }
+    return color;
+};
diff --git a/src/visGeometry/index.ts b/src/visGeometry/index.ts
index a2291b52..b4b83c7a 100644
--- a/src/visGeometry/index.ts
+++ b/src/visGeometry/index.ts
@@ -30,7 +30,7 @@ import * as EssentialsPlugin from "@tweakpane/plugin-essentials";
 import { ButtonGridApi } from "@tweakpane/plugin-essentials/dist/types/button-grid/api/button-grid";
 import jsLogger from "js-logger";
 import { ILogger, ILogLevel } from "js-logger";
-import { cloneDeep, noop } from "lodash";
+import { cloneDeep, isEqual, map, noop, round } from "lodash";
 
 import VisAgent from "./VisAgent";
 import VisTypes from "../simularium/VisTypes";
@@ -146,7 +146,6 @@ class VisGeometry {
     public agentPathGroup: Group;
     public instancedMeshGroup: Group;
     public idColorMapping: Map<number, number>;
-    private isIdColorMappingSet: boolean;
     private supportsWebGL2Rendering: boolean;
     private lodBias: number;
     private lodDistanceStops: number[];
@@ -181,7 +180,6 @@ class VisGeometry {
         this.geometryStore = new GeometryStore(loggerLevel);
         this.scaleMapping = new Map<number, number>();
         this.idColorMapping = new Map<number, number>();
-        this.isIdColorMappingSet = false;
         this.followObjectId = NO_AGENT;
         this.visAgents = [];
         this.visAgentInstances = new Map<number, VisAgent>();
@@ -1086,7 +1084,25 @@ class VisGeometry {
         }
     }
 
-    public addNewColor(color: number | string): void {
+    private indexOfColor(color: number[]) {
+        const colorArray = this.colorsData;
+        const colorToCheck = map(color, (num) => round(num, 6));
+        for (let i = 0; i < colorArray.length - 3; i += 4) {
+            const index = i / 4;
+            const currentColor = [
+                round(this.colorsData[i], 6),
+                round(this.colorsData[i + 1], 6),
+                round(this.colorsData[i + 2], 6),
+                this.colorsData[i + 3],
+            ];
+            if (isEqual(currentColor, colorToCheck)) {
+                return index;
+            }
+        }
+        return -1;
+    }
+
+    public addNewColor(color: number | string): number {
         const colorNumber = convertColorStringToNumber(color);
         const newColor = [
             ((colorNumber & 0x00ff0000) >> 16) / 255.0,
@@ -1094,10 +1110,18 @@ class VisGeometry {
             ((colorNumber & 0x000000ff) >> 0) / 255.0,
             1.0,
         ];
+        const currentIndex = this.indexOfColor(newColor);
+        if (currentIndex !== -1) {
+            return currentIndex;
+        }
+
+        const newIndex = this.colorsData.length;
         const newArray = [...this.colorsData, ...newColor];
         const newColorData = new Float32Array(newArray.length);
         newColorData.set(newArray);
         this.colorsData = newColorData;
+        this.renderer.updateColors(this.colorsData.length / 4, this.colorsData);
+        return newIndex;
     }
 
     public createMaterials(colors: (number | string)[]): void {
@@ -1108,7 +1132,6 @@ class VisGeometry {
 
     public clearColorMapping(): void {
         this.idColorMapping.clear();
-        this.isIdColorMappingSet = false;
     }
 
     private getColorIndexForTypeId(typeId: number): number {
@@ -1146,14 +1169,14 @@ class VisGeometry {
          * @param ids agent ids that should all have the same color
          * @param colorId index into the color array
          */
-        if (this.isIdColorMappingSet) {
-            throw new FrontEndError(
-                "Attempted to set agent-color after color mapping was finalized"
-            );
-        }
         ids.forEach((id) => this.setColorForId(id, colorId));
     }
 
+    public applyColorToAgents(agentIds: number[], colorId: number): void {
+        this.setColorForIds(agentIds, colorId);
+        this.updateScene(this.currentSceneAgents);
+    }
+
     public getColorForIndex(index: number): Color {
         return new Color(
             this.colorsData[index * 4],
@@ -1162,10 +1185,6 @@ class VisGeometry {
         );
     }
 
-    public finalizeIdColorMapping(): void {
-        this.isIdColorMappingSet = true;
-    }
-
     /**
      *   Data Management
      */
@@ -1563,9 +1582,6 @@ class VisGeometry {
      *   Update Scene
      **/
     private updateScene(agents: AgentData[]): void {
-        if (!this.isIdColorMappingSet) {
-            return;
-        }
         this.currentSceneAgents = agents;
 
         // values for updating agent path