diff --git a/packages/@sanity/color/src/color.ts b/packages/@sanity/color/src/color.ts
index 3cdc73d..3bcf8ef 100644
--- a/packages/@sanity/color/src/color.ts
+++ b/packages/@sanity/color/src/color.ts
@@ -5,7 +5,7 @@ import {Color, ColorHues, ColorTint, ColorTints} from './types'
 /** @public */
 export const black: ColorTint = {
   title: 'Black',
-  hex: '#111213',
+  hex: '#0e1011',
 }
 
 /** @public */
@@ -18,47 +18,47 @@ export const white: ColorTint = {
 export const gray: ColorTints = {
   '50': {
     title: 'Gray 50',
-    hex: '#f9f9fa',
+    hex: '#f6f8f8',
   },
   '100': {
     title: 'Gray 100',
-    hex: '#f3f4f6',
+    hex: '#f0f4f4',
   },
   '200': {
     title: 'Gray 200',
-    hex: '#e2e6e9',
+    hex: '#dce3e4',
   },
   '300': {
     title: 'Gray 300',
-    hex: '#bec3cb',
+    hex: '#bec9cb',
   },
   '400': {
     title: 'Gray 400',
-    hex: '#9aa1ac',
+    hex: '#9eabae',
   },
   '500': {
     title: 'Gray 500',
-    hex: '#788191',
+    hex: '#7e8e91',
   },
   '600': {
     title: 'Gray 600',
-    hex: '#5e6573',
+    hex: '#657376',
   },
   '700': {
     title: 'Gray 700',
-    hex: '#464c58',
+    hex: '#4b5658',
   },
   '800': {
     title: 'Gray 800',
-    hex: '#31353f',
+    hex: '#363e3f',
   },
   '900': {
     title: 'Gray 900',
-    hex: '#1f2228',
+    hex: '#212627',
   },
   '950': {
     title: 'Gray 950',
-    hex: '#17191c',
+    hex: '#171b1c',
   },
 }
 
@@ -118,15 +118,15 @@ export const purple: ColorTints = {
   },
   '100': {
     title: 'Purple 100',
-    hex: '#f4ebff',
+    hex: '#f7f0ff',
   },
   '200': {
     title: 'Purple 200',
-    hex: '#e5cdfe',
+    hex: '#ead7fe',
   },
   '300': {
     title: 'Purple 300',
-    hex: '#d1aef4',
+    hex: '#d4b1f6',
   },
   '400': {
     title: 'Purple 400',
@@ -166,15 +166,15 @@ export const magenta: ColorTints = {
   },
   '100': {
     title: 'Magenta 100',
-    hex: '#fde8ef',
+    hex: '#fdecf2',
   },
   '200': {
     title: 'Magenta 200',
-    hex: '#fbd0df',
+    hex: '#fbd5e2',
   },
   '300': {
     title: 'Magenta 300',
-    hex: '#f7abc5',
+    hex: '#f7b0c8',
   },
   '400': {
     title: 'Magenta 400',
@@ -214,19 +214,19 @@ export const red: ColorTints = {
   },
   '100': {
     title: 'Red 100',
-    hex: '#fee8e7',
+    hex: '#feeceb',
   },
   '200': {
     title: 'Red 200',
-    hex: '#fbccc6',
+    hex: '#fcd7d4',
   },
   '300': {
     title: 'Red 300',
-    hex: '#f6a098',
+    hex: '#f7ada6',
   },
   '400': {
     title: 'Red 400',
-    hex: '#f17165',
+    hex: '#f2796e',
   },
   '500': {
     title: 'Red 500',
@@ -238,11 +238,11 @@ export const red: ColorTints = {
   },
   '700': {
     title: 'Red 700',
-    hex: '#a52112',
+    hex: '#a51f12',
   },
   '800': {
     title: 'Red 800',
-    hex: '#6f1a11',
+    hex: '#6f1811',
   },
   '900': {
     title: 'Red 900',
@@ -314,15 +314,15 @@ export const yellow: ColorTints = {
   },
   '200': {
     title: 'Yellow 200',
-    hex: '#fbf1a7',
+    hex: '#fbf09d',
   },
   '300': {
     title: 'Yellow 300',
-    hex: '#f6dd79',
+    hex: '#f6dc74',
   },
   '400': {
     title: 'Yellow 400',
-    hex: '#f3cc49',
+    hex: '#f3ca44',
   },
   '500': {
     title: 'Yellow 500',
@@ -402,47 +402,47 @@ export const green: ColorTints = {
 export const cyan: ColorTints = {
   '50': {
     title: 'Cyan 50',
-    hex: '#ebfdff',
+    hex: '#e5ffff',
   },
   '100': {
     title: 'Cyan 100',
-    hex: '#d2fcfe',
+    hex: '#cdfefe',
   },
   '200': {
     title: 'Cyan 200',
-    hex: '#aaf8fd',
+    hex: '#92fcfc',
   },
   '300': {
     title: 'Cyan 300',
-    hex: '#74edfb',
+    hex: '#59f8f8',
   },
   '400': {
     title: 'Cyan 400',
-    hex: '#41e1f6',
+    hex: '#25f4f4',
   },
   '500': {
     title: 'Cyan 500',
-    hex: '#0ecff1',
+    hex: '#0dd9d9',
   },
   '600': {
     title: 'Cyan 600',
-    hex: '#0e9ebe',
+    hex: '#09a4aa',
   },
   '700': {
     title: 'Cyan 700',
-    hex: '#0f708a',
+    hex: '#04717b',
   },
   '800': {
     title: 'Cyan 800',
-    hex: '#0d4d5e',
+    hex: '#04474e',
   },
   '900': {
     title: 'Cyan 900',
-    hex: '#0b2a32',
+    hex: '#052429',
   },
   '950': {
     title: 'Cyan 950',
-    hex: '#101e23',
+    hex: '#0d1e21',
   },
 }
 
diff --git a/packages/@sanity/color/src/config.ts b/packages/@sanity/color/src/config.ts
index 8b853e8..2d7cbc5 100644
--- a/packages/@sanity/color/src/config.ts
+++ b/packages/@sanity/color/src/config.ts
@@ -4,7 +4,7 @@ import {ColorConfig} from './types'
 export const config: ColorConfig = {
   black: {
     title: 'Black',
-    hsl: [210, 6, 7],
+    hsl: [190, 10, 6],
   },
   white: {
     title: 'White',
@@ -15,47 +15,47 @@ export const config: ColorConfig = {
     tints: {
       50: {
         title: 'Gray 50',
-        hsl: [240, 9, 98],
+        hsl: [186, 14, 97],
       },
       100: {
         title: 'Gray 100',
-        hsl: [220, 14, 96],
+        hsl: [188, 14, 95],
       },
       200: {
         title: 'Gray 200',
-        hsl: [210, 12, 90],
+        hsl: [190, 13, 88],
       },
       300: {
         title: 'Gray 300',
-        hsl: [217, 11, 77],
+        hsl: [190, 11, 77],
       },
       400: {
         title: 'Gray 400',
-        hsl: [218, 10, 64],
+        hsl: [190, 9, 65],
       },
       500: {
         title: 'Gray 500',
-        hsl: [218, 10, 52],
+        hsl: [190, 8, 53],
       },
       600: {
         title: 'Gray 600',
-        hsl: [221, 10, 41],
+        hsl: [190, 8, 43],
       },
       700: {
         title: 'Gray 700',
-        hsl: [222, 11, 31],
+        hsl: [190, 8, 32],
       },
       800: {
         title: 'Gray 800',
-        hsl: [222, 13, 22],
+        hsl: [190, 8, 23],
       },
       900: {
         title: 'Gray 900',
-        hsl: [220, 13, 14],
+        hsl: [190, 8, 14],
       },
       950: {
         title: 'Gray 950',
-        hsl: [216, 9, 10],
+        hsl: [190, 8, 10],
       },
     },
   },
@@ -117,15 +117,15 @@ export const config: ColorConfig = {
       },
       100: {
         title: 'Purple 100',
-        hsl: [269, 100, 96],
+        hsl: [269, 100, 97],
       },
       200: {
         title: 'Purple 200',
-        hsl: [269, 95, 90],
+        hsl: [269, 95, 92],
       },
       300: {
         title: 'Purple 300',
-        hsl: [270, 77, 82],
+        hsl: [270, 79, 83],
       },
       400: {
         title: 'Purple 400',
@@ -166,15 +166,15 @@ export const config: ColorConfig = {
       },
       100: {
         title: 'Magenta 100',
-        hsl: [339, 83, 95],
+        hsl: [339, 83, 96],
       },
       200: {
         title: 'Magenta 200',
-        hsl: [339, 83, 90],
+        hsl: [339, 83, 91],
       },
       300: {
         title: 'Magenta 300',
-        hsl: [340, 82, 82],
+        hsl: [340, 82, 83],
       },
       400: {
         title: 'Magenta 400',
@@ -215,19 +215,19 @@ export const config: ColorConfig = {
       },
       100: {
         title: 'Red 100',
-        hsl: [3, 92, 95],
+        hsl: [3, 92, 96],
       },
       200: {
         title: 'Red 200',
-        hsl: [7, 87, 88],
+        hsl: [5, 87, 91],
       },
       300: {
         title: 'Red 300',
-        hsl: [5, 84, 78],
+        hsl: [5, 84, 81],
       },
       400: {
         title: 'Red 400',
-        hsl: [5, 83, 67],
+        hsl: [5, 83, 69],
       },
       500: {
         title: 'Red 500',
@@ -239,11 +239,11 @@ export const config: ColorConfig = {
       },
       700: {
         title: 'Red 700',
-        hsl: [6, 80, 36],
+        hsl: [5, 80, 36],
       },
       800: {
         title: 'Red 800',
-        hsl: [6, 74, 25],
+        hsl: [5, 74, 25],
       },
       900: {
         title: 'Red 900',
@@ -317,15 +317,15 @@ export const config: ColorConfig = {
       },
       200: {
         title: 'Yellow 200',
-        hsl: [53, 92, 82],
+        hsl: [53, 92, 80],
       },
       300: {
         title: 'Yellow 300',
-        hsl: [48, 88, 72],
+        hsl: [48, 88, 71],
       },
       400: {
         title: 'Yellow 400',
-        hsl: [46, 88, 62],
+        hsl: [46, 88, 61],
       },
       500: {
         title: 'Yellow 500',
@@ -407,47 +407,47 @@ export const config: ColorConfig = {
     tints: {
       50: {
         title: 'Cyan 50',
-        hsl: [186, 100, 96],
+        hsl: [180, 100, 95],
       },
       100: {
         title: 'Cyan 100',
-        hsl: [183, 97, 91],
+        hsl: [180, 97, 90],
       },
       200: {
         title: 'Cyan 200',
-        hsl: [184, 96, 83],
+        hsl: [180, 94, 78],
       },
       300: {
         title: 'Cyan 300',
-        hsl: [186, 94, 72],
+        hsl: [180, 92, 66],
       },
       400: {
         title: 'Cyan 400',
-        hsl: [187, 91, 61],
+        hsl: [180, 90, 55],
       },
       500: {
         title: 'Cyan 500',
-        hsl: [189, 89, 50],
+        hsl: [180, 89, 45],
       },
       600: {
         title: 'Cyan 600',
-        hsl: [191, 86, 40],
+        hsl: [182, 90, 35],
       },
       700: {
         title: 'Cyan 700',
-        hsl: [193, 81, 30],
+        hsl: [185, 93, 25],
       },
       800: {
         title: 'Cyan 800',
-        hsl: [193, 76, 21],
+        hsl: [186, 91, 16],
       },
       900: {
         title: 'Cyan 900',
-        hsl: [193, 64, 12],
+        hsl: [188, 78, 9],
       },
       950: {
         title: 'Cyan 950',
-        hsl: [195, 37, 10],
+        hsl: [188, 44, 9],
       },
     },
   },