These classes represent colors in Hex, RGB, and HSL forms, with a solid adapter for switching between them. Initially, I was just interested in calculating compatible colors for any given one, but I managed to simplify these manipulations in (what I feel is) an easy to use API. Package includes identical classes for PHP and Javascript.
The classes that are included are:
If you use these tools as I do, then ColorConvert will be the one you use most often. It has one method, convert, and one optional member variable for a default return type in the event that you want to be lazy and not want to type the one you use most often.
| ColorConvert( [string defaultReturnType] ) | |
|---|---|
| defaultReturnType |
— string "" (defaults to "#hex") "#hex" "hex" "rgb" "hsl" "color_hex" "color_rgb" "color_hsl" |
| mixed convert( mixed something [, string convertToType]) |
mixed something can be a multitude of things: a hex value (with or without the hash), a css named color, an array (interpreted as RGB), or an instance of classes Color_Hex, Color_RGB, or Color_HSL. Because of the fundamental differences between javascript and PHP regarding "associative" arrays, handling of structs with key names if a differ just a little. If the object has a key "r", it'll pick up as RGB. If the object has a key "h", it'll read as HSL. string convertToType is optional, and the list of possible values are the same for defaultReturnType. This declares your desired return type, which can be a string (hex), array (rgb, hsl), or an object (color_*). Method convert can also be called statically without instantiating an instace of ColorConvert in both languages. |
| php | javascript |
|---|---|
$C = new ColorConvert();
$HSL = new ColorConvert('color_hsl');
$hex = $C->convert('pink');
$rgb = $C->convert('pink','rgb');
$hsl = ColorConvert::convert( array("r"=>127, 15, 15) , "hsl" );
|
var C = new ColorConvert();
var HSL = new ColorConvert('color_hsl');
var hex = C.convert('pink');
var rgb = C.convert('pink','rgb');
var hsl = ColorConvert.convert( [127, 15, 15] , "hsl" );
|
Among the color-type specific classes, the one worth documenting is Color_HSL for its transformation functions. The other two simply know what they are and how to convert to another (hex and rgb are rarely a problem for developers). For brevity, only the transformation methods are listed (omitted are getters, setters, converters).
|
Color_HSL( array hsl) Color_HSL( float h, float s, float l) |
|
|---|---|
| h | float hue |
| s | float saturation |
| l | float lightness |
| Color_HSL compliment() | returns the opposite color on the color wheel. |
| array split_compliments() | returns two colors ± 150° on the color wheel. |
| array triads() | returns two colors ± 120° on the color wheel. |
| array analogs() | returns two colors ± 30° on the color wheel. |
| array findHues( float distance) | returns two colors ± x° on the color wheel, where x is a floating point number between 0 and 1, and 1 = 360°. |
| Color_HSL hue( float h) | returns a new color with a modified hue of h where h is a floating point number between 0 and 1, and 1 = 360°. |
| Color_HSL saturate( float s) | returns a new color with a modified saturation of s |
| Color_HSL lightness( float l) | returns a new color with a modified lightness of l |
| Color_HSL adjust( (array php)/(object js) modifiers) | Where the three methods above set new values outright, this method will add or subtract from the existing value. The argument is non-scalar to allow the user to make multiple adjustments at once (leading me to use it more often). Keys of the argument struct should have one-to-all of either 'h','s',or 'l'. |
| php | javascript |
$hsl = ColorConvert::convert('#abcdef','color_hsl');
$triads = $hsl->triads();
$muted = $hsl->saturate(0.4);
$muted_darker = $muted->lightness(0.3);
// or
$muted_darker = $hsl->adjust( array("s"=>0.4, "l"=>0.3) );
$hex = $muted_darker->toHex(true);
|
var hsl = ColorConvert.convert('#abcdef','color_hsl');
var triads = hsl.triads();
var muted = hsl.saturate(0.4);
var muted_darker = muted.lightness(0.3);
// or
var muted_darker = hsl.adjust( { s:0.4, l:0.3 } );
var hex = muted_darker.toHex(true);
|
ColorBlend is a slightly older class that predates those mentioned so far, so its constructor is only accepting hex values or css named colors at the time of this writing. It's job is to calculate logical colors between a start and end point.
| ColorBlend(string fromColor [, string toColor [, int blends ]]) | |
|---|---|
| The second ending color to blend to is optional and defaults to black, unless the starting color is considered to be "dark", in which case it defaults to white. Out in production, it didn't really matter to us which way it blended, so long as it produced a big enough series or different enough looking shades. The third argument is the number of shades to produce, and defaults to 10 when omitted. | |
| array colors | the endpoint colors |
| int steps | the number of shades to produce |
| array blends | the collection of calculated colors |
| string getBlend( int index ) | returns a calculated color |
| php | javascript |
$b = new ColorBlend('darkgreen','#c0ffee', 5);
$some_mid = $b->getBlend( 3 );
|
var b = new ColorBlend('darkgreen','#c0ffee', 5);
var some_mid = b.getBlend( 3 );
|