PHPackages                             cznec/nova-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. [Utility & Helpers](/categories/utility)
4. /
5. cznec/nova-color-field

ActiveLibrary[Utility & Helpers](/categories/utility)

cznec/nova-color-field
======================

A Laravel Nova Color Picker field.

079↓100%1Vue

Since Feb 11Pushed 1y agoCompare

[ Source](https://github.com/cznec/nova-color-field)[ Packagist](https://packagist.org/packages/cznec/nova-color-field)[ RSS](/packages/cznec-nova-color-field/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

Nova Color Field
================

[](#nova-color-field)

[![Latest Version on Packagist](https://camo.githubusercontent.com/2f6eb6e909bf9317a544e5a486dc0828258da000f2e0fa8c1ab3870858cd7589/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6f75746c316e652f6e6f76612d636f6c6f722d6669656c642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/outl1ne/nova-color-field)[![Total Downloads](https://camo.githubusercontent.com/1f907717b07f409dd2ebf47812a62af38fabe4b1869e1cb6b0007c8941c990da/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6f75746c316e652f6e6f76612d636f6c6f722d6669656c642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/outl1ne/nova-color-field)

This [Laravel Nova](https://nova.laravel.com/) package adds a color picker to Nova's arsenal of fields.

Requirements
------------

[](#requirements)

- `php: >=8.0`
- `laravel/nova: ^4.0`

Features
--------

[](#features)

A simple Nova Color field utilizing [vue-color](https://github.com/xiaokaike/vue-color).

Forked from [timothyasp/nova-color-field](https://github.com/timothyasp/nova-color-field) and brought up to date with improvements.

Screenshots
-----------

[](#screenshots)

[![Form page](./docs/form.png)](./docs/form.png)[![Details page](./docs/detail.png)](./docs/detail.png)

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

[](#installation)

Install the package in to a Laravel app that uses [Nova](https://nova.laravel.com) via composer:

```
composer require outl1ne/nova-color-field
```

Usage
-----

[](#usage)

### General

[](#general)

```
use Outl1ne\NovaColorField\Color;

public function fields(Request $request) {
    Color::make('Color'),
}
```

### Themes

[](#themes)

Available themes: `chrome, compactTheme, grayscale, material, photoshop, sketch, slider, swatches, twitter`.

See the theme demos [here](http://xiaokaike.github.io/vue-color/).

```
use Outl1ne\NovaColorField\Color;

public function fields(Request $request) {
    Color::make('Color')->photoshop(),
    Color::make('Color')->swatches(),
    // ...
}
```

### Customizing save and display formats

[](#customizing-save-and-display-formats)

If you would like to display and save the color in a format other than `hex`, you can use the `->displayAs('hex')` and `->saveAs('hex')` helpers.

Available options are: `rgb, rgba, hex, hex8, hsl`.

```
Color::make('Color')
  ->chrome()
  ->displayAs('hex8')
  ->saveAs('hex8'),
```

### Palettes

[](#palettes)

Adding custom pallette colors to the pickers can be done like so:

```
Color::make('Color')
  ->compactTheme()
  ->palette(['#beaf00', '#DEADAF', '#000']),
```

Credits
-------

[](#credits)

- [Tarvo Reinpalu](https://github.com/tarpsvo)
- [Timothy Asp](https://github.com/timothyasp)
- [Don Gilbert](https://github.com/dongilbert)
- [marvinrabe](https://github.com/marvinrrabe)

License
-------

[](#license)

Nova Color Field is open-sourced software licensed under the [MIT license](LICENSE.md).

###  Health Score

19

—

LowBetter than 10% of packages

Maintenance33

Infrequent updates — may be unmaintained

Popularity12

Limited adoption so far

Community16

Small or concentrated contributor base

Maturity16

Early-stage or recently created project

 Bus Factor1

Top contributor holds 58.7% 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/50eb87772391dcd28ef3251661e7656d9963691c8997dce739f6b9f5b9f79255?d=identicon)[cznec](/maintainers/cznec)

---

Top Contributors

[![Tarpsvo](https://avatars.githubusercontent.com/u/2018660?v=4)](https://github.com/Tarpsvo "Tarpsvo (44 commits)")[![timothyasp](https://avatars.githubusercontent.com/u/707699?v=4)](https://github.com/timothyasp "timothyasp (14 commits)")[![ianrobertsFF](https://avatars.githubusercontent.com/u/91917328?v=4)](https://github.com/ianrobertsFF "ianrobertsFF (5 commits)")[![dongilbert](https://avatars.githubusercontent.com/u/718028?v=4)](https://github.com/dongilbert "dongilbert (4 commits)")[![Yuq140](https://avatars.githubusercontent.com/u/44531835?v=4)](https://github.com/Yuq140 "Yuq140 (2 commits)")[![p-jrv](https://avatars.githubusercontent.com/u/51167113?v=4)](https://github.com/p-jrv "p-jrv (1 commits)")[![marvinrabe](https://avatars.githubusercontent.com/u/515860?v=4)](https://github.com/marvinrabe "marvinrabe (1 commits)")[![AzadGh95](https://avatars.githubusercontent.com/u/46772227?v=4)](https://github.com/AzadGh95 "AzadGh95 (1 commits)")[![jorgv](https://avatars.githubusercontent.com/u/32174909?v=4)](https://github.com/jorgv "jorgv (1 commits)")[![ahinkle](https://avatars.githubusercontent.com/u/17038330?v=4)](https://github.com/ahinkle "ahinkle (1 commits)")[![mertasan](https://avatars.githubusercontent.com/u/13007665?v=4)](https://github.com/mertasan "mertasan (1 commits)")

### Embed Badge

![Health badge](/badges/cznec-nova-color-field/health.svg)

```
[![Health](https://phpackages.com/badges/cznec-nova-color-field/health.svg)](https://phpackages.com/packages/cznec-nova-color-field)
```

PHPackages © 2026

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