Home › User Guide › Colors

Colors

: Solid Colors; Linear Gradients; Radial Gradients

Solid Colors

Solid colors can either be entered:

By name, for example: steelBlue
By RGB color components, for example: 70 130 180
By a hexadecimal RGB color code, for example: #4682b4

Named Colors

xmCHART has easy-to-remember names for the most common colors. Refer to table Color Names for the names. For example:

FillStyle(1;red)

AddRect(10;10;200;100;steelBlue)

Named colors cannot be combined with an alpha value. Instead, use the equivalent RGB color components. For example:

FillStyle(1;steelBlue 128) /* Error */

FillStyle(1;steelBlue,128) /* Error */

FillStyle(1;70 130 180 128) /* R G B A */

FillStyle(1;#4682b480) /* #rrggbbaa */

RGB Colors

RGB colors are defined by three integers between 0 and 255, which represent the red, green and blue components. These three color components are separated by any whitespace characters, including space, tab, and new line. For example:

FillStyle(1;255 0 0) /* Red */

FillStyle(1;255 255 0) /* Yellow */

Transparency (alpha channel) is supported as optional 4th component between 0 (invisible) and 255 (opaque), default is 255. For example:

FillStyle(1;70 130 180 255) /* Same as FillStyle(1;70 130 180) */

FillStyle(1;70 130 180 200) /* Translucent */

FillStyle(1;70 130 180 0) /* Transparent (invisible) */

RGB Hexcodes

Solid colors also can be entered as hexadecimal RGB color code (#rrggbb), along with an optional alpha channel (#rrggbbaa). r, g, b and a can be any hexadecimal digit (0–9, a–f). For example:

FillStyle(1;#4682b4)

FillStyle(1;#4682b480)

The short-hand forms #rgb and #rgba are converted into the six and eight digit forms by replicating digits. For example:

FillStyle(1;#f0a) /* Same as FillStyle(1;#ff00aa) */

FillStyle(1;#f0ab) /* Same as FillStyle(1;#ff00aabb) */

Examples

EXAMPLE_01

1	OpenDrawing(360;80)
2	AddRect(10;10;80;40;steelBlue)
3	AddRect(30;30;80;40;darkRed)
4	AddRect(130;10;80;40;70 130 180 )
5	AddRect(150;30;80;40;190 51 0 170)
6	AddRect(250;10;80;40;#4682b4)
7	AddRect(270;30;80;40;#be330055)
8	CloseDrawing()

EXAMPLE_02

1	OpenDrawing(360;150)
2	ChartData( 8 13 9 7 11 8;
3	-14 3 4 18 5 3;
4	14 7 -8 4 16 11)
5	AreaChart(;on)
6	AreaChartOptions(on) /* After AreaChart() */
7	/* Set up styles. */
8	FillStyle(1; 0 150 200 50)
9	FillStyle(2;255 150 0 50)
10	FillStyle(3;150 200 0 50)
11	BorderStyle(all;smooth;0)
12	LineStyle(1;;2;steelBlue)
13	LineStyle(2;;2;red)
14	LineStyle(3;;2;darkGreen)
15	/* Set up axes and grid. */
16	AxisLine(all;0) /* Hide axis lines. */
17	AxisMajorTicks(all;0) /* Hide tick marks. */
18	AxisMajorTickLabelTexts(x;"") /* Hide tick mark labels. */
19	MajorGridLineWidths(y;x;0) /* Hide vertical grid lines. */
20	MajorGridLineWidths(x;y;0.25)
21	CloseDrawing()

Color Palette

1	OpenDrawing(438;286)
2	OpenView(0;0;438;286)
3	AddText(29;29;"1";Arial;13;plain;30 30 30;right)
4	AddRect( 34;10;28;28;255 255 255;solid;1) /* 1 */
5	AddRect( 68;10;28;28; 0 0 0;solid;1) /* 2 */
6	AddRect(102;10;28;28; 68 0 0;solid;1) /* 3 */
7	AddRect(136;10;28;28;102 51 0;solid;1) /* 4 */
8	AddRect(170;10;28;28;153 102 0;solid;1) /* 5 */
9	AddRect(204;10;28;28; 0 34 0;solid;1) /* 6 */
10	AddRect(238;10;28;28; 0 51 51;solid;1) /* 7 */
11	AddRect(272;10;28;28; 0 51 153;solid;1) /* 8 */
12	AddRect(306;10;28;28; 0 0 85;solid;1) /* 9 */
13	AddRect(340;10;28;28; 51 0 102;solid;1) /* 10 */
14	AddRect(374;10;28;28;102 0 102;solid;1) /* 11 */
15	AddText(408;29;"11";Arial;13;plain;30 30 30)
16
17	AddText(29;63;"12";Arial;13;plain;30 30 30;right)
18	AddRect( 34;44;28;28;136 136 136;solid;1) /* 12 */
19	AddRect( 68;44;28;28; 17 17 17;solid;1) /* 13 */
20	AddRect(102;44;28;28;119 0 0;solid;1) /* 14 */
21	AddRect(136;44;28;28;153 51 0;solid;1) /* 15 */
22	AddRect(170;44;28;28;204 153 0;solid;1) /* 16 */
23	AddRect(204;44;28;28; 0 68 0;solid;1) /* 17 */
24	AddRect(238;44;28;28; 51 102 102;solid;1) /* 18 */
25	AddRect(272;44;28;28; 0 51 255;solid;1) /* 19 */
26	AddRect(306;44;28;28; 0 0 119;solid;1) /* 20 */
27	AddRect(340;44;28;28;102 0 153;solid;1) /* 21 */
28	AddRect(374;44;28;28;153 0 102;solid;1) /* 22 */
29	AddText(408;63;"22";Arial;13;plain;30 30 30)
30
31	AddText(29;97;"23";Arial;13;plain;30 30 30;right)
32	AddRect( 34;78;28;28;153 153 153;solid;1) /* 23 */
33	AddRect( 68;78;28;28; 34 34 34;solid;1) /* 24 */
34	AddRect(102;78;28;28;170 0 0;solid;1) /* 25 */
35	AddRect(136;78;28;28;204 51 0;solid;1) /* 26 */
36	AddRect(170;78;28;28;255 204 0;solid;1) /* 27 */
37	AddRect(204;78;28;28; 0 102 0;solid;1) /* 28 */
38	AddRect(238;78;28;28; 0 102 102;solid;1) /* 29 */
39	AddRect(272;78;28;28; 0 102 255;solid;1) /* 30 */
40	AddRect(306;78;28;28; 0 0 170;solid;1) /* 31 */
41	AddRect(340;78;28;28;102 51 153;solid;1) /* 32 */
42	AddRect(374;78;28;28;204 0 153;solid;1) /* 33 */
43	AddText(408;97;"33";Arial;13;plain;30 30 30)
44
45	AddText(29;131;"34";Arial;13;plain;30 30 30;right)
46	AddRect( 34;112;28;28;170 170 170;solid;1) /* 34 */
47	AddRect( 68;112;28;28; 51 51 51;solid;1) /* 35 */
48	AddRect(102;112;28;28;221 0 0;solid;1) /* 36 */
49	AddRect(136;112;28;28;255 51 0;solid;1) /* 37 */
50	AddRect(170;112;28;28;255 255 0;solid;1) /* 38 */
51	AddRect(204;112;28;28; 0 136 0;solid;1) /* 39 */
52	AddRect(238;112;28;28; 0 153 153;solid;1) /* 40 */
53	AddRect(272;112;28;28; 0 153 255;solid;1) /* 41 */
54	AddRect(306;112;28;28; 0 0 221;solid;1) /* 42 */
55	AddRect(340;112;28;28;153 0 204;solid;1) /* 43 */
56	AddRect(374;112;28;28;255 0 153;solid;1) /* 44 */
57	AddText(408;131;"44";Arial;13;plain;30 30 30)
58
59	AddText(29;165;"45";Arial;13;plain;30 30 30;right)
60	AddRect( 34;146;28;28;187 187 187;solid;1) /* 45 */
61	AddRect( 68;146;28;28; 68 68 68;solid;1) /* 46 */
62	AddRect(102;146;28;28;255 51 51;solid;1) /* 47 */
63	AddRect(136;146;28;28;255 102 0;solid;1) /* 48 */
64	AddRect(170;146;28;28;255 255 51;solid;1) /* 49 */
65	AddRect(204;146;28;28; 0 238 0;solid;1) /* 50 */
66	AddRect(238;146;28;28; 0 204 204;solid;1) /* 51 */
67	AddRect(272;146;28;28; 0 204 255;solid;1) /* 52 */
68	AddRect(306;146;28;28; 51 102 255;solid;1) /* 53 */
69	AddRect(340;146;28;28;153 51 255;solid;1) /* 54 */
70	AddRect(374;146;28;28;255 51 204;solid;1) /* 55 */
71	AddText(408;165;"40";Arial;13;plain;30 30 30)
72
73	AddText(29;199;"56";Arial;13;plain;30 30 30;right)
74	AddRect( 34;180;28;28;204 204 204;solid;1) /* 56 */
75	AddRect( 68;180;28;28; 85 85 85;solid;1) /* 57 */
76	AddRect(102;180;28;28;255 102 102;solid;1) /* 58 */
77	AddRect(136;180;28;28;255 102 51;solid;1) /* 59 */
78	AddRect(170;180;28;28;255 255 102;solid;1) /* 60 */
79	AddRect(204;180;28;28;102 255 102;solid;1) /* 61 */
80	AddRect(238;180;28;28;102 204 204;solid;1) /* 62 */
81	AddRect(272;180;28;28;102 255 255;solid;1) /* 63 */
82	AddRect(306;180;28;28; 51 153 255;solid;1) /* 64 */
83	AddRect(340;180;28;28;153 102 255;solid;1) /* 65 */
84	AddRect(374;180;28;28;255 102 255;solid;1) /* 66 */
85	AddText(408;199;"66";Arial;13;plain;30 30 30)
86
87	AddText(29;233;"67";Arial;13;plain;30 30 30;right)
88	AddRect( 34;214;28;28;221 221 221;solid;1) /* 67 */
89	AddRect( 68;214;28;28;102 102 102;solid;1) /* 68 */
90	AddRect(102;214;28;28;255 153 153;solid;1) /* 69 */
91	AddRect(136;214;28;28;255 153 102;solid;1) /* 70 */
92	AddRect(170;214;28;28;255 255 153;solid;1) /* 71 */
93	AddRect(204;214;28;28;153 255 153;solid;1) /* 72 */
94	AddRect(238;214;28;28;102 255 204;solid;1) /* 73 */
95	AddRect(272;214;28;28;153 255 255;solid;1) /* 74 */
96	AddRect(306;214;28;28;102 204 255;solid;1) /* 75 */
97	AddRect(340;214;28;28;153 153 255;solid;1) /* 76 */
98	AddRect(374;214;28;28;255 153 255;solid;1) /* 77 */
99	AddText(408;233;"77";Arial;13;plain;30 30 30)
100
101	AddText(29;267;"78";Arial;13;plain;30 30 30;right)
102	AddRect( 34;248;28;28;238 238 238;solid;1) /* 78 */
103	AddRect( 68;248;28;28;119 119 119;solid;1) /* 79 */
104	AddRect(102;248;28;28;255 204 204;solid;1) /* 80 */
105	AddRect(136;248;28;28;255 204 153;solid;1) /* 81 */
106	AddRect(170;248;28;28;255 255 204;solid;1) /* 82 */
107	AddRect(204;248;28;28;204 255 204;solid;1) /* 83 */
108	AddRect(238;248;28;28;153 255 204;solid;1) /* 84 */
109	AddRect(272;248;28;28;204 255 255;solid;1) /* 85 */
110	AddRect(306;248;28;28;153 204 255;solid;1) /* 86 */
111	AddRect(340;248;28;28;204 204 255;solid;1) /* 87 */
112	AddRect(374;248;28;28;255 204 255;solid;1) /* 88 */
113	AddText(408;267;"88";Arial;13;plain;30 30 30)
114	CloseView()
115	CloseDrawing()

Color Gradients

Color gradients are available for all xmCHART fills, borders, texts, etc. and are defined by a list of numbers.

Linear Gradients

1 angle isScalableFlag offset1 r1 g1 b1 a1 offset2 r2 g2 b2 a2 ...

For linear gradients the first value of the list is always 1. The second value defines the direction of the gradient within a range of -360 and +360 degrees. 0 degree defines a horizontal gradient from left to right, 90 degrees a gradient from top to bottom. The third value is either 0 or 1, 1 means the angle of the gradient is linked to the width/height ratio of the bounding box, which is in most cases preferable. For example, for a diagonal gradient set the first three values to 1 45 1. On the other hand, if you set the third value 0 (e.g.: 1 45 0 ...) the direction of the gradient is always exactly 45 degrees regardless of the shape of the bounding box. These three values follows a series of color stops. A color stop is represented by five elements: offset, red, green, blue and alpha. Offsets are between 0 and 1, the four RGBA components are between 0 and 255. Color names and RGB hexcodes are not supported in combination with color gradients.

Examples

EXAMPLE_03

1	OpenDrawing(600;90)
2	AddRect(10;10;180;70;
3	1 90 1
4	0.0 0 128 255 255 /* Blue */
5	1.0 40 40 100 255) /* Dark blue */
6	AddRect(210;10;180;70;
7	1 0 1
8	0.0 255 0 0 255 /* Red */
9	0.2 240 109 6 255 /* Orange */
10	0.7 255 255 0 255 /* Yellow */
11	1.0 0 128 0 255) /* Green */
12	AddRect(410;10;180;70;
13	1 45 1
14	0.0 255 0 0 255 /* Red */
15	0.5 255 255 0 255 /* Yellow */
16	1.0 0 0 255 255) /* Blue */
17	CloseDrawing()

EXAMPLE_04

1	OpenDrawing(800;100)
2	AddRect( 10;10;80;80;1 30 1 0.0 220 220 220 255 0.35 240 240 240 255 1.0 220 220 220 255;;0) /* Silver */
3	AddRect(110;10;80;80;1 30 1 0.0 204 204 255 255 0.35 240 240 255 255 1.0 204 204 255 255;;0) /* Light blue */
4	AddRect(210;10;80;80;1 30 1 0.0 203 226 195 255 0.35 240 255 240 255 1.0 203 226 195 255;;0) /* Light green */
5	AddRect(310;10;80;80;1 30 1 0.0 205 205 191 255 0.35 220 220 205 255 1.0 205 205 191 255;;0) /* Beige */
6	AddRect(410;10;80;80;1 30 1 0.0 170 180 190 255 0.35 184 195 205 255 1.0 170 180 190 255;;0) /* Light gray */
7	AddRect(510;10;80;80;1 30 1 0.0 102 102 102 255 0.35 120 120 120 255 1.0 102 102 102 255;;0) /* Dark gray */
8	AddRect(610;10;80;80;1 30 1 0.0 25 39 67 255 0.35 78 97 130 255 1.0 21 36 68 255;;0) /* Dark blue */
9	AddRect(710;10;80;80;1 30 1 0.0 10 10 10 255 0.35 50 50 50 255 1.0 30 30 30 255;;0) /* Black */
10	CloseDrawing()

EXAMPLE_05

1	OpenDrawing(400;210)
2	/* Vertical */
3	AddRect( 20;20;20;170;1 0 1 0.0 241 176 81 255 0.35 247 211 152 255 1.0 90 68 35 255) /* Gold */
4	AddRect( 50;20;20;170;1 0 1 0.0 209 70 40 255 0.35 228 147 124 255 1.0 79 31 21 255) /* Red */
5	AddRect( 80;20;20;170;1 0 1 0.0 80 134 234 255 0.35 151 187 244 255 1.0 36 53 84 255) /* Light blue */
6	AddRect(110;20;20;170;1 0 1 0.0 6 56 28 255 0.35 18 169 85 255 1.0 6 56 28 255) /* Green */
7	AddRect(140;20;20;170;1 0 1 0.0 49 56 12 255 0.35 176 198 52 255 1.0 49 56 12 255) /* Olive */
8	AddRect(170;20;20;170;1 0 1 0.0 46 28 100 255 0.35 143 148 197 255 1.0 46 28 100 255) /* Dark blue */
9	/* Horizontal */
10	AddRect(210; 20;170;20;1 90 1 0.0 90 68 35 255 0.35 247 211 152 255 1.0 90 68 35 255) /* Gold */
11	AddRect(210; 50;170;20;1 90 1 0.0 79 31 21 255 0.35 228 147 124 255 1.0 79 31 21 255) /* Red */
12	AddRect(210; 80;170;20;1 90 1 0.0 36 53 84 255 0.35 151 187 244 255 1.0 36 53 84 255) /* Light blue */
13	AddRect(210;110;170;20;1 90 1 0.0 6 56 28 255 0.35 18 169 85 255 1.0 6 56 28 255) /* Green */
14	AddRect(210;140;170;20;1 90 1 0.0 49 56 12 255 0.35 176 198 52 255 1.0 49 56 12 255) /* Olive */
15	AddRect(210;170;170;20;1 90 1 0.0 46 28 100 255 0.35 143 148 197 255 1.0 46 28 100 255) /* Dark blue */
16	Background(1 45 1
17	0.0 40 40 40 255
18	0.4 80 80 80 255
19	1.0 40 40 40 255;;
20	0) /* Hide border. */
21	CloseDrawing()

EXAMPLE_06

1	OpenDrawing(285;90)
2	AddText(21;60;"gradients";Times New Roman;60;bold;gray)
3	AddText(20;60;"gradients";Times New Roman;60;bold;
4	1 0 1
5	0.35 176 198 52 255
6	0.00 49 56 12 255
7	1.00 49 56 12 255)
8	Background(1 30 1
9	0.00 25 39 67 255
10	0.35 78 97 130 255
11	1.00 21 36 68 255;;
12	0) /* Hide border. */
13	CloseDrawing()

EXAMPLE_07

1	OpenDrawing(450;250)
2	OpenChart(60;35;350;160;on)
3	ChartData(72 90 76 61 48 38 57 86 84 63 84 48)
4	BarChart(label)
5	BorderStyle(all;none)
6	FillStyle(1;1 40 0 0.0 249 202 118 255 1.0 56 45 25 255)
7	LabelStyle(all;Verdana;9;bold;200 200 200)
8	AxisMajorTickLabelTexts(x;"Jan";"Feb";"Mar";"Apr";"May";"Jun";"Jul";"Aug";"Sep";"Oct";"Nov";"Dec")
9	AxisMajorTickLabelStyle(x;Verdana;10;bold;200 200 200;right;-45)
10	AxisMajorTickLabelStyle(y;Verdana;10;bold;200 200 200)
11	AxisMajorTickLabelOptions(x;;;3)
12	AxisLine(all;0) /* Hide axis lines. */
13	AxisMajorTicks(x;0) /* Hide x-axis tick marks. */
14	AxisMajorTicks(y;8;1;gray;;out)
15	MajorGridLineWidths(all;all;0) /* Hide grid lines. */
16	GridFrame(xy;1;gray)
17	ChartBackground(;1 -30 1 0.0 25 39 67 255 0.65 78 97 130 255 1.0 21 36 68 255;;0)
18	CloseChart()
19	Background(1 30 1 0.0 25 39 67 255 0.35 78 97 130 255 1.0 21 36 68 255;;0)
20	CloseDrawing()

Radial Gradients

2 cx cy offset1 r1 g1 b1 a1 offset2 r2 g2 b2 a2 ...

For radial gradients the first value of the list is always 2. The second and third value represent the center point in relative coordinates in respect to the bounding box. For example, the center of the bounding box is defined by cx=0.5 and cy=0.5. These three values follows a series of color stops. A color stop is represented by five elements: offset, red, green, blue and alpha. Offsets are between 0 and 1, the four RGBA components are between 0 and 255. Color names and RGB hexcodes are not supported in combination with color gradients.

Examples

EXAMPLE_08

1	OpenDrawing(300;100)
2	AddOval(10;10;280;80;
3	2 0.5 0.5
4	0.0 255 0 0 255 /* Red */
5	0.5 255 255 0 255 /* Yellow */
6	1.0 0 0 255 255) /* Blue */
7	CloseDrawing()

EXAMPLE_09

1	OpenDrawing(310;60)
2	AddOval( 10;10;40;40;2 0.8 0.8 0.1 223 176 173 255 0.7 161 42 37 255) /* Red */
3	AddOval( 60;10;40;40;2 0.8 0.8 0.1 150 207 121 255 0.7 28 92 0 255) /* Green */
4	AddOval(110;10;40;40;2 0.8 0.8 0.1 187 191 251 255 0.7 34 56 148 255) /* Blue */
5	AddOval(160;10;40;40;2 0.8 0.8 0.1 223 183 251 255 0.7 103 41 149 255) /* Purple */
6	AddOval(210;10;40;40;2 0.8 0.8 0.1 247 208 143 255 0.7 115 73 0 255) /* Gold */
7	AddOval(260;10;40;40;2 0.8 0.8 0.1 211 211 211 255 0.7 46 46 46 255) /* Silver */
8	CloseDrawing()

EXAMPLE_10

1	OpenDrawing(350;200)
2	ChartData( 5 5 5 5 5; /* 1st series: y-values. */
3	6 12 18 24 30; /* 1st series: diameters. */
4	15 15 15 15 15; /* 2nd series: y-values. */
5	30 24 18 12 6; /* 2nd series: diameters. */
6	25 25 25 25 25; /* 3rd series: y-values. */
7	6 12 18 24 30) /* 3rd series: diameters. */
8	BubbleChart(;on)
9	BubbleChartOptions(35) /* After BubbleChart() */
10	FillStyle(1;2 0.7 0.3 0.0 255 100 100 255 1.0 120 0 0 255) /* Red */
11	FillStyle(2;2 0.7 0.3 0.0 100 220 100 255 1.0 0 100 0 255) /* Green */
12	FillStyle(3;2 0.7 0.3 0.0 120 120 255 255 1.0 0 0 120 255) /* Blue */
13	BorderStyle(all;none) /* Hide borders. */
14	GridLocation(all;none) /* Hide grid. */
15	AxisMajorTicks(all;8;;;;out)
16	CloseDrawing()

EXAMPLE_11

1	OpenDrawing(360;200)
2	OpenChart(30;25;300;150;on)
3	ChartData(94 71 50 32 73 65 75 58 51 45 33 69)
4	RadarChart(oval+label;;;on)
5	RadarChartOptions(0;oval;0;0;20;0) /* After RadarChart() */
6	FillStyle(1;2 0.5 0.5 0.0 250 250 0 255 1.0 250 100 42 255)
7	BorderStyle(1;;3;245 183 103)
8	LabelOptions(all;centerCenter;12)
9	LabelStyle(all;Verdana;9;bold;white)
10	AxisOptions(all;none) /* Hide axes. */
11	Scaling(x;linear;20;100;4)
12	MajorGridLineColors(2;1;255 255 255 200)
13	MajorGridLineColors(1;2;255 255 255 100)
14	MajorGridLineWidths(2;1;5;0.5;0.5;0.5;5)
15	GridLocation(xy;front)
16	CloseChart()
17	Background(1 30 1 0.0 0 24 42 255 0.65 0 44 77 255 1.0 0 24 42 255;;0)
18	CloseDrawing()

EXAMPLE_12

1	OpenDrawing(240;150)
2	OpenChart(20;20;200;120;on)
3	ChartData(1)
4	PieChart(oval;12;0;-130;270)
5	BorderStyle(all;none)
6	FillStyle(1;2 0.5 0.5
7	0.1 155 55 255 255 /* Purple */
8	0.77 55 155 155 255
9	0.80 250 200 0 255 /* Yellow */
10	0.83 55 155 155 255
11	1.0 100 200 200 255) /* Green */
12	CloseChart()
13	CloseDrawing()

Colors

Solid Colors

Named Colors

RGB Colors

RGB Hexcodes

Examples

Color Palette

Color Gradients

Linear Gradients

Examples

See Also

Radial Gradients

Examples

See Also