PHPackages                             wandi/color-picker-bundle - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. wandi/color-picker-bundle

ActiveSymfony-bundle[Utility & Helpers](/categories/utility)

wandi/color-picker-bundle
=========================

Wandi/ColorPickerBundle

61.5k3[1 issues](https://github.com/WandiParis/ColorPickerBundle/issues)PHP

Since Dec 2Pushed 6y ago3 watchersCompare

[ Source](https://github.com/WandiParis/ColorPickerBundle)[ Packagist](https://packagist.org/packages/wandi/color-picker-bundle)[ RSS](/packages/wandi-color-picker-bundle/feed)WikiDiscussions master Synced today

READMEChangelogDependenciesVersions (1)Used By (0)

ColorPickerBundle
=================

[](#colorpickerbundle)

### About

[](#about)

ColorPickerPlus is a Symfony 4 wrapper for [Simonwep/pickr](https://github.com/Simonwep/pickr) Javascript Color-Picker library.

 [![WandiColorPicker](doc/img/wandi-color-picker.gif)](doc/img/wandi-color-picker.gif)

### Features

[](#features)

- Add a custom `FormType` that displays a javascript color picker
- Add a new custom `Constraint` to the validator
- Add some `Twig` filters to convert colors

### Requirements

[](#requirements)

see [composer.json](https://github.com/WandiParis/ColorPickerBundle/blob/master/composer.json)

### Install

[](#install)

```
$ composer require wandi/color-picker-bundle
```

### Install the assets

[](#install-the-assets)

```
php bin/console assets:install public
```

### Entity

[](#entity)

We recommand you to store the hexadecimal color code with alpha (`AARRGGBB hex`) because it's the shortest standard with a length of simply 9 chars.

You'll be able later to convert to `HSL`, `HSLA`, `RGB` & `RGBA` if needed (see below).

This bundle is packaged with a custom constraint `HexColor` that validates this format, see `color` property on the following example

```
namespace App\Entity;

use Doctrine\ORM\Mapping as ORM;
use Symfony\Component\Validator\Constraints as Assert;
use Wandi\ColorPickerBundle\Validator\Constraints as WandiAssert;

/**
 * Tag
 *
 * @ORM\Table(name="tag")
 * @ORM\Entity(repositoryClass="App\Repository\TagRepository")
 */
class Tag
{
    /**
     * @var int
     *
     * @ORM\Column(name="id", type="integer")
     * @ORM\Id
     * @ORM\GeneratedValue(strategy="AUTO")
     */
    private $id;

    /**
     * @var string
     *
     * @ORM\Column(name="title", type="string", length=255)
     * @Assert\NotBlank(message="You must fill the title.")
     */
    private $title;

    /**
     * @var string
     *
     * @ORM\Column(name="color", type="string", length=9)
     * @WandiAssert\HexColor()
     * @Assert\NotBlank(message="You must choose a color.")
     */
    private $color;

    // some getters/setters...
}
```

### FormType

[](#formtype)

This bundle is packaged with a custom `ColorPickerType` that'll add the Javascript color picker to the input of your choice.

All `Simonwep/pickr` options are overridable, [see complete configuration reference](https://github.com/Simonwep/pickr#user-content-options).

```
namespace App\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Wandi\ColorPickerBundle\Form\Type\ColorPickerType;
use Wandi\ColorPickerBundle\PickerOptions\Theme;

/**
 * Class TagType
 */
class TagType extends AbstractType
{
    /**
     * @param FormBuilderInterface $builder
     * @param array                $options
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        // e.g. we override pickr_options theme
        $options = [
            'pickr_options' => [
                'theme' => Theme::NANO,
                // ...
            ],
        ];

        $builder
            ->add('title', TextType::class, ['label' => 'Title'])
            ->add('color', ColorPickerType:class, $options)
            ;
    }

    /**
     * @param OptionsResolver $resolver
     */
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(
            array(
                'data_class' => 'App\Entity\Tag',
            )
        );
    }
}
```

### Form Theme

[](#form-theme)

Include our `Form Theme`, it contains the widget that will handle all the Javascript.

```
# config/packages/twig.yaml
twig:
    # ...
    form_themes:
        - '@WandiColorPicker/form/fields.html.twig'
```

### Translations

[](#translations)

`Simonwep/pickr` have 3 buttons with litteral text (Clear, Save, Cancel).

If you need to change the translations or add your own locale, simply override `ColorPickerBundle.xx.yaml`

### Twig Filters

[](#twig-filters)

If you want to convert your color, use one of the following `Twig filters`:

```
Without Alpha Channel

Test hex: {{ tag.color|wandi_color_picker_convert(constant("Wandi\\ColorPickerBundle\\Twig\\ExtensionColorExtension::COLOR_HEX")) }}
> {# #FF851B #}
Test rgb: {{ tag.color|wandi_color_picker_convert(constant("Wandi\\ColorPickerBundle\\Twig\\ExtensionColorExtension::COLOR_RGB")) }}
> {# rgb(255, 133, 27) #}
Test hsl: {{ tag.color|wandi_color_picker_convert(constant("Wandi\\ColorPickerBundle\\Twig\\ExtensionColorExtension::COLOR_HSL")) }}
> {# hsl(27.89474, 100%, 55.29412%) #}

With Alpha Channel

Test hex: {{ tag.color|wandi_color_picker_convert(constant("Wandi\\ColorPickerBundle\\Twig\\ExtensionColorExtension::COLOR_HEX")) }}
> {# #39855AC4 #}
Test rgb: {{ tag.color|wandi_color_picker_convert(constant("Wandi\\ColorPickerBundle\\Twig\\ExtensionColorExtension::COLOR_RGB")) }}
> {# rgba(57, 133, 90, 0.77) #}
Test hsl: {{ tag.color|wandi_color_picker_convert(constant("Wandi\\ColorPickerBundle\\Twig\\ExtensionColorExtension::COLOR_HSL")) }}
> {# hsla(146.05263, 40%, 37.2549%, 0.77) #}
```

Feel free to use these `helpers` to set dynamically `HTML` inline styles (e.g. `color` or `background-color`).

If you need to know the brightness of the color, you can also use the filter:

```
{{ tag.color|wandi_color_picker_get_brightness }}
> {# will return Wandi\ColorPickerBundle\Twig\Extension\ColorExtension::BRIGHTNESS_LIGHT or Wandi\ColorPickerBundle\Twig\Extension\ColorExtension::BRIGHTNESS_DARK depending on the color value #}
```

If you apply a dynamic background-color to an HTML element, it can be usefull to also change the text color.

### WandiEasyAdminPlusBundle

[](#wandieasyadminplusbundle)

If you're using [EasyAdminPlusBundle](https://github.com/WandiParis/EasyAdminPlusBundle/tree/master), our wrapper of [EasyAdminBundle](https://github.com/EasyCorp/EasyAdminBundle/tree/master), you can easily use this bundle is the admin area.

##### Form Theme

[](#form-theme-1)

/!\\ If you are using [EasyAdminBundle 2.3.1+](https://github.com/EasyCorp/EasyAdminBundle/tree/master) /!\\

You have to include our `Form Theme`, it contains the widget that will handle all the Javascript.

```
# config/packages/twig.yaml
easy_admin:
    design:
        form_theme:
            - '@EasyAdmin/form/bootstrap_4.html.twig'
            - '@FOSCKEditor/Form/ckeditor_widget.html.twig'
```

#### List/Show

[](#listshow)

```
- { property: color, label: 'Color', template: '@WandiEasyAdminPlus/templates/wandi_color_picker.html.twig' }
```

 [![WandiColorPicker - List](doc/img/easyadminplus-list.png)](doc/img/easyadminplus-list.png)

#### New/Edit

[](#newedit)

```
- { property: color, label: 'Color', type: 'Wandi\ColorPickerBundle\Form\Type\ColorPickerType' }
```

 [![WandiColorPicker - Form](doc/img/easyadminplus-form.png)](doc/img/easyadminplus-form.png)

###  Health Score

23

—

LowBetter than 27% of packages

Maintenance16

Infrequent updates — may be unmaintained

Popularity24

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity35

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/8718936fc9088cb27065762d123c8961dcdab82e2a63816725a8e397865be115?d=identicon)[wandi](/maintainers/wandi)

---

Top Contributors

[![laurent-bientz](https://avatars.githubusercontent.com/u/6093572?v=4)](https://github.com/laurent-bientz "laurent-bientz (22 commits)")

---

Tags

color-pickerformtypepickrsymfonysymfony-bundlesymfony4

### Embed Badge

![Health badge](/badges/wandi-color-picker-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/wandi-color-picker-bundle/health.svg)](https://phpackages.com/packages/wandi-color-picker-bundle)
```

###  Alternatives

[mottie/tablesorter

tablesorter (FORK) is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.

2.6k223.5k](/packages/mottie-tablesorter)[amasty/module-mage-248-fix

Fix several issues on Magento 2.4.8 version by Amasty

11138.7k](/packages/amasty-module-mage-248-fix)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)