diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index 7bc533fd8ec60..861710065f761 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -23,4 +23,26 @@
 	&.is-opened &__panel-title .component-color-indicator {
 		display: none;
 	}
+
+	// Must equal $color-palette-circle-size from:
+	// @wordpress/components/src/circular-option-picker/style.scss
+	$swatch-size: 28px;
+
+	// Optimize fit of six swatches per line using calc() to create variable
+	// spacing that mimics a "justified/space-between" layout and works with
+	// or without scrollbars
+	@media screen and (min-width: $break-medium) {
+		// Overrides the default negative margin
+		.components-circular-option-picker__swatches {
+			margin-right: 0;
+		}
+		// Figures the spacing
+		.components-circular-option-picker__option-wrapper {
+			margin-right: calc((100% - (#{$swatch-size} * 6)) / 5);
+		}
+		// Removes the right margin on every sixth swatch
+		.components-circular-option-picker__option-wrapper:nth-child(6n + 6) {
+			margin-right: 0;
+		}
+	}
 }
diff --git a/packages/components/src/angle-picker-control/index.js b/packages/components/src/angle-picker-control/index.js
index 9d6e52c5b7e84..3b089f1ccefcc 100644
--- a/packages/components/src/angle-picker-control/index.js
+++ b/packages/components/src/angle-picker-control/index.js
@@ -7,25 +7,24 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import BaseControl from '../base-control';
-import { FlexBlock } from '../flex';
+import { FlexBlock, FlexItem } from '../flex';
 import NumberControl from '../number-control';
 import AngleCircle from './angle-circle';
-import {
-	Root,
-	NumberControlWrapper,
-} from './styles/angle-picker-control-styles';
+import { Root } from './styles/angle-picker-control-styles';
 
 export default function AnglePickerControl( {
 	className,
+	hideLabelFromVision,
 	id: idProp,
-	value,
+	label = __( 'Angle' ),
 	onChange,
-	label,
+	value,
 	...props
 } ) {
 	const instanceId = useInstanceId(
@@ -45,12 +44,13 @@ export default function AnglePickerControl( {
 	return (
 		<BaseControl
 			className={ classes }
+			hideLabelFromVision={ hideLabelFromVision }
 			id={ id }
 			label={ label }
 			{ ...props }
 		>
-			<Root gap={ 3 }>
-				<NumberControlWrapper>
+			<Root>
+				<FlexBlock>
 					<NumberControl
 						className="components-angle-picker-control__input-field"
 						id={ id }
@@ -60,14 +60,14 @@ export default function AnglePickerControl( {
 						step="1"
 						value={ value }
 					/>
-				</NumberControlWrapper>
-				<FlexBlock>
+				</FlexBlock>
+				<FlexItem>
 					<AngleCircle
 						aria-hidden="true"
 						value={ value }
 						onChange={ onChange }
 					/>
-				</FlexBlock>
+				</FlexItem>
 			</Root>
 		</BaseControl>
 	);
diff --git a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js
index f63f9bc6d1b00..f025cddb77907 100644
--- a/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js
+++ b/packages/components/src/angle-picker-control/styles/angle-picker-control-styles.js
@@ -6,7 +6,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { Flex, FlexItem } from '../../flex';
+import { Flex } from '../../flex';
 import { color } from '../../utils/style-mixins';
 
 const CIRCLE_SIZE = 30;
@@ -15,10 +15,6 @@ export const Root = styled( Flex )`
 	max-width: 200px;
 `;
 
-export const NumberControlWrapper = styled( FlexItem )`
-	width: 80px;
-`;
-
 export const CircleRoot = styled.div`
 	border-radius: 50%;
 	border: 1px solid ${ color( 'ui.borderLight' ) };
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index 0e23e51d24189..0dc42542dc80b 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -4,16 +4,16 @@ $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.
+	// Effectively negates the end swatch spacing to keep the swatches
+	// from wrapping before necessary.
 	.components-circular-option-picker__swatches {
-		margin-right: -$grid-unit-20;
+		margin-right: -$color-palette-circle-spacing;
 	}
 }
 
@@ -21,7 +21,7 @@ $color-palette-circle-spacing: 12px;
 	display: inline-block;
 	height: $color-palette-circle-size;
 	width: $color-palette-circle-size;
-	margin-right: $color-palette-circle-spacing + $grid-unit-05;
+	margin-right: $color-palette-circle-spacing;
 	margin-bottom: $color-palette-circle-spacing;
 	vertical-align: top;
 	transform: scale(1);
diff --git a/packages/components/src/custom-gradient-picker/index.js b/packages/components/src/custom-gradient-picker/index.js
index 57220e5b40cf2..39e63ab404ed2 100644
--- a/packages/components/src/custom-gradient-picker/index.js
+++ b/packages/components/src/custom-gradient-picker/index.js
@@ -13,7 +13,7 @@ import { __ } from '@wordpress/i18n';
  */
 import AnglePickerControl from '../angle-picker-control';
 import CustomGradientBar from './custom-gradient-bar';
-import { Flex, FlexItem } from '../flex';
+import { Flex } from '../flex';
 import SelectControl from '../select-control';
 import { getGradientParsed } from './utils';
 import { serializeGradient } from './serializer';
@@ -22,7 +22,10 @@ import {
 	HORIZONTAL_GRADIENT_ORIENTATION,
 	GRADIENT_OPTIONS,
 } from './constants';
-import { SelectWrapper } from './styles/custom-gradient-picker-styles';
+import {
+	AccessoryWrapper,
+	SelectWrapper,
+} from './styles/custom-gradient-picker-styles';
 
 const GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {
 	const angle = get(
@@ -43,8 +46,9 @@ const GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {
 	};
 	return (
 		<AnglePickerControl
-			value={ hasGradient ? angle : '' }
+			hideLabelFromVision
 			onChange={ onAngleChange }
+			value={ hasGradient ? angle : '' }
 		/>
 	);
 };
@@ -85,6 +89,7 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
 		<SelectControl
 			className="components-custom-gradient-picker__type-picker"
 			label={ __( 'Type' ) }
+			labelPosition={ 'side' }
 			onChange={ handleOnChange }
 			options={ GRADIENT_OPTIONS }
 			value={ hasGradient && type }
@@ -109,15 +114,15 @@ export default function CustomGradientPicker( { value, onChange } ) {
 						onChange={ onChange }
 					/>
 				</SelectWrapper>
-				{ type === 'linear-gradient' && (
-					<FlexItem>
+				<AccessoryWrapper>
+					{ type === 'linear-gradient' && (
 						<GradientAnglePicker
 							gradientAST={ gradientAST }
 							hasGradient={ hasGradient }
 							onChange={ onChange }
 						/>
-					</FlexItem>
-				) }
+					) }
+				</AccessoryWrapper>
 			</Flex>
 		</div>
 	);
diff --git a/packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.js b/packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.js
index f3d39295b163f..f8c99b5a8800d 100644
--- a/packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.js
+++ b/packages/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.js
@@ -5,8 +5,12 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { FlexItem } from '../../flex';
+import { FlexBlock } from '../../flex';
 
-export const SelectWrapper = styled( FlexItem )`
-	width: 110px;
+export const SelectWrapper = styled( FlexBlock )`
+	flex-grow: 5;
+`;
+
+export const AccessoryWrapper = styled( FlexBlock )`
+	flex-grow: 4;
 `;