diff --git a/core/api.txt b/core/api.txt
index 35661f491f3..45d0c646459 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -596,17 +596,23 @@ ion-checkbox,part,supporting-text
 ion-chip,shadow
 ion-chip,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-chip,prop,disabled,boolean,false,false,false
+ion-chip,prop,hue,"bold" | "subtle" | undefined,'subtle',false,false
 ion-chip,prop,mode,"ios" | "md",undefined,false,false
 ion-chip,prop,outline,boolean,false,false,false
 ion-chip,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-chip,prop,size,"large" | "small" | undefined,undefined,false,false
 ion-chip,prop,theme,"ios" | "md" | "ionic",undefined,false,false
+ion-chip,css-prop,--background,ionic
 ion-chip,css-prop,--background,ios
 ion-chip,css-prop,--background,md
+ion-chip,css-prop,--border-radius,ionic
 ion-chip,css-prop,--border-radius,ios
 ion-chip,css-prop,--border-radius,md
+ion-chip,css-prop,--color,ionic
 ion-chip,css-prop,--color,ios
 ion-chip,css-prop,--color,md
+ion-chip,css-prop,--focus-ring-color,ionic
+ion-chip,css-prop,--focus-ring-width,ionic
 
 ion-col,shadow
 ion-col,prop,mode,"ios" | "md",undefined,false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index f7b03873c24..194ba60f6a8 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -807,6 +807,10 @@ export namespace Components {
           * If `true`, the user cannot interact with the chip.
          */
         "disabled": boolean;
+        /**
+          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Only applies to the `ionic` theme.
+         */
+        "hue"?: 'bold' | 'subtle';
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -6287,6 +6291,10 @@ declare namespace LocalJSX {
           * If `true`, the user cannot interact with the chip.
          */
         "disabled"?: boolean;
+        /**
+          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Only applies to the `ionic` theme.
+         */
+        "hue"?: 'bold' | 'subtle';
         /**
           * The mode determines the platform behaviors of the component.
          */
diff --git a/core/src/components/chip/chip.common.scss b/core/src/components/chip/chip.common.scss
new file mode 100644
index 00000000000..a0a716aa1b4
--- /dev/null
+++ b/core/src/components/chip/chip.common.scss
@@ -0,0 +1,36 @@
+@import "../../themes/mixins";
+
+// Chip: Common Styles
+// --------------------------------------------------
+
+:host {
+  /**
+   * @prop --background: Background of the chip
+   * @prop --color: Color of the chip
+   * @prop --border-radius: Border radius of the chip
+   */
+  @include font-smoothing();
+
+  display: inline-flex;
+
+  position: relative;
+
+  align-items: center;
+  justify-content: center;
+
+  background: var(--background);
+  color: var(--color);
+
+  cursor: pointer;
+
+  overflow: hidden;
+
+  box-sizing: border-box;
+
+  vertical-align: middle;
+}
+
+:host(.chip-disabled) {
+  cursor: default;
+  pointer-events: none;
+}
diff --git a/core/src/components/chip/chip.ionic.scss b/core/src/components/chip/chip.ionic.scss
index 13b86a907bb..7b4b7038239 100644
--- a/core/src/components/chip/chip.ionic.scss
+++ b/core/src/components/chip/chip.ionic.scss
@@ -1,42 +1,26 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./chip.common";
 
 // Ionic Chip
 // --------------------------------------------------
 
 :host {
-  --background: #{globals.$ion-primitives-neutral-100};
-  --color: #{globals.$ion-primitives-neutral-900};
+  /**
+   * @prop --focus-ring-color: Color of the focus ring
+   * @prop --focus-ring-width: Width of the focus ring
+   */
   --focus-ring-color: #{globals.$ion-border-focus-default};
   --focus-ring-width: #{globals.$ion-border-size-050};
 
-  @include globals.font-smoothing;
   @include globals.padding(globals.$ion-space-150, globals.$ion-space-200);
   @include globals.border-radius(var(--border-radius));
 
-  display: inline-flex;
-
-  position: relative;
-
-  align-items: center;
-  justify-content: center;
-
   gap: globals.$ion-space-100;
 
-  background: var(--background);
-  color: var(--color);
-
   font-family: globals.$ion-font-family;
   font-weight: globals.$ion-font-weight-medium;
 
   line-height: globals.$ion-font-line-height-full;
-
-  cursor: pointer;
-
-  overflow: hidden;
-
-  box-sizing: border-box;
-
-  vertical-align: middle;
 }
 
 // Outline Chip
@@ -45,13 +29,6 @@
 :host(.chip-outline) {
   border-width: globals.$ion-border-size-025;
   border-style: globals.$ion-border-style-solid;
-  border-color: globals.$ion-primitives-neutral-100;
-
-  background: transparent;
-}
-
-:host(.chip-outline.ion-color) {
-  border-color: globals.current-color(base, 0.32);
 }
 
 // Chip: Focus
@@ -66,12 +43,20 @@
 // ---------------------------------------------
 
 @media (any-hover: hover) {
-  :host(:hover) {
+  :host(.chip-subtle:hover) {
     --background: #{globals.$ion-primitives-neutral-200};
   }
 
-  :host(.ion-color:hover) {
-    background: globals.current-color(base, 0.12);
+  :host(.chip-bold:hover) {
+    --background: #{globals.$ion-primitives-neutral-1100};
+  }
+
+  :host(.chip-subtle.ion-color:hover) {
+    background: globals.current-color(tint, $subtle: true);
+  }
+
+  :host(.chip-bold.ion-color:hover) {
+    background: globals.current-color(shade);
   }
 }
 
@@ -80,7 +65,6 @@
 
 :host(.chip-disabled) {
   opacity: 0.6;
-  pointer-events: none;
 }
 
 // Chip Shapes
@@ -110,7 +94,7 @@
 :host(.chip-small) {
   min-height: globals.$ion-scale-600;
 
-  font-size: #{globals.$ion-font-size-300};
+  font-size: globals.$ion-font-size-300;
 }
 
 :host(.chip-large) {
@@ -119,18 +103,51 @@
   font-size: globals.$ion-font-size-350;
 }
 
+// Subtle Chip
+// ---------------------------------------------
+
+:host(.chip-subtle) {
+  --background: #{globals.$ion-primitives-neutral-100};
+  --color: #{globals.$ion-primitives-neutral-800};
+}
+
+:host(.chip-outline.chip-subtle) {
+  border-color: globals.$ion-primitives-neutral-300;
+}
+
+// Bold Chip
+// ---------------------------------------------
+
+:host(.chip-bold) {
+  --background: #{globals.$ion-bg-neutral-bold-default};
+  --color: #{globals.$ion-primitives-base-white};
+}
+
+:host(.chip-outline.chip-bold) {
+  // TODO(FW-6450): this is a made up design choice based on a
+  // darker shade of the background color
+  border-color: globals.$ion-primitives-neutral-1200;
+}
+
 // Chip Colors
 // ---------------------------------------------
 
-:host(.ion-color) {
-  background: globals.current-color(base, 0.08);
-  color: globals.current-color(shade);
+// Subtle
+:host(.chip-subtle.ion-color) {
+  background: globals.current-color(base, $subtle: true);
+  color: globals.current-color(contrast, $subtle: true);
+}
+
+:host(.chip-subtle.chip-outline.ion-color) {
+  border-color: globals.current-color(shade, $subtle: true);
 }
 
-:host(.ion-color:focus) {
-  background: globals.current-color(base, 0.12);
+// Bold
+:host(.chip-bold.ion-color) {
+  background: globals.current-color(base);
+  color: globals.current-color(contrast);
 }
 
-:host(.ion-color.ion-activated) {
-  background: globals.current-color(base, 0.16);
+:host(.chip-bold.chip-outline.ion-color) {
+  border-color: globals.current-color(shade);
 }
diff --git a/core/src/components/chip/chip.ios.scss b/core/src/components/chip/chip.ios.scss
index b016c063eb0..e1e9b30808d 100644
--- a/core/src/components/chip/chip.ios.scss
+++ b/core/src/components/chip/chip.ios.scss
@@ -1,4 +1,4 @@
-@import "./chip";
+@import "./chip.native";
 @import "./chip.vars";
 
 :host {
diff --git a/core/src/components/chip/chip.md.scss b/core/src/components/chip/chip.md.scss
index b531b9cfc57..d27884bb9f8 100644
--- a/core/src/components/chip/chip.md.scss
+++ b/core/src/components/chip/chip.md.scss
@@ -1,4 +1,4 @@
-@import "./chip";
+@import "./chip.native";
 @import "./chip.vars";
 
 :host {
diff --git a/core/src/components/chip/chip.scss b/core/src/components/chip/chip.native.scss
similarity index 85%
rename from core/src/components/chip/chip.scss
rename to core/src/components/chip/chip.native.scss
index 6e32716eddc..d07f3d33ea2 100644
--- a/core/src/components/chip/chip.scss
+++ b/core/src/components/chip/chip.native.scss
@@ -1,45 +1,22 @@
 @import "../../themes/native/native.globals";
 @import "./chip.vars";
+@import "./chip.common";
 
 :host {
-  /**
-   * @prop --background: Background of the chip
-   * @prop --color: Color of the chip
-   * @prop --border-radius: Border radius of the chip
-   */
   --background: #{rgba($text-color-rgb, 0.12)};
   --color: #{rgba($text-color-rgb, 0.87)};
 
   @include border-radius(var(--border-radius));
-  @include font-smoothing();
   @include margin(4px);
   @include padding(6px, 12px);
 
-  display: inline-flex;
-
-  position: relative;
-
-  align-items: center;
-
   min-height: 32px;
 
-  background: var(--background);
-  color: var(--color);
-
   font-family: $font-family-base;
-
-  cursor: pointer;
-
-  overflow: hidden;
-
-  vertical-align: middle;
-  box-sizing: border-box;
 }
 
 :host(.chip-disabled) {
-  cursor: default;
   opacity: 0.4;
-  pointer-events: none;
 }
 
 // Chip Colors
@@ -58,6 +35,15 @@
   background: current-color(base, 0.16);
 }
 
+// Chip: Hover
+// ---------------------------------------------
+
+@media (any-hover: hover) {
+  :host(.ion-color:hover) {
+    background: current-color(base, 0.12);
+  }
+}
+
 // Outline Chip
 // ---------------------------------------------
 
diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx
index be7c9b218b7..bbd30e823cb 100644
--- a/core/src/components/chip/chip.tsx
+++ b/core/src/components/chip/chip.tsx
@@ -37,6 +37,14 @@ export class Chip implements ComponentInterface {
    */
   @Prop() disabled = false;
 
+  /**
+   * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for
+   * a chip with muted, subtle colors.
+   *
+   * Only applies to the `ionic` theme.
+   */
+  @Prop() hue?: 'bold' | 'subtle' = 'subtle';
+
   /**
    * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully
    * rounded corners, or `"rectangular"` for a chip without rounded corners.
@@ -81,9 +89,9 @@ export class Chip implements ComponentInterface {
   }
 
   render() {
+    const { hue } = this;
     const theme = getIonTheme(this);
     const size = this.getSize();
-
     const shape = this.getShape();
 
     return (
@@ -97,6 +105,7 @@ export class Chip implements ComponentInterface {
           'ion-activatable': true,
           'ion-focusable': !this.disabled,
           [`chip-${size}`]: size !== undefined,
+          [`chip-${hue}`]: hue !== undefined,
         })}
       >
         <slot></slot>
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 5992decf30f..1a204519fc6 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
index cf22e2f2436..1e31582842a 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png
index e496c49b794..57b0cb4c3ce 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index b0dd4fa2388..e0ce3ff4476 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 6b10c5832ee..949a3d1f45e 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png
index e694601bc7b..fa07901b5b7 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png
index c79cab78c97..2a036eab36f 100644
Binary files a/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/basic/chip.e2e.ts-snapshots/chip-solid-color-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts b/core/src/components/chip/test/hue/chip.e2e.ts
new file mode 100644
index 00000000000..8b4384e0b04
--- /dev/null
+++ b/core/src/components/chip/test/hue/chip.e2e.ts
@@ -0,0 +1,214 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('chip: hue'), () => {
+    test('should render subtle chips', async ({ page }) => {
+      await page.setContent(
+        `
+        // Adding margin so chips aren't overlapping
+        <style>
+          ion-chip {
+            margin: 4px 0;
+          }
+        </style>
+
+        <div id="container">
+          <ion-chip>
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip color="primary">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip color="secondary">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip color="tertiary">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip color="success">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip color="warning">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip color="danger">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip color="light">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip color="medium">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip color="dark">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+
+          <br>
+
+          <ion-chip outline>
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip outline color="primary">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip outline color="secondary">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip outline color="tertiary">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip outline color="success">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip outline color="warning">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip outline color="danger">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip outline color="light">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip outline color="medium">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip outline color="dark">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`chip-hue-subtle`));
+    });
+
+    test('should render bold chips', async ({ page }) => {
+      await page.setContent(
+        `
+        // Adding margin so chips aren't overlapping
+        <style>
+          ion-chip {
+            margin: 4px 0;
+          }
+        </style>
+
+        <div id="container">
+          <ion-chip hue="bold">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip hue="bold" color="primary">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip hue="bold" color="secondary">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip hue="bold" color="tertiary">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip hue="bold" color="success">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip hue="bold" color="warning">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip hue="bold" color="danger">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip hue="bold" color="light">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip hue="bold" color="medium">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip hue="bold" color="dark">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+
+          <br>
+
+          <ion-chip hue="bold" outline>
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip hue="bold" outline color="primary">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip hue="bold" outline color="secondary">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip hue="bold" outline color="tertiary">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip hue="bold" outline color="success">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip hue="bold" outline color="warning">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip hue="bold" outline color="danger">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip hue="bold" outline color="light">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip hue="bold" outline color="medium">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+          <ion-chip hue="bold" outline color="dark">
+            <ion-icon name="logo-ionic"></ion-icon>
+            <ion-label>Chip</ion-label>
+          </ion-chip>
+        </div>
+      `,
+        config
+      );
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`chip-hue-bold`));
+    });
+  });
+});
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1e3c7d3d62d
Binary files /dev/null and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..37d171481b1
Binary files /dev/null and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..af7aacf91fa
Binary files /dev/null and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-bold-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..162501dbd75
Binary files /dev/null and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1ebcaac98fb
Binary files /dev/null and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e82067de5f6
Binary files /dev/null and b/core/src/components/chip/test/hue/chip.e2e.ts-snapshots/chip-hue-subtle-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/hue/index.html b/core/src/components/chip/test/hue/index.html
new file mode 100644
index 00000000000..a7cfcd29fea
--- /dev/null
+++ b/core/src/components/chip/test/hue/index.html
@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Chip - Hue</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      ion-chip {
+        margin-bottom: 8px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Chip - Hue</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <h2>Chip Hue: Subtle</h2>
+
+        <ion-chip>
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip color="primary">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip color="secondary">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip color="tertiary">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip color="success">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip color="warning">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip color="danger">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip color="light">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip color="medium">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip color="dark">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+
+        <br />
+
+        <ion-chip outline>
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip outline color="primary">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip outline color="secondary">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip outline color="tertiary">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip outline color="success">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip outline color="warning">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip outline color="danger">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip outline color="light">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip outline color="medium">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip outline color="dark">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+
+        <h2>Chip Hue: Bold</h2>
+
+        <ion-chip hue="bold">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip hue="bold" color="primary">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip hue="bold" color="secondary">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip hue="bold" color="tertiary">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip hue="bold" color="success">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip hue="bold" color="warning">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip hue="bold" color="danger">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip hue="bold" color="light">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip hue="bold" color="medium">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip hue="bold" color="dark">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+
+        <br />
+
+        <ion-chip hue="bold" outline>
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip hue="bold" outline color="primary">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip hue="bold" outline color="secondary">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip hue="bold" outline color="tertiary">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip hue="bold" outline color="success">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip hue="bold" outline color="warning">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip hue="bold" outline color="danger">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip hue="bold" outline color="light">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip hue="bold" outline color="medium">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+        <ion-chip hue="bold" outline color="dark">
+          <ion-icon name="logo-ionic"></ion-icon>
+          <ion-label>Chip</ion-label>
+        </ion-chip>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index c07c7e86f7e..edfdaa7c0f1 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -550,14 +550,14 @@ setting the `checked` property.
 
 
 @ProxyCmp({
-  inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'size', 'theme']
+  inputs: ['color', 'disabled', 'hue', 'mode', 'outline', 'shape', 'size', 'theme']
 })
 @Component({
   selector: 'ion-chip',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'size', 'theme'],
+  inputs: ['color', 'disabled', 'hue', 'mode', 'outline', 'shape', 'size', 'theme'],
 })
 export class IonChip {
   protected el: HTMLIonChipElement;
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index 5747b3f5b1b..18541fed6ca 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -618,14 +618,14 @@ export declare interface IonCardTitle extends Components.IonCardTitle {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIonChip,
-  inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'size', 'theme']
+  inputs: ['color', 'disabled', 'hue', 'mode', 'outline', 'shape', 'size', 'theme']
 })
 @Component({
   selector: 'ion-chip',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'size', 'theme'],
+  inputs: ['color', 'disabled', 'hue', 'mode', 'outline', 'shape', 'size', 'theme'],
   standalone: true
 })
 export class IonChip {
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 9cb538c341c..ad2b55f7b67 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -266,6 +266,7 @@ export const IonChip: StencilVueComponent<JSX.IonChip> = /*@__PURE__*/ defineCon
   'color',
   'outline',
   'disabled',
+  'hue',
   'shape',
   'size'
 ]);