Colors: what changed

Revision 1 to 2. Removed lines have a minus sign; added lines have a plus sign.

Old	New		Line
1	1		## Overview
2	2
3	3		Since FPC 3.2.0, Free Pascal defines TColor and TColorRec as well as the 140 standard Color names in the Delphi compatible System.UItypes unit, to allow non visual code to use the same type as visual code. Lazarus hasn't caught on yet, because the current Lazarus versions still support 3.0.x.
4	4
5	5		In the [[LCL]] TColor is the standard color type. It is compatible with [[Delphi]]'s TColor. TColor can represent either an RGB (3x8bit) value, or a system color like clDefault. The LCL can also work with the fpImage system which uses the TFPColor type (which is RGBA (4x16bit), not RGB (3x8bit) like TColor).
6	6
7	7		### Conversions between TColor and RGB values
8	8
9	9		The Graphics [[Unit\|unit]] provides the following [[Function\|functions]]:
10	10
11	11		``` pascal
12	12		function Blue(rgb: TColor): BYTE; // does not work on system color
13	13		function Green(rgb: TColor): BYTE; // does not work on system color
14	14		function Red(rgb: TColor): BYTE; // does not work on system color
15	15		function RGBToColor(R, G, B: Byte): TColor;
16	16		procedure RedGreenBlue(rgb: TColor; out Red, Green, Blue: Byte); // does not work on system color
17	17		function FPColorToTColor(const FPColor: TFPColor): TColor;
18	18		function TColorToFPColor(const c: TColor): TFPColor; // does not work on system color
19	19		function IsSysColor(AColor: TColorRef): Boolean;
20	20		```
21	21
22	22		### Convert TColor to/from string
23	23
24	24		Functions to convert strings like "25500" or "[[Dollar sign\|$AA]]0088" or "clNavy" to TColor:
25	25
26	26		- StringToColor
27	27		- StringToColorDef
28	28
29	29		To convert TColor to a nice string like "clNavy" or "\$AA0002":
30	30
31	31		- ColorToString
32	32
33	33		### Convert TColor to/from HTML string \#rrggbb
34	34
35	35		See code in [[Convert color to/from HTML]].
36	36
37	37		## Table of standard colors
38	38
39	39		About 20 predefined color [[Constant\|constants]] are provided, which are Delphi-compatible:
40	40
41	41		\| Colour constant \| Meaning \| [[Hexadecimal]] value for use with TColor \| Example \|
42	42		\|----\|----\|----\|----\|
43	43		\| clBlack \| Black \| TColor(\$000000); \| \|
44	44		\| clMaroon \| Maroon \| TColor(\$000080); \| \|
45	45		\| clGreen \| Green \| TColor(\$008000); \| \|
46	46		\| clOlive \| Olive Green \| TColor(\$008080); \| \|
47	47		\| clNavy \| Navy Blue \| TColor(\$800000); \| \|
48	48		\| clPurple \| Purple \| TColor(\$800080); \| \|
49	49		\| clTeal \| Teal \| TColor(\$808000); \| \|
50	50		\| clGray \| Grey \| TColor(\$808080); \| \|
51	51		\| clSilver \| Silver \| TColor(\$C0C0C0); \| \|
52	52		\| clRed \| Red \| TColor(\$0000FF); \| \|
53	53		\| clLime \| Lime Green \| TColor(\$00FF00); \| \|
54	54		\| clYellow \| Yellow \| TColor(\$00FFFF); \| \|
55	55		\| clBlue \| Blue \| TColor(\$FF0000); \| \|
56	56		\| clFuchsia \| Fuchsia \| TColor(\$FF00FF); \| \|
57	57		\| clAqua \| Aqua \| TColor(\$FFFF00); \| \|
58	58		\| clLtGray \| Light Grey \| TColor(\$C0C0C0); \| clSilver alias \|
59	59		\| clDkGray \| Dark Grey \| TColor(\$808080); \| clGray alias \|
60	60		\| clWhite \| White \| TColor(\$FFFFFF); \| \|
61	61		\| clCream \| Cream \| TColor(\$F0FBFF); \| Lazarus 1.2 and newer \|
62	62		\| clMedGray \| Medium Grey \| TColor(\$A4A0A0); \| Lazarus 1.2 and newer \|
63	63		\| clMoneyGreen \| Mint Green \| TColor(\$C0DCC0); \| Lazarus 1.2 and newer \|
64	64		\| clSkyBlue \| Sky Blue \| TColor(\$F0CAA6); \| Lazarus 1.2 and newer \|
65	65
66	66		In FPC 3.2.0+ defines some other constants for w3c colors in System.Uitypes:
67	67
68	68		\| Colour constant \| Meaning \| [[Hexadecimal]] value for use with TColor \| Example \|
69	69		\|----\|----\|----\|----\|
70	70		\| \| \| \| \|
71	71		\| AntiqueWhite \| AntiqueWhite \| TColor(\$FAEBD7); \| FPC 3.2.0 and newer \|
72	72		\| Aqua \| Aqua \| TColor(\$00FFFF); \| FPC 3.2.0 and newer \|
73	73		\| Aquamarine \| Aquamarine \| TColor(\$7FFFD4); \| FPC 3.2.0 and newer \|
74	74		\| Azure \| Azure \| TColor(\$F0FFFF); \| FPC 3.2.0 and newer \|
75	75		\| Beige \| Beige \| TColor(\$F5F5DC); \| FPC 3.2.0 and newer \|
76	76		\| Bisque \| Bisque \| TColor(\$FFE4C4); \| FPC 3.2.0 and newer \|
77	77		\| Black \| Black \| TColor(\$000000); \| FPC 3.2.0 and newer \|
78	78		\| BlanchedAlmond \| BlanchedAlmond \| TColor(\$FFEBCD); \| FPC 3.2.0 and newer \|
79	79		\| Blue \| Blue \| TColor(\$0000FF); \| FPC 3.2.0 and newer \|
80	80		\| BlueViolet \| BlueViolet \| TColor(\$8A2BE2); \| FPC 3.2.0 and newer \|
81	81		\| Brown \| Brown \| TColor(\$A52A2A); \| FPC 3.2.0 and newer \|
82	82		\| BurlyWood \| BurlyWood \| TColor(\$DEB887); \| FPC 3.2.0 and newer \|
83	83		\| CadetBlue \| CadetBlue \| TColor(\$5F9EA0); \| FPC 3.2.0 and newer \|
84	84		\| Chartreuse \| Chartreuse \| TColor(\$7FFF00); \| FPC 3.2.0 and newer \|
85	85		\| Chocolate \| Chocolate \| TColor(\$D2691E); \| FPC 3.2.0 and newer \|
86	86		\| Coral \| Coral \| TColor(\$FF7F50); \| FPC 3.2.0 and newer \|
87	87		\| CornflowerBlue \| CornflowerBlue \| TColor(\$6495ED); \| FPC 3.2.0 and newer \|
88	88		\| Cornsilk \| Cornsilk \| TColor(\$FFF8DC); \| FPC 3.2.0 and newer \|
89	89		\| Crimson \| Crimson \| TColor(\$DC143C); \| FPC 3.2.0 and newer \|
90	90		\| Cyan \| Cyan \| TColor(\$00FFFF); \| FPC 3.2.0 and newer \|
91	91		\| DarkBlue \| DarkBlue \| TColor(\$00008B); \| FPC 3.2.0 and newer \|
92	92		\| DarkCyan \| DarkCyan \| TColor(\$008B8B); \| FPC 3.2.0 and newer \|
93	93		\| DarkGoldenRod \| DarkGoldenRod \| TColor(\$B8860B); \| FPC 3.2.0 and newer \|
94	94		\| DarkGray \| DarkGray \| TColor(\$A9A9A9); \| FPC 3.2.0 and newer \|
95	95		\| DarkGreen \| DarkGreen \| TColor(\$006400); \| FPC 3.2.0 and newer \|
96	96		\| DarkGrey \| DarkGrey \| TColor(\$A9A9A9); \| FPC 3.2.0 and newer \|
97	97		\| DarkKhaki \| DarkKhaki \| TColor(\$BDB76B); \| FPC 3.2.0 and newer \|
98	98		\| DarkMagenta \| DarkMagenta \| TColor(\$8B008B); \| FPC 3.2.0 and newer \|
99	99		\| DarkOliveGreen \| DarkOliveGreen \| TColor(\$556B2F); \| FPC 3.2.0 and newer \|
100	100		\| DarkOrange \| DarkOrange \| TColor(\$FF8C00); \| FPC 3.2.0 and newer \|
101	101		\| DarkOrchid \| DarkOrchid \| TColor(\$9932CC); \| FPC 3.2.0 and newer \|
102	102		\| DarkRed \| DarkRed \| TColor(\$8B0000); \| FPC 3.2.0 and newer \|
103	103		\| DarkSalmon \| DarkSalmon \| TColor(\$E9967A); \| FPC 3.2.0 and newer \|
104	104		\| DarkSeaGreen \| DarkSeaGreen \| TColor(\$8FBC8F); \| FPC 3.2.0 and newer \|
105	105		\| DarkSlateBlue \| DarkSlateBlue \| TColor(\$483D8B); \| FPC 3.2.0 and newer \|
106	106		\| DarkSlateGray \| DarkSlateGray \| TColor(\$2F4F4F); \| FPC 3.2.0 and newer \|
107	107		\| DarkSlateGrey \| DarkSlateGrey \| TColor(\$2F4F4F); \| FPC 3.2.0 and newer \|
108	108		\| DarkTurquoise \| DarkTurquoise \| TColor(\$00CED1); \| FPC 3.2.0 and newer \|
109	109		\| DarkViolet \| DarkViolet \| TColor(\$9400D3); \| FPC 3.2.0 and newer \|
110	110		\| DeepPink \| DeepPink \| TColor(\$FF1493); \| FPC 3.2.0 and newer \|
111	111		\| DeepSkyBlue \| DeepSkyBlue \| TColor(\$00BFFF); \| FPC 3.2.0 and newer \|
112	112		\| DimGray \| DimGray \| TColor(\$696969); \| FPC 3.2.0 and newer \|
113	113		\| DimGrey \| DimGrey \| TColor(\$696969); \| FPC 3.2.0 and newer \|
114	114		\| DodgerBlue \| DodgerBlue \| TColor(\$1E90FF); \| FPC 3.2.0 and newer \|
115	115		\| FireBrick \| FireBrick \| TColor(\$B22222); \| FPC 3.2.0 and newer \|
116	116		\| FloralWhite \| FloralWhite \| TColor(\$FFFAF0); \| FPC 3.2.0 and newer \|
117	117		\| ForestGreen \| ForestGreen \| TColor(\$228B22); \| FPC 3.2.0 and newer \|
118	118		\| Fuchsia \| Fuchsia \| TColor(\$FF00FF); \| FPC 3.2.0 and newer \|
119	119		\| Gainsboro \| Gainsboro \| TColor(\$DCDCDC); \| FPC 3.2.0 and newer \|
120	120		\| GhostWhite \| GhostWhite \| TColor(\$F8F8FF); \| FPC 3.2.0 and newer \|
121	121		\| Gold \| Gold \| TColor(\$FFD700); \| FPC 3.2.0 and newer \|
122	122		\| GoldenRod \| GoldenRod \| TColor(\$DAA520); \| FPC 3.2.0 and newer \|
123	123		\| Gray \| Gray \| TColor(\$808080); \| FPC 3.2.0 and newer \|
124	124		\| Green \| Green \| TColor(\$008000); \| FPC 3.2.0 and newer \|
125	125		\| GreenYellow \| GreenYellow \| TColor(\$ADFF2F); \| FPC 3.2.0 and newer \|
126	126		\| Grey \| Grey \| TColor(\$808080); \| FPC 3.2.0 and newer \|
127	127		\| HoneyDew \| HoneyDew \| TColor(\$F0FFF0); \| FPC 3.2.0 and newer \|
128	128		\| HotPink \| HotPink \| TColor(\$FF69B4); \| FPC 3.2.0 and newer \|
129	129		\| IndianRed \| IndianRed \| TColor(\$CD5C5C); \| FPC 3.2.0 and newer \|
130	130		\| Indigo \| Indigo \| TColor(\$4B0082); \| FPC 3.2.0 and newer \|
131	131		\| Ivory \| Ivory \| TColor(\$FFFFF0); \| FPC 3.2.0 and newer \|
132	132		\| Khaki \| Khaki \| TColor(\$F0E68C); \| FPC 3.2.0 and newer \|
133	133		\| Lavender \| Lavender \| TColor(\$E6E6FA); \| FPC 3.2.0 and newer \|
134	134		\| LavenderBlush \| LavenderBlush \| TColor(\$FFF0F5); \| FPC 3.2.0 and newer \|
135	135		\| LawnGreen \| LawnGreen \| TColor(\$7CFC00); \| FPC 3.2.0 and newer \|
136	136		\| LemonChiffon \| LemonChiffon \| TColor(\$FFFACD); \| FPC 3.2.0 and newer \|
137	137		\| LightBlue \| LightBlue \| TColor(\$ADD8E6); \| FPC 3.2.0 and newer \|
138	138		\| LightCoral \| LightCoral \| TColor(\$F08080); \| FPC 3.2.0 and newer \|
139	139		\| LightCyan \| LightCyan \| TColor(\$E0FFFF); \| FPC 3.2.0 and newer \|
140	140		\| LightGoldenRodYellow \| LightGoldenRodYellow \| TColor(\$FAFAD2); \| FPC 3.2.0 and newer \|
141	141		\| LightGray \| LightGray \| TColor(\$D3D3D3); \| FPC 3.2.0 and newer \|
142	142		\| LightGreen \| LightGreen \| TColor(\$90EE90); \| FPC 3.2.0 and newer \|
143	143		\| LightGrey \| LightGrey \| TColor(\$D3D3D3); \| FPC 3.2.0 and newer \|
144	144		\| LightPink \| LightPink \| TColor(\$FFB6C1); \| FPC 3.2.0 and newer \|
145	145		\| LightSalmon \| LightSalmon \| TColor(\$FFA07A); \| FPC 3.2.0 and newer \|
146	146		\| LightSeaGreen \| LightSeaGreen \| TColor(\$20B2AA); \| FPC 3.2.0 and newer \|
147	147		\| LightSkyBlue \| LightSkyBlue \| TColor(\$87CEFA); \| FPC 3.2.0 and newer \|
148	148		\| LightSlateGray \| LightSlateGray \| TColor(\$778899); \| FPC 3.2.0 and newer \|
149	149		\| LightSlateGrey \| LightSlateGrey \| TColor(\$778899); \| FPC 3.2.0 and newer \|
150	150		\| LightSteelBlue \| LightSteelBlue \| TColor(\$B0C4DE); \| FPC 3.2.0 and newer \|
151	151		\| LightYellow \| LightYellow \| TColor(\$FFFFE0); \| FPC 3.2.0 and newer \|
152	152		\| Lime \| Lime \| TColor(\$00FF00); \| FPC 3.2.0 and newer \|
153	153		\| LimeGreen \| LimeGreen \| TColor(\$32CD32); \| FPC 3.2.0 and newer \|
154	154		\| Linen \| Linen \| TColor(\$FAF0E6); \| FPC 3.2.0 and newer \|
155	155		\| Magenta \| Magenta \| TColor(\$FF00FF); \| FPC 3.2.0 and newer \|
156	156		\| Maroon \| Maroon \| TColor(\$800000); \| FPC 3.2.0 and newer \|
157	157		\| MediumAquaMarine \| MediumAquaMarine \| TColor(\$66CDAA); \| FPC 3.2.0 and newer \|
158	158		\| MediumBlue \| MediumBlue \| TColor(\$0000CD); \| FPC 3.2.0 and newer \|
159	159		\| MediumOrchid \| MediumOrchid \| TColor(\$BA55D3); \| FPC 3.2.0 and newer \|
160	160		\| MediumPurple \| MediumPurple \| TColor(\$9370DB); \| FPC 3.2.0 and newer \|
161	161		\| MediumSeaGreen \| MediumSeaGreen \| TColor(\$3CB371); \| FPC 3.2.0 and newer \|
162	162		\| MediumSlateBlue \| MediumSlateBlue \| TColor(\$7B68EE); \| FPC 3.2.0 and newer \|
163	163		\| MediumSpringGreen \| MediumSpringGreen \| TColor(\$00FA9A); \| FPC 3.2.0 and newer \|
164	164		\| MediumTurquoise \| MediumTurquoise \| TColor(\$48D1CC); \| FPC 3.2.0 and newer \|
165	165		\| MediumVioletRed \| MediumVioletRed \| TColor(\$C71585); \| FPC 3.2.0 and newer \|
166	166		\| MidnightBlue \| MidnightBlue \| TColor(\$191970); \| FPC 3.2.0 and newer \|
167	167		\| MintCream \| MintCream \| TColor(\$F5FFFA); \| FPC 3.2.0 and newer \|
168	168		\| MistyRose \| MistyRose \| TColor(\$FFE4E1); \| FPC 3.2.0 and newer \|
169	169		\| Moccasin \| Moccasin \| TColor(\$FFE4B5); \| FPC 3.2.0 and newer \|
170	170		\| NavajoWhite \| NavajoWhite \| TColor(\$FFDEAD); \| FPC 3.2.0 and newer \|
171	171		\| Navy \| Navy \| TColor(\$000080); \| FPC 3.2.0 and newer \|
172	172		\| OldLace \| OldLace \| TColor(\$FDF5E6); \| FPC 3.2.0 and newer \|
173	173		\| Olive \| Olive \| TColor(\$808000); \| FPC 3.2.0 and newer \|
174	174		\| OliveDrab \| OliveDrab \| TColor(\$6B8E23); \| FPC 3.2.0 and newer \|
175	175		\| Orange \| Orange \| TColor(\$FFA500); \| FPC 3.2.0 and newer \|
176	176		\| OrangeRed \| OrangeRed \| TColor(\$FF4500); \| FPC 3.2.0 and newer \|
177	177		\| Orchid \| Orchid \| TColor(\$DA70D6); \| FPC 3.2.0 and newer \|
178	178		\| PaleGoldenRod \| PaleGoldenRod \| TColor(\$EEE8AA); \| FPC 3.2.0 and newer \|
179	179		\| PaleGreen \| PaleGreen \| TColor(\$98FB98); \| FPC 3.2.0 and newer \|
180	180		\| PaleTurquoise \| PaleTurquoise \| TColor(\$AFEEEE); \| FPC 3.2.0 and newer \|
181	181		\| PaleVioletRed \| PaleVioletRed \| TColor(\$DB7093); \| FPC 3.2.0 and newer \|
182	182		\| PapayaWhip \| PapayaWhip \| TColor(\$FFEFD5); \| FPC 3.2.0 and newer \|
183	183		\| PeachPuff \| PeachPuff \| TColor(\$FFDAB9); \| FPC 3.2.0 and newer \|
184	184		\| Peru \| Peru \| TColor(\$CD853F); \| FPC 3.2.0 and newer \|
185	185		\| Pink \| Pink \| TColor(\$FFC0CB); \| FPC 3.2.0 and newer \|
186	186		\| Plum \| Plum \| TColor(\$DDA0DD); \| FPC 3.2.0 and newer \|
187	187		\| PowderBlue \| PowderBlue \| TColor(\$B0E0E6); \| FPC 3.2.0 and newer \|
188	188		\| Purple \| Purple \| TColor(\$800080); \| FPC 3.2.0 and newer \|
189	189		\| RebeccaPurple \| RebeccaPurple \| TColor(\$663399); \| FPC 3.2.0 and newer \|
190	190		\| Red \| Red \| TColor(\$FF0000); \| FPC 3.2.0 and newer \|
191	191		\| RosyBrown \| RosyBrown \| TColor(\$BC8F8F); \| FPC 3.2.0 and newer \|
192	192		\| RoyalBlue \| RoyalBlue \| TColor(\$4169E1); \| FPC 3.2.0 and newer \|
193	193		\| SaddleBrown \| SaddleBrown \| TColor(\$8B4513); \| FPC 3.2.0 and newer \|
194	194		\| Salmon \| Salmon \| TColor(\$FA8072); \| FPC 3.2.0 and newer \|
195	195		\| SandyBrown \| SandyBrown \| TColor(\$F4A460); \| FPC 3.2.0 and newer \|
196	196		\| SeaGreen \| SeaGreen \| TColor(\$2E8B57); \| FPC 3.2.0 and newer \|
197	197		\| SeaShell \| SeaShell \| TColor(\$FFF5EE); \| FPC 3.2.0 and newer \|
198	198		\| Sienna \| Sienna \| TColor(\$A0522D); \| FPC 3.2.0 and newer \|
199	199		\| Silver \| Silver \| TColor(\$C0C0C0); \| FPC 3.2.0 and newer \|
200	200		\| SkyBlue \| SkyBlue \| TColor(\$87CEEB); \| FPC 3.2.0 and newer \|
201	201		\| SlateBlue \| SlateBlue \| TColor(\$6A5ACD); \| FPC 3.2.0 and newer \|
202	202		\| SlateGray \| SlateGray \| TColor(\$708090); \| FPC 3.2.0 and newer \|
203	203		\| SlateGrey \| SlateGrey \| TColor(\$708090); \| FPC 3.2.0 and newer \|
204	204		\| Snow \| Snow \| TColor(\$FFFAFA); \| FPC 3.2.0 and newer \|
205	205		\| SpringGreen \| SpringGreen \| TColor(\$00FF7F); \| FPC 3.2.0 and newer \|
206	206		\| SteelBlue \| SteelBlue \| TColor(\$4682B4); \| FPC 3.2.0 and newer \|
207	207		\| Tan \| Tan \| TColor(\$D2B48C); \| FPC 3.2.0 and newer \|
208	208		\| Teal \| Teal \| TColor(\$008080); \| FPC 3.2.0 and newer \|
209	209		\| Thistle \| Thistle \| TColor(\$D8BFD8); \| FPC 3.2.0 and newer \|
210	210		\| Tomato \| Tomato \| TColor(\$FF6347); \| FPC 3.2.0 and newer \|
211	211		\| Turquoise \| Turquoise \| TColor(\$40E0D0); \| FPC 3.2.0 and newer \|
212	212		\| Violet \| Violet \| TColor(\$EE82EE); \| FPC 3.2.0 and newer \|
213	213		\| Wheat \| Wheat \| TColor(\$F5DEB3); \| FPC 3.2.0 and newer \|
214	214		\| White \| White \| TColor(\$FFFFFF); \| FPC 3.2.0 and newer \|
215	215		\| WhiteSmoke \| WhiteSmoke \| TColor(\$F5F5F5); \| FPC 3.2.0 and newer \|
216	216		\| Yellow \| Yellow \| TColor(\$FFFF00); \| FPC 3.2.0 and newer \|
217	217		\| YellowGreen \| YellowGreen \| TColor(\$9ACD32); \| FPC 3.2.0 and newer \|
218	218
219	219		## System colors
220	220
221	221		### Example: clInfoBk, clInfoText
222	222
223	223		System colors are color constants with a special meaning. Their real value depends on the context and theme. They are not simple colors. For example clInfoBk:
224	224
225	225		``` pascal
226	226		Form1.Canvas.Brush.Color:=clInfoBk; // use the default background brush of a hint window
227	227		Form1.Canvas.FillRect(10,10,50,50);
228	228		```
229	229
230	230		A hint window on MS Windows might have a white background so the above will draw white. On Linux/gtk2 it might be a metallic texture, so the above will draw the texture. If you want to put some text onto this you need a corresponding color like clInfoText, otherwise your text might be unreadable for the user. For example:
231	231
232	232		``` pascal
233	233		Form1.Canvas.Brush.Color:=clInfoBk; // use the default background brush of a hint window
234	234		Form1.Canvas.FillRect(10,10,50,50);
235	235		Form1.Canvas.Font.Color:=clInfoText; // use the default text color of a hint window
236	236		Form1.Canvas.TextOut(10,10,'Hint');
237	237		```
238	238
239	239		The system color clInfoBk can not be used for Pen.Color and not for Font.Color. If you do so the result is undefined and depends on the widgetset and user theme. The same for clInfoText: It can only be used as a Font.Color. Using it as Brush.Color may not work. At the moment all widgetsets allow to use it as Pen.Color too.
240	240
241	241		### Theme changes
242	242
243	243		When the user switches the theme the system colors changes. A clInfoBk might change from white to blue or from a color to a texture. This change will happen when you allocate a new Brush handle. Keep in mind that a simple assignment Brush.Color:=clInfoBk does not allocate a Brush Handle. The Brush Handle is allocated on use. For example:
244	244
245	245		``` pascal
246	246		Form1.Canvas.Brush.Color:=clInfoBk; // this will not create a new brush handle
247	247		Form1.Canvas.FillRect(10,10,50,50); // this will create the brush handle with the currently active theme brush for hint windows
248	248		...
249	249		// if the theme changes in this moment the Brush.Handle is still allocated with the old values
250	250		...
251	251		Form1.Canvas.FillRect(10,10,50,50); // this will paint with the old theme brush
252	252		Form1.Canvas.Brush.Color:=clInfoBk; // assigning the old value will not create a new brush handle
253	253		Form1.Canvas.FillRect(10,10,50,50); // this will paint with the old theme brush
254	254		Form1.Canvas.Brush.Color:=clRed; // assigning a new color, old Handle invalid
255	255		Form1.Canvas.Brush.Color:=clInfoBk; // assigning a new color, old Handle invalid
256	256		Form1.Canvas.FillRect(10,10,50,50); // this will create a new handle and paint with the new theme
257	257		```
258	258
259	259		### Table of system colors
260	260
261	261		The following table lists the system colors and their meaning. Using them outside the scope of the definition is undefined and the result depends on the widgetset and theme. For example clDefault is the normal background brush of the used device context. If you want to paint button elements on your own custom controls use the drawing functions of the unit Themes.
262	262
263		-	~~<table>~~
264		-	~~<thead>~~
265		-	~~<tr>~~
266		-	~~<th><p>Constant</p></th>~~
267		-	~~<th><p>LCL definition</p></th>~~
268		-	~~<th><p>Delphi notes</p></th>~~
269		-	~~<th><p>Supported Widgetsets</p></th>~~
270		-	~~</tr>~~
271		-	~~</thead>~~
272		-	~~<tbody>~~
273		-	~~<tr>~~
274		-	~~<td><p>clNone</p></td>~~
275		-	~~<td><p>Indicates "do not paint". Using it as Control's color is undefined. The control will not get transparent.</p></td>~~
276		-	~~<td><p>-</p></td>~~
277		-	~~<td><p>all</p></td>~~
278		-	~~</tr>~~
279		-	~~<tr>~~
280		-	~~<td><p>clDefault</p></td>~~
281		-	~~<td><p>Using it for Brush will use the normal background brush of the target DC (device context).</p>~~
282		-	~~<ul>~~
283		-	<li>On a Form's canvas a <em>FillRect</em> will paint a rectangular area filled with the normal background of a standard window. This is whatever the widgetset and theme defines. This might be the color gray or a gradient or a picture.</li>
284		-	~~<li>Using clDefault on the Canvas of a TListBox will paint with the normal background, which is normally white on Windows. So in a TListBox clDefault is the same as clWindow.</li>~~
285		-	~~<li>Using it as Pen color will use the default line color for the device context.</li>~~
286		-	~~<li>Using it as Font color will use the normal text color of the device context.</li>~~
287		-	~~</ul></td>~~
288		-	~~<td><p>\| -</p></td>~~
289		-	~~<td><p>all</p></td>~~
290		-	~~</tr>~~
291		-	~~<tr>~~
292		-	~~<td><p>clScrollBar</p></td>~~
293		-	~~<td><p>Scrollbar body</p></td>~~
294		-	~~<td><p>-</p></td>~~
295		-	~~<td><p>all</p></td>~~
296		-	~~</tr>~~
297		-	~~<tr>~~
298		-	~~<td><p>clBackground</p></td>~~
299		-	~~<td><p>Desktop background color</p></td>~~
300		-	~~<td><p>-</p></td>~~
301		-	~~<td><p>all</p></td>~~
302		-	~~</tr>~~
303		-	~~<tr>~~
304		-	~~<td><p>clActiveCaption</p></td>~~
305		-	~~<td><p>Active window titlebar</p></td>~~
306		-	~~<td><p>-</p></td>~~
307		-	~~<td><p>none</p></td>~~
308		-	~~</tr>~~
309		-	~~<tr>~~
310		-	~~<td><p>clInactiveCaption</p></td>~~
311		-	~~<td><p>Inactive window titlebar</p></td>~~
312		-	~~<td><p>-</p></td>~~
313		-	~~<td><p>none</p></td>~~
314		-	~~</tr>~~
315		-	~~<tr>~~
316		-	~~<td><p>clMenu</p></td>~~
317		-	~~<td><p>Regular menu item background color</p></td>~~
318		-	~~<td><p>-</p></td>~~
319		-	~~<td><p>none</p></td>~~
320		-	~~</tr>~~
321		-	~~<tr>~~
322		-	~~<td><p>clWindow</p></td>~~
323		-	~~<td><p>The normal background brush of unselected text. Defined for controls like TEdit, TComboBox, TMemo, TListBox, TTreeView.</p></td>~~
324		-	~~<td><p>-</p></td>~~
325		-	~~<td><p>none</p></td>~~
326		-	~~</tr>~~
327		-	~~<tr>~~
328		-	~~<td><p>clWindowFrame</p></td>~~
329		-	~~<td><p>Color of frame around the window</p></td>~~
330		-	~~<td><p>-</p></td>~~
331		-	~~<td><p>none</p></td>~~
332		-	~~</tr>~~
333		-	~~<tr>~~
334		-	~~<td><p>clMenuText</p></td>~~
335		-	~~<td><p>The font color to use together with clMenu</p></td>~~
336		-	~~<td><p>-</p></td>~~
337		-	~~<td><p>none</p></td>~~
338		-	~~</tr>~~
339		-	~~<tr>~~
340		-	~~<td><p>clWindowText</p></td>~~
341		-	~~<td><p>Font color to use together with clWindow</p></td>~~
342		-	~~<td><p>-</p></td>~~
343		-	~~<td><p>none</p></td>~~
344		-	~~</tr>~~
345		-	~~<tr>~~
346		-	~~<td><p>clCaptionText</p></td>~~
347		-	~~<td><p>Active window titlebar text color</p></td>~~
348		-	~~<td><p>-</p></td>~~
349		-	~~<td><p>none</p></td>~~
350		-	~~</tr>~~
351		-	~~<tr>~~
352		-	~~<td><p>clActiveBorder</p></td>~~
353		-	~~<td><p>?</p></td>~~
354		-	~~<td><p>-</p></td>~~
355		-	~~<td><p>none</p></td>~~
356		-	~~</tr>~~
357		-	~~<tr>~~
358		-	~~<td><p>clInactiveBorder</p></td>~~
359		-	~~<td><p>?</p></td>~~
360		-	~~<td><p>-</p></td>~~
361		-	~~<td><p>none</p></td>~~
362		-	~~</tr>~~
363		-	~~<tr>~~
364		-	~~<td><p>clAppWorkspace</p></td>~~
365		-	~~<td><p>MDIMain form background</p></td>~~
366		-	~~<td><p>-</p></td>~~
367		-	~~<td><p>none</p></td>~~
368		-	~~</tr>~~
369		-	~~<tr>~~
370		-	~~<td><p>clHighlight</p></td>~~
371		-	~~<td><p>The brush color of selected element</p></td>~~
372		-	~~<td><p>-</p></td>~~
373		-	~~<td><p>none</p></td>~~
374		-	~~</tr>~~
375		-	~~<tr>~~
376		-	~~<td><p>clHighlightText</p></td>~~
377		-	~~<td><p>Font color of selected text (to use together with clHighligh).</p></td>~~
378		-	~~<td><p>-</p></td>~~
379		-	~~<td><p>none</p></td>~~
380		-	~~</tr>~~
381		-	~~<tr>~~
382		-	~~<td><p>clBtnFace</p></td>~~
383		-	~~<td><p>Button background</p></td>~~
384		-	~~<td><p>-</p></td>~~
385		-	~~<td><p>none</p></td>~~
386		-	~~</tr>~~
387		-	~~<tr>~~
388		-	~~<td><p>clBtnShadow</p></td>~~
389		-	~~<td><p>Button shadow color (bottom right) used to achieve 3D effect</p></td>~~
390		-	~~<td><p>-</p></td>~~
391		-	~~<td><p>none</p></td>~~
392		-	~~</tr>~~
393		-	~~<tr>~~
394		-	~~<td><p>clGrayText</p></td>~~
395		-	~~<td><p>The font color of disabled element</p></td>~~
396		-	~~<td><p>-</p></td>~~
397		-	~~<td><p>none</p></td>~~
398		-	~~</tr>~~
399		-	~~<tr>~~
400		-	~~<td><p>clBtnText</p></td>~~
401		-	~~<td><p>Button font color to use together with clBtnFace</p></td>~~
402		-	~~<td><p>-</p></td>~~
403		-	~~<td><p>none</p></td>~~
404		-	~~</tr>~~
405		-	~~<tr>~~
406		-	~~<td><p>clInactiveCaptionText</p></td>~~
407		-	~~<td><p>Inactive window titlebar text color</p></td>~~
408		-	~~<td><p>-</p></td>~~
409		-	~~<td><p>none</p></td>~~
410		-	~~</tr>~~
411		-	~~<tr>~~
412		-	~~<td><p>clBtnHighlight</p></td>~~
413		-	~~<td><p>Button highlight color (top left) used to achieve 3D effect</p></td>~~
414		-	~~<td><p>-</p></td>~~
415		-	~~<td><p>none</p></td>~~
416		-	~~</tr>~~
417		-	~~<tr>~~
418		-	~~<td><p>cl3DDkShadow</p></td>~~
419		-	~~<td><p>?</p></td>~~
420		-	~~<td><p>-</p></td>~~
421		-	~~<td><p>none</p></td>~~
422		-	~~</tr>~~
423		-	~~<tr>~~
424		-	~~<td><p>cl3DLight</p></td>~~
425		-	~~<td><p>?</p></td>~~
426		-	~~<td><p>-</p></td>~~
427		-	~~<td><p>none</p></td>~~
428		-	~~</tr>~~
429		-	~~<tr>~~
430		-	~~<td><p>clInfoText</p></td>~~
431		-	~~<td><p>Font color for hints. Use together with clInfoBk</p></td>~~
432		-	~~<td><p>-</p></td>~~
433		-	~~<td><p>all</p></td>~~
434		-	~~</tr>~~
435		-	~~<tr>~~
436		-	~~<td><p>clInfoBk</p></td>~~
437		-	~~<td><p>Brush color for hints. Use together with clInfoText</p></td>~~
438		-	~~<td><p>-</p></td>~~
439		-	~~<td><p>all</p></td>~~
440		-	~~</tr>~~
441		-	~~<tr>~~
442		-	~~<td><p>clHotLight</p></td>~~
443		-	~~<td><p>?</p></td>~~
444		-	~~<td><p>-</p></td>~~
445		-	~~<td><p>none</p></td>~~
446		-	~~</tr>~~
447		-	~~<tr>~~
448		-	~~<td><p>clGradientActiveCaption</p></td>~~
449		-	~~<td><p>The second color used to make gradient of active window titlebar</p></td>~~
450		-	~~<td><p>-</p></td>~~
451		-	~~<td><p>none</p></td>~~
452		-	~~</tr>~~
453		-	~~<tr>~~
454		-	~~<td><p>clGradientInactiveCaption</p></td>~~
455		-	~~<td><p>The second color used to make gradient for inactive window titlebar</p></td>~~
456		-	~~<td><p>-</p></td>~~
457		-	~~<td><p>none</p></td>~~
458		-	~~</tr>~~
459		-	~~<tr>~~
460		-	~~<td><p>clMenuHighlight</p></td>~~
461		-	~~<td><p>The background color of selected menu item</p></td>~~
462		-	~~<td><p>-</p></td>~~
463		-	~~<td><p>none</p></td>~~
464		-	~~</tr>~~
465		-	~~<tr>~~
466		-	~~<td><p>clMenuBar</p></td>~~
467		-	~~<td><p>The Backround color of menu bar</p></td>~~
468		-	~~<td><p>-</p></td>~~
469		-	~~<td><p>none</p></td>~~
470		-	~~</tr>~~
471		-	~~<tr>~~
472		-	~~<td><p>clForm</p></td>~~
473		-	~~<td><p>?</p></td>~~
474		-	~~<td><p>-</p></td>~~
475		-	~~<td><p>none</p></td>~~
476		-	~~</tr>~~
477		-	~~<tr>~~
478		-	~~<td><p>clColorDesktop</p></td>~~
479		-	~~<td><p>?</p></td>~~
480		-	~~<td><p>-</p></td>~~
481		-	~~<td><p>none</p></td>~~
482		-	~~</tr>~~
483		-	~~<tr>~~
484		-	~~<td><p>cl3DFace</p></td>~~
485		-	~~<td><p>?</p></td>~~
486		-	~~<td><p>-</p></td>~~
487		-	~~<td><p>none</p></td>~~
488		-	~~</tr>~~
489		-	~~<tr>~~
490		-	~~<td><p>cl3DShadow</p></td>~~
491		-	~~<td><p>?</p></td>~~
492		-	~~<td><p>-</p></td>~~
493		-	~~<td><p>none</p></td>~~
494		-	~~</tr>~~
495		-	~~<tr>~~
496		-	~~<td><p>cl3DHiLight</p></td>~~
497		-	~~<td><p>?</p></td>~~
498		-	~~<td><p>-</p></td>~~
499		-	~~<td><p>none</p></td>~~
500		-	~~</tr>~~
501		-	~~<tr>~~
502		-	~~<td><p>clBtnHiLight</p></td>~~
503		-	~~<td><p>Same as clBtnHighlight</p></td>~~
504		-	~~<td><p>-</p></td>~~
505		-	~~<td><p>none</p></td>~~
506		-	~~</tr>~~
507		-	~~</tbody>~~
508		-	~~</table>~~
	263	+	Constant
	264	+
	265	+	LCL definition
	266	+
	267	+	Delphi notes
	268	+
	269	+	Supported Widgetsets
	270	+
	271	+	clNone
	272	+
	273	+	Indicates "do not paint". Using it as Control's color is undefined. The control will not get transparent.
	274	+
	275	+	\-
	276	+
	277	+	all
	278	+
	279	+	clDefault
	280	+
	281	+	Using it for Brush will use the normal background brush of the target DC (device context).
	282	+
	283	+	- On a Form's canvas a FillRect will paint a rectangular area filled with the normal background of a standard window. This is whatever the widgetset and theme defines. This might be the color gray or a gradient or a picture.
	284	+	- Using clDefault on the Canvas of a TListBox will paint with the normal background, which is normally white on Windows. So in a TListBox clDefault is the same as clWindow.
	285	+	- Using it as Pen color will use the default line color for the device context.
	286	+	- Using it as Font color will use the normal text color of the device context.
	287	+
	288	+	\\| -
	289	+
	290	+	all
	291	+
	292	+	clScrollBar
	293	+
	294	+	Scrollbar body
	295	+
	296	+	\-
	297	+
	298	+	all
	299	+
	300	+	clBackground
	301	+
	302	+	Desktop background color
	303	+
	304	+	\-
	305	+
	306	+	all
	307	+
	308	+	clActiveCaption
	309	+
	310	+	Active window titlebar
	311	+
	312	+	\-
	313	+
	314	+	none
	315	+
	316	+	clInactiveCaption
	317	+
	318	+	Inactive window titlebar
	319	+
	320	+	\-
	321	+
	322	+	none
	323	+
	324	+	clMenu
	325	+
	326	+	Regular menu item background color
	327	+
	328	+	\-
	329	+
	330	+	none
	331	+
	332	+	clWindow
	333	+
	334	+	The normal background brush of unselected text. Defined for controls like TEdit, TComboBox, TMemo, TListBox, TTreeView.
	335	+
	336	+	\-
	337	+
	338	+	none
	339	+
	340	+	clWindowFrame
	341	+
	342	+	Color of frame around the window
	343	+
	344	+	\-
	345	+
	346	+	none
	347	+
	348	+	clMenuText
	349	+
	350	+	The font color to use together with clMenu
	351	+
	352	+	\-
	353	+
	354	+	none
	355	+
	356	+	clWindowText
	357	+
	358	+	Font color to use together with clWindow
	359	+
	360	+	\-
	361	+
	362	+	none
	363	+
	364	+	clCaptionText
	365	+
	366	+	Active window titlebar text color
	367	+
	368	+	\-
	369	+
	370	+	none
	371	+
	372	+	clActiveBorder
	373	+
	374	+	?
	375	+
	376	+	\-
	377	+
	378	+	none
	379	+
	380	+	clInactiveBorder
	381	+
	382	+	?
	383	+
	384	+	\-
	385	+
	386	+	none
	387	+
	388	+	clAppWorkspace
	389	+
	390	+	MDIMain form background
	391	+
	392	+	\-
	393	+
	394	+	none
	395	+
	396	+	clHighlight
	397	+
	398	+	The brush color of selected element
	399	+
	400	+	\-
	401	+
	402	+	none
	403	+
	404	+	clHighlightText
	405	+
	406	+	Font color of selected text (to use together with clHighligh).
	407	+
	408	+	\-
	409	+
	410	+	none
	411	+
	412	+	clBtnFace
	413	+
	414	+	Button background
	415	+
	416	+	\-
	417	+
	418	+	none
	419	+
	420	+	clBtnShadow
	421	+
	422	+	Button shadow color (bottom right) used to achieve 3D effect
	423	+
	424	+	\-
	425	+
	426	+	none
	427	+
	428	+	clGrayText
	429	+
	430	+	The font color of disabled element
	431	+
	432	+	\-
	433	+
	434	+	none
	435	+
	436	+	clBtnText
	437	+
	438	+	Button font color to use together with clBtnFace
	439	+
	440	+	\-
	441	+
	442	+	none
	443	+
	444	+	clInactiveCaptionText
	445	+
	446	+	Inactive window titlebar text color
	447	+
	448	+	\-
	449	+
	450	+	none
	451	+
	452	+	clBtnHighlight
	453	+
	454	+	Button highlight color (top left) used to achieve 3D effect
	455	+
	456	+	\-
	457	+
	458	+	none
	459	+
	460	+	cl3DDkShadow
	461	+
	462	+	?
	463	+
	464	+	\-
	465	+
	466	+	none
	467	+
	468	+	cl3DLight
	469	+
	470	+	?
	471	+
	472	+	\-
	473	+
	474	+	none
	475	+
	476	+	clInfoText
	477	+
	478	+	Font color for hints. Use together with clInfoBk
	479	+
	480	+	\-
	481	+
	482	+	all
	483	+
	484	+	clInfoBk
	485	+
	486	+	Brush color for hints. Use together with clInfoText
	487	+
	488	+	\-
	489	+
	490	+	all
	491	+
	492	+	clHotLight
	493	+
	494	+	?
	495	+
	496	+	\-
	497	+
	498	+	none
	499	+
	500	+	clGradientActiveCaption
	501	+
	502	+	The second color used to make gradient of active window titlebar
	503	+
	504	+	\-
	505	+
	506	+	none
	507	+
	508	+	clGradientInactiveCaption
	509	+
	510	+	The second color used to make gradient for inactive window titlebar
	511	+
	512	+	\-
	513	+
	514	+	none
	515	+
	516	+	clMenuHighlight
	517	+
	518	+	The background color of selected menu item
	519	+
	520	+	\-
	521	+
	522	+	none
	523	+
	524	+	clMenuBar
	525	+
	526	+	The Backround color of menu bar
	527	+
	528	+	\-
	529	+
	530	+	none
	531	+
	532	+	clForm
	533	+
	534	+	?
	535	+
	536	+	\-
	537	+
	538	+	none
	539	+
	540	+	clColorDesktop
	541	+
	542	+	?
	543	+
	544	+	\-
	545	+
	546	+	none
	547	+
	548	+	cl3DFace
	549	+
	550	+	?
	551	+
	552	+	\-
	553	+
	554	+	none
	555	+
	556	+	cl3DShadow
	557	+
	558	+	?
	559	+
	560	+	\-
	561	+
	562	+	none
	563	+
	564	+	cl3DHiLight
	565	+
	566	+	?
	567	+
	568	+	\-
	569	+
	570	+	none
	571	+
	572	+	clBtnHiLight
	573	+
	574	+	Same as clBtnHighlight
	575	+
	576	+	\-
	577	+
	578	+	none
509	579
510	580		### Finding the rgb values of a system color
511	581
512	582		Use the function `ColorToRGB` (in unit `Graphics` to determine the rgb components of a system color. This functions detects whether a color is a system color and, if this is true, looks up the system color in the themes color. The returned [[Longint]] can be understood as a normal color:
513	583
514	584		``` pascal
515	585		// This example has a TColorBox on a form and uses this OnChange handler for the TColorbox:
516	586		procedure TForm1.ColorBox1Change(Sender: TObject);
517	587		var
518	588		c: TColor;
519	589		begin
520	590		c := ColorToRGB(ColorBox1.Selected);
521	591		Caption := Format('R%d G%d B%d', [Red(c), Green(c), Blue(c)]);
522	592		end;
523	593		```
524	594
525	595		## Drawing theme elements on your custom controls
526	596
527	597		The unit Themes provides functions to draw single elements of standard controls. For example to draw an expand sign like a [[TTreeView]] use the following code:
528	598
529	599		``` pascal
530	600		uses Themes;
531	601
532	602		...
533	603
534	604		procedure TYourCustomControl.Paint;
535	605		const
536	606		PlusMinusDetail: array[Boolean {Hot}, Boolean {Expanded}] of TThemedTreeview =
537	607		(
538	608		(ttGlyphClosed, ttGlyphOpened),
539	609		(ttHotGlyphClosed, ttHotGlyphOpened)
540	610		);
541	611		var
542	612		Details: TThemedElementDetails;
543	613		R: TRect;
544	614		Collapse: boolean;
545	615		begin
546	616		...
547	617		//draw a themed expand sign.
548	618		Details := ThemeServices.GetElementDetails(PlusMinusDetail[False, Collapse]);
549	619		R := Rect(ALeft, ATop, ARight + 1, ABottom + 1);
550	620		ThemeServices.DrawElement(Canvas.Handle, Details, R, nil);
551	621		...
552	622		end;
553	623		```
554	624
555	625		---
556	626		From the Free Pascal wiki, page "Colors", as it stood on 2021-04-18 after a change by Marcov, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).

Back to history