CSS Color Picker
Publicado: abril de 2016
El selector de colores de CSS permite insertar valores de color en las propiedades de color de CSS. Incluye una paleta estándar de colores y usa nombres de color estándar, códigos hash, valores de color RGB, RGBA, HSL y HSLA, y muestra una lista de los colores usados más recientemente. De forma predeterminada, el selector de colores escribe valores hexadecimales. Para cambiar esta configuración, vea Formato, CSS, editor de texto, Opciones (Cuadro de diálogo).
Elegir un color
El selector de colores tiene una barra de colores y una pantalla de color. Siempre se obtiene acceso primero a la barra de colores.
Para mostrar la barra de colores
Escriba cualquier propiedad de CSS que tome un valor de color (por ejemplo, color:, rgb(, rgba(, hsl(, hsla( o**#**).
Para tener acceso a la barra de colores con el teclado, coloque el cursor en color existente en la hoja de estilos presione la Ctrl-J o Ctrl-Barra espaciadora.
En una hoja de estilos vacía, la barra de colores muestra una paleta predeterminada. En una hoja de estilos con colores existentes, la barra de colores muestra una lista de los colores usados más recientemente.
Para elegir un color en la barra de colores
Haga clic en uno de los colores de la barra de colores o presione FLECHA ABAJO para entrar en la barra de colores, y use las teclas FLECHA IZQUIERDA y FLECHA DERECHA para seleccionar un color.
En la hoja de estilos, los valores de propiedad cambiarán a medida que elige diferentes colores.
Para ver más colores, haga clic en las flechas a la izquierda y a la derecha en la barra de colores, o use las teclas de dirección para desplazarse a la izquierda y a la derecha en la barra de colores.
Presione ENTRAR para asignar el color elegido a la propiedad de color de CSS.
Para elegir un color personalizado en la pantalla de colores
Para mostrar la pantalla de colores, elija el signo más (+) en el extremo derecho de la barra de colores, o presione la tecla de flecha abajo en el teclado una o dos veces cuando la barra de colores sea visible.
Siga uno o varios de los procedimientos siguientes.
Use el mouse para seleccionar un color de la pantalla.
Cambie el color moviendo el control deslizante hacia la derecha arriba o abajo.
Cambiar la opacidad moviendo el control deslizante de la parte inferior a la izquierda o a la derecha. Los valores se escribirán en el formato RGBA o HSLA.
Elija Elegir para cambiar el puntero a una herramienta de cuentagotas. Se obtendrá una vista previa del color elegido a medida que mueve el puntero.
Cuando cambia los colores con cualquiera de estos métodos, el color original se muestra en el cuadro Original, el color elegido aparece en el cuadro Nuevo y se muestra una vista previa del valor para la propiedad de color de CSS en la hoja de estilos.
Presione ENTRAR para asignar el color elegido a la propiedad de color de CSS.
Nota
El color que elija se muestra en la configuración de pantalla del monitor y puede ser diferente en otro monitor.
Elementos de interfaz de usuario
Lista de UIElement
Nuevo
Muestra el color que está seleccionado en el cuadro de diálogo, pero que todavía no se ha asignado a la regla CSS.Original
Muestra el color que está asignado actualmente a la regla CSS.Opacidad
Deslice el botón hacia la derecha para aumentar la opacidad del color o hacia la izquierda para reducirla.Nota
Dado que no hay ninguna representación de opacidad en formato hexadecimal estándar, el selector de colores escribirá los valores de RGBA o de HSLA si ajusta la opacidad.
Pick
Cambia el puntero a una herramienta de cuentagotas que permite seleccionar cualquier color en la pantalla y, a continuación, asignarlo a una propiedad de CSS. Al mover el puntero sobre la pantalla, se muestra una vista previa del color correspondiente a la ubicación del puntero en el cuadro Nuevo y el valor de propiedad de color de CSS correspondiente cambia en la hoja de estilos.