Sign in Join
Wiki copytemporary

Colors/es: what changed

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

OldNewLine
1-## Cambios de Tema
1+# Descripción
22
3-Cuando el usuario cambia el tema, los colores de sistema también cambian. Un **clInfoBk** puede cambiar de blanco a azul de un color a una textura. Este cambio tendrá lugar cuando habilites un nuevo manejador de brocha (brush). Ten en cuenta que una simple asignación como Brush.Color:=clInfoBk no habilita un manejador de brocha. El manejador de brocha se habilita en uso. Por ejemplo:
3+En el LCL TColor es el tipo estandar para color. Es compatible con TColor de Delphi. TColor puede representar cualquiera de los dos *either', tanto' un valor RGB (3x8bit), o*or'' un color de sistema **system** tal como **clDefault**. El LCL puede trabajar además con el fpImage system que utiliza el tipo TFPColor (el cual es RGBA (4x16bit), no RGB (3x8bit) como TColor).
4+
5+En referencia a este tema de los colores nos puede resultar de utilidad este pequeño programa [Lazarus Color Picker (lcolorpicker)](http://lcolorpicker.sourceforge.net/)
6+
7+RGB = Red (rojo) Green (verde) Blue (azul).
8+
9+## Conversiones entre valores TColor y RGB
10+
11+La unit **Graphics** aporta las siguientes funciones:
12+
13+``` pascal
14+function Blue(rgb: TColor): BYTE; // does not work on system color
15+function Green(rgb: TColor): BYTE; // does not work on system color
16+function Red(rgb: TColor): BYTE; // does not work on system color
17+function RGBToColor(R, G, B: Byte): TColor;
18+procedure RedGreenBlue(rgb: TColor; out Red, Green, Blue: Byte); // does not work on system color
19+function FPColorToTColor(const FPColor: TFPColor): TColor;
20+function TColorToFPColor(const c: TColor): TFPColor; // does not work on system color
21+function IsSysColor(AColor: TColorRef): Boolean;
422```
23+
24+## Convertir TColor hacia/desde una cadena
25+
26+Funciones para convertir cadenas tales como "25500" o "\$AA0088" o "clNavy" a TColor:
27+
28+- StringToColor
29+- StringToColorDef
30+
31+Para convertir TColor a una cadena agradable:
32+
33+- ColorToString
34+
35+# Tabla de colores estandar
36+
37+Se proveen 20 constantes de colores predefinidos, los cuales son compatibles con Delphi:
38+
39+| Constante de Color | Significado | Valor hexadecimal para usar con TColor | Ejemplo |
40+|----|----|----|----|
41+| clBlack | Black | TColor(\$000000); | |
42+| clMaroon | Maroon | TColor(\$000080); | |
43+| clGreen | Green | TColor(\$008000); | |
44+| clOlive | Olive Green | TColor(\$008080); | |
45+| clNavy | Navy Blue | TColor(\$800000); | |
46+| clPurple | Purple | TColor(\$800080); | |
47+| clTeal | Teal | TColor(\$808000); | |
48+| clGray | Grey | TColor(\$808080); | |
49+| clSilver | Silver | TColor(\$C0C0C0); | |
50+| clRed | Red | TColor(\$0000FF); | |
51+| clLime | Lime Green | TColor(\$00FF00); | |
52+| clYellow | Yellow | TColor(\$00FFFF); | |
53+| clBlue | Blue | TColor(\$FF0000); | |
54+| clFuchsia | Fuchsia | TColor(\$FF00FF); | |
55+| clAqua | Aqua | TColor(\$FFFF00); | |
56+| clLtGray | Light Grey | TColor(\$C0C0C0); | clSilver alias |
57+| clDkGray | Dark Grey | TColor(\$808080); | clGray alias |
58+| clWhite | White | TColor(\$FFFFFF); | |
59+| clCream | Cream | TColor(\$F0FBFF); | Lazarus 1.2 and newer |
60+| clMedGray | Medium Grey | TColor(\$A4A0A0); | Lazarus 1.2 and newer |
61+| clMoneyGreen | Mint Green | TColor(\$C0DCC0); | Lazarus 1.2 and newer |
62+| clSkyBlue | Sky Blue | TColor(\$F0CAA6); | Lazarus 1.2 and newer |
63+
64+# System colors
65+
66+## Ejemplo: clInfoBk, clInfoText
67+
68+Los colores de sistema son colores constantes con un significado especial. Su valor real depende del contexto y tema. No son colores simples.
69+
70+Por ejemplo **clInfoBk**:
71+
72+``` pascal
73+Form1.Canvas.Brush.Color:=clInfoBk; // Utiliza la brocha por defecto del fondo de una ventana de sugerencia.
74+Form1.Canvas.FillRect(10,10,50,50);
75+```
76+
77+Una ventana de sugerencia en MS Windows debería tener un fondo blanco por lo que lo siguiente se dibujará en blanco. En Linux/GTK2 puede que tenga una textura metálica, por lo que lo siguiente dibujará la textura. Si necesitas poner algo de texto dentro entonces necesitas un color adecuado como **clInfoText**, de otra forma el texto puede resultar ilegible por parte del ususario. Por ejemplo:
78+
79+``` pascal
80+Form1.Canvas.Brush.Color:=clInfoBk; // Utiliza el color de brocha para fondo de una ventana de sugerencia.
81+Form1.Canvas.FillRect(10,10,50,50);
82+Form1.Canvas.Font.Color:=clInfoText; // Utiliza el color de texto por defecto de una ventana de sugerencia.
83+Form1.Canvas.TextOut(10,10,'Hint');
84+```
85+
86+El color de sistema **clInfoBk** no se puede utilizar para **Pen.Color** ni para Font.Color. Si lo utilizas el resultado no está definido y depende tanto del widgetset como del tema del usuario. Lo mismo para **clInfoText**: Solamente puede utilizarse como Font.Color. Utilizarlo para **Brush.Color** puede que no funcione. Hasta el momento, todos los widgetsets permiten utilizarlo con **Pen.Color** también.
87+
88+Por ejemplo un listado de colores y su aspecto visible utilizado en fuentes:
89+
90+<img src="ListadoColoresFuentes.png" title="ListadoColoresFuentes.png" width="200" />
91+
92+## Cambios de Tema
93+
94+Cuando el usuario cambia el tema, los colores de sistema también cambian. Un **clInfoBk** puede cambiar de blanco a azul de un color a una textura. Este cambio tendrá lugar cuando habilites un nuevo manejador de brocha (brush). Ten en cuenta que una simple asignación como Brush.Color:=clInfoBk no habilita un manejador de brocha. El manejador de brocha se habilita en uso. Por ejemplo:
95+
96+``` pascal
597Form1.Canvas.Brush.Color:=clInfoBk; // Esto no creará un nuevo manejador de brocha.
6- Form1.Canvas.FillRect(10,10,50,50); // Esto creará el manejador de brocha con la actual brocha del tema activo para ventanas de sugerencia.
7- ...
8- // Si el tema cambia en este momento el Brush.Handle está todavía establecido con los valores antiguos.
9- ...
10- Form1.Canvas.FillRect(10,10,50,50); // Esto pintará con la brocha del tema anterior.
11- Form1.Canvas.Brush.Color:=clInfoBk; // Asignando el valor antiguo no creará un nuevo manejador de brocha.
12- Form1.Canvas.FillRect(10,10,50,50); // Esto pintará con la brocha del tema anterior.
13- Form1.Canvas.Brush.Color:=clRed; // Asignando un color nuevo, invalida manejador (handle) anterior.
14- Form1.Canvas.Brush.Color:=clInfoBk; // Asignando un color nuevo, invalida manejador (handle) anterior.
15- Form1.Canvas.FillRect(10,10,50,50); // Esto creará un nuevo manejador y pintará con el nuevo tema.
98+Form1.Canvas.FillRect(10,10,50,50); // Esto creará el manejador de brocha con la actual brocha del tema activo para ventanas de sugerencia.
99+...
100+// Si el tema cambia en este momento el Brush.Handle está todavía establecido con los valores antiguos.
101+...
102+Form1.Canvas.FillRect(10,10,50,50); // Esto pintará con la brocha del tema anterior.
103+Form1.Canvas.Brush.Color:=clInfoBk; // Asignando el valor antiguo no creará un nuevo manejador de brocha.
104+Form1.Canvas.FillRect(10,10,50,50); // Esto pintará con la brocha del tema anterior.
105+Form1.Canvas.Brush.Color:=clRed; // Asignando un color nuevo, invalida manejador (handle) anterior.
106+Form1.Canvas.Brush.Color:=clInfoBk; // Asignando un color nuevo, invalida manejador (handle) anterior.
107+Form1.Canvas.FillRect(10,10,50,50); // Esto creará un nuevo manejador y pintará con el nuevo tema.
16108```
17109
18110## Tabla de colores del sistema
19111
20-La siguente tabla lista los colores del sistema y su significado. Utilizarlos fuera de lo especificado en la definición no estaría definido y el resultado obtenido depende del widgetset y del tema. Por ejemplo **clDefault** es el color de fondo para la brocha (brush) en el contexto de dispositivo utilizado. Si lo que necesitas es pintar elementos tipo button en tus propios controles personalizados entonces utiliza las funciones de la unidad **Themes**.
112+La siguente tabla lista los colores del sistema y su significado. Utilizarlos fuera de lo especificado en la definición no estaría definido y el resultado obtenido depende del widgetset y del tema. Por ejemplo **clDefault** es el color de fondo para la brocha (brush) en el contexto de dispositivo utilizado. Si lo que necesitas es pintar elementos tipo button en tus propios controles personalizados entonces utiliza las funciones de la unidad **Themes**.
21113
22-Constant | Definición LCL | Notas Delphi | Widgetsets Soportados
23----|---|---|---
24-clNone | Indicates "do not paint". Utilizarlos como color de Control no esta definido. El control no será transparente. | - | todos
25-clDefault | Using it for Brush will use the normal background brush of the target DC (device context).
114+**Constant**
26115
27- * 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.
28- * 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.
29- * Using it as Pen color will use the default line color for the device context.
30- * Using it as Font color will use the normal text color of the device context.
116+**Definición LCL**
31117
32-| - | all
33-clScrollBar | Scrollbar body | - | all
34-clBackground | ? | - | all
35-clActiveCaption | Active window titlebar | - | none
36-clInactiveCaption | Inactive window titlebar | - | none
37-clMenu | Regular menu item background color | - | none
38-clWindow | The normal background brush of unselected text. Defined for controls like TEdit, TComboBox, TMemo, TListBox, TTreeView. | - | none
39-clWindowFrame | Color of frame around the window | - | none
40-clMenuText | The font color to use together with clMenu | - | none
41-clWindowText | Font color to use together with clWindow | - | none
42-clCaptionText | Active window titlebar text color | - | none
43-clActiveBorder | ? | - | none
44-clInactiveBorder | ? | - | none
45-clAppWorkspace | MDIMain form background | - | none
46-clHighlight | The brush color of selected element | - | none
47-clHighlightText | Font color of selected text (to use together with clHighligh). | - | none
48-clBtnFace | Button background | - | none
49-clBtnShadow | Button shadow color (bottom right) used to achieve 3D effect | - | none
50-clGrayText | The font color of disabled element | - | none
51-clBtnText | Button font color to use together with clBtnFace | - | none
52-clInactiveCaptionText | Inactive window titlebar text color | - | none
53-clBtnHighlight | Button highlight color (top left) used to achieve 3D effect | - | none
54-cl3DDkShadow | ? | - | none
55-cl3DLight | ? | - | none
56-clInfoText | Font color for hints. Use together with clInfoBk | - | all
57-clInfoBk | Brush color for hints. Use together with clInfoText | - | all
58-clHotLight | ? | - | none
59-clGradientActiveCaption | The second color used to make gradient of active window titlebar | - | none
60-clGradientInactiveCaption | The second color used to make gradient for inactive window titlebar | - | none
61-clMenuHighlight | The background color of selected menu item | - | none
62-clMenuBar | The Backround color of menu bar | - | none
63-clForm | ? | - | none
64-clColorDesktop | ? | - | none
65-cl3DFace | ? | - | none
66-cl3DShadow | ? | - | none
67-cl3DHiLight | ? | - | none
68-clBtnHiLight | Same as clBtnHighlight | - | none
69-
118+**Notas Delphi**
119+
120+**Widgetsets Soportados**
121+
122+clNone
123+
124+Indicates "do not paint". Utilizarlos como color de Control no esta definido. El control no será transparente.
125+
126+\-
127+
128+todos
129+
130+clDefault
131+
132+Using it for Brush will use the normal background brush of the target DC (device context).
133+
134+- 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.
135+- 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.
136+- Using it as Pen color will use the default line color for the device context.
137+- Using it as Font color will use the normal text color of the device context.
138+
139+\| -
140+
141+all
142+
143+clScrollBar
144+
145+Scrollbar body
146+
147+\-
148+
149+all
150+
151+clBackground
152+
153+?
154+
155+\-
156+
157+all
158+
159+clActiveCaption
160+
161+Active window titlebar
162+
163+\-
164+
165+none
166+
167+clInactiveCaption
168+
169+Inactive window titlebar
170+
171+\-
172+
173+none
174+
175+clMenu
176+
177+Regular menu item background color
178+
179+\-
180+
181+none
182+
183+clWindow
184+
185+The normal background brush of unselected text. Defined for controls like TEdit, TComboBox, TMemo, TListBox, TTreeView.
186+
187+\-
188+
189+none
190+
191+clWindowFrame
192+
193+Color of frame around the window
194+
195+\-
196+
197+none
198+
199+clMenuText
200+
201+The font color to use together with clMenu
202+
203+\-
204+
205+none
206+
207+clWindowText
208+
209+Font color to use together with clWindow
210+
211+\-
212+
213+none
214+
215+clCaptionText
216+
217+Active window titlebar text color
218+
219+\-
220+
221+none
222+
223+clActiveBorder
224+
225+?
226+
227+\-
228+
229+none
230+
231+clInactiveBorder
232+
233+?
234+
235+\-
236+
237+none
238+
239+clAppWorkspace
240+
241+MDIMain form background
242+
243+\-
244+
245+none
246+
247+clHighlight
248+
249+The brush color of selected element
250+
251+\-
252+
253+none
254+
255+clHighlightText
256+
257+Font color of selected text (to use together with clHighligh).
258+
259+\-
260+
261+none
262+
263+clBtnFace
264+
265+Button background
266+
267+\-
268+
269+none
270+
271+clBtnShadow
272+
273+Button shadow color (bottom right) used to achieve 3D effect
274+
275+\-
276+
277+none
278+
279+clGrayText
280+
281+The font color of disabled element
282+
283+\-
284+
285+none
286+
287+clBtnText
288+
289+Button font color to use together with clBtnFace
290+
291+\-
292+
293+none
294+
295+clInactiveCaptionText
296+
297+Inactive window titlebar text color
298+
299+\-
300+
301+none
302+
303+clBtnHighlight
304+
305+Button highlight color (top left) used to achieve 3D effect
306+
307+\-
308+
309+none
310+
311+cl3DDkShadow
312+
313+?
314+
315+\-
316+
317+none
318+
319+cl3DLight
320+
321+?
322+
323+\-
324+
325+none
326+
327+clInfoText
328+
329+Font color for hints. Use together with clInfoBk
330+
331+\-
332+
333+all
334+
335+clInfoBk
336+
337+Brush color for hints. Use together with clInfoText
338+
339+\-
340+
341+all
342+
343+clHotLight
344+
345+?
346+
347+\-
348+
349+none
350+
351+clGradientActiveCaption
352+
353+The second color used to make gradient of active window titlebar
354+
355+\-
356+
357+none
358+
359+clGradientInactiveCaption
360+
361+The second color used to make gradient for inactive window titlebar
362+
363+\-
364+
365+none
366+
367+clMenuHighlight
368+
369+The background color of selected menu item
370+
371+\-
372+
373+none
374+
375+clMenuBar
376+
377+The Backround color of menu bar
378+
379+\-
380+
381+none
382+
383+clForm
384+
385+?
386+
387+\-
388+
389+none
390+
391+clColorDesktop
392+
393+?
394+
395+\-
396+
397+none
398+
399+cl3DFace
400+
401+?
402+
403+\-
404+
405+none
406+
407+cl3DShadow
408+
409+?
410+
411+\-
412+
413+none
414+
415+cl3DHiLight
416+
417+?
418+
419+\-
420+
421+none
422+
423+clBtnHiLight
424+
425+Same as clBtnHighlight
426+
427+\-
428+
429+none
430+
70431# Dibujando theme elements en tus controles personalizados
71432
72-La unidad **Themes** aporta funciones para dibujar elementos individuales de controles estandar. Por ejemplo, para dibujar un signo de expansión como un TTreeView utiliza el siguiente código:
73-```
433+La unidad **Themes** aporta funciones para dibujar elementos individuales de controles estandar. Por ejemplo, para dibujar un signo de expansión como un TTreeView utiliza el siguiente código:
434+
435+``` pascal
74436uses Themes;
75-
76- ...
77-
78- procedure TYourCustomControl.Paint;
79- const
80- PlusMinusDetail: array[Boolean {Hot}, Boolean {Expanded}] of TThemedTreeview =
81- (
82- (ttGlyphClosed, ttGlyphOpened),
83- (ttHotGlyphClosed, ttHotGlyphOpened)
84- );
85- var
86- Details: TThemedElementDetails;
87- R: TRect;
88- Collapse: boolean;
89- begin
90- ...
91- //draw a themed expand sign.
92- Details := ThemeServices.GetElementDetails(PlusMinusDetail[False, Collapse]);
93- R := Rect(ALeft, ATop, ARight + 1, ABottom + 1);
94- ThemeServices.DrawElement(Canvas.Handle, Details, R, nil);
95- ...
96- end;
437+
438+...
439+
440+procedure TYourCustomControl.Paint;
441+const
442+ PlusMinusDetail: array[Boolean {Hot}, Boolean {Expanded}] of TThemedTreeview =
443+ (
444+ (ttGlyphClosed, ttGlyphOpened),
445+ (ttHotGlyphClosed, ttHotGlyphOpened)
446+ );
447+var
448+ Details: TThemedElementDetails;
449+ R: TRect;
450+ Collapse: boolean;
451+begin
452+ ...
453+ //draw a themed expand sign.
454+ Details := ThemeServices.GetElementDetails(PlusMinusDetail[False, Collapse]);
455+ R := Rect(ALeft, ATop, ARight + 1, ABottom + 1);
456+ ThemeServices.DrawElement(Canvas.Handle, Details, R, nil);
457+ ...
458+end;
97459```
98460
99461# Conversiones de color hacia/desde html
100462
101- * [[Convert color to/from HTML/es|Convertir color desde/hacia HTML]]
463+- [Convertir color desde/hacia HTML](http://wiki.lazarus.freepascal.org/Convert_color_to/from_HTML/es)
102464
103- * [Discusión sobre convertir color *desde/hacia HTML](<http://wiki.lazarus.freepascal.org/Talk:Convert_color_to/from_HTML>)
465+- [Discusión sobre convertir color *desde/hacia HTML](http://wiki.lazarus.freepascal.org/Talk:Convert_color_to/from_HTML)
104466
105467---
106-*From the Free Pascal wiki, page "Colors/es", as the Internet Archive kept it on 2024-09-20. 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).*
468+*From the Free Pascal wiki, page "Colors/es", as it stood on 2020-02-11 after a change by Trev, 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