diff --git a/apps/web/pages/settings/my-account/appearance.tsx b/apps/web/pages/settings/my-account/appearance.tsx
index 8403619d68..cff2e5901d 100644
--- a/apps/web/pages/settings/my-account/appearance.tsx
+++ b/apps/web/pages/settings/my-account/appearance.tsx
@@ -146,6 +146,7 @@ const AppearanceView = () => {
               <p className="text-default mb-2 block text-sm font-medium">{t("light_brand_color")}</p>
               <ColorPicker
                 defaultValue={user.brandColor}
+                resetDefaultValue="#292929"
                 onChange={(value) => {
                   if (!checkWCAGContrastColor("#ffffff", value)) {
                     setLightModeError(true);
@@ -167,6 +168,7 @@ const AppearanceView = () => {
               <p className="text-default mb-2 block text-sm font-medium">{t("dark_brand_color")}</p>
               <ColorPicker
                 defaultValue={user.darkBrandColor}
+                resetDefaultValue="#fafafa"
                 onChange={(value) => {
                   if (!checkWCAGContrastColor("#101010", value)) {
                     setDarkModeError(true);
diff --git a/packages/features/ee/teams/pages/team-appearance-view.tsx b/packages/features/ee/teams/pages/team-appearance-view.tsx
index 031352762f..cb46c96b41 100644
--- a/packages/features/ee/teams/pages/team-appearance-view.tsx
+++ b/packages/features/ee/teams/pages/team-appearance-view.tsx
@@ -151,6 +151,7 @@ const ProfileView = () => {
                   <p className="text-emphasis mb-2 block text-sm font-medium">{t("light_brand_color")}</p>
                   <ColorPicker
                     defaultValue={team.brandColor}
+                    resetDefaultValue="#292929"
                     onChange={(value) => form.setValue("brandColor", value, { shouldDirty: true })}
                   />
                 </div>
@@ -165,6 +166,7 @@ const ProfileView = () => {
                   <p className="text-emphasis mb-2 block text-sm font-medium">{t("dark_brand_color")}</p>
                   <ColorPicker
                     defaultValue={team.darkBrandColor}
+                    resetDefaultValue="#fafafa"
                     onChange={(value) => form.setValue("darkBrandColor", value, { shouldDirty: true })}
                   />
                 </div>
diff --git a/packages/ui/components/form/color-picker/colorpicker.tsx b/packages/ui/components/form/color-picker/colorpicker.tsx
index 99630c2840..6cdfe3752f 100644
--- a/packages/ui/components/form/color-picker/colorpicker.tsx
+++ b/packages/ui/components/form/color-picker/colorpicker.tsx
@@ -4,6 +4,8 @@ import { HexColorInput, HexColorPicker } from "react-colorful";
 
 import cx from "@calcom/lib/classNames";
 import { fallBackHex, isValidHexCode } from "@calcom/lib/getBrandColours";
+import { Button } from "@calcom/ui";
+import { RotateCcw } from "@calcom/ui/components/icon";
 
 export type ColorPickerProps = {
   defaultValue: string;
@@ -11,12 +13,18 @@ export type ColorPickerProps = {
   container?: HTMLElement;
   popoverAlign?: React.ComponentProps<typeof Popover.Content>["align"];
   className?: string;
+  resetDefaultValue?: string;
 };
 
 const ColorPicker = (props: ColorPickerProps) => {
   const init = !isValidHexCode(props.defaultValue)
     ? fallBackHex(props.defaultValue, false)
     : props.defaultValue;
+  const resetDefaultValue =
+    props.resetDefaultValue &&
+    (!isValidHexCode(props.resetDefaultValue)
+      ? fallBackHex(props.resetDefaultValue, false)
+      : props.resetDefaultValue);
   const [color, setColor] = useState(init);
 
   return (
@@ -57,6 +65,22 @@ const ColorPicker = (props: ColorPickerProps) => {
         }}
         type="text"
       />
+      {resetDefaultValue && color != resetDefaultValue && (
+        <div className="px-1">
+          <Button
+            color={resetDefaultValue == "#292929" ? "primary" : "secondary"}
+            target="_blank"
+            variant="icon"
+            rel="noreferrer"
+            StartIcon={RotateCcw}
+            tooltip="Reset to default"
+            onClick={() => {
+              setColor(fallBackHex(resetDefaultValue, false));
+              props.onChange(resetDefaultValue);
+            }}
+          />
+        </div>
+      )}
     </div>
   );
 };