diff --git a/blocks/color-palette/index.js b/blocks/color-palette/index.js
index 22f6cdc8eabd3a..0192c93fe266d7 100644
--- a/blocks/color-palette/index.js
+++ b/blocks/color-palette/index.js
@@ -1,89 +1,11 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { ChromePicker } from 'react-color';
-import { map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { Dropdown } 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 );
-	}
-
-	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 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 e92c66d0a72816..8f07a31527eea6 100644
--- a/blocks/index.js
+++ b/blocks/index.js
@@ -33,3 +33,4 @@ 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 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 f776299fda0bde..1ac49362a8c161 100644
--- a/blocks/library/paragraph/index.js
+++ b/blocks/library/paragraph/index.js
@@ -16,7 +16,6 @@ import {
 } from '@wordpress/element';
 import {
 	PanelBody,
-	PanelColor,
 	RangeControl,
 	ToggleControl,
 	Button,
@@ -37,8 +36,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;
 
@@ -198,18 +197,16 @@ class ParagraphBlock extends Component {
 							onChange={ this.toggleDropCap }
 						/>
 					</PanelBody>
-					<PanelColor title={ __( 'Background Color' ) } colorValue={ backgroundColor } initialOpen={ false }>
-						<ColorPalette
-							value={ backgroundColor }
-							onChange={ ( colorValue ) => setAttributes( { backgroundColor: colorValue } ) }
-						/>
-					</PanelColor>
-					<PanelColor title={ __( 'Text Color' ) } colorValue={ textColor } initialOpen={ false }>
-						<ColorPalette
-							value={ textColor }
-							onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
-						/>
-					</PanelColor>
+					<PanelColor
+						title={ __( 'Background Color' ) }
+						value={ backgroundColor }
+						onChange={ ( colorValue ) => setAttributes( { backgroundColor: colorValue } ) }
+					/>
+					<PanelColor
+						title={ __( 'Text Color' ) }
+						onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
+						value={ textColor }
+					/>
 					<ContrastChecker
 						{ ...{
 							textColor,
diff --git a/blocks/panel-color/index.js b/blocks/panel-color/index.js
new file mode 100644
index 00000000000000..ccd2bd8da5b70a
--- /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, value, ...props } ) {
+	return (
+		<PanelColorComponent title={ title } colorValue={ value }>
+			<ColorPalette
+				value={ value }
+				{ ...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 00000000000000..e7107162d0ba5f
--- /dev/null
+++ b/blocks/with-color-context/index.js
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { deprecated } from '@wordpress/utils';
+
+/**
+ * Internal dependencies
+ */
+import { withEditorSettings } from '../editor-settings';
+
+export default 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,
+		};
+	}
+);
diff --git a/components/color-palette/index.js b/components/color-palette/index.js
new file mode 100644
index 00000000000000..67133c980fffb1
--- /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="components-color-palette">
+			{ map( colors, ( color ) => {
+				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">
+						<button
+							type="button"
+							className={ className }
+							style={ style }
+							onClick={ applyOrUnset( color ) }
+							aria-label={ sprintf( __( 'Color: %s' ), color ) }
+							aria-pressed={ value === color }
+						/>
+					</div>
+				);
+			} ) }
+
+			{ ! disableCustomColors &&
+				<Dropdown
+					className="components-color-palette__item-wrapper components-color-palette__custom-color"
+					contentClassName="components-color-palette__picker "
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<button
+							type="button"
+							aria-expanded={ isOpen }
+							className="components-color-palette__item"
+							onClick={ onToggle }
+							aria-label={ __( 'Custom color picker' ) }
+						>
+							<span className="components-color-palette__custom-color-gradient" />
+						</button>
+					) }
+					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 adaf230671865e..d895f7f7d7ec77 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 68%
rename from blocks/color-palette/test/__snapshots__/index.js.snap
rename to components/color-palette/test/__snapshots__/index.js.snap
index 2111c8b5f2f07a..871d03c853fa18 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,16 +65,16 @@ 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="red"
   >
     <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 {
@@ -85,13 +85,13 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
     />
   </div>
   <div
-    className="blocks-color-palette__item-wrapper"
+    className="components-color-palette__item-wrapper"
     key="white"
   >
     <button
       aria-label="Color: white"
       aria-pressed={false}
-      className="blocks-color-palette__item"
+      className="components-color-palette__item"
       onClick={[Function]}
       style={
         Object {
@@ -102,13 +102,13 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
     />
   </div>
   <div
-    className="blocks-color-palette__item-wrapper"
+    className="components-color-palette__item-wrapper"
     key="blue"
   >
     <button
       aria-label="Color: blue"
       aria-pressed={false}
-      className="blocks-color-palette__item"
+      className="components-color-palette__item"
       onClick={[Function]}
       style={
         Object {
@@ -119,7 +119,7 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
     />
   </div>
   <button
-    className="button-link blocks-color-palette__clear"
+    className="button-link components-color-palette__clear"
     onClick={[Function]}
     type="button"
   >
@@ -130,16 +130,16 @@ 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="red"
   >
     <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 {
@@ -150,13 +150,13 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
     />
   </div>
   <div
-    className="blocks-color-palette__item-wrapper"
+    className="components-color-palette__item-wrapper"
     key="white"
   >
     <button
       aria-label="Color: white"
       aria-pressed={false}
-      className="blocks-color-palette__item"
+      className="components-color-palette__item"
       onClick={[Function]}
       style={
         Object {
@@ -167,13 +167,13 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
     />
   </div>
   <div
-    className="blocks-color-palette__item-wrapper"
+    className="components-color-palette__item-wrapper"
     key="blue"
   >
     <button
       aria-label="Color: blue"
       aria-pressed={false}
-      className="blocks-color-palette__item"
+      className="components-color-palette__item"
       onClick={[Function]}
       style={
         Object {
@@ -184,13 +184,13 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
     />
   </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 96ddc339cdf94a..1f76dc52c10b3e 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' ];
@@ -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 38731f65401287..017ed6c060d4fb 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';