diff --git a/constants/colors.js b/constants/colors.js
new file mode 100644
index 0000000..b178ea8
--- /dev/null
+++ b/constants/colors.js
@@ -0,0 +1,6 @@
+const Colors = {
+  primary500: "#282A35",
+  accent500: "#A587DD",
+};
+
+export default Colors;
diff --git a/navigation/Navigator.js b/navigation/Navigator.js
index 80f2783..c81174b 100644
--- a/navigation/Navigator.js
+++ b/navigation/Navigator.js
@@ -2,6 +2,8 @@ import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { NavigationContainer } from "@react-navigation/native";
 import Icon from "react-native-vector-icons/Ionicons";
 
+import Colors from "../constants/colors";
+
 import MainScreen from "../screens/MainScreen";
 
 const Tab = createBottomTabNavigator();
@@ -12,7 +14,7 @@ function Navigator() {
       <Tab.Navigator
         screenOptions={{
           headerStyle: {
-            backgroundColor: "#A587DD",
+            backgroundColor: Colors.accent500,
           },
         }}
       >
diff --git a/screens/MainScreen.js b/screens/MainScreen.js
index 8401ed2..7099064 100644
--- a/screens/MainScreen.js
+++ b/screens/MainScreen.js
@@ -1,5 +1,6 @@
 import { StatusBar } from "expo-status-bar";
 import { Text, View, StyleSheet } from "react-native";
+import Colors from "../constants/colors";
 
 import FloatingButton from "../components/FloatingButton";
 
@@ -18,7 +19,7 @@ export default MainScreen;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: "#282A35",
+    backgroundColor: Colors.primary500,
     alignItems: "center",
     justifyContent: "center",
   },