diff --git a/packages/color-handle/package.json b/packages/color-handle/package.json
index 2f25970598..e056a4a1f7 100644
--- a/packages/color-handle/package.json
+++ b/packages/color-handle/package.json
@@ -61,7 +61,7 @@
         "@spectrum-web-components/color-loupe": "^0.4.8"
     },
     "devDependencies": {
-        "@spectrum-css/colorhandle": "^2.0.13"
+        "@spectrum-css/colorhandle": "^4.0.0-beta.1"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
diff --git a/packages/color-handle/src/spectrum-color-handle.css b/packages/color-handle/src/spectrum-color-handle.css
index 8cf67d91ee..3121712b8b 100644
--- a/packages/color-handle/src/spectrum-color-handle.css
+++ b/packages/color-handle/src/spectrum-color-handle.css
@@ -12,160 +12,154 @@ governing permissions and limitations under the License.
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 :host {
-    --spectrum-colorhandle-checkerboard-size: var(
-        --spectrum-global-dimension-static-size-100,
-        8px
+    --spectrum-colorhandle-size: var(--spectrum-color-handle-size-interim);
+    --spectrum-colorhandle-focused-size: var(
+        --spectrum-color-handle-size-key-focus-interim
+    );
+    --spectrum-colorhandle-hitarea-size: var(
+        --spectrum-color-control-track-width
     );
     --spectrum-colorhandle-animation-duration: var(
-        --spectrum-global-animation-duration-100,
-        0.13s
+        --spectrum-animation-duration-100
     );
     --spectrum-colorhandle-animation-easing: ease-in-out;
-    --spectrum-colorhandle-hitarea-size: var(
-        --spectrum-global-dimension-size-300
+    --spectrum-colorhandle-outer-border-color: rgba(
+        var(--spectrum-black-rgb),
+        0.42
     );
-}
-:host(.focus-visible),
-:host([focused]) {
-    height: calc(
-        var(
-                --spectrum-colorhandle-size,
-                var(--spectrum-global-dimension-size-200)
-            ) * 2
+    --spectrum-colorhandle-outer-border-width: var(
+        --spectrum-color-handle-outer-border-width
     );
-    margin-left: calc(
-        var(
-                --spectrum-colorhandle-size,
-                var(--spectrum-global-dimension-size-200)
-            ) * -1
+    --spectrum-colorhandle-inner-border-color: rgba(
+        var(--spectrum-black-rgb),
+        0.42
     );
-    margin-top: calc(
-        var(
-                --spectrum-colorhandle-size,
-                var(--spectrum-global-dimension-size-200)
-            ) * -1
+    --spectrum-colorhandle-inner-border-width: var(
+        --spectrum-color-handle-inner-border-width
     );
-    width: calc(
-        var(
-                --spectrum-colorhandle-size,
-                var(--spectrum-global-dimension-size-200)
-            ) * 2
+    --spectrum-colorhandle-border-width: var(
+        --spectrum-color-handle-border-width
     );
-}
-:host(:focus-visible),
-:host([focused]) {
-    height: calc(
-        var(
-                --spectrum-colorhandle-size,
-                var(--spectrum-global-dimension-size-200)
-            ) * 2
+    --spectrum-colorhandle-border-color: var(--spectrum-white);
+    --spectrum-colorhandle-checkerboard-dark-color: var(
+        --spectrum-opacity-checkerboard-square-dark
     );
-    margin-left: calc(
-        var(
-                --spectrum-colorhandle-size,
-                var(--spectrum-global-dimension-size-200)
-            ) * -1
+    --spectrum-colorhandle-checkerboard-light-color: var(
+        --spectrum-opacity-checkerboard-square-light
     );
-    margin-top: calc(
-        var(
-                --spectrum-colorhandle-size,
-                var(--spectrum-global-dimension-size-200)
-            ) * -1
+    --spectrum-colorhandle-checkerboard-size: var(
+        --spectrum-opacity-checkerboard-square-size
     );
-    width: calc(
-        var(
-                --spectrum-colorhandle-size,
-                var(--spectrum-global-dimension-size-200)
-            ) * 2
+    --spectrum-colorhandle-border-color-disabled: var(
+        --spectrum-disabled-content-color
+    );
+    --spectrum-colorhandle-fill-color-disabled: var(
+        --spectrum-disabled-background-color
     );
 }
 :host {
-    background-position: var(
-                --spectrum-colorhandle-background-offset,
-                calc(-1 * var(--spectrum-global-dimension-static-size-25))
-            )
+    background: repeating-conic-gradient(
             var(
-                --spectrum-colorhandle-background-offset,
-                calc(-1 * var(--spectrum-global-dimension-static-size-25))
-            ),
-        var(
-                --spectrum-colorhandle-background-offset,
-                calc(-1 * var(--spectrum-global-dimension-static-size-25))
-            )
-            calc(
-                var(--spectrum-colorhandle-checkerboard-size) +
-                    var(
-                        --spectrum-colorhandle-background-offset,
-                        calc(
-                            -1 * var(--spectrum-global-dimension-static-size-25)
-                        )
-                    )
-            ),
+                    --mod-colorhandle-checkerboard-light-color,
+                    var(--spectrum-colorhandle-checkerboard-light-color)
+                )
+                0 25%,
+            var(
+                    --mod-colorhandle-checkerboard-dark-color,
+                    var(--spectrum-colorhandle-checkerboard-dark-color)
+                )
+                0 50%
+        )
+        50% /
         calc(
-                var(--spectrum-colorhandle-checkerboard-size) +
-                    var(
-                        --spectrum-colorhandle-background-offset,
-                        calc(
-                            -1 * var(--spectrum-global-dimension-static-size-25)
-                        )
-                    )
-            )
-            calc(
-                -1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset, calc(-1 *
-                                var(
-                                    --spectrum-global-dimension-static-size-25
-                                )))
-            ),
+            var(
+                    --mod-colorhandle-checkerboard-size,
+                    var(--spectrum-colorhandle-checkerboard-size)
+                ) * 2
+        )
         calc(
-                -1 * var(--spectrum-colorhandle-checkerboard-size) + var(--spectrum-colorhandle-background-offset, calc(-1 *
-                                var(
-                                    --spectrum-global-dimension-static-size-25
-                                )))
-            )
             var(
-                --spectrum-colorhandle-background-offset,
-                calc(-1 * var(--spectrum-global-dimension-static-size-25))
-            );
-    background-size: var(--spectrum-global-dimension-static-size-200, 16px)
-        var(--spectrum-global-dimension-static-size-200, 16px);
+                    --mod-colorhandle-checkerboard-size,
+                    var(--spectrum-colorhandle-checkerboard-size)
+                ) * 2
+        );
+    block-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size));
+    border-color: var(
+        --highcontrast-colorhandle-border-color,
+        var(
+            --mod-colorhandle-border-color,
+            var(--spectrum-colorhandle-border-color)
+        )
+    );
     border-style: solid;
     border-width: var(
-        --spectrum-colorhandle-inner-border-size,
-        var(--spectrum-global-dimension-static-size-25)
+        --mod-colorhandle-border-width,
+        var(--spectrum-colorhandle-border-width)
     );
+    box-shadow: 0 0 0
+        var(
+            --mod-colorhandle-outer-border-width,
+            var(--spectrum-colorhandle-outer-border-width)
+        )
+        var(
+            --mod-colorhandle-outer-border-color,
+            var(--spectrum-colorhandle-outer-border-color)
+        );
     box-sizing: border-box;
     display: block;
-    height: var(
-        --spectrum-colorhandle-size,
-        var(--spectrum-global-dimension-size-200)
+    inline-size: var(--mod-colorhandle-size, var(--spectrum-colorhandle-size));
+    margin-block: calc(
+        var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) * -1 / 2
     );
-    margin-left: calc(
-        var(
-                --spectrum-colorhandle-size,
-                var(--spectrum-global-dimension-size-200)
-            ) * -1 / 2
-    );
-    margin-top: calc(
-        var(
-                --spectrum-colorhandle-size,
-                var(--spectrum-global-dimension-size-200)
-            ) * -1 / 2
+    margin-inline: calc(
+        var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) * -1 / 2
     );
     position: absolute;
-    transition: width var(--spectrum-colorhandle-animation-duration)
-            var(--spectrum-colorhandle-animation-easing),
-        height var(--spectrum-colorhandle-animation-duration)
-            var(--spectrum-colorhandle-animation-easing),
-        border-width var(--spectrum-colorhandle-animation-duration)
-            var(--spectrum-colorhandle-animation-easing),
-        margin-left var(--spectrum-colorhandle-animation-duration)
-            var(--spectrum-colorhandle-animation-easing),
-        margin-top var(--spectrum-colorhandle-animation-duration)
-            var(--spectrum-colorhandle-animation-easing);
-    width: var(
-        --spectrum-colorhandle-size,
-        var(--spectrum-global-dimension-size-200)
-    );
+    transition: inline-size
+            var(
+                --mod-colorhandle-animation-duration,
+                var(--spectrum-colorhandle-animation-duration)
+            )
+            var(
+                --mod-colorhandle-animation-easing,
+                var(--spectrum-colorhandle-animation-easing)
+            ),
+        block-size
+            var(
+                --mod-colorhandle-animation-duration,
+                var(--spectrum-colorhandle-animation-duration)
+            )
+            var(
+                --mod-colorhandle-animation-easing,
+                var(--spectrum-colorhandle-animation-easing)
+            ),
+        border-width
+            var(
+                --mod-colorhandle-animation-duration,
+                var(--spectrum-colorhandle-animation-duration)
+            )
+            var(
+                --mod-colorhandle-animation-easing,
+                var(--spectrum-colorhandle-animation-easing)
+            ),
+        margin-inline
+            var(
+                --mod-colorhandle-animation-duration,
+                var(--spectrum-colorhandle-animation-duration)
+            )
+            var(
+                --mod-colorhandle-animation-easing,
+                var(--spectrum-colorhandle-animation-easing)
+            ),
+        margin-block
+            var(
+                --mod-colorhandle-animation-duration,
+                var(--spectrum-colorhandle-animation-duration)
+            )
+            var(
+                --mod-colorhandle-animation-easing,
+                var(--spectrum-colorhandle-animation-easing)
+            );
     z-index: 1;
 }
 :host,
@@ -173,110 +167,115 @@ governing permissions and limitations under the License.
     border-radius: 100%;
 }
 :host:after {
+    block-size: var(
+        --mod-colorhandle-hitarea-size,
+        var(--spectrum-colorhandle-hitarea-size)
+    );
     content: '';
     display: block;
-    height: var(--spectrum-colorhandle-hitarea-size);
-    left: calc(50% - var(--spectrum-colorhandle-hitarea-size) / 2);
+    inline-size: var(
+        --mod-colorhandle-hitarea-size,
+        var(--spectrum-colorhandle-hitarea-size)
+    );
+    inset-block: calc(
+        50% -
+            var(
+                --mod-colorhandle-hitarea-size,
+                var(--spectrum-colorhandle-hitarea-size)
+            ) / 2
+    );
+    inset-inline: calc(
+        50% -
+            var(
+                --mod-colorhandle-hitarea-size,
+                var(--spectrum-colorhandle-hitarea-size)
+            ) / 2
+    );
     position: absolute;
-    top: calc(50% - var(--spectrum-colorhandle-hitarea-size) / 2);
-    width: var(--spectrum-colorhandle-hitarea-size);
-}
-:host([disabled]) {
-    pointer-events: none;
 }
-.color {
-    border-radius: 100%;
-    height: 100%;
-    width: 100%;
+:host(.focus-visible),
+:host(:focus),
+:host([focused]) {
+    block-size: var(
+        --mod-colorhandle-focused-size,
+        var(--spectrum-colorhandle-focused-size)
+    );
+    inline-size: var(
+        --mod-colorhandle-focused-size,
+        var(--spectrum-colorhandle-focused-size)
+    );
+    margin-block: calc(
+        var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) * -1
+    );
+    margin-inline: calc(
+        var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) * -1
+    );
+    outline: none;
 }
-:host {
-    background-color: var(
-        --spectrum-colorcontrol-checkerboard-light-color,
-        var(--spectrum-global-color-static-white)
+:host(:focus),
+:host(:focus-visible),
+:host([focused]) {
+    block-size: var(
+        --mod-colorhandle-focused-size,
+        var(--spectrum-colorhandle-focused-size)
     );
-    background-image: linear-gradient(
-            -45deg,
-            transparent 75.5%,
-            var(
-                    --spectrum-colorcontrol-checkerboard-dark-color,
-                    var(--spectrum-global-color-static-gray-300)
-                )
-                75.5%
-        ),
-        linear-gradient(
-            45deg,
-            transparent 75.5%,
-            var(
-                    --spectrum-colorcontrol-checkerboard-dark-color,
-                    var(--spectrum-global-color-static-gray-300)
-                )
-                75.5%
-        ),
-        linear-gradient(
-            -45deg,
-            var(
-                    --spectrum-colorcontrol-checkerboard-dark-color,
-                    var(--spectrum-global-color-static-gray-300)
-                )
-                25.5%,
-            transparent 25.5%
-        ),
-        linear-gradient(
-            45deg,
-            var(
-                    --spectrum-colorcontrol-checkerboard-dark-color,
-                    var(--spectrum-global-color-static-gray-300)
-                )
-                25.5%,
-            transparent 25.5%
-        );
-    border-color: var(
-        --spectrum-colorhandle-inner-border-color,
-        var(--spectrum-global-color-static-white)
+    inline-size: var(
+        --mod-colorhandle-focused-size,
+        var(--spectrum-colorhandle-focused-size)
     );
-    box-shadow: 0 0 var(--spectrum-colorhandle-outer-shadow-blur, 0)
-        var(
-            --spectrum-colorhandle-outer-shadow-spread,
-            var(--spectrum-alias-border-size-thin)
-        )
-        var(--spectrum-colorhandle-outer-shadow-color, #0000006b);
+    margin-block: calc(
+        var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) * -1
+    );
+    margin-inline: calc(
+        var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) * -1
+    );
+    outline: none;
 }
 :host([disabled]) {
     background: var(
-        --spectrum-colorhandle-fill-color-disabled,
-        var(--spectrum-alias-track-color-disabled)
+        --highcontrast-colorhandle-fill-color-disabled,
+        var(
+            --mod-colorhandle-fill-color-disabled,
+            var(--spectrum-colorhandle-fill-color-disabled)
+        )
     );
     border-color: var(
-        --spectrum-colorhandle-inner-border-color-disabled,
-        var(--spectrum-global-color-gray-400)
+        --highcontrast-colorhandle-border-color-disabled,
+        var(
+            --mod-colorhandle-border-color-disabled,
+            var(--spectrum-colorhandle-border-color-disabled)
+        )
     );
     box-shadow: none;
+    pointer-events: none;
 }
-:host([disabled]) .color {
+:host([disabled]) .spectrum-ColorHandle-inner {
     display: none;
 }
-.🤫 {
-    --spectrum-picked-color: 0;
-}
-.color {
+.spectrum-ColorHandle-inner {
     background-color: var(--spectrum-picked-color);
+    block-size: 100%;
+    border-radius: 100%;
     box-shadow: inset 0 0 0
         var(
-            --spectrum-colorhandle-outer-border-size,
-            var(--spectrum-alias-border-size-thin)
+            --mod-colorhandle-inner-border-width,
+            var(--spectrum-colorhandle-inner-border-width)
         )
         var(
-            --spectrum-colorhandle-inner-shadow-color,
-            var(--spectrum-colorhandle-outer-shadow-color)
+            --mod-colorhandle-inner-border-color,
+            var(--spectrum-colorhandle-inner-border-color)
         );
+    inline-size: 100%;
+}
+.🤫 {
+    --spectrum-picked-color: 0;
 }
 @media (forced-colors: active) {
     :host {
-        --spectrum-colorhandle-inner-border-color-disabled: GrayText;
-        --spectrum-colorhandle-fill-color-disabled: Canvas;
-        --spectrum-colorhandle-inner-border-color: CanvasText;
+        forced-color-adjust: none;
     }
     :host([disabled]) {
-        forced-color-adjust: none;
+        --highcontrast-colorhandle-border-color-disabled: GrayText;
+        --highcontrast-colorhandle-fill-color-disabled: Canvas;
     }
 }
diff --git a/packages/color-loupe/package.json b/packages/color-loupe/package.json
index 5f035ee75f..95f9c4cea6 100644
--- a/packages/color-loupe/package.json
+++ b/packages/color-loupe/package.json
@@ -60,7 +60,7 @@
         "@spectrum-web-components/base": "^0.7.5"
     },
     "devDependencies": {
-        "@spectrum-css/colorloupe": "^2.0.13"
+        "@spectrum-css/colorloupe": "^3.0.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",
diff --git a/packages/color-loupe/src/ColorLoupe.ts b/packages/color-loupe/src/ColorLoupe.ts
index 652e7d1818..dd0993b65e 100644
--- a/packages/color-loupe/src/ColorLoupe.ts
+++ b/packages/color-loupe/src/ColorLoupe.ts
@@ -36,620 +36,68 @@ export class ColorLoupe extends SpectrumElement {
 
     protected override render(): TemplateResult {
         return html`
-            <svg style="--spectrum-picked-color: ${this.color};">
+            <svg
+                class="spectrum-ColorLoupe is-open"
+                overflow="visible"
+                style="--spectrum-picked-color: ${this
+                    .color}; position: absolute;"
+            >
                 <defs>
                     <path
-                        id="spectrum-inner-loupe"
-                        class="inner"
-                        d="M24,0A24,24,0,0,1,48,24c0,16.255-24,40-24,40S0,40.255,0,24A24,24,0,0,1,24,0Z"
+                        id="loupe-path"
+                        d="M23 61.575C19.0044 57.435 15.2591 53.0606 11.784 48.475C8.68949 44.4532 5.96348 40.1608 3.639 35.65C1.224 30.8 0 26.549 0 23C0.00319993 17.6937 1.84059 12.5516 5.20091 8.44488C8.56122 4.33815 13.2378 1.51928 18.4385 0.465803C23.6392 -0.587678 29.0442 0.189006 33.7378 2.66428C38.4314 5.13955 42.125 9.16122 44.193 14.048C45.3915 16.88 46.0061 19.9248 46 23C46 26.551 44.774 30.811 42.355 35.661C40.0274 40.1747 37.298 44.4698 34.2 48.494C30.7297 53.0728 26.9898 57.4409 23 61.575ZZ"
+                        transform="translate(2, 2)"
                     />
-                    <path
-                        id="express-inner-loupe"
-                        class="inner"
-                        d="M-14330.692,18055.742A15.922,15.922,0,0,1-14334,18046a16,16,0,0,1,16-16,16,16,0,0,1,16,16,15.925,15.925,0,0,1-3.166,9.555c-.009.016-.018.029-.028.045-2.577,4.033-12.77,14.4-12.77,14.4S-14328.027,18059.484-14330.692,18055.742Z"
-                    />
-
-                    <g id="loupe-checkerboard">
-                        <g transform="translate(338 285)">
-                            <g transform="translate(-338 -285)">
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                            </g>
-                            <g transform="translate(-322 -285)">
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                            </g>
-                            <g transform="translate(-306 -285)">
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                            </g>
-                            <g transform="translate(-290 -285)">
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                            </g>
-                            <g transform="translate(-338 -269)">
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                            </g>
-                            <g transform="translate(-322 -269)">
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                            </g>
-                            <g transform="translate(-306 -269)">
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                            </g>
-                            <g transform="translate(-290 -269)">
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                            </g>
-                            <g transform="translate(-338 -253)">
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                            </g>
-                            <g transform="translate(-322 -253)">
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                            </g>
-                            <g transform="translate(-306 -253)">
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                            </g>
-                            <g transform="translate(-290 -253)">
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                            </g>
-                            <g transform="translate(-338 -237)">
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                            </g>
-                            <g transform="translate(-322 -237)">
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                            </g>
-                            <g transform="translate(-306 -237)">
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                            </g>
-                            <g transform="translate(-290 -237)">
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                            </g>
-                            <g transform="translate(-338 -221)">
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                            </g>
-                            <g transform="translate(-322 -221)">
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                            </g>
-                            <g transform="translate(-306 -221)">
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                            </g>
-                            <g transform="translate(-290 -221)">
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(338 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 285)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-light-color)"
-                                />
-                                <rect
-                                    width="8"
-                                    height="8"
-                                    transform="translate(346 293)"
-                                    fill="var(--spectrum-colorcontrol-checkerboard-dark-color)"
-                                />
-                            </g>
-                        </g>
-                    </g>
-
-                    <clipPath id="spectrum-loupe-clip">
-                        <use xlink:href="#spectrum-inner-loupe" />
-                    </clipPath>
-                    <clipPath id="express-loupe-clip">
-                        <use xlink:href="#express-inner-loupe" />
-                    </clipPath>
-                    <clipPath id="express-checkerboard-loupe-clip">
-                        <use
-                            xlink:href="#express-inner-loupe"
-                            transform="translate(14688 -17741)"
+                    <mask id="loupe-mask">
+                        <rect
+                            x="0"
+                            y="0"
+                            height="100"
+                            width="100"
+                            fill="white"
                         />
-                    </clipPath>
-
-                    <filter
-                        id="loupe-shadow"
-                        x="-16px"
-                        y="-16px"
-                        width="96"
-                        height="128"
-                        filterUnits="userSpaceOnUse"
+                        <use xlink:href="#path" fill="black" />
+                    </mask>
+                    <pattern
+                        id="checkerboard-primary"
+                        patternUnits="userSpaceOnUse"
+                        width="16"
+                        height="16"
+                        class="spectrum-ColorLoupe-checkerboard-pattern"
                     >
-                        <feOffset input="SourceAlpha" />
-                        <feGaussianBlur stdDeviation="2" result="d" />
-                        <feFlood flood-opacity="0.302" />
-                        <feComposite operator="in" in2="d" />
-                        <feComposite in="SourceGraphic" />
-                    </filter>
+                        <rect x="0" y="0" width="8" height="8" />
+                        <rect x="8" y="8" width="8" height="8" />
+                    </pattern>
+                    <pattern
+                        id="checkerboard-secondary"
+                        patternUnits="userSpaceOnUse"
+                        width="20"
+                        height="20"
+                        class="spectrum-ColorLoupe-checkerboard-pattern"
+                    >
+                        <rect x="0" y="0" width="10" height="10" />
+                        <rect x="10" y="10" width="10" height="10" />
+                    </pattern>
                 </defs>
 
-                <g
-                    transform="translate(4 4)"
-                    class="spectrum-ColorLoupe-spectrum"
-                >
-                    <g clip-path="url(#spectrum-loupe-clip)">
-                        <g transform="translate(-353.999 -289)">
-                            <use xlink:href="#loupe-checkerboard" />
-                        </g>
-                    </g>
-                    <g filter="url(#loupe-shadow)">
-                        <use xlink:href="#spectrum-inner-loupe" />
-                    </g>
-                    <path
-                        class="outer"
-                        d="M24,2A21.98,21.98,0,0,0,2,24c0,6.2,4,14.794,11.568,24.853A144.233,144.233,0,0,0,24,61.132,144.085,144.085,0,0,0,34.4,48.893C41.99,38.816,46,30.209,46,24A21.98,21.98,0,0,0,24,2m0-2A24,24,0,0,1,48,24c0,16.255-24,40-24,40S0,40.255,0,24A24,24,0,0,1,24,0Z"
-                    />
-                </g>
-
-                <g
-                    transform="translate(-290 -235)"
-                    class="spectrum-ColorLoupe-express"
-                >
-                    <g
-                        transform="translate(-58 -45)"
-                        clip-path="url(#express-checkerboard-loupe-clip)"
-                    >
-                        <use xlink:href="#loupe-checkerboard" />
-                    </g>
-                    <g
-                        transform="matrix(1, 0, 0, 1, 290, 238)"
-                        filter="url(#loupe-shadow)"
-                    >
-                        <g transform="translate(14340 -18024)">
-                            <use
-                                xlink:href="#express-inner-loupe"
-                                stroke-width="6"
-                                stroke="rgba(0, 0, 0, 0.15)"
-                                clip-path="url(#express-loupe-clip)"
-                            />
-                        </g>
-                    </g>
-                    <g transform="translate(14630 -17786)" fill="none">
-                        <path
-                            class="outer"
-                            d="M -14317.9482421875 18067.111328125 C -14315.0771484375 18064.130859375 -14308.7626953125 18057.462890625 -14306.884765625 18054.529296875 L -14306.8466796875 18054.4609375 L -14306.76953125 18054.359375 C -14304.9580078125 18051.931640625 -14304.0009765625 18049.041015625 -14304.0009765625 18046 C -14304.0009765625 18042.26171875 -14305.45703125 18038.74609375 -14308.1025390625 18036.1015625 C -14310.7470703125 18033.45703125 -14314.2626953125 18032 -14318.0009765625 18032 C -14321.7392578125 18032 -14325.2548828125 18033.45703125 -14327.8994140625 18036.1015625 C -14330.544921875 18038.74609375 -14332.0009765625 18042.26171875 -14332.0009765625 18046 C -14332.0009765625 18049.115234375 -14331 18052.0625 -14329.107421875 18054.5234375 L -14329.0634765625 18054.58203125 C -14327.1025390625 18057.3359375 -14320.802734375 18064.087890625 -14317.9482421875 18067.111328125 M -14317.96484375 18070 C -14317.96484375 18070 -14328.02734375 18059.484375 -14330.6923828125 18055.7421875 C -14332.767578125 18053.044921875 -14334.0009765625 18049.666015625 -14334.0009765625 18046 C -14334.0009765625 18037.166015625 -14326.8359375 18030 -14318.0009765625 18030 C -14309.166015625 18030 -14302.0009765625 18037.166015625 -14302.0009765625 18046 C -14302.0009765625 18049.580078125 -14303.177734375 18052.888671875 -14305.1669921875 18055.5546875 C -14305.17578125 18055.5703125 -14305.1845703125 18055.583984375 -14305.1953125 18055.599609375 C -14307.7724609375 18059.6328125 -14317.96484375 18070 -14317.96484375 18070 Z"
-                            stroke="none"
-                            fill="#fff"
+                <g class="spectrum-ColorLoupe-loupe">
+                    <g>
+                        <use
+                            xlink:href="#loupe-path"
+                            class="spectrum-ColorLoupe-checkerboard-background"
+                        />
+                        <use
+                            xlink:href="#loupe-path"
+                            class="spectrum-ColorLoupe-checkerboard-fill"
+                        />
+                        <use
+                            xlink:href="#loupe-path"
+                            class="spectrum-ColorLoupe-inner-border"
+                        />
+                        <use
+                            xlink:href="#loupe-path"
+                            mask="url(#loupe-mask)"
+                            class="spectrum-ColorLoupe-outer-border"
                         />
                     </g>
                 </g>
diff --git a/packages/color-loupe/src/spectrum-color-loupe.css b/packages/color-loupe/src/spectrum-color-loupe.css
index 30d10b9f2d..c52574a3f5 100644
--- a/packages/color-loupe/src/spectrum-color-loupe.css
+++ b/packages/color-loupe/src/spectrum-color-loupe.css
@@ -12,70 +12,119 @@ governing permissions and limitations under the License.
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 :host {
-    --spectrum-colorloupe-width-adjusted: calc(
-        var(--spectrum-colorloupe-width, var(--spectrum-alias-colorloupe-width)) +
-            var(--spectrum-global-dimension-static-size-100, 8px)
+    --spectrum-colorloupe-width: 48px;
+    --spectrum-colorloupe-height: 64px;
+    --spectrum-colorloupe-offset: 12px;
+    --spectrum-colorloupe-animation-distance: 8px;
+    --spectrum-colorloupe-drop-shadow-x: var(--spectrum-drop-shadow-x);
+    --spectrum-colorloupe-drop-shadow-y: var(
+        --spectrum-color-loupe-drop-shadow-y
     );
-    --spectrum-colorloupe-height-adjusted: calc(
-        var(
-                --spectrum-colorloupe-height,
-                var(--spectrum-alias-colorloupe-height)
-            ) + var(--spectrum-global-dimension-static-size-100, 8px)
+    --spectrum-colorloupe-drop-shadow-blur: var(
+        --spectrum-color-loupe-drop-shadow-blur
+    );
+    --spectrum-colorloupe-drop-shadow-color: var(
+        --spectrum-color-loupe-drop-shadow-color
+    );
+    --spectrum-colorloupe-outer-border-width: var(
+        --spectrum-color-loupe-outer-border-width
     );
-    --spectrum-colorloupe-offset: var(
-        --spectrum-global-dimension-static-size-200,
-        16px
+    --spectrum-colorloupe-inner-border-width: 1px;
+    --spectrum-colorloupe-outer-border-color: var(
+        --spectrum-color-loupe-outer-border
     );
-    --spectrum-colorloupe-animation-distance: var(
-        --spectrum-global-dimension-static-size-100,
-        8px
+    --spectrum-colorloupe-inner-border-color: var(
+        --spectrum-color-loupe-inner-border
+    );
+    --spectrum-colorloupe-checkerboard-dark-color: var(
+        --spectrum-opacity-checkerboard-square-dark
+    );
+    --spectrum-colorloupe-checkerboard-light-color: var(
+        --spectrum-opacity-checkerboard-square-light
     );
 }
 :host {
-    bottom: calc(50% + var(--spectrum-colorloupe-offset));
-    height: var(--spectrum-colorloupe-height-adjusted);
-    left: calc(50% - var(--spectrum-colorloupe-width-adjusted) / 2);
+    block-size: var(--spectrum-colorloupe-height);
+    filter: drop-shadow(
+        var(
+                --mod-colorloupe-drop-shadow-x,
+                var(--spectrum-colorloupe-drop-shadow-x)
+            )
+            var(
+                --mod-colorloupe-drop-shadow-y,
+                var(--spectrum-colorloupe-drop-shadow-y)
+            )
+            var(
+                --mod-colorloupe-drop-shadow-blur,
+                var(--spectrum-colorloupe-drop-shadow-blur)
+            )
+            var(
+                --mod-colorloupe-drop-shadow-color,
+                var(--spectrum-colorloupe-drop-shadow-color)
+            )
+    );
+    inline-size: var(--spectrum-colorloupe-width);
+    inset-block-end: calc(
+        var(--spectrum-color-handle-size-interim) -
+            var(--spectrum-color-handle-outer-border-width) +
+            var(--mod-colorloupe-offset, var(--spectrum-colorloupe-offset))
+    );
+    inset-inline-end: calc(50% - var(--spectrum-colorloupe-width) / 2 + 1px);
     opacity: 0;
     pointer-events: none;
     position: absolute;
-    transform: translateY(var(--spectrum-colorloupe-animation-distance));
+    transform: translateY(
+        var(
+            --mod-colorloupe-animation-distance,
+            var(--spectrum-colorloupe-animation-distance)
+        )
+    );
     transform-origin: bottom;
     transition: transform 0.1s ease-in-out, opacity 0.125s ease-in-out;
-    width: var(--spectrum-colorloupe-width-adjusted);
+}
+:host([dir='rtl']) {
+    inset-inline-end: calc(50% - var(--spectrum-colorloupe-width) / 2 - 1px);
 }
 :host([open]) {
     opacity: 1;
     transform: translate(0);
 }
-.outer {
-    stroke-width: var(--spectrum-colorloupe-outer-border-size, 0);
-}
-.spectrum-ColorLoupe-express {
-    display: var(--spectrum-colorloupe-express-visibility, none);
-}
-.spectrum-ColorLoupe-spectrum {
-    display: var(--spectrum-colorloupe-spectrum-visibility, block);
-}
-.outer {
-    fill: var(
-        --spectrum-colorloupe-inner-border-color,
-        var(--spectrum-global-color-static-white)
+.spectrum-ColorLoupe-inner-border {
+    fill: var(--spectrum-picked-color);
+    stroke: var(
+        --mod-colorloupe-inner-border-color,
+        var(--spectrum-colorloupe-inner-border-color)
+    );
+    stroke-width: var(
+        --mod-colorloupe-inner-border-width,
+        var(--spectrum-colorloupe-inner-border-width)
     );
-    stroke: var(--spectrum-colorloupe-outer-border-color, transparent);
 }
-.inner {
-    fill: var(--spectrum-picked-color);
+.spectrum-ColorLoupe-outer-border {
+    fill: none;
     stroke: var(
-        --spectrum-colorloupe-outer-stroke-color,
-        var(--spectrum-global-color-static-transparent-black-200)
+        --highcontrast-colorloupe-outer-border-color,
+        var(
+            --mod-colorloupe-outer-border-color,
+            var(--spectrum-colorloupe-outer-border-color)
+        )
     );
     stroke-width: var(
-        --spectrum-colorloupe-outer-stroke-width,
-        var(--spectrum-alias-border-size-thick)
+        --mod-colorloupe-outer-border-width,
+        var(--spectrum-colorloupe-outer-border-width)
     );
 }
+.spectrum-ColorLoupe-checkerboard-pattern {
+    fill: var(--spectrum-colorloupe-checkerboard-dark-color);
+}
+.spectrum-ColorLoupe-checkerboard-background {
+    fill: var(--spectrum-colorloupe-checkerboard-light-color);
+}
+.spectrum-ColorLoupe-checkerboard-fill {
+    fill: var(--spectrum-colorloupe-checkerboard-fill);
+}
 @media (forced-colors: active) {
     :host {
-        --spectrum-colorloupe-outer-border-color: CanvasText;
+        --highcontrast-colorloupe-outer-border-color: CanvasText;
     }
 }
diff --git a/scripts/spectrum-tokens.js b/scripts/spectrum-tokens.js
index 66a3bf344b..ae39841d79 100644
--- a/scripts/spectrum-tokens.js
+++ b/scripts/spectrum-tokens.js
@@ -58,6 +58,7 @@ const tokenPackages = [
     'picker',
     'colorarea',
     'colorwheel',
+    'colorloupe',
 ];
 
 const packagePaths = tokenPackages.map((packageName) => {
diff --git a/tools/styles/express/spectrum-core-global.css b/tools/styles/express/spectrum-core-global.css
index 145b37e8a6..0855dee31f 100644
--- a/tools/styles/express/spectrum-core-global.css
+++ b/tools/styles/express/spectrum-core-global.css
@@ -1688,12 +1688,6 @@ governing permissions and limitations under the License.
     --spectrum-alias-search-padding-left-xl: var(
         --spectrum-global-dimension-size-225
     );
-    --spectrum-alias-colorloupe-width: var(
-        --spectrum-global-dimension-static-size-450
-    );
-    --spectrum-alias-colorloupe-height: var(
-        --spectrum-global-dimension-static-size-550
-    );
     --spectrum-alias-search-border-radius-quiet: 0;
     --spectrum-alias-percent-50: 50%;
     --spectrum-alias-percent-70: 70%;
@@ -2687,12 +2681,6 @@ governing permissions and limitations under the License.
 }
 :host,
 :root {
-    --spectrum-colorloupe-express-visibility: block;
-    --spectrum-colorloupe-spectrum-visibility: none;
-    --spectrum-colorloupe-outer-border-color: transparent;
-    --spectrum-colorloupe-outer-border-size: 0;
-    --spectrum-colorloupe-outer-stroke-color: rgba(0, 0, 0, 0.15);
-    --spectrum-colorloupe-outer-stroke-width: 6px;
     --spectrum-colorhandle-size: var(--spectrum-global-dimension-size-250);
     --spectrum-colorhandle-background-offset: 0px;
     --spectrum-colorhandle-inner-shadow-color: rgba(0, 0, 0, 0.15);
diff --git a/tools/styles/spectrum-core-global.css b/tools/styles/spectrum-core-global.css
index 1dde5582bb..fca680cec5 100644
--- a/tools/styles/spectrum-core-global.css
+++ b/tools/styles/spectrum-core-global.css
@@ -1832,17 +1832,6 @@ governing permissions and limitations under the License.
     --spectrum-alias-ui-icon-asterisk-size-100: var(
         --spectrum-global-dimension-size-100
     );
-    --spectrum-alias-colorloupe-width: var(
-        --spectrum-global-dimension-static-size-600
-    );
-    --spectrum-alias-colorloupe-height: var(
-        --spectrum-global-dimension-static-size-800
-    );
-}
-:host,
-:root {
-    /* spectrum-colorAliases.css */
-    --spectrum-alias-colorhandle-outer-border-color: rgba(0, 0, 0, 0.42);
     --spectrum-alias-transparent-blue-background-color-hover: rgba(
         0,
         87,
@@ -2688,16 +2677,6 @@ governing permissions and limitations under the License.
 }
 :host,
 :root {
-    --spectrum-colorloupe-express-visibility: none;
-    --spectrum-colorloupe-spectrum-visibility: block;
-    --spectrum-colorloupe-outer-border-color: transparent;
-    --spectrum-colorloupe-outer-border-size: 0;
-    --spectrum-colorloupe-outer-stroke-color: var(
-        --spectrum-global-color-static-transparent-black-200
-    );
-    --spectrum-colorloupe-outer-stroke-width: var(
-        --spectrum-alias-border-size-thick
-    );
     --spectrum-colorhandle-background-offset: calc(
         var(--spectrum-global-dimension-static-size-25) * -1
     );
diff --git a/yarn.lock b/yarn.lock
index 6414024cf7..c882637e5f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4284,15 +4284,15 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/colorarea/-/colorarea-3.0.0.tgz#817f0371b032c2c6b2e8d87d5f7b400854f5d434"
   integrity sha512-4mUzpf6yU7W6WgmnNWGNXrzknz76HtRY2+1BwlijoclxyGID28QdfkfsSuaIm6f2fNWu6+XAQ4fSTImeZLa0jw==
 
-"@spectrum-css/colorhandle@^2.0.13":
-  version "2.0.13"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/colorhandle/-/colorhandle-2.0.13.tgz#4e6a73865d9f72592ca42ae4630322c4c3ef7ffc"
-  integrity sha512-o2iVyEt/Q44HX2Ae6EWW9WOVjidB42AcXNNoCM/+hIaj+OUjXkdru7GAJlGCj9WEMOItnxkkFvKOTc7kUdg2Ng==
+"@spectrum-css/colorhandle@^4.0.0-beta.1":
+  version "4.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/colorhandle/-/colorhandle-4.0.0-beta.1.tgz#6c5c3f537ffd91a1918078959c5327e8abbc7146"
+  integrity sha512-LiKfxBaIoozp0TD182LCEKH2Wg6A4AywsW0RVuwIfaTV7FksJuPbg8A/a/Vl/aWvAMqSUxee6zPMCe6dHgQ4+A==
 
-"@spectrum-css/colorloupe@^2.0.13":
-  version "2.0.13"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/colorloupe/-/colorloupe-2.0.13.tgz#d7feddf2905bc66612144158f9cccceea99f7add"
-  integrity sha512-aQSyNeOzFhRvMDBxdDLQjkpr4WRgnisdb6hLNuvRFU7hT9GJYdVap46RXujjTwk1LwqACmCCmpEcTj/qSVtrPA==
+"@spectrum-css/colorloupe@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/colorloupe/-/colorloupe-3.0.0.tgz#e100c1baa2405fe4fa6a6e747dc3386530303b20"
+  integrity sha512-bNeG8G9rDmVaIjZp0jHvEf2wmkemNPu54xEvWR6e0ZcYu9/j28dhODERPFX479g7RZsAvOqU2STVgxigt8AHYA==
 
 "@spectrum-css/colorslider@^2.0.13":
   version "2.0.13"