Selector de color (Cuadro de diálogo)

Artículo
10/07/2008

Actualización: noviembre 2007

Se utiliza para asignar atributos de estilo a elementos HTML.

Para obtener acceso a este cuadro de diálogo

En Microsoft Visual Web Developer, en la vista Diseño, seleccione un control o elemento HTML que represente el marcado (por ejemplo, un control Table o un botón <input> HTML).
Abra el cuadro de diálogo Generador de estilos. Para ello, lleve a cabo una de las siguientes acciones:
- En la vista Diseño, seleccione el control o elemento, haga clic en Formato y, a continuación, en Estilo.
- En la vista Diseño, haga clic con el botón secundario del mouse en el control o elemento y, a continuación, haga clic en Estilo.
- Seleccione el control o elemento, seleccione su propiedad Estilo en la ventana de propiedades y, a continuación, elija el botón de puntos suspensivos (...).
- Si trabaja en la ventana Estilos de documento, seleccione un Elemento, una Clase o un Id. de elemento y, a continuación, elija el icono Generar estilo.
- Si está editando una hoja de estilos en cascada (CSS), coloque el punto de inserción entre las llaves ({ }) de un estilo CSS y, después, elija Generar estilo en el menú Estilo.
Se abrirá el cuadro de diálogo Generador de estilos.
Seleccione cualquiera de las fichas del cuadro de diálogo Generador de estilos que contenga una lista desplegable Color y, a continuación, haga clic en el botón de puntos suspensivos (…) situado junto al cuadro.

Se abrirá el cuadro de diálogo Selector de color.

Tareas

Tutorial: Crear y modificar un archivo CSS

Elementos de interfaz de usuario

Paleta Web
Cuando seleccione un muestrario de colores en esta ficha, su código RGB hexadecimal aparecerá en el campo Color y el par attribute:RGBcolor seleccionado se insertará en la definición de estilo CSS cuando cierre el cuadro de diálogo Generador de estilos.

Por ejemplo, si está editando una página HTML en la vista Diseño, seleccione el elemento <BODY> en la ventana Esquema del documento y elija Generar estilo en el menú Formato. Seleccione Fondo y elija el botón de puntos suspensivos (...) situado junto al campo Color para abrir el cuadro de diálogo Selector de color. En la ficha Paleta Web, elija una muestra de color azul claro y haga clic en Aceptar. Cuando cierre el cuadro de diálogo Generador de estilos, se insertará entre las llaves ({ }) del estilo BODY un par attribute:RGBcolor como el siguiente:
```
BODY { BACKGROUND-COLOR: #99ffff; } 
```
Para obtener más información, vea Paleta Web (Ficha), Selector de color (Cuadro de diálogo).
Colores con nombre
Cuando se selecciona una muestra de color en esta ficha, su nombre de color y su código RGB hexadecimal aparecen en el campo Color. Cuando se selecciona un color con nombre Básico o Adicional, se inserta un par attribute:colorname en la definición de estilo CSS.

Por ejemplo, si está editando una página HTML en la vista Diseño, seleccione el elemento <BODY> en la ventana Esquema del documento y elija Generar estilo en el menú Formato. Seleccione Fondo y elija el botón de puntos suspensivos (...) situado junto al campo Color para abrir el cuadro de diálogo Selector de color. En la ficha Colores con nombre, seleccione el color LightBlue (#add8e6) en la fila inferior. Al cerrarse el cuadro de diálogo Generador de estilos, se inserta entre las llaves ({ }) del estilo BODY un par attribute:colorname:
```
BODY { BACKGROUND-COLOR: lightblue; } 
```
Para obtener más información, vea Colores con nombre (Ficha), Selector de color (Cuadro de diálogo).

Colores del sistema
Cuando se selecciona un color, aparece una categoría de colores del sistema en el campo Color y se inserta un par attribute:category en la definición de estilo CSS al cerrar el cuadro de diálogo Generador de estilos.

Por ejemplo, si está editando una hoja de estilos CSS, coloque el cursor entre las llaves ({ }) de un estilo CSS correspondiente al elemento <BODY> y elija Generar estilo en el menú Formato. Seleccione Fondo y elija el botón de puntos suspensivos (...) situado junto al campo Color para abrir el cuadro de diálogo Selector de color. En la ficha Colores del sistema, seleccione la categoría de color Fondo y haga clic en Aceptar. Al cerrar el cuadro de diálogo Generador de estilos, se insertará en el estilo BODY un par attribute:colorname como el siguiente:

BODY { BACKGROUND-COLOR: background; }

Nota:
Si utiliza un color de sistema no significa que esté especificando el color que se mostrará. El color de fondo varía según el sistema y depende del color de escritorio elegido por el usuario. En general, solamente debería usar categorías de Color del sistema en proyectos Web diseñados para grupos de usuarios que comparten configuraciones de Pantalla comunes y predecibles.

Para obtener más información, vea Colores del sistema (Ficha), Selector de color (Cuadro de diálogo).

Colores personalizados
Para crear un color personalizado, arrastre los controles deslizantes de los colores primarios rojo, verde y azul hasta que aparezca el matiz deseado en el campo Vista previa. Su código de color RGB, mostrado en el campo Color, se insertará en la definición de estilo CSS al cerrarse el cuadro de diálogo Generador de estilos. Son valores decimales válidos, mostrados a la derecha de cada control deslizante, los que estén entre 0 (sin color) y 255 (color máximo); y el valor predeterminado para cada uno de ellos es 255.

Nota:
Para que se muestre un color personalizado, utilice la configuración de Pantalla actual del monitor. Puede tener un aspecto diferente en el monitor y explorador web de otro usuario. Puede que desee reservar los colores personalizados para utilizarlos en los proyectos Web diseñados para grupos de usuarios que comparten configuraciones de pantalla comunes y predecibles.

Por ejemplo, cuando edite una hoja de estilos CSS, coloque el cursor entre las llaves ({ }) de un estilo CSS correspondiente a una clase de estilo INPUT.button, seleccione Fondo en el cuadro de diálogo Generar estilo y, a continuación, elija el botón de puntos suspensivos (...) situado junto al campo Color para abrir el cuadro de diálogo Selector de color. En la ficha Color personalizado, deje los controles deslizantes Rojo y Verde establecidos en sus valores predeterminados de 255 y arrastre el control deslizante Azul hacia la izquierda hasta 102. Cuando cierre el cuadro de diálogo Generador de estilos, el siguiente par attribute:RGBcolor se insertará entre las llaves ({ }) del estilo:

INPUT.button { background-color: #ffff66; }

Para obtener más información, vea Color personalizado (Ficha), Selector de color (Cuadro de diálogo).

Color
Muestra el código RGB hexadecimal correspondiente al color seleccionado.
Aceptar
Cierra el cuadro de diálogo Selector de color y agrega el par attribute:color seleccionado al código de marcado CSS que se va a insertar al cerrarse el cuadro de diálogo Generador de estilos.