Selector de color

El Selector de color es una herramienta gratuita que te permite elegir un color en el navegador y obtener su valor en el formato que necesites.

¿Qué resultado devuelve un selector de color?

Un selector de color devuelve una representación numérica del color elegido en la rueda. Un mismo color visible puede expresarse en varios formatos, normalmente hexadecimal, RGB, RGBA, HSL o HSLA.

Cada formato describe el color de una manera distinta. Los formatos hexadecimal y RGB especifican los valores de los canales rojo, verde y azul. HSL utiliza tono, saturación y luminosidad, lo que puede facilitar los ajustes sistemáticos. Los formatos con canal alfa también indican la opacidad.

• Los valores hexadecimales utilizan una almohadilla seguida de dígitos hexadecimales, como #336699.
• Los valores RGB suelen expresar cada canal como un número del 0 al 255, como rgb(51, 102, 153).
• Los valores HSL describen un ángulo de tono y valores porcentuales de saturación y luminosidad, como hsl(210, 50%, 40%).
• RGBA y HSLA añaden transparencia. Un valor alfa de 0 significa transparencia total y uno de 1, opacidad total.

CSS también admite colores con nombre, pero estos se limitan a un conjunto fijo y resultan menos adecuados para definir tokens de diseño exactos. Los valores numéricos generados suelen ser más fáciles de trasladar entre sistemas de diseño, hojas de estilo y código de aplicaciones.

¿Cómo se usa el selector de color?

Selecciona el campo Color, elige el punto que necesites en la rueda de color y utiliza el valor resultante en el formato que requiera tu aplicación. Todo el proceso se realiza en el navegador y el color introducido nunca se envía a un servidor.

Si trabajas con una interfaz existente, empieza por el formato que ya utilice el código del proyecto. Así evitarás conversiones innecesarias y facilitarás la revisión de las solicitudes de incorporación de cambios. Cuando examines datos de terceros, comprueba si los valores incluyen opacidad antes de sustituirlos por un color aparentemente equivalente.

Un flujo de trabajo práctico antes del despliegue consiste en seleccionar o reproducir el color deseado, copiar la notación adecuada y comprobarla en el estado real del componente. Prueba por separado los estados normal, de paso del puntero, de foco y deshabilitado, ya que la opacidad y los estilos heredados pueden cambiar el resultado final mostrado.

Cómo interpretar el resultado

Interpreta el resultado según su modelo de color y comprueba cualquier componente alfa antes de copiarlo en el código. En RGB, el valor de cada canal controla la intensidad de su correspondiente componente rojo, verde o azul. En HSL, el tono recorre una rueda de color, mientras que la saturación controla la intensidad del color y la luminosidad, el equilibrio entre el negro y el blanco.

La sintaxis de los colores es estricta cuando se utiliza en CSS o en datos estructurados. Estos son algunos errores habituales al editar los valores manualmente:

• omitir la almohadilla inicial de un valor hexadecimal de CSS;
• utilizar cinco o siete dígitos hexadecimales, que no son longitudes hexadecimales estándar válidas;
• introducir porcentajes donde una implementación de RGB espera valores numéricos para los canales;
• olvidar las comas en la sintaxis RGB antigua o mezclar sintaxis antiguas y modernas incompatibles;
• copiar un valor con canal alfa en un programa que solo admite códigos hexadecimales de seis dígitos;
• utilizar una coma decimal, como 0,5, cuando CSS exige un punto decimal, como 0.5.

El selector genera valores de color, pero no funciona como validador general de CSS. No garantiza que una declaración completa, un documento JSON o un archivo de tema sean válidos. Los errores de sintaxis ajenos al valor del color deben comprobarse con el analizador o la herramienta de desarrollo correspondiente.

Ejemplos de conversiones de color

En un color hexadecimal de seis dígitos, cada par representa el rojo, el verde y el azul. Por ejemplo, las siguientes notaciones describen el mismo color opaco.

Valor hexadecimal #336699

Equivalente RGB rgb(51, 102, 153)

Equivalente HSL hsl(210, 50%, 40%)

El formato hexadecimal de tres dígitos es una notación abreviada. Cada dígito se repite para formar un valor de seis dígitos.

Valor hexadecimal abreviado #fff

Valor hexadecimal completo #ffffff

Equivalente RGB rgb(255, 255, 255)

El formato hexadecimal de ocho dígitos incluye el canal alfa después de los pares correspondientes al rojo, el verde y el azul. Ten cuidado con los sistemas que utilizan otro orden de canales o que no admiten la notación de ocho dígitos. Además, un color sólido que parece idéntico puede producir un resultado diferente cuando se aplica opacidad sobre otro fondo.

¿Qué formato de color conviene elegir?

Elige la notación de color que ya espere el destino, salvo que exista un motivo claro para cambiarla. El formato hexadecimal de seis dígitos es compacto y habitual en las variables CSS y los archivos de tokens de diseño. RGB resulta práctico cuando el software muestra directamente los valores de los canales, mientras que HSL es útil para crear colores relacionados ajustando la luminosidad o la saturación.

• Utiliza el formato hexadecimal de seis dígitos para un color web opaco cuando importen la brevedad y que resulte fácil de interpretar para la mayoría de las personas.
• Utiliza el formato hexadecimal de ocho dígitos solo si el entorno de destino admite expresamente el canal alfa con esa notación.
• Utiliza RGB o RGBA cuando trabajes con los canales rojo, verde y azul por separado.
• Utiliza HSL o HSLA para generar variaciones programáticas de un tema a partir del tono, la saturación o la luminosidad.
• Utiliza el Convertidor de color cuando ya tengas un valor y necesites convertirlo, en lugar de elegir visualmente un color nuevo.

No consideres un valor RGB mostrado en pantalla como una especificación para impresión. La impresión comercial puede requerir valores CMYK, un perfil de color ICC, pruebas de impresión y un acuerdo con la imprenta. Una conversión matemática por sí sola no puede garantizar que el color impreso coincida con el de una pantalla retroiluminada.

¿Cuándo no hace falta seleccionar o convertir un color?

No es necesario seleccionar ni convertir un color si el valor existente ya está en el formato que requiere el destino. Las conversiones repetidas pueden introducir diferencias de redondeo, un uso incoherente de mayúsculas y minúsculas o cambios innecesarios en los archivos de código fuente.

También puede ser preferible conservar un token de diseño con nombre, como una variable de tema, en vez de sustituirlo por un valor literal. Los tokens mantienen la relación entre los componentes y permiten cambiar un color de forma centralizada. Del mismo modo, un color que solo procesa una máquina no necesita una representación más legible para las personas, salvo que alguien deba revisarlo o mantenerlo.

Ningún selector de color puede determinar por sí solo si una elección ofrece suficiente contraste, cumple las especificaciones de una marca o sigue siendo distinguible para las personas con deficiencias en la visión del color. Comprueba las combinaciones de primer plano y fondo con una herramienta específica de contraste y revisa la interfaz en su contexto.

Preguntas frecuentes

¿Puedo usar el resultado en variables CSS?

Sí, siempre que la notación elegida sea CSS válido para los navegadores y las herramientas de compilación que admitas. Guarda el valor completo en una propiedad personalizada y haz referencia a él mediante la función var(). Si el proyecto manipula los canales por separado, quizá resulte más práctico almacenarlos según la convención que ya utilice.

¿Por qué el mismo color se ve distinto en otra pantalla?

Las pantallas varían en calibración, brillo, tecnología del panel y compatibilidad con gamas de color. La gestión del color del navegador y el perfil de pantalla del sistema operativo también pueden afectar a la representación. Por tanto, que los valores numéricos coincidan no garantiza que el aspecto físico sea idéntico en todos los dispositivos.

¿Las letras mayúsculas y minúsculas cambian un color hexadecimal?

No. Los dígitos hexadecimales de A a F no distinguen entre mayúsculas y minúsculas, por lo que #AABBCC y #aabbcc representan el mismo color. Sigue la convención de mayúsculas y minúsculas del repositorio para evitar cambios que solo afecten al formato.

¿Puede un valor de color contener caracteres acentuados o no latinos?

Las notaciones estándar hexadecimal, RGB y HSL utilizan dígitos, letras y signos de puntuación ASCII. Los caracteres acentuados o no latinos no forman parte de estas sintaxis numéricas de color. Pueden aparecer en nombres de variables o metadatos relacionados si el lenguaje y la codificación del archivo correspondientes lo permiten.

¿Un color transparente equivale a no tener color?

No. Un color totalmente transparente sigue teniendo valores de canal, aunque no sean visibles por sí solos. Esos canales ocultos pueden ser importantes durante una animación, una interpolación, una composición o un cambio posterior de opacidad. Consérvalos si la aplicación depende de ese comportamiento.

¿Debo redondear los valores decimales de los canales?

Redondea los canales de color decimales y los valores alfa solo a la precisión que admita el destino y que sea necesaria para obtener resultados coherentes. Una precisión excesiva dificulta la revisión de los valores, mientras que un redondeo demasiado agresivo puede producir una pequeña diferencia de color. Después de redondear, comprueba el componente renderizado con el fondo previsto y en sus distintos estados de interacción.