Resumen
Esta herramienta sirve cuando necesitas revisar un color en varios formatos sin cambiar de app. Muestra el mismo tono como HEX, RGB y HSL para que copies el formato que encaje con tu hoja CSS, tu ficha de componente o tu nota de diseño. Resulta útil al ajustar colores de marca, preparar una entrega para desarrollo o comprobar tokens de un tema. Los valores se actualizan a la vez, así puedes comparar matices y mantener referencias de color coherentes entre equipos.
Casos de uso
- Revisión de tokens de temaComprueba un color de token en HEX, RGB y HSL antes de incorporarlo a un sistema de diseño o a los estilos.
- Ajuste de paleta de marcaVerifica que un color de marca se mantenga igual entre archivos de diseño, documentación y desarrollo.
- Estados de un componenteInspecciona un color de hover, active o focus y guarda el formato exacto usado en el código.
Como funciona
- 1
Elige un color con el selector o escribe un valor HEX.
- 2
La herramienta calcula los valores equivalentes en RGB y HSL.
- 3
Copia el formato que necesites para CSS, documentación o estilos de componentes.
Ejemplos
Azul de botón principal
Entrada: #2563EB
Salida: HEX #2563EB, RGB 37, 99, 235, HSL 221, 83%, 53%
Útil para un color de interfaz que debe quedar exacto en estilos y documentación.
Tono neutro oscuro
Entrada: rgb(17, 24, 39)
Salida: HEX #111827, RGB 17, 24, 39, HSL 220, 39%, 11%
Sirve para revisar un neutro oscuro usado en tarjetas, fondos o texto.
Verde de éxito suave
Entrada: hsl(142, 72%, 29%)
Salida: HEX #14913E, RGB 20, 145, 62, HSL 142, 72%, 29%
Práctico cuando el diseño guarda el color en HSL y el CSS necesita HEX o RGB.
FAQ
¿Puedo introducir un color en un formato distinto de HEX?
Sí. Si el formato que pegas es compatible, la herramienta mostrará los valores equivalentes en HEX, RGB y HSL.
¿Por qué cambian los valores cuando muevo ligeramente el selector?
Cada pequeño cambio selecciona un matiz distinto, así que los valores numéricos se actualizan al instante. Es normal y ayuda a capturar el punto exacto.
¿Qué diferencia hay entre RGB y HSL aquí?
RGB describe la mezcla de rojo, verde y azul. HSL muestra el color como tono, saturación y luminosidad, algo más cómodo para comparar variaciones.
¿Por qué al copiar los valores pueden verse distintos en otra app?
Algunas apps redondean canales o muestran la transparencia y el color de forma diferente. Compara siempre los números, no solo la vista previa.