Hue

A slightly better color picker for CraftCMS

by Michael Rog
https://topshelfcraft.com

TL;DR.

The Hue fieldtype works almost identically to Craft's native Color field, with some added bonuses:

• You can directly edit the color code as text.
• You can specify a default color in the field settings.
• You can clear (i.e. un-set) field values
• You can set the default color to be empty.
• The ColorModel gives you access to nice helper variables.

---

Working with Hue fields

When you access a Hue field in your templates, its value will either be null (if there is no color set), or a ColorModel.

Using Hue without a field

You can create a Hue ColorModel instance in your templates and work with it just like you would a Hue field. To create a Hue instance in your template, simply pass a color to the craft.hue.createColorFromHex( '#ff80ff' ) method.

Here's an example to determine whether a hex color is light or dark:

	{% set hex = '#ff80ff' %}
	{% set hueColor = craft.hue.createColorFromHex(hex) %}
	<p>The color "{{ hex }}" is {{ hueColor.luma > 0.5 ? 'light' : 'dark') }}.</p>

ColorModel properties

A ColorModel has the following methods/properties:

getHex() / .hex

Returns the string representation of the color in hexidecimal format, including the # at the beginning.

getRgb() / .rgb

Returns the string representation of the color in RGB format, i.e. "0,255,0" for blue.

getRed() / .red

Returns the numeric value of the red channel, from 0-255.

getGreen() / .green

Returns the numeric value of the green channel, from 0-255.

getBlue() / .blue

Returns the numeric value of the blue channel, from 0-255.

luma() / .luma

Returns the numeric brightness of an image, from 0-1. Values closer to 0 are darker, closer to 1 are lighter.

What are the system requirements?

Craft 2.5+ and PHP 5.4+

I found a bug.

Please open a GitHub Issue, submit a PR to the dev branch, or just email me to let me know.

---

Contributors:

• Plugin development: Michael Rog / @michaelrog
• Plugin development: Steve V / @dubcanada
• Plugin development: Aaron Waldon / @aaronwaldon