diff --git a/packages/editor/src/components/color-palette/control.js b/packages/editor/src/components/color-palette/control.js
index 76b5c9070f36e..d39bb961362c4 100644
--- a/packages/editor/src/components/color-palette/control.js
+++ b/packages/editor/src/components/color-palette/control.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { BaseControl, ColorIndicator } from '@wordpress/components';
+import { ifCondition, compose } from '@wordpress/compose';
 import { Fragment } from '@wordpress/element';
 import { sprintf, __ } from '@wordpress/i18n';
 
@@ -15,7 +16,13 @@ import { getColorObjectByColorValue } from '../colors';
 // translators: first %s: The type of color (e.g. background color), second %s: the color name or value (e.g. red or #ff0000)
 const colorIndicatorAriaLabel = __( '(current %s: %s)' );
 
-export function ColorPaletteControl( { label, value, onChange, colors } ) {
+export function ColorPaletteControl( {
+	colors,
+	disableCustomColors,
+	label,
+	onChange,
+	value,
+} ) {
 	const colorObject = getColorObjectByColorValue( colors, value );
 	const colorName = colorObject && colorObject.name;
 	const ariaLabel = sprintf( colorIndicatorAriaLabel, label.toLowerCase(), colorName || value );
@@ -40,9 +47,13 @@ export function ColorPaletteControl( { label, value, onChange, colors } ) {
 				className="editor-color-palette-control__color-palette"
 				value={ value }
 				onChange={ onChange }
+				{ ... { colors, disableCustomColors } }
 			/>
 		</BaseControl>
 	);
 }
 
-export default withColorContext( ColorPaletteControl );
+export default compose( [
+	withColorContext,
+	ifCondition( ( { hasColorsToChoose } ) => hasColorsToChoose ),
+] )( ColorPaletteControl );
diff --git a/packages/editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/editor/src/components/color-palette/test/__snapshots__/control.js.snap
index 0dc3d02690413..0114e273c5a01 100644
--- a/packages/editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -15,6 +15,14 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
 >
   <WithColorContext(ColorPalette)
     className="editor-color-palette-control__color-palette"
+    colors={
+      Array [
+        Object {
+          "color": "#f00",
+          "name": "red",
+        },
+      ]
+    }
     onChange={[Function]}
     value="#f00"
   />
diff --git a/packages/editor/src/components/color-palette/with-color-context.js b/packages/editor/src/components/color-palette/with-color-context.js
index 2f20435f68553..7112550219bbf 100644
--- a/packages/editor/src/components/color-palette/with-color-context.js
+++ b/packages/editor/src/components/color-palette/with-color-context.js
@@ -12,10 +12,13 @@ import { withSelect } from '@wordpress/data';
 
 export default createHigherOrderComponent(
 	withSelect(
-		( select ) => {
+		( select, ownProps ) => {
 			const settings = select( 'core/editor' ).getEditorSettings();
-			const colors = settings.colors;
-			const disableCustomColors = settings.disableCustomColors;
+			const colors = ownProps.colors === undefined ?
+				settings.colors : ownProps.colors;
+
+			const disableCustomColors = ownProps.disableCustomColors === undefined ?
+				settings.disableCustomColors : ownProps.disableCustomColors;
 			return {
 				colors,
 				disableCustomColors,
diff --git a/packages/editor/src/components/panel-color-settings/index.js b/packages/editor/src/components/panel-color-settings/index.js
index a93bad1137362..050b45f78791d 100644
--- a/packages/editor/src/components/panel-color-settings/index.js
+++ b/packages/editor/src/components/panel-color-settings/index.js
@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import { omit } from 'lodash';
+import { some } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { PanelBody, ColorIndicator } from '@wordpress/components';
-import { ifCondition, compose } from '@wordpress/compose';
+import { ifCondition } from '@wordpress/compose';
 import { sprintf, __ } from '@wordpress/i18n';
 
 /**
@@ -17,58 +17,107 @@ import ColorPaletteControl from '../color-palette/control';
 import withColorContext from '../color-palette/with-color-context';
 import { getColorObjectByColorValue } from '../colors';
 
+const hasCustomColorsDisabledForSetting = ( disableCustomColors, colorSetting ) => {
+	if ( colorSetting.disableCustomColors !== undefined ) {
+		return colorSetting.disableCustomColors;
+	}
+	return disableCustomColors;
+};
+
+const hasColorsToChooseInSetting = (
+	colors = [],
+	disableCustomColors,
+	colorSetting ) => {
+	if ( ! hasCustomColorsDisabledForSetting( disableCustomColors, colorSetting ) ) {
+		return true;
+	}
+	return ( colorSetting.colors || colors ).length > 0;
+};
+
+const hasColorsToChoose = ( { colors, disableCustomColors, colorSettings } ) => {
+	return some( colorSettings, ( colorSetting ) => {
+		return hasColorsToChooseInSetting(
+			colors,
+			disableCustomColors,
+			colorSetting
+		);
+	} );
+};
+
 // translators: first %s: The type of color (e.g. background color), second %s: the color name or value (e.g. red or #ff0000)
 const colorIndicatorAriaLabel = __( '(%s: %s)' );
 
 const renderColorIndicators = ( colorSettings, colors ) => {
-	return colorSettings.map( ( { value, label }, index ) => {
-		if ( ! value ) {
-			return null;
-		}
+	return colorSettings.map(
+		( { value, label, colors: availableColors }, index ) => {
+			if ( ! value ) {
+				return null;
+			}
 
-		const colorObject = getColorObjectByColorValue( colors, value );
-		const colorName = colorObject && colorObject.name;
-		const ariaLabel = sprintf( colorIndicatorAriaLabel, label.toLowerCase(), colorName || value );
+			const colorObject = getColorObjectByColorValue(
+				availableColors || colors,
+				value
+			);
+			const colorName = colorObject && colorObject.name;
+			const ariaLabel = sprintf(
+				colorIndicatorAriaLabel,
+				label.toLowerCase(),
+				colorName || value
+			);
 
-		return (
-			<ColorIndicator
-				key={ index }
-				colorValue={ value }
-				aria-label={ ariaLabel }
-			/>
-		);
-	} );
+			return (
+				<ColorIndicator
+					key={ index }
+					colorValue={ value }
+					aria-label={ ariaLabel }
+				/>
+			);
+		}
+	);
 };
 
 // colorSettings is passed as an array of props so that it can be used for
 // mapping both ColorIndicator and ColorPaletteControl components. Passing
 // an array of components/nodes here wouldn't be feasible.
-export function PanelColorSettings( { title, colorSettings, colors, children, ...props } ) {
-	const className = 'editor-panel-color-settings';
+export const PanelColorSettings = ifCondition( hasColorsToChoose )(
+	( {
+		children,
+		colors,
+		colorSettings,
+		disableCustomColors,
+		title,
+		...props
+	} ) => {
+		const className = 'editor-panel-color-settings';
 
-	const titleElement = (
-		<span className={ `${ className }__panel-title` }>
-			{ title }
-			{ renderColorIndicators( colorSettings, colors ) }
-		</span>
-	);
+		const titleElement = (
+			<span className={ `${ className }__panel-title` }>
+				{ title }
+				{ renderColorIndicators( colorSettings, colors ) }
+			</span>
+		);
 
-	return (
-		<PanelBody
-			className={ className }
-			title={ titleElement }
-			{ ...omit( props, 'colors' ) }
-		>
-			{ colorSettings.map( ( settings, index ) => (
-				<ColorPaletteControl key={ index } { ...settings } />
-			) ) }
+		return (
+			<PanelBody
+				className={ className }
+				title={ titleElement }
+				{ ...props }
+			>
+				{ colorSettings.map( ( settings, index ) => (
+					<ColorPaletteControl
+						key={ index }
+						{ ...{
+							colors,
+							disableCustomColors,
+							...settings,
+						} }
+					/>
+				) ) }
 
-			{ children }
-		</PanelBody>
-	);
-}
+				{ children }
+			</PanelBody>
+		);
+	}
+);
 
-export default compose( [
-	withColorContext,
-	ifCondition( ( { hasColorsToChoose } ) => hasColorsToChoose ),
-] )( PanelColorSettings );
+export default withColorContext( PanelColorSettings );
diff --git a/packages/editor/src/components/panel-color-settings/test/__snapshots__/index.js.snap b/packages/editor/src/components/panel-color-settings/test/__snapshots__/index.js.snap
index e1050e34708c3..46f3bb8e1328d 100644
--- a/packages/editor/src/components/panel-color-settings/test/__snapshots__/index.js.snap
+++ b/packages/editor/src/components/panel-color-settings/test/__snapshots__/index.js.snap
@@ -1,6 +1,161 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PanelColorSettings matches the snapshot 1`] = `
+<Component
+  colorSettings={
+    Array [
+      Object {
+        "label": "border color",
+        "onChange": [Function],
+        "value": "#000",
+      },
+      Object {
+        "label": "background color",
+        "onChange": [Function],
+        "value": "#111",
+      },
+    ]
+  }
+  colors={Array []}
+  title="Test Title"
+/>
+`;
+
+exports[`PanelColorSettings matches the snapshot 2`] = `
+<PanelBody
+  className="editor-panel-color-settings"
+  title={
+    <span
+      className="editor-panel-color-settings__panel-title"
+    >
+      Test Title
+      <ColorIndicator
+        aria-label="(border color: #000)"
+        colorValue="#000"
+      />
+      <ColorIndicator
+        aria-label="(background color: #111)"
+        colorValue="#111"
+      />
+    </span>
+  }
+>
+  <WithColorContext(IfCondition(ColorPaletteControl))
+    colors={Array []}
+    key="0"
+    label="border color"
+    onChange={[Function]}
+    value="#000"
+  />
+  <WithColorContext(IfCondition(ColorPaletteControl))
+    colors={Array []}
+    key="1"
+    label="background color"
+    onChange={[Function]}
+    value="#111"
+  />
+</PanelBody>
+`;
+
+exports[`PanelColorSettings should render a color panel if at least one setting specifies some colors to choose 1`] = `
+<Component
+  colorSettings={
+    Array [
+      Object {
+        "colors": Array [
+          Object {
+            "color": "#ff0000",
+            "name": "Red",
+            "slug": "red",
+          },
+        ],
+        "label": "border color",
+        "onChange": [Function],
+        "value": "#000",
+      },
+      Object {
+        "label": "background color",
+        "onChange": [Function],
+        "value": "#111",
+      },
+    ]
+  }
+  colors={Array []}
+  disableCustomColors={true}
+  title="Test Title"
+/>
+`;
+
+exports[`PanelColorSettings should render a color panel if at least one setting specifies some colors to choose 2`] = `
+<PanelBody
+  className="editor-panel-color-settings"
+  title={
+    <span
+      className="editor-panel-color-settings__panel-title"
+    >
+      Test Title
+      <ColorIndicator
+        aria-label="(border color: #000)"
+        colorValue="#000"
+      />
+      <ColorIndicator
+        aria-label="(background color: #111)"
+        colorValue="#111"
+      />
+    </span>
+  }
+>
+  <WithColorContext(IfCondition(ColorPaletteControl))
+    colors={
+      Array [
+        Object {
+          "color": "#ff0000",
+          "name": "Red",
+          "slug": "red",
+        },
+      ]
+    }
+    disableCustomColors={true}
+    key="0"
+    label="border color"
+    onChange={[Function]}
+    value="#000"
+  />
+  <WithColorContext(IfCondition(ColorPaletteControl))
+    colors={Array []}
+    disableCustomColors={true}
+    key="1"
+    label="background color"
+    onChange={[Function]}
+    value="#111"
+  />
+</PanelBody>
+`;
+
+exports[`PanelColorSettings should render a color panel if at least one setting supports custom colors 1`] = `
+<Component
+  colorSettings={
+    Array [
+      Object {
+        "label": "border color",
+        "onChange": [Function],
+        "value": "#000",
+      },
+      Object {
+        "disableCustomColors": false,
+        "label": "background color",
+        "onChange": [Function],
+        "value": "#111",
+      },
+    ]
+  }
+  colors={Array []}
+  disableCustomColors={true}
+  title="Test Title"
+/>
+`;
+
+exports[`PanelColorSettings should render a color panel if at least one setting supports custom colors 2`] = `
 <PanelBody
   className="editor-panel-color-settings"
   title={
@@ -19,13 +174,17 @@ exports[`PanelColorSettings matches the snapshot 1`] = `
     </span>
   }
 >
-  <WithColorContext(ColorPaletteControl)
+  <WithColorContext(IfCondition(ColorPaletteControl))
+    colors={Array []}
+    disableCustomColors={true}
     key="0"
     label="border color"
     onChange={[Function]}
     value="#000"
   />
-  <WithColorContext(ColorPaletteControl)
+  <WithColorContext(IfCondition(ColorPaletteControl))
+    colors={Array []}
+    disableCustomColors={false}
     key="1"
     label="background color"
     onChange={[Function]}
diff --git a/packages/editor/src/components/panel-color-settings/test/index.js b/packages/editor/src/components/panel-color-settings/test/index.js
index 29b0bd1d88180..aaa73a0c487da 100644
--- a/packages/editor/src/components/panel-color-settings/test/index.js
+++ b/packages/editor/src/components/panel-color-settings/test/index.js
@@ -31,5 +31,112 @@ describe( 'PanelColorSettings', () => {
 		);
 
 		expect( wrapper ).toMatchSnapshot();
+		expect( wrapper.dive() ).toMatchSnapshot();
+	} );
+
+	it( 'should not render anything if there are no colors to choose', () => {
+		const wrapper = shallow(
+			<PanelColorSettings
+				title="Test Title"
+				colors={ [] }
+				disableCustomColors={ true }
+				colorSettings={ [
+					{
+						value: '#000',
+						onChange: noop,
+						label: 'border color',
+					},
+					{
+						value: '#111',
+						onChange: noop,
+						label: 'background color',
+					},
+				] }
+			/>
+		);
+
+		expect( wrapper.type() ).toBeNull();
+	} );
+
+	it( 'should render a color panel if at least one setting supports custom colors', () => {
+		const wrapper = shallow(
+			<PanelColorSettings
+				title="Test Title"
+				colors={ [] }
+				disableCustomColors={ true }
+				colorSettings={ [
+					{
+						value: '#000',
+						onChange: noop,
+						label: 'border color',
+					},
+					{
+						value: '#111',
+						onChange: noop,
+						label: 'background color',
+						disableCustomColors: false,
+					},
+				] }
+			/>
+		);
+		expect( wrapper.type() ).not.toBeNull();
+		expect( wrapper ).toMatchSnapshot();
+		expect( wrapper.dive() ).toMatchSnapshot();
+	} );
+
+	it( 'should render a color panel if at least one setting specifies some colors to choose', () => {
+		const wrapper = shallow(
+			<PanelColorSettings
+				title="Test Title"
+				colors={ [] }
+				disableCustomColors={ true }
+				colorSettings={ [
+					{
+						value: '#000',
+						onChange: noop,
+						label: 'border color',
+						colors: [ {
+							slug: 'red',
+							name: 'Red',
+							color: '#ff0000',
+						} ],
+					},
+					{
+						value: '#111',
+						onChange: noop,
+						label: 'background color',
+					},
+				] }
+			/>
+		);
+		expect( wrapper.type() ).not.toBeNull();
+		expect( wrapper ).toMatchSnapshot();
+		expect( wrapper.dive() ).toMatchSnapshot();
+	} );
+
+	it( 'should not render anything if none of the setting panels has colors to choose', () => {
+		const wrapper = shallow(
+			<PanelColorSettings
+				title="Test Title"
+				disableCustomColors={ false }
+				colorSettings={ [
+					{
+						value: '#000',
+						onChange: noop,
+						label: 'border color',
+						colors: [],
+						disableCustomColors: true,
+					},
+					{
+						value: '#111',
+						onChange: noop,
+						label: 'background color',
+						colors: [],
+						disableCustomColors: true,
+					},
+				] }
+			/>
+		);
+		expect( wrapper.type() ).toBeNull();
 	} );
 } );