> For the complete documentation index, see [llms.txt](https://benjaminzekavica.gitbook.io/gutenberg/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://benjaminzekavica.gitbook.io/gutenberg/components/color-component.md).

# Color Component

Farbeinstellungen vornehmen

![](https://289245747-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmvDr7SxF0WywegPfsA%2F-MGOSESk2WZjStgpGfqQ%2F-MGOT_YN-u-fhvPEQTVs%2Fcolors.JPG?alt=media\&token=4482df67-0024-40ea-b2cf-915e15c92bff)

## Einleitung

Heute wollen zu unserem Block eine Art von Color Picker hinzufügen, allerdings etwas eleganter und mit einer Auswahl an Standardfarben, die wir mittels [CSS Variablen ](/gutenberg/components/color-palette-css-variablen-in-gutenberg.md)herauslesen. 

### Komponenten importieren

Zunächst importieren wir uns die Komponenten aus Gutenberg, die wir benötigen: 

```javascript
const { ColorPalette } = wp.blockEditor;
const { PanelBody } = wp.components;
const { InspectorControls } = wp.editor;

/* Falls mal keine Standardfarben aus dem globalen Setting haben möchte, kann man
das verwenden */ 

const { ColorPalette } = wp.components;
```

### Attribute erzeugen

Dann erstellen wir neue Attribute, wo wir dann die Werte speichern könne

```javascript
attributes: {
		color: {
			type: 'string'
		}
}
```

### Code erzeugen und Werte speichern

```javascript
	<Fragment>
		<InspectorControls>
			<PanelBody title="Farben" initialOpen={ true }>
				<ColorPalette 
					className="bz__colors-palette"
					color={ props.attributes.color }
					onChange={ ( color ) => {
						props.setAttributes( { 
							color: color
						});
					}}
				/>
			</PanelBody>
		</InspectorControls>
		<h4 style={ { color: props.attributes.color } }>
			Headline
		</h4>
	</Fragment>
```