Awesome Open Source
Awesome Open Source

Craft Spectrum FieldType

A Craft fieldtype for the jQuery color picker Spectrum

Fieldtype image

###Installation Download the repo and copy the spectrum folder into your plugins folder, install in the admin area.

Once installed you will have a Spectrum color picker fieldtype available to use.


The fieldtype comes with a set of options you can utilise:

  • Show input - Can a user input their own color code?
  • Show alpha? - Will add a opacity slider
  • Show palette? - Will add a palette selection to the side of the spectrum
  • Only show the palette? - Users will only be able to select from a palette of colors
  • Preferred format HEX, HEX3, HSL, RGB, None - Selecting none will go by whatever is put into the input field, if shown
  • Custom palette - Add your own custom palette


The color value will be whatever you chose as your preferred output in the fields config.

If you have chosen null (transparent) as a colour, then you can test against this:

{% if not entry.color %}
	No color!
{% else %}
	{{ entry.color }}
{% endif %}

Checking the brightness (experimental)

You can also check if a colour is light, good if you need to swap between light and dark text ( will only work on a hex value)

{% if entry.color.isLight() %} color:#000; {% else %} color:#fff {% endif %}

Twig extensions

The field type has a couple of cool twig filters you can use as well, if you want darken or lighten a color (again these will only work with hex values)

The value is the number of steps between -255 (to black) and 255 (to white)

{# Our color is #0090FF #}

{# Accepts a positive number, result is #CDFFFF #}
{% entry.color|lighten(205) %}

{# Accepts a negative number, result is #000032 #}
{% entry.color|darken(-205) %}

{# Accepts either a positive or negative number #}
{% entry.color|brightness(155) %}

That is basically it for now...any issues just open an issue and let me know! This fieldtype is in its infancy so any feature requests just add [FR] to the start of a github issue

Alternatives To Craft Spectrum Fieldtype
Select To Compare

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,059,720
Jquery (26,478
Picker (5,426
Hex (4,504
Colour (4,386
Twig (3,363
Craftcms (2,660