diff --git a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/model/Types.kt b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/model/Types.kt
index fe5b87d06..abb447526 100644
--- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/model/Types.kt
+++ b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/model/Types.kt
@@ -29,7 +29,7 @@ data class SpaceBox(val top: Int, val right: Int, val bottom: Int, val left: Int
 }
 
 @kotlinx.serialization.Serializable
-data class Color(val r: Int, val g: Int, val b: Int, val alpha: Int) {
+data class Color(val r: Int, val g: Int, val b: Int, val a: Int) {
   companion object {
     fun fromColor(color: Int): Color {
       val alpha: Int = (color shr 24) and 0xFF / 255
diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx
index 2b891063f..6c2e077e6 100644
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx
@@ -40,9 +40,11 @@ const TextValue = styled.span(TextAttributeValueStyle);
 const EnumValue = styled.span(EnumAttributeValueStyle);
 const ObjectContainer = styled.div(ObjectContainerStyle);
 const CenteredContentContainer = styled.div(AutoMarginStyle);
+
 type NamedAttributeInspectorProps = {
   name: string;
 };
+
 const NamedAttributeInspector: React.FC<NamedAttributeInspectorProps> = ({
   name,
   children,
@@ -119,9 +121,10 @@ function create(
       );
     case 'color':
       return (
-        <NamedAttributeInspector name={displayableName(name)}>
-          <ColorInspector color={inspectable.value} />
-        </NamedAttributeInspector>
+        <ColorInspector
+          name={displayableName(name)}
+          color={inspectable.value}
+        />
       );
     case 'size':
       return (
diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/ColorInspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/ColorInspector.tsx
index 27054a841..6bc67cd5a 100644
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/ColorInspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/ColorInspector.tsx
@@ -8,46 +8,65 @@
  */
 
 import React from 'react';
-import {Popover} from 'antd';
+import {Col, Popover, Row} from 'antd';
 import {Color} from '../../../types';
-import {SketchPicker, RGBColor, ColorResult} from 'react-color';
+import {SketchPicker, ColorResult} from 'react-color';
 import {styled} from 'flipper-plugin';
-import {ColorInnerButtonStyle, ColorOuterButtonStyle} from './Styles';
+import {
+  AutoMarginStyle,
+  ColorInnerButtonStyle,
+  ColorOuterButtonStyle,
+  NumberAttributeValueStyle,
+  ObjectContainerStyle,
+  RowStyle,
+} from './Styles';
+import {theme} from 'flipper-plugin';
 
-type State = {
-  color: RGBColor;
+type Props = {
+  name: string;
+  color: Color;
 };
 
+const DefaultColor: Color = {
+  r: 255,
+  g: 255,
+  b: 255,
+  a: 1,
+};
+
+const CenteredContentContainer = styled.div(AutoMarginStyle);
+const ObjectContainer = styled.div(ObjectContainerStyle);
+const NumberValue = styled.span(NumberAttributeValueStyle);
 const OuterColorButton = styled.div(ColorOuterButtonStyle);
 const InnerColorButton = styled.div(ColorInnerButtonStyle);
 
-class ColorInspector extends React.Component<{color: Color}> {
-  state: State = {
-    color: this.props.color ?? {
-      r: 255,
-      g: 255,
-      b: 255,
-      a: 1,
-    },
-  };
+const RGBA = styled.span({color: theme.semanticColors.numberValue});
 
+const RGBAtoHEX = (color: Color) => {
+  const hex =
+    (color.r | (1 << 8)).toString(16).slice(1) +
+    (color.g | (1 << 8)).toString(16).slice(1) +
+    (color.b | (1 << 8)).toString(16).slice(1);
+
+  return '#' + hex.toUpperCase();
+};
+
+class ColorPicker extends React.Component<{color: Color}> {
   handleChange = (_color: ColorResult) => {
     // No color changes to be applied at this stage.
-    // this.setState({color: color.rgb});
   };
-
   render() {
     return (
       <Popover
         placement="bottomRight"
         content={
-          <SketchPicker color={this.state.color} onChange={this.handleChange} />
+          <SketchPicker color={this.props.color} onChange={this.handleChange} />
         }
         trigger="click">
         <OuterColorButton role="button" tabIndex={0}>
           <InnerColorButton
             style={{
-              background: `rgba(${this.state.color.r}, ${this.state.color.g}, ${this.state.color.b}, ${this.state.color.a})`,
+              background: `rgba(${this.props.color.r}, ${this.props.color.g}, ${this.props.color.b}, ${this.props.color.a})`,
             }}
           />
         </OuterColorButton>
@@ -56,4 +75,64 @@ class ColorInspector extends React.Component<{color: Color}> {
   }
 }
 
+const ColorHEX: React.FC<{color: Color}> = ({color}) => (
+  <NumberValue>{RGBAtoHEX(color)}</NumberValue>
+);
+
+const ColorRGBA: React.FC<{color: Color}> = ({color}) => (
+  <>
+    r: <RGBA>{color.r}</RGBA> g: <RGBA>{color.g}</RGBA> b:{' '}
+    <RGBA>{color.b}</RGBA> a: <RGBA>{color.a}</RGBA>
+  </>
+);
+
+class ColorInspector extends React.Component<Props> {
+  render() {
+    return (
+      <>
+        <Row>
+          <Col span={8} style={AutoMarginStyle}>
+            {this.props.name}
+          </Col>
+          <Col span={16}>
+            <CenteredContentContainer>
+              <ColorPicker color={this.props.color} />
+            </CenteredContentContainer>
+          </Col>
+        </Row>
+        <Row style={RowStyle}>
+          <Col span={8} style={AutoMarginStyle}>
+            <ObjectContainer
+              style={{
+                paddingLeft: 2,
+              }}>
+              Hex
+            </ObjectContainer>
+          </Col>
+          <Col span={16}>
+            <CenteredContentContainer>
+              <ColorHEX color={this.props.color} />
+            </CenteredContentContainer>
+          </Col>
+        </Row>
+        <Row style={RowStyle}>
+          <Col span={8} style={AutoMarginStyle}>
+            <ObjectContainer
+              style={{
+                paddingLeft: 2,
+              }}>
+              RGBA
+            </ObjectContainer>
+          </Col>
+          <Col span={16}>
+            <CenteredContentContainer>
+              <ColorRGBA color={this.props.color} />
+            </CenteredContentContainer>
+          </Col>
+        </Row>
+      </>
+    );
+  }
+}
+
 export default ColorInspector;
diff --git a/desktop/plugins/public/ui-debugger/types.tsx b/desktop/plugins/public/ui-debugger/types.tsx
index f712ba4d1..d1df5635b 100644
--- a/desktop/plugins/public/ui-debugger/types.tsx
+++ b/desktop/plugins/public/ui-debugger/types.tsx
@@ -115,7 +115,7 @@ export type Color = {
   r: number;
   g: number;
   b: number;
-  alpha: number;
+  a: number;
 };
 
 export type Snapshot = string;