PHPackages                             atk14/color-field - 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. atk14/color-field

ActiveLibrary

atk14/color-field
=================

ColorField is a form field for entering color in HEX, HEXA, RGB or RGBA format

v1.0(4y ago)099MITPHPPHP >=5.3.0

Since Mar 24Pushed 4y ago2 watchersCompare

[ Source](https://github.com/atk14/ColorField)[ Packagist](https://packagist.org/packages/atk14/color-field)[ Docs](https://github.com/atk14/ColorField)[ RSS](/packages/atk14-color-field/feed)WikiDiscussions master Synced today

READMEChangelogDependencies (3)Versions (3)Used By (0)

ColorField
==========

[](#colorfield)

ColorField is a form field for entering color in HEX, HEXA, RGB or RGBA format.

Installation
------------

[](#installation)

Just use the Composer:

```
cd path/to/your/atk14/project/
composer require atk14/color-field

ln -s ../../vendor/atk14/color-field/src/app/fields/color_field.php app/fields/color_field.php

```

### Integration with Pickr

[](#integration-with-pickr)

By default, ColorField renders `` in which values like `#FFFFFF`, `rgb(22,33,44)`, `rgba(100,150,170,0.8)` can be written. Nothing interesting... But ColorField is meant to be integrated with a nice color picker called Pickr (see ).

Pickr can be installed using npm:

```
npm install --save npm install @simonwep/pickr

```

And a small js utility needs to be linked into the project:

```
ln -s ../../../vendor/atk14/color-field/src/public/scripts/utils/color_picker_initializer.js public/scripts/utils/color_picker_initializer.js

```

Now edit gulpfile-admin.js (or gulpfile.js):

```
var vendorStyles = [
  // ...

  // ColorPickr: Include one of the following themes
  "node_modules/@simonwep/pickr/dist/themes/classic.min.css"
  //"node_modules/@simonwep/pickr/dist/themes/monolith.min.css"
  //"node_modules/@simonwep/pickr/dist/themes/nano.min.css"
];

// ...

var vendorScripts = [
  // ...

  // ColorPickr: modern or es5 bundle (in here, the modern bundle fails)
  //"node_modules/@simonwep/pickr/dist/pickr.min.js"
  "node_modules/@simonwep/pickr/dist/pickr.es5.min.js"
];

// ...

var applicationScripts = [
  // ...

  "public/scripts/utils/color_picker_initializer.js",

  // ...
];

```

Finally place the following line into function common.init() in public/admin/scripts/application.js (or public/scripts/application.js).

```
UTILS.color_picker_initializer.init();

```

Usage in an ATK14 application
-----------------------------

[](#usage-in-an-atk14-application)

In a form:

```