Specifying Colors

CSS provides a number of ways of defining colors. The Pixate Engine supports these CSS syntaxes and provides extensions to them. The Engine even provides a way to extend colors with user-defined names and values. This article discusses the supported color syntaxes and the color extensions provided by the Pixate Engine.

RGB Colors

RGB colors are defined using the 'rgb()' function. This function defines 3 values, one for each channel: red, green, and blue. The channel values range from 0 to 255, inclusive

background-color: rgb(128, 0, 0);

The Pixate Engine expands on this syntax, allowing percentages from 0% to 100% to be used for each channel value.

background-color: rgb(50%, 25%, 0%);

Hex Colors

RGB values can be represented using hex values. The first two hex digits correspond to the red channel, followed by the next two digits for the green, and finally the last two for the blue.

background-color: #800000;

We can abbreviate each channel value using a single hex digit. This is expanded to the 6-digit form by simply repeating the single hex digit in each channel. For example, the following two lines are equivalent.

background-color: #840;
background-color: #884400;

Named Colors

Some common colors can be referred to by name. The Pixate Engine supports SVG Colors. Later on in this article, we'll see how we can extend these names to include or own definitions.

background-color: purple;

RGBA Colors

RGBA colors are RGB colors with an alpha channel, used to apply transparency to a color. The 'rgba()' function is used similarly to 'rgb()' with an additional forth argument for alpha; however, unlike the color channels, alpha ranges from 0.0 to 1.0.

background-color: rgba(128, 0, 0, 0.5)

The Pixate Engine allows the alpha channel to be expressed as a percentage ranging from 0% to 100%.

background-color: rgba(128, 0, 0, 50%);
background-color: rgba(50%, 0%, 0%, 0.5);
background-color: rgba(50%, 0%, 0%, 50%);

The Pixate Engine allows the first argument of the 'rgba()' function to be a named color or a hex color as well.

background-color: rgba(purple, 0.5);
background-color: rgba(#840, 50%);

Hex Colors with Alpha

Similarly to how we can use a 6-digit hex value in place of the 'rgb()' function, we can use an 8-digit hex value in place of the 'rgba()' function. However, the order of the channels is AARRGGBB, where AA is the alpha hex value, followed by the red, green, and blue values.

background-color: #80800000;

8-digit hex values can be abbreviated using 4 digits, where each digit is repeated. For example, the following are equivalent.

background-color: #8420;
background-color: #88442200;

NOTE: This feature is available in the Pixate Engine v1.1 beta 2 and later.

HSL Colors

Although displays are RGB, it is sometimes more convenient to work with different color spaces. One popular color space is HSL. These colors use the 'hsl()' function. The first parameter is the hue angle. Angles are in degrees when no unit is specified, but may be expressed in radians and gradians as well. The second and third arguments are expressed as percentages from 0% to 100%.

background-color: hsl(180, 100%, 50%);
background-color: hsl(180deg, 100%, 50%);
background-color: hsl(3.14rad, 100%, 50%);

For consistency with the rgb functions, the Pixate Engine allows the second and third arguments to be expressed with values from 0 to 255.

background-color: hsl(180, 255, 128);

HSLA Colors

HSL colors may have transparency using the 'hsla()' function. As with other functions, alpha values range from 0.0 to 1.0 or 0% to 100%.

background-color: hsla(180, 100%, 50%, 0.1);
background-color: hsla(180, 100%, 50%, 10%);

HSB and HSBA Colors

Another popular color space added by the Pixate Engine is the HSB (sometimes referred to as HSV). This works in a similar fashion to 'hsl()' and 'hsla()'

background-color: hsb(180, 100%, 50%);
background-color: hsb(180deg, 100%, 50%);
background-color: hsb(3.14rad, 100%, 50%);
background-color: hsb(180, 255, 128);
background-color: hsba(180, 100%, 50%, 0.1);
background-color: hsba(180, 100%, 50%, 10%);

Fallback

The Pixate Engine allows you to extend the list of named colors with your own. As a fallback mechanism, the Engine will look for a static property on UIColor if it does not recognize a named color. For example, we can create a UIColor category that defines a "companyBackgroundColor" static method.

@implementation UIColor (CustomColors)

+ (UIColor *)companyBackgroundColor
{
    static dispatch_once_t onceToken;
    static UIColor *color;

    dispatch_once(&onceToken, ^{
        color = [UIColor colorWithRed:0.5 green:0.25 blue:0.25 alpha:1.0];
    });

    return color;
}

@end

This allows us to refer to a newly named color called "companyBackground" or "companyBackgroundColor". Note that "Color" is optional.

#text1 {
    background-color: companyBackground;
}

Applying this color to a text field, results in the following.

Conclusion

In this article we took a quick survey over the various ways you can specify solid colors in the Pixate Engine. We covered extensions to CSS syntax, and showed a way to add your own named colors.

[Published: 2013-04-26]