diff --git a/src/__screenshot_tests__/logo-screenshot-test.tsx b/src/__screenshot_tests__/logo-screenshot-test.tsx
index d00285091..9005025f7 100644
--- a/src/__screenshot_tests__/logo-screenshot-test.tsx
+++ b/src/__screenshot_tests__/logo-screenshot-test.tsx
@@ -66,7 +66,7 @@ test.each(SKINS)('Logo with color override skin=%s', async (skin: KnownSkinName)
     await openStoryPage({
         id: 'components-logo--default',
         skin,
-        args: {color: 'black', size: 64, type: 'imagotype'},
+        args: {color: '#000000', size: 64, type: 'imagotype'},
     });
 
     const story = await screen.findByTestId('logo');
diff --git a/src/__stories__/logo-story.tsx b/src/__stories__/logo-story.tsx
index ae731c753..b96bb7faa 100644
--- a/src/__stories__/logo-story.tsx
+++ b/src/__stories__/logo-story.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import {BlauLogo, Logo, MovistarLogo, O2Logo, TelefonicaLogo, VivoLogo, TuLogo, O2NewLogo} from '../logo';
-import {Box, ResponsiveLayout} from '../index';
+import {Box, ResponsiveLayout, useTheme} from '../index';
+
+const COLOR_OPTIONS = ['default', 'neutralHigh', 'neutralMedium', '#000000'] as const;
 
 export default {
     title: 'Components/Logo',
@@ -8,6 +10,12 @@ export default {
     parameters: {
         fullScreen: true,
     },
+    argTypes: {
+        color: {
+            options: COLOR_OPTIONS,
+            control: {type: 'select'},
+        },
+    },
 };
 
 type Args = {
@@ -17,7 +25,7 @@ type Args = {
     action: 'none' | 'onPress' | 'href' | 'to';
     forceBrandLogo: boolean;
     brand: 'Movistar' | 'O2' | 'O2-new' | 'Vivo' | 'Telefonica' | 'Blau' | 'Tu';
-    color: string;
+    color: (typeof COLOR_OPTIONS)[number];
 };
 
 const getLogoActionProps = (action: string) => {
@@ -52,11 +60,12 @@ export const Default: StoryComponent<Args> = ({
     brand,
     color,
 }) => {
+    const {colorValues} = useTheme();
     const logoProps = {
         ...getLogoActionProps(action),
         type,
         size,
-        color: color || undefined,
+        color: color === 'default' ? undefined : colorValues[color as never] || color || undefined,
     };
 
     const CurrentLogo = {
@@ -88,7 +97,7 @@ Default.args = {
     inverse: false,
     forceBrandLogo: false,
     brand: 'Movistar',
-    color: '',
+    color: 'default',
 };
 
 Default.argTypes = {