diff --git a/frappe/public/js/frappe/form/controls/color.js b/frappe/public/js/frappe/form/controls/color.js
index 7890ea755c..bf04581abd 100644
--- a/frappe/public/js/frappe/form/controls/color.js
+++ b/frappe/public/js/frappe/form/controls/color.js
@@ -76,7 +76,7 @@ frappe.ui.form.ControlColor = frappe.ui.form.ControlData.extend({
 	refresh() {
 		this._super();
 		let color = this.get_color();
-		if (this.picker.color !== color) {
+		if (this.picker && this.picker.color !== color) {
 			this.picker.color = color;
 			this.picker.refresh();
 		}
diff --git a/frappe/public/js/frappe/form/formatters.js b/frappe/public/js/frappe/form/formatters.js
index 4578cf2ded..f792d5b173 100644
--- a/frappe/public/js/frappe/form/formatters.js
+++ b/frappe/public/js/frappe/form/formatters.js
@@ -293,6 +293,12 @@ frappe.form.formatters = {
 			return frappe.format(value, link_field, options, row);
 		});
 		return formatted_values.join(', ');
+	},
+	Color: (value) => {
+		return `<div>
+			<div class="selected-color" style="background-color: ${value}"></div>
+			<span class="color-value">${value}</span>
+		</div>`;
 	}
 }
 
diff --git a/frappe/public/scss/common/color_picker.scss b/frappe/public/scss/common/color_picker.scss
index 627ab12a2e..7ab9b0c504 100644
--- a/frappe/public/scss/common/color_picker.scss
+++ b/frappe/public/scss/common/color_picker.scss
@@ -92,7 +92,7 @@
 	}
 }
 
-.frappe-control[data-fieldtype='Color']  {
+.frappe-control[data-fieldtype='Color'] {
 	input {
 		padding-left: 40px;
 	}
@@ -104,11 +104,20 @@
 		background-color: red;
 		position: absolute;
 		top: calc(50% + 1px);
-		left: 5px;
+		left: 8px;
 		content: ' ';
 		&.no-value {
 			background: url('/assets/frappe/images/color-circle.png');
 			background-size: contain;
 		}
 	}
-}
\ No newline at end of file
+	.like-disabled-input {
+		.color-value {
+			padding-left: 25px;
+		}
+		.selected-color {
+			top: 20%;
+			cursor: default;
+		}
+	}
+}