diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap
index 0eb72257..be964795 100644
--- a/__tests__/__snapshots__/Storyshots.test.js.snap
+++ b/__tests__/__snapshots__/Storyshots.test.js.snap
@@ -40262,6 +40262,659 @@ exports[`Storyshots Message list message 1`] = `
         </View>
       </View>
     </View>
+    <Text
+      style={
+        Array [
+          Object {
+            "fontSize": 20,
+            "fontWeight": "300",
+            "marginLeft": 10,
+            "marginVertical": 30,
+          },
+          Object {
+            "color": "#0d0e12",
+          },
+          Object {
+            "marginBottom": 0,
+            "marginTop": 30,
+          },
+        ]
+      }
+    >
+      Colored attachments
+    </Text>
+    <View
+      accessible={true}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "opacity": 1,
+        }
+      }
+    >
+      <View>
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "column",
+                "paddingHorizontal": 14,
+                "paddingVertical": 4,
+                "width": "100%",
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Object {
+                "flexDirection": "row",
+              }
+            }
+          >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderRadius": 4,
+                    "height": 36,
+                    "width": 36,
+                  },
+                  Object {
+                    "marginTop": 4,
+                  },
+                ]
+              }
+            >
+              <View
+                accessible={true}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Object {
+                    "opacity": 1,
+                  }
+                }
+              >
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "overflow": "hidden",
+                      },
+                      Object {
+                        "borderRadius": 4,
+                        "height": 36,
+                        "width": 36,
+                      },
+                    ]
+                  }
+                >
+                  <FastImageView
+                    resizeMode="cover"
+                    source={
+                      Object {
+                        "headers": undefined,
+                        "priority": "high",
+                        "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=36",
+                      }
+                    }
+                    style={
+                      Object {
+                        "bottom": 0,
+                        "left": 0,
+                        "position": "absolute",
+                        "right": 0,
+                        "top": 0,
+                      }
+                    }
+                  />
+                </View>
+              </View>
+            </View>
+            <View
+              style={
+                Array [
+                  Object {
+                    "flex": 1,
+                    "marginLeft": 46,
+                  },
+                  Object {
+                    "marginLeft": 10,
+                  },
+                ]
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "flex": 1,
+                    "flexDirection": "row",
+                  }
+                }
+              >
+                <View
+                  accessible={true}
+                  focusable={true}
+                  onClick={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "flex": 1,
+                      "flexDirection": "row",
+                      "opacity": 1,
+                    }
+                  }
+                >
+                  <Text
+                    numberOfLines={1}
+                    style={
+                      Array [
+                        Object {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "System",
+                          "fontSize": 16,
+                          "fontWeight": "500",
+                          "lineHeight": 22,
+                          "textAlign": "left",
+                        },
+                        Object {
+                          "color": "#0d0e12",
+                        },
+                      ]
+                    }
+                  >
+                    diego.mello
+                  </Text>
+                </View>
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "backgroundColor": "transparent",
+                        "fontFamily": "System",
+                        "fontSize": 12,
+                        "fontWeight": "400",
+                        "marginLeft": 8,
+                        "textAlign": "left",
+                      },
+                      Object {
+                        "color": "#9ca2a8",
+                      },
+                    ]
+                  }
+                >
+                  10:00 AM
+                </Text>
+              </View>
+              <View />
+              <View
+                accessible={true}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "alignSelf": "flex-start",
+                    "backgroundColor": "rgba(255, 0, 0, 0.2)",
+                    "borderColor": "red",
+                    "borderRadius": 4,
+                    "borderWidth": 1,
+                    "flex": 1,
+                    "flexDirection": "row",
+                    "marginTop": 6,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <View
+                  style={
+                    Object {
+                      "borderRadius": 4,
+                      "flex": 1,
+                      "flexDirection": "column",
+                      "padding": 15,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "row",
+                        "flexWrap": "wrap",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Array [
+                          Object {
+                            "flexDirection": "column",
+                            "padding": 10,
+                          },
+                          Object {
+                            "width": "50%",
+                          },
+                        ]
+                      }
+                    >
+                      <Text
+                        style={
+                          Array [
+                            Object {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "System",
+                              "fontSize": 14,
+                              "fontWeight": "600",
+                              "textAlign": "left",
+                            },
+                            Object {
+                              "color": "#2f343d",
+                            },
+                          ]
+                        }
+                      >
+                        Field 1
+                      </Text>
+                      <Text
+                        style={
+                          Array [
+                            Object {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "System",
+                              "fontSize": 14,
+                              "fontWeight": "400",
+                              "textAlign": "left",
+                            },
+                            Object {
+                              "color": "#2f343d",
+                            },
+                          ]
+                        }
+                      >
+                        Value 1
+                      </Text>
+                    </View>
+                    <View
+                      style={
+                        Array [
+                          Object {
+                            "flexDirection": "column",
+                            "padding": 10,
+                          },
+                          Object {
+                            "width": "50%",
+                          },
+                        ]
+                      }
+                    >
+                      <Text
+                        style={
+                          Array [
+                            Object {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "System",
+                              "fontSize": 14,
+                              "fontWeight": "600",
+                              "textAlign": "left",
+                            },
+                            Object {
+                              "color": "#2f343d",
+                            },
+                          ]
+                        }
+                      >
+                        Field 2
+                      </Text>
+                      <Text
+                        style={
+                          Array [
+                            Object {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "System",
+                              "fontSize": 14,
+                              "fontWeight": "400",
+                              "textAlign": "left",
+                            },
+                            Object {
+                              "color": "#2f343d",
+                            },
+                          ]
+                        }
+                      >
+                        Value 2
+                      </Text>
+                    </View>
+                  </View>
+                </View>
+              </View>
+              <View
+                accessible={true}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "alignSelf": "flex-start",
+                    "backgroundColor": "rgba(0, 128, 0, 0.2)",
+                    "borderColor": "green",
+                    "borderRadius": 4,
+                    "borderWidth": 1,
+                    "flex": 1,
+                    "flexDirection": "row",
+                    "marginTop": 4,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <View
+                  style={
+                    Object {
+                      "borderRadius": 4,
+                      "flex": 1,
+                      "flexDirection": "column",
+                      "padding": 15,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "row",
+                        "flexWrap": "wrap",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Array [
+                          Object {
+                            "flexDirection": "column",
+                            "padding": 10,
+                          },
+                          Object {
+                            "width": "50%",
+                          },
+                        ]
+                      }
+                    >
+                      <Text
+                        style={
+                          Array [
+                            Object {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "System",
+                              "fontSize": 14,
+                              "fontWeight": "600",
+                              "textAlign": "left",
+                            },
+                            Object {
+                              "color": "#2f343d",
+                            },
+                          ]
+                        }
+                      >
+                        Field 1
+                      </Text>
+                      <Text
+                        style={
+                          Array [
+                            Object {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "System",
+                              "fontSize": 14,
+                              "fontWeight": "400",
+                              "textAlign": "left",
+                            },
+                            Object {
+                              "color": "#2f343d",
+                            },
+                          ]
+                        }
+                      >
+                        Value 1
+                      </Text>
+                    </View>
+                    <View
+                      style={
+                        Array [
+                          Object {
+                            "flexDirection": "column",
+                            "padding": 10,
+                          },
+                          Object {
+                            "width": "50%",
+                          },
+                        ]
+                      }
+                    >
+                      <Text
+                        style={
+                          Array [
+                            Object {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "System",
+                              "fontSize": 14,
+                              "fontWeight": "600",
+                              "textAlign": "left",
+                            },
+                            Object {
+                              "color": "#2f343d",
+                            },
+                          ]
+                        }
+                      >
+                        Field 2
+                      </Text>
+                      <Text
+                        style={
+                          Array [
+                            Object {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "System",
+                              "fontSize": 14,
+                              "fontWeight": "400",
+                              "textAlign": "left",
+                            },
+                            Object {
+                              "color": "#2f343d",
+                            },
+                          ]
+                        }
+                      >
+                        Value 2
+                      </Text>
+                    </View>
+                  </View>
+                </View>
+              </View>
+              <View
+                accessible={true}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "alignSelf": "flex-start",
+                    "backgroundColor": "rgba(0, 0, 255, 0.2)",
+                    "borderColor": "blue",
+                    "borderRadius": 4,
+                    "borderWidth": 1,
+                    "flex": 1,
+                    "flexDirection": "row",
+                    "marginTop": 4,
+                    "opacity": 1,
+                  }
+                }
+              >
+                <View
+                  style={
+                    Object {
+                      "borderRadius": 4,
+                      "flex": 1,
+                      "flexDirection": "column",
+                      "padding": 15,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      Object {
+                        "flex": 1,
+                        "flexDirection": "row",
+                        "flexWrap": "wrap",
+                      }
+                    }
+                  >
+                    <View
+                      style={
+                        Array [
+                          Object {
+                            "flexDirection": "column",
+                            "padding": 10,
+                          },
+                          Object {
+                            "width": "50%",
+                          },
+                        ]
+                      }
+                    >
+                      <Text
+                        style={
+                          Array [
+                            Object {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "System",
+                              "fontSize": 14,
+                              "fontWeight": "600",
+                              "textAlign": "left",
+                            },
+                            Object {
+                              "color": "#2f343d",
+                            },
+                          ]
+                        }
+                      >
+                        Field 1
+                      </Text>
+                      <Text
+                        style={
+                          Array [
+                            Object {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "System",
+                              "fontSize": 14,
+                              "fontWeight": "400",
+                              "textAlign": "left",
+                            },
+                            Object {
+                              "color": "#2f343d",
+                            },
+                          ]
+                        }
+                      >
+                        Value 1
+                      </Text>
+                    </View>
+                    <View
+                      style={
+                        Array [
+                          Object {
+                            "flexDirection": "column",
+                            "padding": 10,
+                          },
+                          Object {
+                            "width": "50%",
+                          },
+                        ]
+                      }
+                    >
+                      <Text
+                        style={
+                          Array [
+                            Object {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "System",
+                              "fontSize": 14,
+                              "fontWeight": "600",
+                              "textAlign": "left",
+                            },
+                            Object {
+                              "color": "#2f343d",
+                            },
+                          ]
+                        }
+                      >
+                        Field 2
+                      </Text>
+                      <Text
+                        style={
+                          Array [
+                            Object {
+                              "backgroundColor": "transparent",
+                              "fontFamily": "System",
+                              "fontSize": 14,
+                              "fontWeight": "400",
+                              "textAlign": "left",
+                            },
+                            Object {
+                              "color": "#2f343d",
+                            },
+                          ]
+                        }
+                      >
+                        Value 2
+                      </Text>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
     <Text
       style={
         Array [
diff --git a/app/containers/message/Reply.js b/app/containers/message/Reply.js
index 88c748ba..d05668dd 100644
--- a/app/containers/message/Reply.js
+++ b/app/containers/message/Reply.js
@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
 import moment from 'moment';
+import { transparentize } from 'color2k';
 import { dequal } from 'dequal';
 
 import Touchable from './Touchable';
@@ -158,8 +159,8 @@ const Reply = React.memo(({
 					index > 0 && styles.marginTop,
 					attachment.description && styles.marginBottom,
 					{
-						backgroundColor: themes[theme].chatComponentBackground,
-						borderColor: themes[theme].borderColor
+						backgroundColor: attachment.color ? transparentize(attachment.color, 0.80) : themes[theme].chatComponentBackground,
+						borderColor: attachment.color || themes[theme].borderColor
 					}
 				]}
 				background={Touchable.Ripple(themes[theme].bannerBackground)}
diff --git a/package.json b/package.json
index 901e7095..767faa33 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "@rocket.chat/ui-kit": "0.13.0",
     "bugsnag-react-native": "2.23.10",
     "bytebuffer": "^5.0.1",
+    "color2k": "^1.2.2",
     "commonmark": "git+https://github.com/RocketChat/commonmark.js.git",
     "commonmark-react-renderer": "git+https://github.com/RocketChat/commonmark-react-renderer.git",
     "dequal": "^2.0.2",
diff --git a/storybook/stories/Message.js b/storybook/stories/Message.js
index 7e8e0664..da1517a9 100644
--- a/storybook/stories/Message.js
+++ b/storybook/stories/Message.js
@@ -740,6 +740,44 @@ export default ({ theme }) => {
 				}]}
 			/>
 
+			<Separator title='Colored attachments' theme={theme} />
+			<Message
+				attachments={[{
+					color: 'red',
+					fields: [{
+						title: 'Field 1',
+						value: 'Value 1',
+						short: true
+					}, {
+						title: 'Field 2',
+						value: 'Value 2',
+						short: true
+					}]
+				}, {
+					color: 'green',
+					fields: [{
+						title: 'Field 1',
+						value: 'Value 1',
+						short: true
+					}, {
+						title: 'Field 2',
+						value: 'Value 2',
+						short: true
+					}]
+				}, {
+					color: 'blue',
+					fields: [{
+						title: 'Field 1',
+						value: 'Value 1',
+						short: true
+					}, {
+						title: 'Field 2',
+						value: 'Value 2',
+						short: true
+					}]
+				}]}
+			/>
+
 			<Separator title='Broadcast' theme={theme} />
 			<Message msg='Broadcasted message' broadcast replyBroadcast={() => alert('broadcast!')} />
 
diff --git a/yarn.lock b/yarn.lock
index 633d519b..2938649e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5140,6 +5140,11 @@ color-support@^1.1.3:
   resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
   integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
 
+color2k@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/color2k/-/color2k-1.2.2.tgz#468b98ae35141c802dcfa1fb594d396baaa052d3"
+  integrity sha512-uxfa7byLts8cg2EGGZB6ZJTcUOvQt9V6sNbaVf5luAFLFfVqfl1srPL88NMwVFrO/vpZnAUxRdBkiuVQ99lnHg==
+
 color@^3.1.0:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e"