Sign in Join
Wiki copytemporary

Colors/es: what changed

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

OldNewLine
1-# Descripción
2-
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;
22-```
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-<figure>
91-<img src="ListadoColoresFuentes.png" title="ListadoColoresFuentes.png" width="200" />
92-<figcaption>ListadoColoresFuentes.png</figcaption>
93-</figure>
94-
951## Cambios de Tema
962
97-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:
98-
99-``` pascal
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:
4+```
1005Form1.Canvas.Brush.Color:=clInfoBk; // Esto no creará un nuevo manejador de brocha.
101-Form1.Canvas.FillRect(10,10,50,50); // Esto creará el manejador de brocha con la actual brocha del tema activo para ventanas de sugerencia.
102-...
103-// Si el tema cambia en este momento el Brush.Handle está todavía establecido con los valores antiguos.
104-...
105-Form1.Canvas.FillRect(10,10,50,50); // Esto pintará con la brocha del tema anterior.
106-Form1.Canvas.Brush.Color:=clInfoBk; // Asignando el valor antiguo no creará un nuevo manejador de brocha.
107-Form1.Canvas.FillRect(10,10,50,50); // Esto pintará con la brocha del tema anterior.
108-Form1.Canvas.Brush.Color:=clRed; // Asignando un color nuevo, invalida manejador (handle) anterior.
109-Form1.Canvas.Brush.Color:=clInfoBk; // Asignando un color nuevo, invalida manejador (handle) anterior.
110-Form1.Canvas.FillRect(10,10,50,50); // Esto creará un nuevo manejador y pintará con el nuevo tema.
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.
11116```
11217
11318## Tabla de colores del sistema
11419
115-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**.
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**.
11621
117-<table>
118-<thead>
119-<tr>
120-<th><p>Constant</p></th>
121-<th><p>Definición LCL</p></th>
122-<th><p>Notas Delphi</p></th>
123-<th><p>Widgetsets Soportados</p></th>
124-</tr>
125-</thead>
126-<tbody>
127-<tr>
128-<td><p>clNone</p></td>
129-<td><p>Indicates "do not paint". Utilizarlos como color de Control no esta definido. El control no será transparente.</p></td>
130-<td><p>-</p></td>
131-<td><p>todos</p></td>
132-</tr>
133-<tr>
134-<td><p>clDefault</p></td>
135-<td><p>Using it for Brush will use the normal background brush of the target DC (device context).</p>
136-<ul>
137-<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>
138-<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>
139-<li>Using it as Pen color will use the default line color for the device context.</li>
140-<li>Using it as Font color will use the normal text color of the device context.</li>
141-</ul></td>
142-<td><p>| -</p></td>
143-<td><p>all</p></td>
144-</tr>
145-<tr>
146-<td><p>clScrollBar</p></td>
147-<td><p>Scrollbar body</p></td>
148-<td><p>-</p></td>
149-<td><p>all</p></td>
150-</tr>
151-<tr>
152-<td><p>clBackground</p></td>
153-<td><p>?</p></td>
154-<td><p>-</p></td>
155-<td><p>all</p></td>
156-</tr>
157-<tr>
158-<td><p>clActiveCaption</p></td>
159-<td><p>Active window titlebar</p></td>
160-<td><p>-</p></td>
161-<td><p>none</p></td>
162-</tr>
163-<tr>
164-<td><p>clInactiveCaption</p></td>
165-<td><p>Inactive window titlebar</p></td>
166-<td><p>-</p></td>
167-<td><p>none</p></td>
168-</tr>
169-<tr>
170-<td><p>clMenu</p></td>
171-<td><p>Regular menu item background color</p></td>
172-<td><p>-</p></td>
173-<td><p>none</p></td>
174-</tr>
175-<tr>
176-<td><p>clWindow</p></td>
177-<td><p>The normal background brush of unselected text. Defined for controls like TEdit, TComboBox, TMemo, TListBox, TTreeView.</p></td>
178-<td><p>-</p></td>
179-<td><p>none</p></td>
180-</tr>
181-<tr>
182-<td><p>clWindowFrame</p></td>
183-<td><p>Color of frame around the window</p></td>
184-<td><p>-</p></td>
185-<td><p>none</p></td>
186-</tr>
187-<tr>
188-<td><p>clMenuText</p></td>
189-<td><p>The font color to use together with clMenu</p></td>
190-<td><p>-</p></td>
191-<td><p>none</p></td>
192-</tr>
193-<tr>
194-<td><p>clWindowText</p></td>
195-<td><p>Font color to use together with clWindow</p></td>
196-<td><p>-</p></td>
197-<td><p>none</p></td>
198-</tr>
199-<tr>
200-<td><p>clCaptionText</p></td>
201-<td><p>Active window titlebar text color</p></td>
202-<td><p>-</p></td>
203-<td><p>none</p></td>
204-</tr>
205-<tr>
206-<td><p>clActiveBorder</p></td>
207-<td><p>?</p></td>
208-<td><p>-</p></td>
209-<td><p>none</p></td>
210-</tr>
211-<tr>
212-<td><p>clInactiveBorder</p></td>
213-<td><p>?</p></td>
214-<td><p>-</p></td>
215-<td><p>none</p></td>
216-</tr>
217-<tr>
218-<td><p>clAppWorkspace</p></td>
219-<td><p>MDIMain form background</p></td>
220-<td><p>-</p></td>
221-<td><p>none</p></td>
222-</tr>
223-<tr>
224-<td><p>clHighlight</p></td>
225-<td><p>The brush color of selected element</p></td>
226-<td><p>-</p></td>
227-<td><p>none</p></td>
228-</tr>
229-<tr>
230-<td><p>clHighlightText</p></td>
231-<td><p>Font color of selected text (to use together with clHighligh).</p></td>
232-<td><p>-</p></td>
233-<td><p>none</p></td>
234-</tr>
235-<tr>
236-<td><p>clBtnFace</p></td>
237-<td><p>Button background</p></td>
238-<td><p>-</p></td>
239-<td><p>none</p></td>
240-</tr>
241-<tr>
242-<td><p>clBtnShadow</p></td>
243-<td><p>Button shadow color (bottom right) used to achieve 3D effect</p></td>
244-<td><p>-</p></td>
245-<td><p>none</p></td>
246-</tr>
247-<tr>
248-<td><p>clGrayText</p></td>
249-<td><p>The font color of disabled element</p></td>
250-<td><p>-</p></td>
251-<td><p>none</p></td>
252-</tr>
253-<tr>
254-<td><p>clBtnText</p></td>
255-<td><p>Button font color to use together with clBtnFace</p></td>
256-<td><p>-</p></td>
257-<td><p>none</p></td>
258-</tr>
259-<tr>
260-<td><p>clInactiveCaptionText</p></td>
261-<td><p>Inactive window titlebar text color</p></td>
262-<td><p>-</p></td>
263-<td><p>none</p></td>
264-</tr>
265-<tr>
266-<td><p>clBtnHighlight</p></td>
267-<td><p>Button highlight color (top left) used to achieve 3D effect</p></td>
268-<td><p>-</p></td>
269-<td><p>none</p></td>
270-</tr>
271-<tr>
272-<td><p>cl3DDkShadow</p></td>
273-<td><p>?</p></td>
274-<td><p>-</p></td>
275-<td><p>none</p></td>
276-</tr>
277-<tr>
278-<td><p>cl3DLight</p></td>
279-<td><p>?</p></td>
280-<td><p>-</p></td>
281-<td><p>none</p></td>
282-</tr>
283-<tr>
284-<td><p>clInfoText</p></td>
285-<td><p>Font color for hints. Use together with clInfoBk</p></td>
286-<td><p>-</p></td>
287-<td><p>all</p></td>
288-</tr>
289-<tr>
290-<td><p>clInfoBk</p></td>
291-<td><p>Brush color for hints. Use together with clInfoText</p></td>
292-<td><p>-</p></td>
293-<td><p>all</p></td>
294-</tr>
295-<tr>
296-<td><p>clHotLight</p></td>
297-<td><p>?</p></td>
298-<td><p>-</p></td>
299-<td><p>none</p></td>
300-</tr>
301-<tr>
302-<td><p>clGradientActiveCaption</p></td>
303-<td><p>The second color used to make gradient of active window titlebar</p></td>
304-<td><p>-</p></td>
305-<td><p>none</p></td>
306-</tr>
307-<tr>
308-<td><p>clGradientInactiveCaption</p></td>
309-<td><p>The second color used to make gradient for inactive window titlebar</p></td>
310-<td><p>-</p></td>
311-<td><p>none</p></td>
312-</tr>
313-<tr>
314-<td><p>clMenuHighlight</p></td>
315-<td><p>The background color of selected menu item</p></td>
316-<td><p>-</p></td>
317-<td><p>none</p></td>
318-</tr>
319-<tr>
320-<td><p>clMenuBar</p></td>
321-<td><p>The Backround color of menu bar</p></td>
322-<td><p>-</p></td>
323-<td><p>none</p></td>
324-</tr>
325-<tr>
326-<td><p>clForm</p></td>
327-<td><p>?</p></td>
328-<td><p>-</p></td>
329-<td><p>none</p></td>
330-</tr>
331-<tr>
332-<td><p>clColorDesktop</p></td>
333-<td><p>?</p></td>
334-<td><p>-</p></td>
335-<td><p>none</p></td>
336-</tr>
337-<tr>
338-<td><p>cl3DFace</p></td>
339-<td><p>?</p></td>
340-<td><p>-</p></td>
341-<td><p>none</p></td>
342-</tr>
343-<tr>
344-<td><p>cl3DShadow</p></td>
345-<td><p>?</p></td>
346-<td><p>-</p></td>
347-<td><p>none</p></td>
348-</tr>
349-<tr>
350-<td><p>cl3DHiLight</p></td>
351-<td><p>?</p></td>
352-<td><p>-</p></td>
353-<td><p>none</p></td>
354-</tr>
355-<tr>
356-<td><p>clBtnHiLight</p></td>
357-<td><p>Same as clBtnHighlight</p></td>
358-<td><p>-</p></td>
359-<td><p>none</p></td>
360-</tr>
361-</tbody>
362-</table>
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).
36326
364-# Dibujando theme elements en tus controles personalizados
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.
36531
366-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:
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+
70+# Dibujando theme elements en tus controles personalizados
36771
368-``` pascal
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+```
36974uses Themes;
370-
371-...
372-
373-procedure TYourCustomControl.Paint;
374-const
375- PlusMinusDetail: array[Boolean {Hot}, Boolean {Expanded}] of TThemedTreeview =
376- (
377- (ttGlyphClosed, ttGlyphOpened),
378- (ttHotGlyphClosed, ttHotGlyphOpened)
379- );
380-var
381- Details: TThemedElementDetails;
382- R: TRect;
383- Collapse: boolean;
384-begin
385- ...
386- //draw a themed expand sign.
387- Details := ThemeServices.GetElementDetails(PlusMinusDetail[False, Collapse]);
388- R := Rect(ALeft, ATop, ARight + 1, ABottom + 1);
389- ThemeServices.DrawElement(Canvas.Handle, Details, R, nil);
390- ...
391-end;
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;
39297```
39398
39499# Conversiones de color hacia/desde html
395100
396-- [Convertir color desde/hacia HTML](http://wiki.lazarus.freepascal.org/Convert_color_to/from_HTML/es)
101+ * [[Convert color to/from HTML/es|Convertir color desde/hacia HTML]]
397102
398-- [Discusión sobre convertir color *desde/hacia HTML](http://wiki.lazarus.freepascal.org/Talk:Convert_color_to/from_HTML)
103+ * [Discusión sobre convertir color *desde/hacia HTML](<http://wiki.lazarus.freepascal.org/Talk:Convert_color_to/from_HTML>)
399104
400105---
401-*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).*
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).*

Back to history