---
title: "Color Picker"
description: "The Color Picker control stores a hex color, or rgba with Alpha Channel on, and shows the theme palette. Output Format can add the palette slug too."
url: "https://www.lazyblocks.com/docs/blocks-controls/color-picker/"
lastUpdated: 2026-09-23
source: "blocks-controls/color-picker.mdx"
---
# Color Picker

Color picker control lets users select colors from a predefined palette or choose custom colors with optional opacity.

## Control Settings

- **Alongside Text** (`alongside_text`) - text printed beside the color indicator. Empty by default
- **Alpha Channel** (`alpha`) - off by default. On, the picker adds an opacity slider and stores rgba values
- **Color Palette** (`palette`) - on by default. Shows the theme's own color palette above the picker. Off, the picker offers no swatches
- **Output Format** (`output_format`) - `Color` by default, which stores the color on its own. `Array (Color + Slug)` stores the color together with the palette slug

## Usage

```php title="PHP" /$attributes['control_name']/
<p style="color: <?php echo esc_attr( $attributes['control_name'] ); ?>">
  Text with custom color using inline css.
</p>
```

```php title="PHP with Output Format as Array" /$attributes['control_name']['color']/ /$attributes['control_name']['slug']/
<p style="color: <?php echo esc_attr( $attributes['control_name']['color'] ); ?>">
  Text with custom color using inline css.
</p>

<p class="color-<?php echo esc_attr( $attributes['control_name']['slug'] ); ?>">
  Text with custom color using classname.
</p>
```

```hbs title="Handlebars" /{{control_name}}/
<p style="color: {{control_name}}">
  {{text}}
</p>
```

```hbs title="Handlebars with Output Format as Array" /{{control_name.color}}/ /{{control_name.slug}}/
<p style="color: {{control_name.color}}">
  {{text}}
</p>
<p class="color-{{control_name.slug}}">
  {{text}}
</p>
```

```php title="Post Meta" /get_lzb_meta( 'control_meta_name' )/
<p style="color: <?php echo esc_attr( get_lzb_meta( 'control_meta_name' ) ); ?>">
  Text with custom color.
</p>
```

## Documentation Index
> Fetch the complete documentation index at: https://www.lazyblocks.com/llms.txt
> Fetch every page in a single file at: https://www.lazyblocks.com/llms-full.txt