diff --git a/blocks/color-palette/index.js b/blocks/color-palette/index.js
index 025cadd1ce1d7..0192c93fe266d 100644
--- a/blocks/color-palette/index.js
+++ b/blocks/color-palette/index.js
@@ -1,93 +1,11 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { ChromePicker } from 'react-color';
-import { map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { Dropdown, Tooltip } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { ColorPalette } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import './style.scss';
-import { withEditorSettings } from '../editor-settings';
-
-export function ColorPalette( { colors, disableCustomColors = false, value, onChange } ) {
-	function applyOrUnset( color ) {
-		return () => onChange( value === color ? undefined : color );
-	}
-	const customColorPickerLabel = __( 'Custom color picker' );
-	return (
-		<div className="blocks-color-palette">
-			{ map( colors, ( { color, name } ) => {
-				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">
-						<Tooltip text={ name || sprintf( __( 'Color code: %s' ), color ) }>
-							<button
-								type="button"
-								className={ className }
-								style={ style }
-								onClick={ applyOrUnset( color ) }
-								aria-label={ name ? sprintf( __( 'Color: %s' ), name ) : sprintf( __( 'Color code: %s' ), color ) }
-								aria-pressed={ value === color }
-							/>
-						</Tooltip>
-					</div>
-				);
-			} ) }
-
-			{ ! disableCustomColors &&
-				<Dropdown
-					className="blocks-color-palette__item-wrapper blocks-color-palette__custom-color"
-					contentClassName="blocks-color-palette__picker "
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<Tooltip text={ customColorPickerLabel }>
-							<button
-								type="button"
-								aria-expanded={ isOpen }
-								className="blocks-color-palette__item"
-								onClick={ onToggle }
-								aria-label={ customColorPickerLabel }
-							>
-								<span className="blocks-color-palette__custom-color-gradient" />
-							</button>
-						</Tooltip>
-					) }
-					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 withEditorSettings(
-	( 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 182be4f09f99f..e36deba7e0281 100644
--- a/blocks/index.js
+++ b/blocks/index.js
@@ -37,3 +37,5 @@ 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 EditorSettings, withEditorSettings } from './editor-settings';
+export { default as PanelColor } from './panel-color';
+export { default as withColorContext } from './with-color-context';
diff --git a/blocks/panel-color/index.js b/blocks/panel-color/index.js
new file mode 100644
index 0000000000000..b24666494b785
--- /dev/null
+++ b/blocks/panel-color/index.js
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { omit } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { ifCondition, PanelColor as PanelColorComponent } from '@wordpress/components';
+import { compose } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ColorPalette from '../color-palette';
+import withColorContext from '../with-color-context';
+
+function PanelColor( { title, colorName, colorValue, initialOpen, ...props } ) {
+	return (
+		<PanelColorComponent { ...{ title, colorName, colorValue, initialOpen } } >
+			<ColorPalette
+				value={ colorValue }
+				{ ...omit( props, [ 'disableCustomColors', 'colors' ] ) }
+			/>
+		</PanelColorComponent>
+	);
+}
+
+export default compose( [
+	withColorContext,
+	ifCondition( ( { hasColorsToChoose } ) => hasColorsToChoose ),
+] )( PanelColor );
diff --git a/blocks/with-color-context/index.js b/blocks/with-color-context/index.js
new file mode 100644
index 0000000000000..a867ab3c12cc8
--- /dev/null
+++ b/blocks/with-color-context/index.js
@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { deprecated } from '@wordpress/utils';
+import { createHigherOrderComponent } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { withEditorSettings } from '../editor-settings';
+
+export default createHigherOrderComponent(
+	withEditorSettings(
+		( settings, 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 settings or use @wordpress/PanelColor and @wordpress/ColorPalette',
+				} );
+			}
+			const colors = ownProps.colors || settings.colors;
+			const disableCustomColors = ownProps.disableCustomColors || settings.disableCustomColors;
+			return {
+				colors,
+				disableCustomColors,
+				hasColorsToChoose: ! isEmpty( colors ) || ! disableCustomColors,
+			};
+		}
+	),
+	'withColorContext'
+);
diff --git a/components/color-palette/index.js b/components/color-palette/index.js
new file mode 100644
index 0000000000000..b63db30d6f014
--- /dev/null
+++ b/components/color-palette/index.js
@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { ChromePicker } from 'react-color';
+import { map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import Dropdown from '../dropdown';
+import Tooltip from '../tooltip';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+export default function ColorPalette( { colors, disableCustomColors = false, value, onChange } ) {
+	function applyOrUnset( color ) {
+		return () => onChange( value === color ? undefined : color );
+	}
+	const customColorPickerLabel = __( 'Custom color picker' );
+	return (
+		<div className="components-color-palette">
+			{ map( colors, ( { color, name } ) => {
+				const style = { color: color };
+				const className = classnames( 'components-color-palette__item', { 'is-active': value === color } );
+
+				return (
+					<div key={ color } className="components-color-palette__item-wrapper">
+						<Tooltip text={ name || sprintf( __( 'Color code: %s' ), color ) }>
+							<button
+								type="button"
+								className={ className }
+								style={ style }
+								onClick={ applyOrUnset( color ) }
+								aria-label={ name ? sprintf( __( 'Color: %s' ), name ) : sprintf( __( 'Color code: %s' ), color ) }
+								aria-pressed={ value === color }
+							/>
+						</Tooltip>
+					</div>
+				);
+			} ) }
+
+			{ ! disableCustomColors &&
+				<Dropdown
+					className="components-color-palette__item-wrapper components-color-palette__custom-color"
+					contentClassName="components-color-palette__picker "
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<Tooltip text={ customColorPickerLabel }>
+							<button
+								type="button"
+								aria-expanded={ isOpen }
+								className="components-color-palette__item"
+								onClick={ onToggle }
+								aria-label={ customColorPickerLabel }
+							>
+								<span className="components-color-palette__custom-color-gradient" />
+							</button>
+						</Tooltip>
+					) }
+					renderContent={ () => (
+						<ChromePicker
+							color={ value }
+							onChangeComplete={ ( color ) => onChange( color.hex ) }
+							style={ { width: '100%' } }
+							disableAlpha
+						/>
+					) }
+				/>
+			}
+
+			<button
+				className="button-link components-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 85%
rename from blocks/color-palette/style.scss
rename to components/color-palette/style.scss
index adaf230671865..d895f7f7d7ec7 100644
--- a/blocks/color-palette/style.scss
+++ b/components/color-palette/style.scss
@@ -1,16 +1,16 @@
 $color-palette-circle-size: 28px;
 $color-palette-circle-spacing: 14px;
 
-.blocks-color-palette {
+.components-color-palette {
 	margin-right: -14px;
 
-	.blocks-color-palette__clear {
+	.components-color-palette__clear {
 		float: right;
 		margin-right: 20px;
 	}
 }
 
-.blocks-color-palette__item-wrapper {
+.components-color-palette__item-wrapper {
 	display: inline-block;
 	height: $color-palette-circle-size;
 	width: $color-palette-circle-size;
@@ -30,7 +30,7 @@ $color-palette-circle-spacing: 14px;
 	}
 }
 
-.blocks-color-palette__item {
+.components-color-palette__item {
 	display: inline-block;
 	vertical-align: top;
 	height: 100%;
@@ -72,12 +72,12 @@ $color-palette-circle-spacing: 14px;
 	}
 }
 
-.blocks-color-palette__clear-color .blocks-color-palette__item {
+.components-color-palette__clear-color .components-color-palette__item {
 	color: $white;
 	background: $white;
 }
 
-.blocks-color-palette__clear-color-line {
+.components-color-palette__clear-color-line {
 	display: block;
 	position: absolute;
 	border: 2px solid $alert-red;
@@ -101,12 +101,12 @@ $color-palette-circle-spacing: 14px;
 	}
 }
 
-.blocks-color-palette__custom-color .blocks-color-palette__item {
+.components-color-palette__custom-color .components-color-palette__item {
 	position: relative;
 	box-shadow: none;
 }
 
-.blocks-color-palette__custom-color .blocks-color-palette__custom-color-gradient {
+.components-color-palette__custom-color .components-color-palette__custom-color-gradient {
 	display: block;
 	width: 100%;
 	height: 100%;
@@ -117,7 +117,7 @@ $color-palette-circle-spacing: 14px;
 	overflow: hidden;
 }
 
-.blocks-color-palette__custom-color .blocks-color-palette__custom-color-gradient:before {
+.components-color-palette__custom-color .components-color-palette__custom-color-gradient:before {
 	box-sizing: border-box;
 	content: '';
 	filter: blur( 6px ) saturate( 0.7 ) brightness( 1.1 );
diff --git a/blocks/color-palette/test/__snapshots__/index.js.snap b/components/color-palette/test/__snapshots__/index.js.snap
similarity index 71%
rename from blocks/color-palette/test/__snapshots__/index.js.snap
rename to components/color-palette/test/__snapshots__/index.js.snap
index b72872e1b4e64..74f3cf00b2636 100644
--- a/blocks/color-palette/test/__snapshots__/index.js.snap
+++ b/components/color-palette/test/__snapshots__/index.js.snap
@@ -44,20 +44,20 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
 <button
   aria-expanded={true}
   aria-label="Custom color picker"
-  className="blocks-color-palette__item"
+  className="components-color-palette__item"
   onClick={[MockFunction]}
   type="button"
 >
   <span
-    className="blocks-color-palette__custom-color-gradient"
+    className="components-color-palette__custom-color-gradient"
   />
 </button>
 `;
 
 exports[`ColorPalette Dropdown should render it correctly 1`] = `
 <Dropdown
-  className="blocks-color-palette__item-wrapper blocks-color-palette__custom-color"
-  contentClassName="blocks-color-palette__picker "
+  className="components-color-palette__item-wrapper components-color-palette__custom-color"
+  contentClassName="components-color-palette__picker "
   renderContent={[Function]}
   renderToggle={[Function]}
 />
@@ -65,10 +65,10 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = `
 
 exports[`ColorPalette should allow disabling custom color picker 1`] = `
 <div
-  className="blocks-color-palette"
+  className="components-color-palette"
 >
   <div
-    className="blocks-color-palette__item-wrapper"
+    className="components-color-palette__item-wrapper"
     key="#f00"
   >
     <Tooltip
@@ -77,7 +77,7 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
       <button
         aria-label="Color: red"
         aria-pressed={true}
-        className="blocks-color-palette__item is-active"
+        className="components-color-palette__item is-active"
         onClick={[Function]}
         style={
           Object {
@@ -89,7 +89,7 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
     </Tooltip>
   </div>
   <div
-    className="blocks-color-palette__item-wrapper"
+    className="components-color-palette__item-wrapper"
     key="#fff"
   >
     <Tooltip
@@ -98,7 +98,7 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
       <button
         aria-label="Color: white"
         aria-pressed={false}
-        className="blocks-color-palette__item"
+        className="components-color-palette__item"
         onClick={[Function]}
         style={
           Object {
@@ -110,7 +110,7 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
     </Tooltip>
   </div>
   <div
-    className="blocks-color-palette__item-wrapper"
+    className="components-color-palette__item-wrapper"
     key="#00f"
   >
     <Tooltip
@@ -119,7 +119,7 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
       <button
         aria-label="Color: blue"
         aria-pressed={false}
-        className="blocks-color-palette__item"
+        className="components-color-palette__item"
         onClick={[Function]}
         style={
           Object {
@@ -131,7 +131,7 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
     </Tooltip>
   </div>
   <button
-    className="button-link blocks-color-palette__clear"
+    className="button-link components-color-palette__clear"
     onClick={[Function]}
     type="button"
   >
@@ -142,10 +142,10 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
 
 exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
 <div
-  className="blocks-color-palette"
+  className="components-color-palette"
 >
   <div
-    className="blocks-color-palette__item-wrapper"
+    className="components-color-palette__item-wrapper"
     key="#f00"
   >
     <Tooltip
@@ -154,7 +154,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
       <button
         aria-label="Color: red"
         aria-pressed={true}
-        className="blocks-color-palette__item is-active"
+        className="components-color-palette__item is-active"
         onClick={[Function]}
         style={
           Object {
@@ -166,7 +166,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
     </Tooltip>
   </div>
   <div
-    className="blocks-color-palette__item-wrapper"
+    className="components-color-palette__item-wrapper"
     key="#fff"
   >
     <Tooltip
@@ -175,7 +175,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
       <button
         aria-label="Color: white"
         aria-pressed={false}
-        className="blocks-color-palette__item"
+        className="components-color-palette__item"
         onClick={[Function]}
         style={
           Object {
@@ -187,7 +187,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
     </Tooltip>
   </div>
   <div
-    className="blocks-color-palette__item-wrapper"
+    className="components-color-palette__item-wrapper"
     key="#00f"
   >
     <Tooltip
@@ -196,7 +196,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
       <button
         aria-label="Color: blue"
         aria-pressed={false}
-        className="blocks-color-palette__item"
+        className="components-color-palette__item"
         onClick={[Function]}
         style={
           Object {
@@ -208,13 +208,13 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
     </Tooltip>
   </div>
   <Dropdown
-    className="blocks-color-palette__item-wrapper blocks-color-palette__custom-color"
-    contentClassName="blocks-color-palette__picker "
+    className="components-color-palette__item-wrapper components-color-palette__custom-color"
+    contentClassName="components-color-palette__picker "
     renderContent={[Function]}
     renderToggle={[Function]}
   />
   <button
-    className="button-link blocks-color-palette__clear"
+    className="button-link components-color-palette__clear"
     onClick={[Function]}
     type="button"
   >
diff --git a/blocks/color-palette/test/index.js b/components/color-palette/test/index.js
similarity index 93%
rename from blocks/color-palette/test/index.js
rename to components/color-palette/test/index.js
index 31146c126f6fd..cc38b7c095a2a 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 = [ { name: 'red', color: '#f00' }, { name: 'white', color: '#fff' }, { name: 'blue', color: '#00f' } ];
@@ -14,7 +14,7 @@ describe( 'ColorPalette', () => {
 	const onChange = jest.fn();
 
 	const wrapper = shallow( <ColorPalette colors={ colors } value={ currentColor } onChange={ onChange } /> );
-	const buttons = wrapper.find( '.blocks-color-palette__item-wrapper button' );
+	const buttons = wrapper.find( '.components-color-palette__item-wrapper button' );
 
 	beforeEach( () => {
 		onChange.mockClear();
@@ -44,7 +44,7 @@ describe( 'ColorPalette', () => {
 	} );
 
 	test( 'should call onClick with undefined, when the clearButton onClick is triggered', () => {
-		const clearButton = wrapper.find( '.button-link.blocks-color-palette__clear' );
+		const clearButton = wrapper.find( '.button-link.components-color-palette__clear' );
 
 		expect( clearButton ).toHaveLength( 1 );
 
diff --git a/components/index.js b/components/index.js
index 0de7d42929df4..2479b9a2c0ec9 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';
diff --git a/core-blocks/button/index.js b/core-blocks/button/index.js
index 0af2fb3a02028..708eaa1c82856 100644
--- a/core-blocks/button/index.js
+++ b/core-blocks/button/index.js
@@ -13,7 +13,6 @@ import {
 	Dashicon,
 	IconButton,
 	PanelBody,
-	PanelColor,
 	ToggleControl,
 	withFallbackStyles,
 } from '@wordpress/components';
@@ -22,11 +21,11 @@ import {
 	RichText,
 	BlockControls,
 	BlockAlignmentToolbar,
-	ColorPalette,
 	ContrastChecker,
 	InspectorControls,
 	getColorClass,
 	withColors,
+	PanelColor,
 } from '@wordpress/blocks';
 
 /**
@@ -125,18 +124,18 @@ class ButtonBlock extends Component {
 								checked={ !! clear }
 								onChange={ this.toggleClear }
 							/>
-							<PanelColor title={ __( 'Background Color' ) } colorValue={ backgroundColor.value } >
-								<ColorPalette
-									value={ backgroundColor.value }
-									onChange={ setBackgroundColor }
-								/>
-							</PanelColor>
-							<PanelColor title={ __( 'Text Color' ) } colorValue={ textColor.value } >
-								<ColorPalette
-									value={ textColor.value }
-									onChange={ setTextColor }
-								/>
-							</PanelColor>
+							<PanelColor
+								colorName={ backgroundColor.name }
+								colorValue={ backgroundColor.value }
+								title={ __( 'Background Color' ) }
+								onChange={ setBackgroundColor }
+							/>
+							<PanelColor
+								colorName={ textColor.name }
+								colorValue={ textColor.value }
+								title={ __( 'Text Color' ) }
+								onChange={ setTextColor }
+							/>
 							{ this.nodeRef && <ContrastCheckerWithFallbackStyles
 								node={ this.nodeRef }
 								textColor={ textColor.value }
diff --git a/core-blocks/paragraph/index.js b/core-blocks/paragraph/index.js
index 057b77ab798d5..c1160a11bd695 100644
--- a/core-blocks/paragraph/index.js
+++ b/core-blocks/paragraph/index.js
@@ -17,7 +17,6 @@ import {
 } from '@wordpress/element';
 import {
 	PanelBody,
-	PanelColor,
 	RangeControl,
 	ToggleControl,
 	Button,
@@ -31,9 +30,9 @@ import {
 	AlignmentToolbar,
 	BlockAlignmentToolbar,
 	BlockControls,
-	ColorPalette,
 	ContrastChecker,
 	InspectorControls,
+	PanelColor,
 	RichText,
 } from '@wordpress/blocks';
 
@@ -206,18 +205,21 @@ class ParagraphBlock extends Component {
 							help={ this.getDropCapHelp }
 						/>
 					</PanelBody>
-					<PanelColor title={ __( 'Background Color' ) } colorValue={ backgroundColor.value } colorName={ backgroundColor.name } initialOpen={ false }>
-						<ColorPalette
-							value={ backgroundColor.value }
-							onChange={ setBackgroundColor }
-						/>
-					</PanelColor>
-					<PanelColor title={ __( 'Text Color' ) } colorValue={ textColor.value } colorName={ textColor.name } initialOpen={ false }>
-						<ColorPalette
-							value={ textColor.value }
-							onChange={ setTextColor }
-						/>
-					</PanelColor>
+					<PanelColor
+						colorName={ backgroundColor.name }
+						colorValue={ backgroundColor.value }
+						initialOpen={ false }
+						title={ __( 'Background Color' ) }
+						onChange={ setBackgroundColor }
+					/>
+					<PanelColor
+						colorName={ textColor.name }
+						colorValue={ textColor.value }
+						initialOpen={ false }
+						title={ __( 'Text Color' ) }
+						onChange={ setTextColor }
+						value={ textColor.value }
+					/>
 					<ContrastChecker
 						textColor={ textColor.value }
 						backgroundColor={ backgroundColor.value }