diff --git a/protocol-designer/src/components/ColorPicker/index.tsx b/protocol-designer/src/components/ColorPicker/index.tsx
index 32a7618d520..f097b13c82c 100644
--- a/protocol-designer/src/components/ColorPicker/index.tsx
+++ b/protocol-designer/src/components/ColorPicker/index.tsx
@@ -5,14 +5,17 @@ import { colors } from '../swatchColors'
 import styles from './ColorPicker.css'
 
 interface ColorPickerProps {
-  liquidId: string
+  value: string
+  onChange: (hex: ColorResult['hex']) => void
 }
 
 export function ColorPicker(props: ColorPickerProps): JSX.Element {
   const [showColorPicker, setShowColorPicker] = React.useState<boolean>(false)
-  const [currentColor, setCurrentColor] = React.useState<ColorResult['hex']>(
-    '#000'
-  )
+
+  React.useEffect(() => {
+    console.log(props.value)
+  }, [props.value])
+
   return (
     <div>
       <div
@@ -22,7 +25,7 @@ export function ColorPicker(props: ColorPickerProps): JSX.Element {
         <div
           className={styles.color}
           style={{
-            backgroundColor: currentColor,
+            backgroundColor: props.value,
           }}
         />
       </div>
@@ -34,9 +37,9 @@ export function ColorPicker(props: ColorPickerProps): JSX.Element {
           />
           <TwitterPicker
             colors={colors}
-            color={currentColor}
-            onChange={color => {
-              setCurrentColor(color.hex)
+            color={props.value}
+            onChange={(color, event) => {
+              props.onChange(color.hex)
               setShowColorPicker(showColorPicker => !showColorPicker)
             }}
             triangle="top-left"
diff --git a/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx b/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx
index 5d870d2274e..063cf9f7297 100644
--- a/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx
+++ b/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx
@@ -15,6 +15,7 @@ import formStyles from '../forms/forms.css'
 
 import { LiquidGroup } from '../../labware-ingred/types'
 import { ColorPicker } from '../ColorPicker'
+import { ColorResult } from 'react-color'
 
 type Props = LiquidGroup & {
   canDelete: boolean
@@ -25,6 +26,7 @@ type Props = LiquidGroup & {
 
 interface LiquidEditFormValues {
   name: string
+  displayColor: string
   description?: string | null
   serialize?: boolean
   [key: string]: unknown
@@ -38,6 +40,7 @@ export const liquidEditFormSchema: Yup.Schema<
       name: i18n.t('form.liquid_edit.name'),
     })
   ),
+  displayColor: Yup.string(),
   description: Yup.string(),
   serialize: Yup.boolean(),
 })
@@ -47,10 +50,15 @@ export function LiquidEditForm(props: Props): JSX.Element {
 
   const initialValues: LiquidEditFormValues = {
     name: props.name || '',
+    displayColor: props.displayColor || '',
     description: props.description || '',
     serialize: props.serialize || false,
   }
 
+  const [currentColor, setCurrentColor] = React.useState<ColorResult['hex']>(
+    props.displayColor || '#000'
+  )
+
   return (
     <Formik
       initialValues={initialValues}
@@ -58,6 +66,7 @@ export function LiquidEditForm(props: Props): JSX.Element {
       onSubmit={(values: LiquidEditFormValues) => {
         saveForm({
           name: values.name,
+          displayColor: currentColor,
           description: values.description || null,
           serialize: values.serialize || false,
         })
@@ -103,7 +112,10 @@ export function LiquidEditForm(props: Props): JSX.Element {
                   />
                 </FormGroup>
                 <FormGroup label={'Liquid'} className={formStyles.column_1_3}>
-                  <ColorPicker liquidId={'1'} />
+                  <ColorPicker
+                    value={currentColor}
+                    onChange={setCurrentColor}
+                  />
                 </FormGroup>
               </div>
             </section>
diff --git a/protocol-designer/src/components/LiquidsPage/index.tsx b/protocol-designer/src/components/LiquidsPage/index.tsx
index f6a5e4a20ef..0db89d5dc86 100644
--- a/protocol-designer/src/components/LiquidsPage/index.tsx
+++ b/protocol-designer/src/components/LiquidsPage/index.tsx
@@ -63,6 +63,8 @@ function mapStateToProps(state: BaseState): SP {
     name: selectedIngredFields.name,
     // @ts-expect-error(sa, 2021-6-22): description might not exist
     description: selectedIngredFields.description,
+    // @ts-expect-error(sh, 2022-6-28): displayColor might not exist
+    displayColor: selectedIngredFields.displayColor,
     // @ts-expect-error(sa, 2021-6-22): serialize might not exist
     serialize: selectedIngredFields.serialize,
   }
diff --git a/protocol-designer/src/labware-ingred/types.ts b/protocol-designer/src/labware-ingred/types.ts
index 92dd0dba100..61f9b722090 100644
--- a/protocol-designer/src/labware-ingred/types.ts
+++ b/protocol-designer/src/labware-ingred/types.ts
@@ -28,11 +28,13 @@ export interface WellContentsByLabware {
 export type OrderedLiquids = Array<{
   ingredientId: string
   name: string | null | undefined
+  displayColor: string
 }>
 // TODO: Ian 2018-10-15 audit & rename these confusing types
 export interface LiquidGroup {
   name: string | null | undefined
   description: string | null | undefined
+  displayColor: string
   serialize: boolean
 }
 export type IngredInputs = LiquidGroup & {