diff --git a/packages/@sanity/color/src/color.ts b/packages/@sanity/color/src/color.ts
index 5f6af8e..3cdc73d 100644
--- a/packages/@sanity/color/src/color.ts
+++ b/packages/@sanity/color/src/color.ts
@@ -38,27 +38,27 @@ export const gray: ColorTints = {
   },
   '500': {
     title: 'Gray 500',
-    hex: '#767f8f',
+    hex: '#788191',
   },
   '600': {
     title: 'Gray 600',
-    hex: '#636a79',
+    hex: '#5e6573',
   },
   '700': {
     title: 'Gray 700',
-    hex: '#4f5563',
+    hex: '#464c58',
   },
   '800': {
     title: 'Gray 800',
-    hex: '#3a3f4b',
+    hex: '#31353f',
   },
   '900': {
     title: 'Gray 900',
-    hex: '#2a2e37',
+    hex: '#1f2228',
   },
   '950': {
     title: 'Gray 950',
-    hex: '#1a1c1f',
+    hex: '#17191c',
   },
 }
 
@@ -90,23 +90,23 @@ export const blue: ColorTints = {
   },
   '600': {
     title: 'Blue 600',
-    hex: '#166bfe',
+    hex: '#0661fe',
   },
   '700': {
     title: 'Blue 700',
-    hex: '#034ee2',
+    hex: '#0345c9',
   },
   '800': {
     title: 'Blue 800',
-    hex: '#083baa',
+    hex: '#073392',
   },
   '900': {
     title: 'Blue 900',
-    hex: '#0d2c6d',
+    hex: '#0b2356',
   },
   '950': {
     title: 'Blue 950',
-    hex: '#0f1e38',
+    hex: '#0c182c',
   },
 }
 
@@ -138,23 +138,23 @@ export const purple: ColorTints = {
   },
   '600': {
     title: 'Purple 600',
-    hex: '#8741c8',
+    hex: '#843dc7',
   },
   '700': {
     title: 'Purple 700',
-    hex: '#6e2fa2',
+    hex: '#6c2e9e',
   },
   '800': {
     title: 'Purple 800',
-    hex: '#512475',
+    hex: '#4e2371',
   },
   '900': {
     title: 'Purple 900',
-    hex: '#2f1844',
+    hex: '#2d1740',
   },
   '950': {
     title: 'Purple 950',
-    hex: '#22162d',
+    hex: '#1f1429',
   },
 }
 
@@ -182,11 +182,11 @@ export const magenta: ColorTints = {
   },
   '500': {
     title: 'Magenta 500',
-    hex: '#e93571',
+    hex: '#ea3e77',
   },
   '600': {
     title: 'Magenta 600',
-    hex: '#cc195e',
+    hex: '#d11a60',
   },
   '700': {
     title: 'Magenta 700',
@@ -194,15 +194,15 @@ export const magenta: ColorTints = {
   },
   '800': {
     title: 'Magenta 800',
-    hex: '#711345',
+    hex: '#691240',
   },
   '900': {
     title: 'Magenta 900',
-    hex: '#4b1130',
+    hex: '#430f2b',
   },
   '950': {
     title: 'Magenta 950',
-    hex: '#37101d',
+    hex: '#2f0e19',
   },
 }
 
@@ -238,19 +238,19 @@ export const red: ColorTints = {
   },
   '700': {
     title: 'Red 700',
-    hex: '#aa2213',
+    hex: '#a52112',
   },
   '800': {
     title: 'Red 800',
-    hex: '#7c1d13',
+    hex: '#6f1a11',
   },
   '900': {
     title: 'Red 900',
-    hex: '#521914',
+    hex: '#421410',
   },
   '950': {
     title: 'Red 950',
-    hex: '#281615',
+    hex: '#251413',
   },
 }
 
@@ -278,11 +278,11 @@ export const orange: ColorTints = {
   },
   '500': {
     title: 'Orange 500',
-    hex: '#ee5e11',
+    hex: '#ef6115',
   },
   '600': {
     title: 'Orange 600',
-    hex: '#be4c0e',
+    hex: '#c24e0f',
   },
   '700': {
     title: 'Orange 700',
@@ -290,15 +290,15 @@ export const orange: ColorTints = {
   },
   '800': {
     title: 'Orange 800',
-    hex: '#652d10',
+    hex: '#602b10',
   },
   '900': {
     title: 'Orange 900',
-    hex: '#3b2012',
+    hex: '#371e10',
   },
   '950': {
     title: 'Orange 950',
-    hex: '#261a13',
+    hex: '#221711',
   },
 }
 
@@ -322,11 +322,11 @@ export const yellow: ColorTints = {
   },
   '400': {
     title: 'Yellow 400',
-    hex: '#f3ca44',
+    hex: '#f3cc49',
   },
   '500': {
     title: 'Yellow 500',
-    hex: '#f3ba12',
+    hex: '#f3bc16',
   },
   '600': {
     title: 'Yellow 600',
@@ -334,19 +334,19 @@ export const yellow: ColorTints = {
   },
   '700': {
     title: 'Yellow 700',
-    hex: '#a6700c',
+    hex: '#98670b',
   },
   '800': {
     title: 'Yellow 800',
-    hex: '#81510e',
+    hex: '#65400b',
   },
   '900': {
     title: 'Yellow 900',
-    hex: '#553511',
+    hex: '#331f0a',
   },
   '950': {
     title: 'Yellow 950',
-    hex: '#231d15',
+    hex: '#201813',
   },
 }
 
@@ -366,19 +366,19 @@ export const green: ColorTints = {
   },
   '300': {
     title: 'Green 300',
-    hex: '#78e2a5',
+    hex: '#7de3a7',
   },
   '400': {
     title: 'Green 400',
-    hex: '#41dc82',
+    hex: '#4ade88',
   },
   '500': {
     title: 'Green 500',
-    hex: '#1ec263',
+    hex: '#21d46c',
   },
   '600': {
     title: 'Green 600',
-    hex: '#1a9e51',
+    hex: '#1ba755',
   },
   '700': {
     title: 'Green 700',
@@ -386,11 +386,11 @@ export const green: ColorTints = {
   },
   '800': {
     title: 'Green 800',
-    hex: '#145730',
+    hex: '#124e2b',
   },
   '900': {
     title: 'Green 900',
-    hex: '#123b24',
+    hex: '#0d2b1b',
   },
   '950': {
     title: 'Green 950',
@@ -414,35 +414,35 @@ export const cyan: ColorTints = {
   },
   '300': {
     title: 'Cyan 300',
-    hex: '#6becfa',
+    hex: '#74edfb',
   },
   '400': {
     title: 'Cyan 400',
-    hex: '#32dff5',
+    hex: '#41e1f6',
   },
   '500': {
     title: 'Cyan 500',
-    hex: '#0dc3e3',
+    hex: '#0ecff1',
   },
   '600': {
     title: 'Cyan 600',
-    hex: '#0e9ab9',
+    hex: '#0e9ebe',
   },
   '700': {
     title: 'Cyan 700',
-    hex: '#0f738f',
+    hex: '#0f708a',
   },
   '800': {
     title: 'Cyan 800',
-    hex: '#0f586c',
+    hex: '#0d4d5e',
   },
   '900': {
     title: 'Cyan 900',
-    hex: '#103b47',
+    hex: '#0b2a32',
   },
   '950': {
     title: 'Cyan 950',
-    hex: '#122126',
+    hex: '#101e23',
   },
 }
 
diff --git a/packages/@sanity/color/src/config.ts b/packages/@sanity/color/src/config.ts
index 5615291..8b853e8 100644
--- a/packages/@sanity/color/src/config.ts
+++ b/packages/@sanity/color/src/config.ts
@@ -35,27 +35,27 @@ export const config: ColorConfig = {
       },
       500: {
         title: 'Gray 500',
-        hsl: [218, 10, 51],
+        hsl: [218, 10, 52],
       },
       600: {
         title: 'Gray 600',
-        hsl: [221, 10, 43],
+        hsl: [221, 10, 41],
       },
       700: {
         title: 'Gray 700',
-        hsl: [222, 11, 35],
+        hsl: [222, 11, 31],
       },
       800: {
         title: 'Gray 800',
-        hsl: [222, 13, 26],
+        hsl: [222, 13, 22],
       },
       900: {
         title: 'Gray 900',
-        hsl: [220, 13, 19],
+        hsl: [220, 13, 14],
       },
       950: {
         title: 'Gray 950',
-        hsl: [216, 9, 11],
+        hsl: [216, 9, 10],
       },
     },
   },
@@ -88,23 +88,23 @@ export const config: ColorConfig = {
       },
       600: {
         title: 'Blue 600',
-        hsl: [218, 99, 54],
+        hsl: [218, 99, 51],
       },
       700: {
         title: 'Blue 700',
-        hsl: [220, 97, 45],
+        hsl: [220, 97, 40],
       },
       800: {
         title: 'Blue 800',
-        hsl: [221, 91, 35],
+        hsl: [221, 91, 30],
       },
       900: {
         title: 'Blue 900',
-        hsl: [221, 78, 24],
+        hsl: [221, 78, 19],
       },
       950: {
         title: 'Blue 950',
-        hsl: [218, 57, 14],
+        hsl: [218, 57, 11],
       },
     },
   },
@@ -137,23 +137,23 @@ export const config: ColorConfig = {
       },
       600: {
         title: 'Purple 600',
-        hsl: [271, 55, 52],
+        hsl: [271, 55, 51],
       },
       700: {
         title: 'Purple 700',
-        hsl: [273, 55, 41],
+        hsl: [273, 55, 40],
       },
       800: {
         title: 'Purple 800',
-        hsl: [273, 53, 30],
+        hsl: [273, 53, 29],
       },
       900: {
         title: 'Purple 900',
-        hsl: [272, 48, 18],
+        hsl: [272, 48, 17],
       },
       950: {
         title: 'Purple 950',
-        hsl: [271, 35, 13],
+        hsl: [271, 35, 12],
       },
     },
   },
@@ -182,11 +182,11 @@ export const config: ColorConfig = {
       },
       500: {
         title: 'Magenta 500',
-        hsl: [340, 80, 56],
+        hsl: [340, 80, 58],
       },
       600: {
         title: 'Magenta 600',
-        hsl: [337, 78, 45],
+        hsl: [337, 78, 46],
       },
       700: {
         title: 'Magenta 700',
@@ -194,15 +194,15 @@ export const config: ColorConfig = {
       },
       800: {
         title: 'Magenta 800',
-        hsl: [328, 71, 26],
+        hsl: [328, 71, 24],
       },
       900: {
         title: 'Magenta 900',
-        hsl: [328, 64, 18],
+        hsl: [328, 64, 16],
       },
       950: {
         title: 'Magenta 950',
-        hsl: [340, 55, 14],
+        hsl: [340, 55, 12],
       },
     },
   },
@@ -239,19 +239,19 @@ export const config: ColorConfig = {
       },
       700: {
         title: 'Red 700',
-        hsl: [6, 80, 37],
+        hsl: [6, 80, 36],
       },
       800: {
         title: 'Red 800',
-        hsl: [6, 74, 28],
+        hsl: [6, 74, 25],
       },
       900: {
         title: 'Red 900',
-        hsl: [5, 61, 20],
+        hsl: [5, 61, 16],
       },
       950: {
         title: 'Red 950',
-        hsl: [3, 32, 12],
+        hsl: [3, 32, 11],
       },
     },
   },
@@ -280,11 +280,11 @@ export const config: ColorConfig = {
       },
       500: {
         title: 'Orange 500',
-        hsl: [21, 87, 50],
+        hsl: [21, 87, 51],
       },
       600: {
         title: 'Orange 600',
-        hsl: [21, 86, 40],
+        hsl: [21, 86, 41],
       },
       700: {
         title: 'Orange 700',
@@ -292,15 +292,15 @@ export const config: ColorConfig = {
       },
       800: {
         title: 'Orange 800',
-        hsl: [20, 72, 23],
+        hsl: [20, 72, 22],
       },
       900: {
         title: 'Orange 900',
-        hsl: [21, 54, 15],
+        hsl: [21, 54, 14],
       },
       950: {
         title: 'Orange 950',
-        hsl: [23, 34, 11],
+        hsl: [20, 34, 10],
       },
     },
   },
@@ -325,11 +325,11 @@ export const config: ColorConfig = {
       },
       400: {
         title: 'Yellow 400',
-        hsl: [46, 88, 61],
+        hsl: [46, 88, 62],
       },
       500: {
         title: 'Yellow 500',
-        hsl: [45, 90, 51],
+        hsl: [45, 90, 52],
       },
       600: {
         title: 'Yellow 600',
@@ -337,19 +337,19 @@ export const config: ColorConfig = {
       },
       700: {
         title: 'Yellow 700',
-        hsl: [39, 86, 35],
+        hsl: [39, 86, 32],
       },
       800: {
         title: 'Yellow 800',
-        hsl: [35, 80, 28],
+        hsl: [35, 80, 22],
       },
       900: {
         title: 'Yellow 900',
-        hsl: [32, 67, 20],
+        hsl: [31, 67, 12],
       },
       950: {
         title: 'Yellow 950',
-        hsl: [34, 26, 11],
+        hsl: [25, 26, 10],
       },
     },
   },
@@ -370,19 +370,19 @@ export const config: ColorConfig = {
       },
       300: {
         title: 'Green 300',
-        hsl: [145, 65, 68],
+        hsl: [145, 65, 69],
       },
       400: {
         title: 'Green 400',
-        hsl: [145, 69, 56],
+        hsl: [145, 69, 58],
       },
       500: {
         title: 'Green 500',
-        hsl: [145, 73, 44],
+        hsl: [145, 73, 48],
       },
       600: {
         title: 'Green 600',
-        hsl: [145, 72, 36],
+        hsl: [145, 72, 38],
       },
       700: {
         title: 'Green 700',
@@ -390,11 +390,11 @@ export const config: ColorConfig = {
       },
       800: {
         title: 'Green 800',
-        hsl: [145, 62, 21],
+        hsl: [145, 62, 19],
       },
       900: {
         title: 'Green 900',
-        hsl: [147, 53, 15],
+        hsl: [147, 53, 11],
       },
       950: {
         title: 'Green 950',
@@ -419,35 +419,35 @@ export const config: ColorConfig = {
       },
       300: {
         title: 'Cyan 300',
-        hsl: [186, 94, 70],
+        hsl: [186, 94, 72],
       },
       400: {
         title: 'Cyan 400',
-        hsl: [187, 91, 58],
+        hsl: [187, 91, 61],
       },
       500: {
         title: 'Cyan 500',
-        hsl: [189, 89, 47],
+        hsl: [189, 89, 50],
       },
       600: {
         title: 'Cyan 600',
-        hsl: [191, 86, 39],
+        hsl: [191, 86, 40],
       },
       700: {
         title: 'Cyan 700',
-        hsl: [193, 81, 31],
+        hsl: [193, 81, 30],
       },
       800: {
         title: 'Cyan 800',
-        hsl: [193, 76, 24],
+        hsl: [193, 76, 21],
       },
       900: {
         title: 'Cyan 900',
-        hsl: [193, 64, 17],
+        hsl: [193, 64, 12],
       },
       950: {
         title: 'Cyan 950',
-        hsl: [195, 37, 11],
+        hsl: [195, 37, 10],
       },
     },
   },