diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx
index 2b9aa6b8b1..8a17ab0318 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx
+++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorGradientOption.tsx
@@ -46,7 +46,9 @@ export const ChartColorGradientOption = ({
           groupIndex: reversedIndex,
           totalGroups: COLOR_GROUP_COUNT,
         });
-        return <ColorSample key={index} color={groupColor} />;
+        return (
+          <ColorSample key={index} colorName={colorName} color={groupColor} />
+        );
       })}
     </StyledColorSamplesContainer>
   );
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx
index f4f66c77a6..94b6e58ed9 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx
+++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import { ColorSample } from 'twenty-ui/display';
 import { MenuItemSelect } from 'twenty-ui/navigation';
 import { type ThemeColor } from 'twenty-ui/theme';
+import { getMainColorNameFromPaletteColorName } from 'twenty-ui/utilities';
 
 type ChartColorPaletteOptionProps = {
   selectedItemId: string | null;
@@ -36,7 +37,13 @@ export const ChartColorPaletteOption = ({
     <StyledColorSamplesContainer>
       {paletteColors.map((paletteColorName) => {
         const baseColor = theme.color[paletteColorName] as string;
-        return <ColorSample key={paletteColorName} color={baseColor} />;
+        return (
+          <ColorSample
+            key={paletteColorName}
+            colorName={getMainColorNameFromPaletteColorName(paletteColorName)}
+            color={baseColor}
+          />
+        );
       })}
     </StyledColorSamplesContainer>
   );
diff --git a/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx b/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx
index 61e378e6f1..8b8af0cdf4 100644
--- a/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx
+++ b/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx
@@ -21,7 +21,7 @@ export const OnboardingModalCircularIcon = ({
   Icon,
 }: OnboardingModalCircularIconProps) => {
   const theme = useTheme();
-  const color = theme.grayScale.gray2;
+  const color = theme.background.invertedPrimary;
 
   return (
     <StyledCheckContainer color={color}>
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx
index 8fe56568f9..8ca14e602a 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx
@@ -78,7 +78,6 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
   isNewRow,
 }: SettingsDataModelFieldSelectFormOptionRowProps) => {
   const theme = useTheme();
-
   const SELECT_COLOR_DROPDOWN_ID = `select-color-dropdown-${option.id}`;
   const SELECT_ACTIONS_DROPDOWN_ID = `select-actions-dropdown-${option.id}`;
 
diff --git a/packages/twenty-ui/src/display/color/components/ColorSample.tsx b/packages/twenty-ui/src/display/color/components/ColorSample.tsx
index e693f19b33..9ec4eb063f 100644
--- a/packages/twenty-ui/src/display/color/components/ColorSample.tsx
+++ b/packages/twenty-ui/src/display/color/components/ColorSample.tsx
@@ -7,25 +7,28 @@ import { isDefined } from 'twenty-shared/utils';
 export type ColorSampleVariant = 'default' | 'pipeline';
 
 export type ColorSampleProps = {
-  colorName?: ThemeColor;
+  colorName: ThemeColor;
   color?: string;
   variant?: ColorSampleVariant;
 };
 
-const getColor = (theme: ThemeType, colorName?: ThemeColor, color?: string) => {
+const getColor = (theme: ThemeType, colorName: ThemeColor, color?: string) => {
   if (isDefined(color)) {
     return color;
   }
-  if (isDefined(colorName)) {
-    return theme.tag.background[colorName];
-  }
-  return 'transparent';
+
+  return theme.tag.background[colorName];
+};
+
+const getBorderColor = (theme: ThemeType, colorName: ThemeColor) => {
+  return theme.tag.text[colorName];
 };
 
 const StyledColorSample = styled.div<ColorSampleProps>`
   background-color: ${({ theme, colorName, color }) =>
     getColor(theme, colorName, color)};
-  border: 1px solid ${({ theme }) => theme.border.color.transparentStrong};
+  border: 1px solid
+    ${({ theme, colorName }) => getBorderColor(theme, colorName)};
   border-radius: 60px;
   height: ${({ theme }) => theme.spacing(4)};
   width: ${({ theme }) => theme.spacing(3)};
diff --git a/packages/twenty-ui/src/utilities/color/utils/__tests__/getMainColorNameFromPaletteColorName.test.ts b/packages/twenty-ui/src/utilities/color/utils/__tests__/getMainColorNameFromPaletteColorName.test.ts
new file mode 100644
index 0000000000..85c2766454
--- /dev/null
+++ b/packages/twenty-ui/src/utilities/color/utils/__tests__/getMainColorNameFromPaletteColorName.test.ts
@@ -0,0 +1,48 @@
+import { getMainColorNameFromPaletteColorName } from '../getMainColorNameFromPaletteColorName';
+
+describe('getMainColorNameFromPaletteColorName', () => {
+  it('should extract main color name from palette color names', () => {
+    expect(getMainColorNameFromPaletteColorName('purple5')).toBe('purple');
+    expect(getMainColorNameFromPaletteColorName('blue8')).toBe('blue');
+    expect(getMainColorNameFromPaletteColorName('red3')).toBe('red');
+    expect(getMainColorNameFromPaletteColorName('orange12')).toBe('orange');
+    expect(getMainColorNameFromPaletteColorName('yellow1')).toBe('yellow');
+    expect(getMainColorNameFromPaletteColorName('crimson9')).toBe('crimson');
+    expect(getMainColorNameFromPaletteColorName('violet7')).toBe('violet');
+    expect(getMainColorNameFromPaletteColorName('iris4')).toBe('iris');
+    expect(getMainColorNameFromPaletteColorName('grass6')).toBe('grass');
+    expect(getMainColorNameFromPaletteColorName('mint5')).toBe('mint');
+    expect(getMainColorNameFromPaletteColorName('lime3')).toBe('lime');
+    expect(getMainColorNameFromPaletteColorName('bronze8')).toBe('bronze');
+    expect(getMainColorNameFromPaletteColorName('gold2')).toBe('gold');
+    expect(getMainColorNameFromPaletteColorName('pink1')).toBe('pink');
+    expect(getMainColorNameFromPaletteColorName('turquoise2')).toBe(
+      'turquoise',
+    );
+    expect(getMainColorNameFromPaletteColorName('green10')).toBe('green');
+    expect(getMainColorNameFromPaletteColorName('cyan11')).toBe('cyan');
+    expect(getMainColorNameFromPaletteColorName('jade12')).toBe('jade');
+  });
+
+  it('should handle color names without numbers', () => {
+    expect(getMainColorNameFromPaletteColorName('purple')).toBe('purple');
+    expect(getMainColorNameFromPaletteColorName('blue')).toBe('blue');
+    expect(getMainColorNameFromPaletteColorName('red')).toBe('red');
+    expect(getMainColorNameFromPaletteColorName('orange')).toBe('orange');
+    expect(getMainColorNameFromPaletteColorName('yellow')).toBe('yellow');
+    expect(getMainColorNameFromPaletteColorName('crimson')).toBe('crimson');
+    expect(getMainColorNameFromPaletteColorName('violet')).toBe('violet');
+    expect(getMainColorNameFromPaletteColorName('iris')).toBe('iris');
+    expect(getMainColorNameFromPaletteColorName('grass')).toBe('grass');
+    expect(getMainColorNameFromPaletteColorName('mint')).toBe('mint');
+    expect(getMainColorNameFromPaletteColorName('lime')).toBe('lime');
+    expect(getMainColorNameFromPaletteColorName('bronze')).toBe('bronze');
+    expect(getMainColorNameFromPaletteColorName('gold')).toBe('gold');
+    expect(getMainColorNameFromPaletteColorName('pink')).toBe('pink');
+    expect(getMainColorNameFromPaletteColorName('turquoise')).toBe('turquoise');
+    expect(getMainColorNameFromPaletteColorName('green')).toBe('green');
+    expect(getMainColorNameFromPaletteColorName('cyan')).toBe('cyan');
+    expect(getMainColorNameFromPaletteColorName('jade')).toBe('jade');
+    expect(getMainColorNameFromPaletteColorName('gray')).toBe('gray');
+  });
+});
diff --git a/packages/twenty-ui/src/utilities/color/utils/getMainColorNameFromPaletteColorName.ts b/packages/twenty-ui/src/utilities/color/utils/getMainColorNameFromPaletteColorName.ts
new file mode 100644
index 0000000000..9d5694028c
--- /dev/null
+++ b/packages/twenty-ui/src/utilities/color/utils/getMainColorNameFromPaletteColorName.ts
@@ -0,0 +1,7 @@
+import { type ThemeColor } from '@ui/theme';
+
+export const getMainColorNameFromPaletteColorName = (
+  paletteColorName: string,
+): ThemeColor => {
+  return paletteColorName.replace(/\d+$/, '') as ThemeColor;
+};
diff --git a/packages/twenty-ui/src/utilities/index.ts b/packages/twenty-ui/src/utilities/index.ts
index 83581fdc85..9513838988 100644
--- a/packages/twenty-ui/src/utilities/index.ts
+++ b/packages/twenty-ui/src/utilities/index.ts
@@ -15,6 +15,7 @@ export { AnimatedFadeOut } from './animation/components/AnimatedFadeOut';
 export { AnimatedRotate } from './animation/components/AnimatedRotate';
 export { AnimatedTextWord } from './animation/components/AnimatedTextWord';
 export { AnimatedTranslation } from './animation/components/AnimatedTranslation';
+export { getMainColorNameFromPaletteColorName } from './color/utils/getMainColorNameFromPaletteColorName';
 export {
   stringToThemeColor,
   stringToThemeColorP3String,