diff --git a/blocks/color-palette/index.js b/blocks/color-palette/index.js
index cd540ada1b4c64..0192c93fe266d7 100644
--- a/blocks/color-palette/index.js
+++ b/blocks/color-palette/index.js
@@ -1,88 +1,11 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { ChromePicker } from 'react-color';
-import { map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { Dropdown, withContext } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { ColorPalette } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import './style.scss';
-
-export function ColorPalette( { colors, disableCustomColors = false, value, onChange } ) {
-	function applyOrUnset( color ) {
-		return () => onChange( value === color ? undefined : color );
-	}
-
-	return (
-		<div className="blocks-color-palette">
-			{ map( colors, ( color ) => {
-				const style = { color: color };
-				const className = classnames( 'blocks-color-palette__item', { 'is-active': value === color } );
-
-				return (
-					<div key={ color } className="blocks-color-palette__item-wrapper">
-						<button
-							type="button"
-							className={ className }
-							style={ style }
-							onClick={ applyOrUnset( color ) }
-							aria-label={ sprintf( __( 'Color: %s' ), color ) }
-							aria-pressed={ value === color }
-						/>
-					</div>
-				);
-			} ) }
-
-			{ ! disableCustomColors &&
-				<Dropdown
-					className="blocks-color-palette__item-wrapper blocks-color-palette__custom-color"
-					contentClassName="blocks-color-palette__picker "
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<button
-							type="button"
-							aria-expanded={ isOpen }
-							className="blocks-color-palette__item"
-							onClick={ onToggle }
-							aria-label={ __( 'Custom color picker' ) }
-						>
-							<span className="blocks-color-palette__custom-color-gradient" />
-						</button>
-					) }
-					renderContent={ () => (
-						<ChromePicker
-							color={ value }
-							onChangeComplete={ ( color ) => onChange( color.hex ) }
-							style={ { width: '100%' } }
-							disableAlpha
-						/>
-					) }
-				/>
-			}
-
-			<button
-				className="button-link blocks-color-palette__clear"
-				type="button"
-				onClick={ () => onChange( undefined ) }
-			>
-				{ __( 'Clear' ) }
-			</button>
-		</div>
-	);
-}
+import withColorContext from '../with-color-context';
 
-export default withContext( 'editor' )(
-	( settings, props ) => ( {
-		colors: props.colors || settings.colors,
-		disableCustomColors: props.disableCustomColors !== undefined ?
-			props.disableCustomColors :
-			settings.disableCustomColors,
-	} )
-)( ColorPalette );
+export default withColorContext( ColorPalette );
diff --git a/blocks/index.js b/blocks/index.js
index 6a9e6414257339..be40e8b69f861c 100644
--- a/blocks/index.js
+++ b/blocks/index.js
@@ -31,3 +31,4 @@ export { default as RichText } from './rich-text';
 export { default as RichTextProvider } from './rich-text/provider';
 export { default as UrlInput } from './url-input';
 export { default as UrlInputButton } from './url-input/button';
+export { default as withColorContext } from './with-color-context';
diff --git a/blocks/library/button/index.js b/blocks/library/button/index.js
index c35f362b284020..47af7bd66fa349 100644
--- a/blocks/library/button/index.js
+++ b/blocks/library/button/index.js
@@ -7,7 +7,6 @@ import {
 	Dashicon,
 	IconButton,
 	PanelBody,
-	PanelColor,
 	ToggleControl,
 	withFallbackStyles,
 } from '@wordpress/components';
@@ -21,8 +20,8 @@ import RichText from '../../rich-text';
 import UrlInput from '../../url-input';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
-import ColorPalette from '../../color-palette';
 import ContrastChecker from '../../contrast-checker';
+import PanelColor from '../../panel-color';
 import InspectorControls from '../../inspector-controls';
 
 const { getComputedStyle } = window;
@@ -109,24 +108,24 @@ class ButtonBlock extends Component {
 								checked={ !! clear }
 								onChange={ this.toggleClear }
 							/>
-							<PanelColor title={ __( 'Background Color' ) } colorValue={ color } >
-								<ColorPalette
-									value={ color }
-									onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
-								/>
-							</PanelColor>
-							<PanelColor title={ __( 'Text Color' ) } colorValue={ textColor } >
-								<ColorPalette
-									value={ textColor }
-									onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
+							<PanelColor
+								title={ __( 'Background Color' ) }
+								value={ color }
+								onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
+							/>
+							<PanelColor
+								title={ __( 'Text Color' ) }
+								onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
+								value={ textColor }
+							/>
+							{ this.nodeRef &&
+								<ContrastCheckerWithFallbackStyles
+									node={ this.nodeRef }
+									textColor={ textColor }
+									backgroundColor={ color }
+									isLargeText={ true }
 								/>
-							</PanelColor>
-							{ this.nodeRef && <ContrastCheckerWithFallbackStyles
-								node={ this.nodeRef }
-								textColor={ textColor }
-								backgroundColor={ color }
-								isLargeText={ true }
-							/> }
+							}
 						</PanelBody>
 					</InspectorControls>
 				}
diff --git a/blocks/library/paragraph/index.js b/blocks/library/paragraph/index.js
index 9a4e7cc326b16e..3edc8c2e3ad2b6 100644
--- a/blocks/library/paragraph/index.js
+++ b/blocks/library/paragraph/index.js
@@ -11,7 +11,6 @@ import { __ } from '@wordpress/i18n';
 import { concatChildren, Component, RawHTML } from '@wordpress/element';
 import {
 	PanelBody,
-	PanelColor,
 	RangeControl,
 	ToggleControl,
 	Button,
@@ -32,8 +31,8 @@ import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import BlockControls from '../../block-controls';
 import RichText from '../../rich-text';
 import InspectorControls from '../../inspector-controls';
-import ColorPalette from '../../color-palette';
 import ContrastChecker from '../../contrast-checker';
+import PanelColor from '../../panel-color';
 
 const { getComputedStyle } = window;
 
@@ -200,25 +199,25 @@ class ParagraphBlock extends Component {
 							checked={ !! dropCap }
 							onChange={ this.toggleDropCap }
 						/>
-					</PanelBody>
-					<PanelColor title={ __( 'Background Color' ) } colorValue={ backgroundColor } initialOpen={ false }>
-						<ColorPalette
+						<PanelColor
+							title={ __( 'Background Color' ) }
 							value={ backgroundColor }
 							onChange={ ( colorValue ) => setAttributes( { backgroundColor: colorValue } ) }
 						/>
-					</PanelColor>
-					<PanelColor title={ __( 'Text Color' ) } colorValue={ textColor } initialOpen={ false }>
-						<ColorPalette
-							value={ textColor }
+						<PanelColor
+							title={ __( 'Text Color' ) }
 							onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
+							value={ textColor }
 						/>
-					</PanelColor>
-					{ this.nodeRef && <ContrastCheckerWithFallbackStyles
-						node={ this.nodeRef }
-						textColor={ textColor }
-						backgroundColor={ backgroundColor }
-						isLargeText={ fontSize >= 18 }
-					/> }
+						{ this.nodeRef &&
+							<ContrastCheckerWithFallbackStyles
+								node={ this.nodeRef }
+								textColor={ textColor }
+								backgroundColor={ backgroundColor }
+								isLargeText={ fontSize >= 18 }
+							/>
+						}
+					</PanelBody>
 					<PanelBody title={ __( 'Block Alignment' ) }>
 						<BlockAlignmentToolbar
 							value={ width }
diff --git a/blocks/panel-color/index.js b/blocks/panel-color/index.js
new file mode 100644
index 00000000000000..4de2f86210e753
--- /dev/null
+++ b/blocks/panel-color/index.js
@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { omit } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { PanelColor } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import ColorPalette from '../color-palette';
+import withColorContext from '../with-color-context';
+
+function ConditionalPanelColor( { title, hasColorsToChoose, value, ...props } ) {
+	if ( ! hasColorsToChoose ) {
+		return null;
+	}
+	return (
+		<PanelColor title={ title } colorValue={ value }>
+			<ColorPalette
+				value={ value }
+				{ ...omit( props, [ 'disableCustomColors', 'colors' ] ) }
+			/>
+		</PanelColor>
+	);
+}
+
+export default withColorContext( ConditionalPanelColor );
diff --git a/blocks/with-color-context/index.js b/blocks/with-color-context/index.js
new file mode 100644
index 00000000000000..a27ea01382425a
--- /dev/null
+++ b/blocks/with-color-context/index.js
@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { withContext } from '@wordpress/components';
+import { deprecated } from '@wordpress/utils';
+
+export default withContext( 'editor' )(
+	( editor, ownProps ) => {
+		if ( ownProps.colors || ownProps.disableCustomColors ) {
+			deprecated( 'Passing props "colors" or "disableCustomColors" to @blocks/PanelColor or @blocks/ColorPalette', {
+				version: '2.9',
+				alternative: 'remove the props and rely on the editor context or use @wordpress/PanelColor and @wordpress/ColorPalette',
+			} );
+		}
+		const colors = ownProps.colors || editor.colors;
+		const disableCustomColors = ownProps.disableCustomColors || editor.disableCustomColors;
+		return {
+			colors,
+			disableCustomColors,
+			hasColorsToChoose: ! isEmpty( colors ) || ! disableCustomColors,
+		};
+	}
+);
diff --git a/components/color-palette/index.js b/components/color-palette/index.js
new file mode 100644
index 00000000000000..ffc39d53b6dc6c
--- /dev/null
+++ b/components/color-palette/index.js
@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { ChromePicker } from 'react-color';
+import { map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import Dropdown from '../dropdown';
+
+export default function ColorPalette( { colors, disableCustomColors = false, value, onChange } ) {
+	function applyOrUnset( color ) {
+		return () => onChange( value === color ? undefined : color );
+	}
+
+	return (
+		<div className="blocks-color-palette">
+			{ map( colors, ( color ) => {
+				const style = { color: color };
+				const className = classnames( 'blocks-color-palette__item', { 'is-active': value === color } );
+
+				return (
+					<div key={ color } className="blocks-color-palette__item-wrapper">
+						<button
+							type="button"
+							className={ className }
+							style={ style }
+							onClick={ applyOrUnset( color ) }
+							aria-label={ sprintf( __( 'Color: %s' ), color ) }
+							aria-pressed={ value === color }
+						/>
+					</div>
+				);
+			} ) }
+
+			{ ! disableCustomColors &&
+				<Dropdown
+					className="blocks-color-palette__item-wrapper blocks-color-palette__custom-color"
+					contentClassName="blocks-color-palette__picker "
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<button
+							type="button"
+							aria-expanded={ isOpen }
+							className="blocks-color-palette__item"
+							onClick={ onToggle }
+							aria-label={ __( 'Custom color picker' ) }
+						>
+							<span className="blocks-color-palette__custom-color-gradient" />
+						</button>
+					) }
+					renderContent={ () => (
+						<ChromePicker
+							color={ value }
+							onChangeComplete={ ( color ) => onChange( color.hex ) }
+							style={ { width: '100%' } }
+							disableAlpha
+						/>
+					) }
+				/>
+			}
+
+			<button
+				className="button-link blocks-color-palette__clear"
+				type="button"
+				onClick={ () => onChange( undefined ) }
+			>
+				{ __( 'Clear' ) }
+			</button>
+		</div>
+	);
+}
diff --git a/blocks/color-palette/style.scss b/components/color-palette/style.scss
similarity index 100%
rename from blocks/color-palette/style.scss
rename to components/color-palette/style.scss
diff --git a/blocks/color-palette/test/__snapshots__/index.js.snap b/components/color-palette/test/__snapshots__/index.js.snap
similarity index 100%
rename from blocks/color-palette/test/__snapshots__/index.js.snap
rename to components/color-palette/test/__snapshots__/index.js.snap
diff --git a/blocks/color-palette/test/index.js b/components/color-palette/test/index.js
similarity index 98%
rename from blocks/color-palette/test/index.js
rename to components/color-palette/test/index.js
index 96ddc339cdf94a..9bc46fb81656df 100644
--- a/blocks/color-palette/test/index.js
+++ b/components/color-palette/test/index.js
@@ -6,7 +6,7 @@ import { shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import { ColorPalette } from '../';
+import ColorPalette from '../';
 
 describe( 'ColorPalette', () => {
 	const colors = [ 'red', 'white', 'blue' ];
diff --git a/components/index.js b/components/index.js
index c50b14168b770f..75888db94ea7a0 100644
--- a/components/index.js
+++ b/components/index.js
@@ -7,6 +7,7 @@ export { default as ButtonGroup } from './button-group';
 export { default as CheckboxControl } from './checkbox-control';
 export { default as ClipboardButton } from './clipboard-button';
 export { default as CodeEditor } from './code-editor';
+export { default as ColorPalette } from './color-palette';
 export { default as Dashicon } from './dashicon';
 export { DateTimePicker, DatePicker, TimePicker } from './date-time';
 export { default as Disabled } from './disabled';