Selector de Color
El Selector de Color convierte colores entre formatos HEX, RGB y HSL directamente en el navegador, sin subir datos a servidores externos. Ideal para desarrolladores y diseñadores que necesitan precisión y privacidad.
Selector de Color es una herramienta en línea que permite convertir colores entre los formatos HEX, RGB y HSL con precisión matemática pura. Procesa las conversiones en el navegador, garantizando que ninguna información de color se envíe a servidores externos, lo que protege tu privacidad. Soporta formatos HEX de 3 y 6 dígitos, y genera salidas compatibles con CSS custom properties y la sintaxis arbitraria de Tailwind CSS. Para complementar su uso, puedes explorar herramientas como hash-generator para crear hashes seguros o css-minifier para optimizar estilos CSS.
Cómo usar el Selector de Color
- Introduce el color en uno de los formatos soportados: HEX (#rrggbb o #rgb), RGB (valores 0-255) o HSL (tono 0-360, saturación y luminosidad 0-100%).
- El sistema convierte automáticamente el valor ingresado a los otros dos formatos en tiempo real.
- Visualiza la representación del color y copia el valor en el formato que necesites, incluyendo el código para CSS custom properties o Tailwind CSS.
- Utiliza el color convertido para aplicaciones en diseño web, theming CSS o documentación de marca.
Cómo funciona el Selector de Color
El Selector de Color realiza conversiones matemáticas puras entre los modelos de color HEX, RGB y HSL. Por ejemplo, convierte el valor HEX en sus componentes rojo, verde y azul (cada uno entre 0 y 255) utilizando parseo hexadecimal. Luego, para la conversión a HSL, se aplican fórmulas que calculan el tono (de 0 a 360 grados), saturación y luminosidad basados en los valores RGB normalizados. La herramienta también reconoce el formato HEX abreviado de 3 dígitos y lo expande a 6 dígitos internamente para asegurar precisión. Todo el procesamiento ocurre en el navegador, lo que elimina la necesidad de enviar datos a servidores externos y mejora la privacidad y velocidad.
Ejemplo
Entrada HEX: #3a5fcd
Salida RGB: rgb(58, 95, 205)
Salida HSL: hsl(224, 58%, 51%)
CSS Custom Property: --color-primary: #3a5fcd;
Tailwind Arbitrary: bg-[#3a5fcd]Cuándo usar el Selector de Color
- Diseñadores web que necesitan convertir colores para CSS y frameworks como Tailwind.
- Desarrolladores que requieren valores precisos en formatos RGB o HSL para animaciones o efectos.
- Especialistas SEO que documentan colores de marca para asegurar consistencia visual en varios dispositivos.
- Estudiantes que aprenden sobre modelos de color y necesitan ejemplos prácticos de conversión.
Para complementar este trabajo de color, puedes usar base64-encode para codificar imágenes o hash-generator para generar identificadores únicos relacionados con estilos o recursos.
Preguntas frecuentes
¿Cómo convierte el Selector de Color de HEX a RGB?
El Selector de Color parsea el valor HEX dividiéndolo en componentes rojo, verde y azul de 8 bits cada uno. Convierte cada par hexadecimal en su equivalente decimal (0-255) para representar el color en formato RGB.
¿Qué hace la herramienta con los valores HEX de 3 dígitos?
Los valores HEX abreviados de 3 dígitos como #abc se expanden automáticamente a 6 dígitos duplicando cada carácter (#aabbcc) para mantener la precisión en la conversión a RGB y HSL.
¿La herramienta envía mis datos de color a un servidor?
No. Todas las conversiones se realizan en el navegador usando JavaScript puro, por lo que ningún dato de color se transmite a servidores externos, lo que garantiza privacidad y seguridad.
¿Cómo obtengo el código para usar en CSS o Tailwind a partir del color seleccionado?
La herramienta genera automáticamente el código CSS para custom properties en formato --nombre: valor; y la sintaxis arbitraria de Tailwind, por ejemplo bg-[#rrggbb], facilitando su integración directa en tus proyectos.
¿Por qué usar HSL en lugar de RGB o HEX?
HSL separa el tono, saturación y luminosidad, lo que facilita ajustar colores para theming y accesibilidad. Es ideal para generar variaciones de color manteniendo la armonía visual, algo más complicado con RGB o HEX.