diff --git a/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx b/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx
index 8921e92f9b2..bd4c533dc97 100644
--- a/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx
+++ b/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx
@@ -13,7 +13,7 @@ import {
 } from "@ourworldindata/utils"
 import { VerticalAxis, HorizontalAxis, DualAxis } from "./Axis"
 import classNames from "classnames"
-import { GRAPHER_DARK_TEXT } from "../core/GrapherConstants"
+import { GRAPHER_DARK_TEXT } from "../color/ColorConstants"
 import { ScaleType, DetailsMarker } from "@ourworldindata/types"
 
 const dasharrayFromFontSize = (fontSize: number): string => {
diff --git a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
index 242ddc08248..3f79cc7bdec 100644
--- a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
+++ b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
@@ -32,7 +32,6 @@ import {
 } from "@ourworldindata/types"
 import {
     BASE_FONT_SIZE,
-    GRAPHER_DARK_TEXT,
     GRAPHER_AXIS_LINE_WIDTH_THICK,
     GRAPHER_AXIS_LINE_WIDTH_DEFAULT,
     GRAPHER_AREA_OPACITY_DEFAULT,
@@ -69,7 +68,11 @@ import { SelectionArray } from "../selection/SelectionArray"
 import { ColorScheme } from "../color/ColorScheme"
 import { ColorScale, ColorScaleManager } from "../color/ColorScale"
 import { ColorScaleConfig } from "../color/ColorScaleConfig"
-import { OwidErrorColor, OwidNoDataGray } from "../color/ColorConstants"
+import {
+    GRAPHER_DARK_TEXT,
+    OWID_ERROR_COLOR,
+    OWID_NO_DATA_GRAY,
+} from "../color/ColorConstants"
 import { CategoricalBin, ColorScaleBin } from "../color/ColorScaleBin"
 import {
     HorizontalColorLegendManager,
@@ -780,7 +783,7 @@ export class DiscreteBarChart
     }
 
     defaultBaseColorScheme = ColorSchemeName.SingleColorDenim
-    defaultNoDataColor = OwidNoDataGray
+    defaultNoDataColor = OWID_NO_DATA_GRAY
     colorScale = this.props.manager.colorScaleOverride ?? new ColorScale(this)
 
     // End of color scale props
@@ -895,7 +898,7 @@ export class DiscreteBarChart
                 color:
                     color ??
                     this.valuesToColorsMap.get(value) ??
-                    OwidErrorColor,
+                    OWID_ERROR_COLOR,
             }
             return series
         })
diff --git a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
index 23fabd65955..df10e98a56a 100644
--- a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
+++ b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
@@ -19,7 +19,6 @@ import {
     BASE_FONT_SIZE,
     Patterns,
     STATIC_EXPORT_DETAIL_SPACING,
-    GRAPHER_BACKGROUND_DEFAULT,
     GRAPHER_FRAME_PADDING_VERTICAL,
     GRAPHER_FRAME_PADDING_HORIZONTAL,
 } from "../core/GrapherConstants"
@@ -53,6 +52,7 @@ import {
     ControlsRow,
     ControlsRowManager,
 } from "../controls/controlsRow/ControlsRow"
+import { GRAPHER_BACKGROUND_DEFAULT } from "../color/ColorConstants"
 
 export interface CaptionedChartManager
     extends ChartManager,
diff --git a/packages/@ourworldindata/grapher/src/color/ColorConstants.ts b/packages/@ourworldindata/grapher/src/color/ColorConstants.ts
index d9706e8593a..872602f59ed 100644
--- a/packages/@ourworldindata/grapher/src/color/ColorConstants.ts
+++ b/packages/@ourworldindata/grapher/src/color/ColorConstants.ts
@@ -1,2 +1,23 @@
-export const OwidNoDataGray = "#6e7581"
-export const OwidErrorColor = "ff0002"
+// gray shades
+export const GRAY_90 = "#4e4e4e"
+export const GRAY_80 = "#5b5b5b"
+export const GRAY_70 = "#858585"
+export const GRAY_60 = "#a1a1a1"
+export const GRAY_50 = "#c6c6c6"
+export const GRAY_30 = "#dadada"
+export const GRAY_20 = "#e7e7e7"
+export const GRAY_10 = "#f2f2f2"
+export const GRAY_5 = "#f7f7f7"
+
+export const GRAPHER_BACKGROUND_DEFAULT = "#ffffff"
+export const GRAPHER_BACKGROUND_BEIGE = "#fbf9f3"
+
+export const GRAPHER_DARK_TEXT = GRAY_80
+export const GRAPHER_LIGHT_TEXT = GRAY_70
+
+export const BACKGROUND_LINE_COLOR = GRAY_20
+export const BACKGROUND_TEXT_COLOR = GRAY_50
+export const BACKGROUND_DOT_COLOR = GRAY_30
+
+export const OWID_NO_DATA_GRAY = "#6e7581"
+export const OWID_ERROR_COLOR = "ff0002"
diff --git a/packages/@ourworldindata/grapher/src/color/ColorScale.ts b/packages/@ourworldindata/grapher/src/color/ColorScale.ts
index d72de54c41c..d5234ac6910 100644
--- a/packages/@ourworldindata/grapher/src/color/ColorScale.ts
+++ b/packages/@ourworldindata/grapher/src/color/ColorScale.ts
@@ -12,7 +12,7 @@ import {
 import { ColorSchemes } from "../color/ColorSchemes"
 import { ColorScheme } from "../color/ColorScheme"
 import { ColorScaleBin, NumericBin, CategoricalBin } from "./ColorScaleBin"
-import { OwidNoDataGray } from "./ColorConstants"
+import { OWID_NO_DATA_GRAY } from "./ColorConstants"
 import { getBinMaximums } from "./BinningStrategies"
 import {
     ColorScaleConfigInterface,
@@ -101,7 +101,7 @@ export class ColorScale {
     }
 
     @computed private get defaultNoDataColor(): Color {
-        return this.manager.defaultNoDataColor ?? OwidNoDataGray
+        return this.manager.defaultNoDataColor ?? OWID_NO_DATA_GRAY
     }
 
     @computed get colorScaleColumn(): CoreColumn | undefined {
diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
index e85e5f21070..ab641b28e14 100644
--- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx
+++ b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -126,14 +126,10 @@ import {
     DEFAULT_GRAPHER_HEIGHT,
     DEFAULT_GRAPHER_ENTITY_TYPE,
     DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL,
-    GRAPHER_DARK_TEXT,
     STATIC_EXPORT_DETAIL_SPACING,
-    GRAPHER_LIGHT_TEXT,
     GRAPHER_LOADED_EVENT_NAME,
     isContinentsVariableId,
     isPopulationVariableETLPath,
-    GRAPHER_BACKGROUND_BEIGE,
-    GRAPHER_BACKGROUND_DEFAULT,
     GRAPHER_FRAME_PADDING_HORIZONTAL,
     GRAPHER_FRAME_PADDING_VERTICAL,
     latestGrapherConfigSchema,
@@ -220,6 +216,12 @@ import {
 import { SlideInDrawer } from "../slideInDrawer/SlideInDrawer"
 import { BodyDiv } from "../bodyDiv/BodyDiv"
 import { grapherObjectToQueryParams } from "./GrapherUrl.js"
+import {
+    GRAPHER_BACKGROUND_BEIGE,
+    GRAPHER_BACKGROUND_DEFAULT,
+    GRAPHER_DARK_TEXT,
+    GRAPHER_LIGHT_TEXT,
+} from "../color/ColorConstants"
 
 declare global {
     interface Window {
diff --git a/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx b/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx
index 54d821f2dc4..43ca975d287 100644
--- a/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx
+++ b/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx
@@ -21,7 +21,7 @@ import {
 } from "@ourworldindata/utils"
 import { shortenForTargetWidth } from "@ourworldindata/components"
 import { action, computed, observable } from "mobx"
-import { BASE_FONT_SIZE, GRAPHER_DARK_TEXT } from "../core/GrapherConstants"
+import { BASE_FONT_SIZE } from "../core/GrapherConstants"
 import {
     GRAPHER_CHART_TYPES,
     GrapherChartType,
@@ -64,6 +64,7 @@ import {
     ColorScaleBin,
     NumericBin,
 } from "../color/ColorScaleBin"
+import { GRAPHER_DARK_TEXT } from "../color/ColorConstants"
 
 const SHARED_X_AXIS_MIN_FACET_COUNT = 12
 
diff --git a/packages/@ourworldindata/grapher/src/footer/Footer.tsx b/packages/@ourworldindata/grapher/src/footer/Footer.tsx
index 80b3fc276c9..b1a9807e2e9 100644
--- a/packages/@ourworldindata/grapher/src/footer/Footer.tsx
+++ b/packages/@ourworldindata/grapher/src/footer/Footer.tsx
@@ -19,8 +19,8 @@ import { ActionButtons } from "../controls/ActionButtons"
 import {
     BASE_FONT_SIZE,
     GRAPHER_FRAME_PADDING_HORIZONTAL,
-    GRAPHER_DARK_TEXT,
 } from "../core/GrapherConstants"
+import { GRAPHER_DARK_TEXT } from "../color/ColorConstants"
 
 /*
 
diff --git a/packages/@ourworldindata/grapher/src/header/Header.tsx b/packages/@ourworldindata/grapher/src/header/Header.tsx
index 0ff25e6ed1c..286198bc7a5 100644
--- a/packages/@ourworldindata/grapher/src/header/Header.tsx
+++ b/packages/@ourworldindata/grapher/src/header/Header.tsx
@@ -16,8 +16,8 @@ import {
     BASE_FONT_SIZE,
     GRAPHER_FRAME_PADDING_HORIZONTAL,
     GRAPHER_FRAME_PADDING_VERTICAL,
-    GRAPHER_DARK_TEXT,
 } from "../core/GrapherConstants"
+import { GRAPHER_DARK_TEXT } from "../color/ColorConstants"
 
 interface HeaderProps {
     manager: HeaderManager
diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.test.ts b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.test.ts
index 3655c9b83e3..bc77d3dee6f 100755
--- a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.test.ts
+++ b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.test.ts
@@ -20,7 +20,7 @@ import {
 } from "@ourworldindata/types"
 import { SelectionArray } from "../selection/SelectionArray"
 import { LineChartManager } from "./LineChartConstants"
-import { OwidNoDataGray } from "../color/ColorConstants"
+import { OWID_NO_DATA_GRAY } from "../color/ColorConstants"
 
 it("can create a new chart", () => {
     const table = SynthesizeGDPTable({ timeRange: [2000, 2010] })
@@ -359,7 +359,7 @@ describe("color scale", () => {
             },
         }
         const chart = new LineChart({ manager })
-        const noDataColor = OwidNoDataGray
+        const noDataColor = OWID_NO_DATA_GRAY
 
         expect(chart.series).toHaveLength(1)
         expect(chart.series[0].color).toEqual(noDataColor)
diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
index e1ec07006ad..26f41bee0c2 100644
--- a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
+++ b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -59,7 +59,6 @@ import {
     GRAPHER_AXIS_LINE_WIDTH_THICK,
     GRAPHER_AXIS_LINE_WIDTH_DEFAULT,
     BASE_FONT_SIZE,
-    GRAPHER_BACKGROUND_DEFAULT,
     GRAPHER_OPACITY_MUTE,
 } from "../core/GrapherConstants"
 import { ColorSchemes } from "../color/ColorSchemes"
@@ -95,7 +94,10 @@ import { SelectionArray } from "../selection/SelectionArray"
 import { CategoricalBin, ColorScaleBin } from "../color/ColorScaleBin"
 import { ColorScale, ColorScaleManager } from "../color/ColorScale"
 import { ColorScaleConfig } from "../color/ColorScaleConfig"
-import { OwidNoDataGray } from "../color/ColorConstants"
+import {
+    GRAPHER_BACKGROUND_DEFAULT,
+    OWID_NO_DATA_GRAY,
+} from "../color/ColorConstants"
 import { MultiColorPolyline } from "../scatterCharts/MultiColorPolyline"
 import { CategoricalColorAssigner } from "../color/CategoricalColorAssigner"
 import { darkenColorForLine } from "../color/ColorUtils"
@@ -1073,7 +1075,7 @@ export class LineChart
     }
 
     defaultBaseColorScheme = ColorSchemeName.OwidDistinctLines
-    defaultNoDataColor = OwidNoDataGray
+    defaultNoDataColor = OWID_NO_DATA_GRAY
     colorScale = this.props.manager.colorScaleOverride ?? new ColorScale(this)
 
     private getColorScaleColor(value: CoreValueType | undefined): Color {
diff --git a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
index 030189ea0e3..7bdb5ae97f8 100644
--- a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
+++ b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
@@ -25,14 +25,11 @@ import {
     SeriesName,
     VerticalAlign,
 } from "@ourworldindata/types"
-import {
-    BASE_FONT_SIZE,
-    GRAPHER_BACKGROUND_DEFAULT,
-    GRAPHER_FONT_SCALE_12,
-} from "../core/GrapherConstants"
+import { BASE_FONT_SIZE, GRAPHER_FONT_SCALE_12 } from "../core/GrapherConstants"
 import { ChartSeries } from "../chart/ChartInterface"
 import { darkenColorForText } from "../color/ColorUtils"
 import { AxisConfig } from "../axis/AxisConfig.js"
+import { GRAPHER_BACKGROUND_DEFAULT } from "../color/ColorConstants"
 
 // Minimum vertical space between two legend items
 const LEGEND_ITEM_MIN_SPACING = 4
diff --git a/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx b/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx
index c78bd151942..2aa2811e0be 100644
--- a/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx
+++ b/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx
@@ -12,10 +12,9 @@ import {
     BASE_FONT_SIZE,
     DEFAULT_GRAPHER_ENTITY_TYPE,
     DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL,
-    GRAPHER_DARK_TEXT,
-    GRAPHER_LIGHT_TEXT,
 } from "../core/GrapherConstants"
 import { Halo } from "@ourworldindata/components"
+import { GRAPHER_DARK_TEXT, GRAPHER_LIGHT_TEXT } from "../color/ColorConstants"
 
 export interface NoDataModalManager {
     canChangeEntity?: boolean
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx
index 5416e3447e2..a5862b3172c 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx
@@ -3,8 +3,8 @@ import { Bounds } from "@ourworldindata/utils"
 import {
     GRAPHER_FONT_SCALE_11,
     GRAPHER_FONT_SCALE_12,
-    GRAPHER_LIGHT_TEXT,
 } from "../core/GrapherConstants"
+import { GRAPHER_LIGHT_TEXT } from "../color/ColorConstants"
 
 export function NoDataSection({
     seriesNames,
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
index 108272297f4..bb7743b90aa 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx
@@ -91,7 +91,7 @@ import {
 } from "./ScatterPlotChartConstants"
 import { ScatterPointsWithLabels } from "./ScatterPointsWithLabels"
 import { autoDetectYColumnSlugs, makeSelectionArray } from "../chart/ChartUtils"
-import { OwidNoDataGray } from "../color/ColorConstants"
+import { OWID_NO_DATA_GRAY } from "../color/ColorConstants"
 import {
     ColorScaleConfig,
     ColorScaleConfigDefaults,
@@ -1038,7 +1038,7 @@ export class ScatterPlotChart
     }
 
     defaultBaseColorScheme = ColorSchemeName.continents
-    defaultNoDataColor = OwidNoDataGray
+    defaultNoDataColor = OWID_NO_DATA_GRAY
 
     @computed get hasNoDataBin(): boolean {
         if (this.colorColumn.isMissing) return false
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx
index 6d9d0ad8d6b..8dded0dd241 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx
@@ -11,11 +11,8 @@ import {
 } from "@ourworldindata/utils"
 import {
     BASE_FONT_SIZE,
-    GRAPHER_BACKGROUND_DEFAULT,
-    GRAPHER_DARK_TEXT,
     GRAPHER_FONT_SCALE_10,
     GRAPHER_FONT_SCALE_11,
-    GRAPHER_LIGHT_TEXT,
 } from "../core/GrapherConstants"
 import { CoreColumn } from "@ourworldindata/core-table"
 import {
@@ -26,6 +23,11 @@ import {
     SCATTER_POINT_DEFAULT_RADIUS,
 } from "./ScatterPlotChartConstants"
 import { darkenColorForText } from "../color/ColorUtils"
+import {
+    GRAPHER_BACKGROUND_DEFAULT,
+    GRAPHER_DARK_TEXT,
+    GRAPHER_LIGHT_TEXT,
+} from "../color/ColorConstants"
 
 export interface ScatterSizeLegendManager {
     sidebarWidth: number
diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
index 38c2ac2d62d..c49edd68c25 100644
--- a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
+++ b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -20,8 +20,6 @@ import { observer } from "mobx-react"
 import { NoDataModal } from "../noDataModal/NoDataModal"
 import {
     BASE_FONT_SIZE,
-    GRAPHER_BACKGROUND_DEFAULT,
-    GRAPHER_DARK_TEXT,
     GRAPHER_FONT_SCALE_12,
     GRAPHER_OPACITY_MUTE,
 } from "../core/GrapherConstants"
@@ -89,6 +87,10 @@ import { SelectionArray } from "../selection/SelectionArray"
 import { Halo } from "@ourworldindata/components"
 import { HorizontalColorLegendManager } from "../horizontalColorLegend/HorizontalColorLegends"
 import { CategoricalBin } from "../color/ColorScaleBin"
+import {
+    GRAPHER_BACKGROUND_DEFAULT,
+    GRAPHER_DARK_TEXT,
+} from "../color/ColorConstants"
 
 type SVGMouseOrTouchEvent =
     | React.MouseEvent<SVGGElement>
diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.tsx
index e89b176b4da..617c87dc3b3 100644
--- a/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.tsx
+++ b/packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.tsx
@@ -69,7 +69,7 @@ import {
     ColorScaleConfig,
     ColorScaleConfigDefaults,
 } from "../color/ColorScaleConfig"
-import { OwidNoDataGray } from "../color/ColorConstants"
+import { OWID_NO_DATA_GRAY } from "../color/ColorConstants"
 import { color } from "d3-color"
 import { SelectionArray } from "../selection/SelectionArray"
 import { ColorScheme } from "../color/ColorScheme"
@@ -267,7 +267,7 @@ export class MarimekkoChart
     base: React.RefObject<SVGGElement> = React.createRef()
 
     defaultBaseColorScheme = ColorSchemeName.continents
-    defaultNoDataColor = OwidNoDataGray
+    defaultNoDataColor = OWID_NO_DATA_GRAY
     labelAngleInDegrees = -45 // 0 is horizontal, -90 is vertical from bottom to top, ...
 
     // currently hovered legend color