HEX, RGB, RGBA, HSL, and HSLA Methods
The common datatype of all possible color values is:
TCanvasColor .
Colors in Morfik Canvas can be specified by the following methods:
• Hexadecimal colors
• RGB colors
• RGBA colors
• HSL colors
• HSLA colors
• Predefined/Cross-browser colors
Hexadecimal Colors
Hexadecimal color values are supported in all major browsers.
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 0 and FF.
For example, the #0000FF value is rendered as blue, because the blue component is set to its highest value (FF) and the others are set to 0.
Example:
Canvas.FillStyle := #0000FF;
RGB Colors
RGB color values are supported in all major browsers.
An RGB color value is specified with: RGB(red, green, blue). Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255.
For example, the RGB(0,0,255) value is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0.
Example:
Canvas.FillStyle := RGB(0,0,255);
RGBA Colors
RGBA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+.
RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object.
An RGBA color value is specified with: RGBA(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Example:
Canvas.FillStyle := RGBA(0,0,255,0.3);
HSL Colors
HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+.
HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors.
An HSL color value is specified with: HSL(hue, saturation, lightness).
Hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness is also a percentage; 0% is black, 100% is white.
Example:
Canvas.FillStyle := HSL(120,100,50);
HSLA Colors
HSLA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+.
HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity of the object.
An HSLA color value is specified with: HSLA(hue, saturation, lightness, alpha), where the alpha parameter defines the opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Example:
Canvas.FillStyle := HSLA(120,100,50,0.3);
Predefined/Cross-browser colors
140 color names are defined (17 standard colors plus 123 more). The table below lists them all, along with their hexadecimal values.
Example:
Canvas.FillStyle := clRed;