diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index 58b41fe54e38a..7c4d34cdb3a88 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -32,40 +32,44 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
         className="components-circular-option-picker"
       >
         <div
-          className="components-circular-option-picker__option-wrapper"
+          className="components-circular-option-picker__swatches"
         >
-          <button
-            aria-label="Color: red"
-            aria-pressed={true}
-            className="components-button components-circular-option-picker__option is-pressed"
-            onBlur={[Function]}
-            onClick={[Function]}
-            onFocus={[Function]}
-            onMouseDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            style={
-              Object {
-                "backgroundColor": "#f00",
-                "color": "#f00",
-              }
-            }
-            type="button"
-          />
-          <svg
-            aria-hidden={true}
-            fill="#000000"
-            focusable={false}
-            height={24}
-            role="img"
-            viewBox="0 0 24 24"
-            width={24}
-            xmlns="http://www.w3.org/2000/svg"
+          <div
+            className="components-circular-option-picker__option-wrapper"
           >
-            <path
-              d="M9 18.6L3.5 13l1-1L9 16.4l9.5-9.9 1 1z"
+            <button
+              aria-label="Color: red"
+              aria-pressed={true}
+              className="components-button components-circular-option-picker__option is-pressed"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseDown={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              style={
+                Object {
+                  "backgroundColor": "#f00",
+                  "color": "#f00",
+                }
+              }
+              type="button"
             />
-          </svg>
+            <svg
+              aria-hidden={true}
+              fill="#000000"
+              focusable={false}
+              height={24}
+              role="img"
+              viewBox="0 0 24 24"
+              width={24}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9 18.6L3.5 13l1-1L9 16.4l9.5-9.9 1 1z"
+              />
+            </svg>
+          </div>
         </div>
         <div
           className="components-circular-option-picker__custom-clear-wrapper"
diff --git a/packages/components/src/circular-option-picker/index.js b/packages/components/src/circular-option-picker/index.js
index 7e4faa6ccf27c..556628a042377 100644
--- a/packages/components/src/circular-option-picker/index.js
+++ b/packages/components/src/circular-option-picker/index.js
@@ -105,7 +105,9 @@ export default function CircularOptionPicker( {
 				className
 			) }
 		>
-			{ options }
+			<div className="components-circular-option-picker__swatches">
+				{ options }
+			</div>
 			{ children }
 			{ actions && (
 				<div className="components-circular-option-picker__custom-clear-wrapper">
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index 23003048b137e..25e37b6993e96 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -4,11 +4,17 @@ $color-palette-circle-spacing: 12px;
 .components-circular-option-picker {
 	display: inline-block;
 	width: 100%;
+	margin-right: -10px;
 
 	.components-circular-option-picker__custom-clear-wrapper {
 		display: flex;
 		justify-content: flex-end;
 	}
+
+	// Account for scrollbar or no scrollbar.
+	.components-circular-option-picker__swatches {
+		margin-right: -$grid-unit-20;
+	}
 }
 
 .components-circular-option-picker__option-wrapper {
@@ -31,11 +37,6 @@ $color-palette-circle-spacing: 12px;
 		height: 100%;
 		width: 100%;
 	}
-
-	// Remove right margin on every 6th item so it aligns with gradient control.
-	&:nth-child(6n+6) {
-		margin-right: 0;
-	}
 }
 
 .components-circular-option-picker__option-wrapper::before {
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
index 07eed8a9d5019..52f9d901b71ae 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -285,51 +285,37 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
     <div
       className="components-circular-option-picker"
     >
-      <Option
-        aria-label="Color: red"
-        isSelected={true}
-        key="#f00"
-        onClick={[Function]}
-        selectedIconProps={
-          Object {
-            "fill": "#000000",
+      <div
+        className="components-circular-option-picker__swatches"
+      >
+        <Option
+          aria-label="Color: red"
+          isSelected={true}
+          key="#f00"
+          onClick={[Function]}
+          selectedIconProps={
+            Object {
+              "fill": "#000000",
+            }
           }
-        }
-        style={
-          Object {
-            "backgroundColor": "#f00",
-            "color": "#f00",
+          style={
+            Object {
+              "backgroundColor": "#f00",
+              "color": "#f00",
+            }
           }
-        }
-        tooltipText="red"
-      >
-        <div
-          className="components-circular-option-picker__option-wrapper"
+          tooltipText="red"
         >
-          <Tooltip
-            text="red"
+          <div
+            className="components-circular-option-picker__option-wrapper"
           >
-            <ForwardRef(Button)
-              aria-label="Color: red"
-              className="components-circular-option-picker__option"
-              isPressed={true}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-              style={
-                Object {
-                  "backgroundColor": "#f00",
-                  "color": "#f00",
-                }
-              }
+            <Tooltip
+              text="red"
             >
-              <button
+              <ForwardRef(Button)
                 aria-label="Color: red"
-                aria-pressed={true}
-                className="components-button components-circular-option-picker__option is-pressed"
+                className="components-circular-option-picker__option"
+                isPressed={true}
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -342,93 +328,93 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                     "color": "#f00",
                   }
                 }
-                type="button"
-              />
-            </ForwardRef(Button)>
-          </Tooltip>
-          <Icon
-            fill="#000000"
-            icon={
-              <SVG
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <Path
-                  d="M9 18.6L3.5 13l1-1L9 16.4l9.5-9.9 1 1z"
+                <button
+                  aria-label="Color: red"
+                  aria-pressed={true}
+                  className="components-button components-circular-option-picker__option is-pressed"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  style={
+                    Object {
+                      "backgroundColor": "#f00",
+                      "color": "#f00",
+                    }
+                  }
+                  type="button"
                 />
-              </SVG>
-            }
-          >
-            <SVG
+              </ForwardRef(Button)>
+            </Tooltip>
+            <Icon
               fill="#000000"
-              height={24}
-              viewBox="0 0 24 24"
-              width={24}
-              xmlns="http://www.w3.org/2000/svg"
+              icon={
+                <SVG
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <Path
+                    d="M9 18.6L3.5 13l1-1L9 16.4l9.5-9.9 1 1z"
+                  />
+                </SVG>
+              }
             >
-              <svg
-                aria-hidden={true}
+              <SVG
                 fill="#000000"
-                focusable={false}
                 height={24}
-                role="img"
                 viewBox="0 0 24 24"
                 width={24}
                 xmlns="http://www.w3.org/2000/svg"
               >
-                <Path
-                  d="M9 18.6L3.5 13l1-1L9 16.4l9.5-9.9 1 1z"
+                <svg
+                  aria-hidden={true}
+                  fill="#000000"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <path
+                  <Path
                     d="M9 18.6L3.5 13l1-1L9 16.4l9.5-9.9 1 1z"
-                  />
-                </Path>
-              </svg>
-            </SVG>
-          </Icon>
-        </div>
-      </Option>
-      <Option
-        aria-label="Color: white"
-        isSelected={false}
-        key="#fff"
-        onClick={[Function]}
-        selectedIconProps={Object {}}
-        style={
-          Object {
-            "backgroundColor": "#fff",
-            "color": "#fff",
+                  >
+                    <path
+                      d="M9 18.6L3.5 13l1-1L9 16.4l9.5-9.9 1 1z"
+                    />
+                  </Path>
+                </svg>
+              </SVG>
+            </Icon>
+          </div>
+        </Option>
+        <Option
+          aria-label="Color: white"
+          isSelected={false}
+          key="#fff"
+          onClick={[Function]}
+          selectedIconProps={Object {}}
+          style={
+            Object {
+              "backgroundColor": "#fff",
+              "color": "#fff",
+            }
           }
-        }
-        tooltipText="white"
-      >
-        <div
-          className="components-circular-option-picker__option-wrapper"
+          tooltipText="white"
         >
-          <Tooltip
-            text="white"
+          <div
+            className="components-circular-option-picker__option-wrapper"
           >
-            <ForwardRef(Button)
-              aria-label="Color: white"
-              className="components-circular-option-picker__option"
-              isPressed={false}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-              style={
-                Object {
-                  "backgroundColor": "#fff",
-                  "color": "#fff",
-                }
-              }
+            <Tooltip
+              text="white"
             >
-              <button
+              <ForwardRef(Button)
                 aria-label="Color: white"
-                aria-pressed={false}
-                className="components-button components-circular-option-picker__option"
+                className="components-circular-option-picker__option"
+                isPressed={false}
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -441,53 +427,53 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                     "color": "#fff",
                   }
                 }
-                type="button"
-              />
-            </ForwardRef(Button)>
-          </Tooltip>
-        </div>
-      </Option>
-      <Option
-        aria-label="Color: blue"
-        isSelected={false}
-        key="#00f"
-        onClick={[Function]}
-        selectedIconProps={Object {}}
-        style={
-          Object {
-            "backgroundColor": "#00f",
-            "color": "#00f",
+              >
+                <button
+                  aria-label="Color: white"
+                  aria-pressed={false}
+                  className="components-button components-circular-option-picker__option"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  style={
+                    Object {
+                      "backgroundColor": "#fff",
+                      "color": "#fff",
+                    }
+                  }
+                  type="button"
+                />
+              </ForwardRef(Button)>
+            </Tooltip>
+          </div>
+        </Option>
+        <Option
+          aria-label="Color: blue"
+          isSelected={false}
+          key="#00f"
+          onClick={[Function]}
+          selectedIconProps={Object {}}
+          style={
+            Object {
+              "backgroundColor": "#00f",
+              "color": "#00f",
+            }
           }
-        }
-        tooltipText="blue"
-      >
-        <div
-          className="components-circular-option-picker__option-wrapper"
+          tooltipText="blue"
         >
-          <Tooltip
-            text="blue"
+          <div
+            className="components-circular-option-picker__option-wrapper"
           >
-            <ForwardRef(Button)
-              aria-label="Color: blue"
-              className="components-circular-option-picker__option"
-              isPressed={false}
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-              style={
-                Object {
-                  "backgroundColor": "#00f",
-                  "color": "#00f",
-                }
-              }
+            <Tooltip
+              text="blue"
             >
-              <button
+              <ForwardRef(Button)
                 aria-label="Color: blue"
-                aria-pressed={false}
-                className="components-button components-circular-option-picker__option"
+                className="components-circular-option-picker__option"
+                isPressed={false}
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -500,12 +486,30 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                     "color": "#00f",
                   }
                 }
-                type="button"
-              />
-            </ForwardRef(Button)>
-          </Tooltip>
-        </div>
-      </Option>
+              >
+                <button
+                  aria-label="Color: blue"
+                  aria-pressed={false}
+                  className="components-button components-circular-option-picker__option"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  style={
+                    Object {
+                      "backgroundColor": "#00f",
+                      "color": "#00f",
+                    }
+                  }
+                  type="button"
+                />
+              </ForwardRef(Button)>
+            </Tooltip>
+          </div>
+        </Option>
+      </div>
       <div
         className="components-circular-option-picker__custom-clear-wrapper"
       >