diff --git a/styles/src/theme/create_theme.ts b/styles/src/theme/create_theme.ts
index d2701f8341..e0da345bc5 100644
--- a/styles/src/theme/create_theme.ts
+++ b/styles/src/theme/create_theme.ts
@@ -1,4 +1,4 @@
-import { Scale, Color } from "chroma-js"
+import chroma, { Scale, Color } from "chroma-js"
 import { Syntax, ThemeSyntax, SyntaxHighlightStyle } from "./syntax"
 export { Syntax, ThemeSyntax, SyntaxHighlightStyle }
 import {
@@ -32,6 +32,7 @@ export interface Theme {
 
     players: Players
     syntax?: Partial<ThemeSyntax>
+    color_family: ColorFamily
 }
 
 export interface Meta {
@@ -69,6 +70,15 @@ export interface Players {
     "7": Player
 }
 
+export type ColorFamily = Partial<{ [K in keyof RampSet]: ColorFamilyRange }>
+
+export interface ColorFamilyRange {
+    low: number
+    high: number
+    range: number
+    scaling_value: number
+}
+
 export interface Shadow {
     blur: number
     color: string
@@ -162,6 +172,8 @@ export function create_theme(theme: ThemeConfig): Theme {
         "7": player(ramps.yellow),
     }
 
+    const color_family = build_color_family(ramps)
+
     return {
         name,
         is_light,
@@ -177,6 +189,7 @@ export function create_theme(theme: ThemeConfig): Theme {
 
         players,
         syntax,
+        color_family,
     }
 }
 
@@ -187,6 +200,28 @@ function player(ramp: Scale): Player {
     }
 }
 
+function build_color_family(ramps: RampSet): ColorFamily {
+    const color_family: ColorFamily = {}
+
+    for (const ramp in ramps) {
+        const ramp_value = ramps[ramp as keyof RampSet]
+
+        const lightnessValues = [ramp_value(0).get('hsl.l') * 100, ramp_value(1).get('hsl.l') * 100]
+        const low = Math.min(...lightnessValues)
+        const high = Math.max(...lightnessValues)
+        const range = high - low
+
+        color_family[ramp as keyof RampSet] = {
+            low,
+            high,
+            range,
+            scaling_value: 100 / range,
+        }
+    }
+
+    return color_family
+}
+
 function lowest_layer(ramps: RampSet): Layer {
     return {
         base: build_style_set(ramps.neutral, 0.2, 1),