diff --git a/js/common/NLDColorProfile.js b/js/common/NLDColorProfile.js
new file mode 100644
index 0000000..b631682
--- /dev/null
+++ b/js/common/NLDColorProfile.js
@@ -0,0 +1,22 @@
+// Copyright 2021, University of Colorado Boulder
+
+/**
+ * The color profile for this sim.
+ *
+ * @author Saurabh Totey
+ */
+
+import ProfileColorProperty from '../../../scenery/js/util/ProfileColorProperty.js';
+import numberLineDistance from '../numberLineDistance.js';
+
+const NLDColorProfile = {
+  genericScreenBackgroundColorProperty: new ProfileColorProperty( 'genericBackground', {
+    default: 'rgb( 245, 255, 254 )'
+  } ),
+  exploreScreenBackgroundColorProperty: new ProfileColorProperty( 'exploreBackground', {
+    default: 'rgb( 254, 247, 233 )'
+  } )
+};
+
+numberLineDistance.register( 'NLDColorProfile', NLDColorProfile );
+export default NLDColorProfile;
diff --git a/js/explore/NLDExploreScreen.js b/js/explore/NLDExploreScreen.js
index f6456a2..cf713d3 100644
--- a/js/explore/NLDExploreScreen.js
+++ b/js/explore/NLDExploreScreen.js
@@ -8,7 +8,6 @@
 
 import Screen from '../../../joist/js/Screen.js';
 import numberLineDistanceStrings from '../numberLineDistanceStrings.js';
-import Property from '../../../axon/js/Property.js';
 import numberLineDistance from '../numberLineDistance.js';
 import NLDExploreModel from './model/NLDExploreModel.js';
 import NLDExploreScreenView from './view/NLDExploreScreenView.js';
@@ -16,6 +15,7 @@ import exploreHomeIcon from '../../images/explore-home-icon_png.js';
 import exploreNavbarIcon from '../../images/explore-navbar-icon_png.js';
 import ScreenIcon from '../../../joist/js/ScreenIcon.js';
 import Image from '../../../scenery/js/nodes/Image.js';
+import NLDColorProfile from '../common/NLDColorProfile.js';
 
 const screenExploreString = numberLineDistanceStrings.screen.explore;
 
@@ -28,7 +28,7 @@ class NLDExploreScreen extends Screen {
   constructor( tandem ) {
     const options = {
       name: screenExploreString,
-      backgroundColorProperty: new Property( 'rgb( 254, 247, 233 )' ),
+      backgroundColorProperty: NLDColorProfile.exploreScreenBackgroundColorProperty,
       homeScreenIcon: new ScreenIcon( new Image( exploreHomeIcon ), {
         maxIconWidthProportion: 1,
         maxIconHeightProportion: 1
diff --git a/js/generic/NLDGenericScreen.js b/js/generic/NLDGenericScreen.js
index 58f62b3..407da1e 100644
--- a/js/generic/NLDGenericScreen.js
+++ b/js/generic/NLDGenericScreen.js
@@ -8,7 +8,6 @@
 
 import Screen from '../../../joist/js/Screen.js';
 import numberLineDistanceStrings from '../numberLineDistanceStrings.js';
-import Property from '../../../axon/js/Property.js';
 import numberLineDistance from '../numberLineDistance.js';
 import NLDGenericModel from './model/NLDGenericModel.js';
 import NLDGenericScreenView from './view/NLDGenericScreenView.js';
@@ -16,6 +15,7 @@ import genericHomeIcon from '../../images/generic-home-icon_png.js';
 import genericNavbarIcon from '../../images/generic-navbar-icon_png.js';
 import ScreenIcon from '../../../joist/js/ScreenIcon.js';
 import Image from '../../../scenery/js/nodes/Image.js';
+import NLDColorProfile from '../common/NLDColorProfile.js';
 
 const screenGenericString = numberLineDistanceStrings.screen.generic;
 
@@ -28,7 +28,7 @@ class NLDGenericScreen extends Screen {
   constructor( tandem ) {
     const options = {
       name: screenGenericString,
-      backgroundColorProperty: new Property( 'rgb( 245, 255, 254 )' ),
+      backgroundColorProperty: NLDColorProfile.genericScreenBackgroundColorProperty,
       homeScreenIcon: new ScreenIcon( new Image( genericHomeIcon ), {
         maxIconWidthProportion: 1,
         maxIconHeightProportion: 1