Cómo usar esta herramienta para desarrolladores
- Elige un color o pega un HEX.
- Pulsa “Analizar color”.
- Consulta HEX, RGB, HSL y luminancia.
- Copia o exporta los resultados.
Selector y analizador de color
Selecciona un color con el control nativo del navegador o pega un HEX para obtener varias representaciones técnicas en una sola ejecución. El analizador muestra HEX normalizado, RGB, HSL y luminancia relativa sRGB. Es una utilidad compacta para inspeccionar tokens, comparar paletas y preparar valores que después se usarán en CSS o sistemas de diseño.
Datos de entrada
ColorEspacio publicitario
Qué hace esta herramienta para desarrolladores
Centraliza representaciones habituales de un color sRGB y añade luminancia relativa para cálculos de contraste posteriores.
HEX se convierte a RGB; HSL se deriva de canales normalizados y la luminancia aplica linealización sRGB antes de ponderar R, G y B.
La luminancia por sí sola no es una puntuación de accesibilidad; hace falta compararla con otro color para obtener ratio de contraste.
Ejemplo
#8B5CF6
rgb(139, 92, 246)
hsl(258, 90%, 66%)
Casos de uso
- Inspeccionar tokens de diseño.
- Preparar valores CSS.
- Obtener luminancia para análisis de contraste.
Consejos para obtener resultados fiables
- Usa HEX de seis dígitos.
- Comprueba contraste con el color de fondo real.
- No asumas equivalencia perceptual entre pasos HSL.
- Conserva un formato canónico en tu sistema de diseño.
Detalles del procesamiento
El selector visual usa input type=color del navegador. El procesamiento posterior se realiza en JavaScript sin red.
El selector nativo puede variar visualmente según sistema operativo y navegador. No gestiona perfiles de color avanzados.
Preguntas frecuentes
¿Cómo obtener RGB y HSL de un color elegido visualmente?
Selecciona el color con el control nativo y ejecuta el análisis; la salida incluye ambas representaciones.
¿Qué es la luminancia relativa que muestra el selector de color?
Es un valor calculado desde sRGB linealizado y ponderado, usado como base para ratios de contraste WCAG.
¿La luminancia relativa indica por sí sola si un texto cumple WCAG?
No. Debes comparar la luminancia del texto y del fondo para calcular el ratio de contraste.
¿El selector de color funciona sin conexión?
Sí. El control y los cálculos principales se ejecutan localmente en el navegador.
¿Por qué el aspecto del selector visual cambia entre navegadores?
input type=color utiliza una interfaz nativa que depende del navegador y del sistema operativo.
Herramientas relacionadas para desarrolladores
Datos del resultado
| Dato | Descripción |
|---|---|
| HEX | Valor calculado por Selector y analizador de color. |
| RGB | Valor calculado por Selector y analizador de color. |
| HSL | Valor calculado por Selector y analizador de color. |
| Luminancia | Valor calculado por Selector y analizador de color. |
Centro de categoría
Consulta más utilidades de Color y CSS.