A slightly better color picker for CraftCMS

by Michael Rog
https://topshelfcraft.com

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.

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

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>

A ColorModel has the following methods/properties:

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

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

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

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

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

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

Craft 2.5+ and PHP 5.4+

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

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