Telerik UI for Windows 8 HTML

Color objects hold an instance of a color and expose methods and properties that allow easy manipulation and conversion to various color models. This article will introduce you to the ways you can create, modify and convert a color object.

This topic contains the following sections.

Creating a Color Object

You cannot create a color object declaratively. You need to use one of the four methods below:

  • Telerik.Utilities.color.parseColor(colorString): Use this method if you want to create the color object from a color string. The method takes strings in one of the following formats: hex, RGB, or RGBA and return a color object.

  • Telerik.Utilities.color.fromRGB(r, g, b, a): This method takes four arguments: red, green, blue, and alpha, where the values are floating point numbers from 0 to 1, and returns a color object.

  • Telerik.Utilities.color.fromBytes(r, g, b, a): This method is identical to the previous one with the difference that the r, g, and b arguments values are integers from 0 to 255.

  • Telerik.Utilities.color.fromHSV(h, s, v, a): Use this method when you want to create a color object by its hue, saturation, value and alpha (transparency) values. The h (hue) argument is a number from 0 to 360 and the rest of the arguments are floating point values from 0 to 1. The method returns a color object.

All of the above methods support transparency through the a argument. If it is not specified, the default value is 1.

Code Listing 1: Creating Color Objects Copy imageCopy
var redBytes = Telerik.Utilities.color.parseColor("#FF0000");
var greenRGB = Telerik.Utilities.color.fromRGB(0, 1, 0, 1);
var blueBytes = Telerik.Utilities.color.fromBytes(0, 0, 255, 1);
var colorHSV = Telerik.Utilities.color.fromHSV(126, 1, 0.5, 1);

Color Object Representations

Color objects can have three different representations that match the creation methods from the previous section. Depending on the representation the color object's properties change too.

  • Bytes representation: This is the default color object representation. The color object is returned in this representation by the parseColor() and fromBytes() methods. In this representation the color object has the following properties:

    • r: The red component as an integer from 0 to 255.

    • g: The green component as an integer from 0 to 255.

    • b: The blue component as an integer from 0 to 255.

    • a: The alpha (transparency) component as a floating point from 0 to 1.

  • RGB representation: The same as the Bytes representation, but the r, g, and b properties values are floating points from 0 to 1. The color object is returned in this representation by the fromRGB() method.

  • HSV representation: The color object is returned in this representation by the fromHSV() method. In this representation the color object has the following properties:

    • h: The hue component as a number from 0 to 360.

    • s: The saturation component as a floating point from 0 to 1.

    • v: The value or brightness component as a floating point from 0 to 1.

    • a: The alpha (transparency) component as a floating point from 0 to 1.

In Code Listing 2 the color objects created in the previous section are modified slightly by assigning new values to their properties.

Code Listing 2: Representations and Properties Copy imageCopy
redBytes.r = 150;
redBytes.g = 10;
redBytes.b = 25;
redBytes.a = 0.7;

greenRGB.r = 0.1;
greenRGB.g = 0.6;
greenRGB.b = 0.3;
greenRGB.a = 0.7;

colorHSV.h = 360;
colorHSV.s = 0.5;
colorHSV.v = 0.8;
colorHSV.a = 0.4;

Converting Color Object Representations

If you are not certain about a particular color object's representation, you can convert it to the one you need using the methods below:

  • toBytes(): Use this method to convert the color object to Bytes representation.

  • toRGB(): This method converts the color object to RGB representation.

  • toHSV(): Use this method to get the color object in HSV representation.

You can also get string representations of the color object.

  • toHex(): This method returns a string in the format 'ffffff' (without a leading #).

  • toCss(): This method returns a string in the format '#ffffff'.

  • toCssRgba(): This method returns a string in the 'RGBA' format.

All of the above methods do not modify the current color object. They return a new converted color object instead.

Code Listing 3: Color Object Convertions Copy imageCopy
var color = Telerik.Utilities.color.parseColor("#007F0E");

var colorRGB = color.toRGB();   // { r: 0, g: 0.49, b: 0.05, a: 1 }
var colorBytes = color.toBytes(); // { r: 0, g: 127, b: 14, a: 1 }
var colorHSV = color.toHSV(); // { h: 126.61, s: 1, v: 0.49, a: 1 }

var colorHex = color.toHex(); // 007f0e
var colorCss = color.toCss(); // #007f0e
var colorCssRgba = color.toCssRgba(); // rgba(0, 127, 14, 1)

Comparing Color Objects

Use the equals() method to check if two color objects' colors are identical. The method returns true if the colors are the same.

Code Listing 4: Checking if Two Color Objects are Identical Copy imageCopy
var red1 = Telerik.Utilities.color.fromBytes(255, 0, 0, 0.5);
var red2 = Telerik.Utilities.color.fromBytes(255, 0, 0, 1);

var equality = red1.equals(red2); // false

red1.a = 1;

equality = red1.equals(red2); // true