diff --git a/src/styles/dynamaic-variables.scss b/src/styles/dynamaic-variables.scss
index 73d1ed75a..06745a1c9 100644
--- a/src/styles/dynamaic-variables.scss
+++ b/src/styles/dynamaic-variables.scss
@@ -76,6 +76,16 @@
   --playkit-tone-7-color: #212121;
   --playkit-tone-8-color: #000000;
 
+  // Tone Ramp - rgb values
+  --playkit-tone-1-color-rgb: 255, 255, 255;
+  --playkit-tone-2-color-rgb: 204, 204, 204;
+  --playkit-tone-3-color-rgb: 153, 153, 153;
+  --playkit-tone-4-color-rgb: 102, 102, 102;
+  --playkit-tone-5-color-rgb: 82, 82, 82;
+  --playkit-tone-6-color-rgb: 56, 56, 56;
+  --playkit-tone-7-color-rgb: 33, 33, 33;
+  --playkit-tone-8-color-rgb: 0, 0, 0;
+
   --playkit-live-color: #e12437;
   --playkit-player-background-color: #000000;
   --playkit-tab-focus-color: var(--playkit-primary-color);
diff --git a/src/styles/exported.scss b/src/styles/exported.scss
index 41bb49454..ec803a5ef 100644
--- a/src/styles/exported.scss
+++ b/src/styles/exported.scss
@@ -37,6 +37,16 @@ $tone-6-color: var(--playkit-tone-6-color);
 $tone-7-color: var(--playkit-tone-7-color);
 $tone-8-color: var(--playkit-tone-8-color);
 
+// Tone Ramp - rgb values
+$tone-1-color-rgb: var(--playkit-tone-1-color-rgb);
+$tone-2-color-rgb: var(--playkit-tone-2-color-rgb);
+$tone-3-color-rgb: var(--playkit-tone-3-color-rgb);
+$tone-4-color-rgb: var(--playkit-tone-4-color-rgb);
+$tone-5-color-rgb: var(--playkit-tone-5-color-rgb);
+$tone-6-color-rgb: var(--playkit-tone-6-color-rgb);
+$tone-7-color-rgb: var(--playkit-tone-7-color-rgb);
+$tone-8-color-rgb: var(--playkit-tone-8-color-rgb);
+
 $live-color: var(--playkit-live-color);
 $player-background-color: var(--playkit-player-background-color);
 $tab-focus-color: var(--playkit-tab-focus-color);