Selector de color online — convierte HEX, RGB y HSL gratis
Trabajar con colores en diseño web y desarrollo front-end requiere moverse constantemente entre formatos: el diseño en Figma usa HEX, las variables CSS modernas prefieren HSL, Tailwind CSS usa nombres de color con tonos numéricos, y algunos frameworks de email requieren RGB decimal. WikiPlus Selector de Color permite seleccionar cualquier color visualmente y obtener al instante su valor en HEX, RGB, HSL y otros formatos, con un clic para copiar cada uno al portapapeles.
Diferencias entre HEX, RGB y HSL
Los tres formatos principales para colores web representan exactamente los mismos colores de formas distintas. HEX (#RRGGBB) es el más usado en CSS y en la comunicación entre diseñadores y developers; compacto y fácil de copiar. RGB (red, green, blue) expresa cada canal de color en valores de 0 a 255; intuitivo para desarrolladores que piensan en canales. RGBA añade el canal alfa (transparencia) de 0 a 1. HSL (hue, saturation, lightness) es el más intuitivo para crear variaciones de un mismo color: el tono (hue) es el color puro de 0° a 360°, la saturación indica cuán intenso es el color, y la lightness controla qué tan claro u oscuro es. HSLA añade transparencia. Para crear una paleta de color coherente con variaciones de un tono base, HSL es el formato más adecuado.
Cómo usar el selector visual de color
El selector visual de WikiPlus tiene tres controles. El cuadrado de saturación/brillo muestra el espectro de saturación (horizontal) y brillo (vertical) para el tono actual; arrastra el cursor sobre él para afinar el color. La barra de tono (hue slider) permite seleccionar el color base de 0° (rojo) a 360° (rojo nuevamente, pasando por naranja, amarillo, verde, cian, azul y magenta). La barra de transparencia permite ajustar el canal alfa. Alternativamente, puedes introducir directamente el valor en cualquiera de los campos de texto (HEX, RGB o HSL) y el selector actualiza su posición visual para reflejar el color introducido.
Copiar colores al portapapeles en el formato correcto
WikiPlus Selector de Color muestra simultáneamente el valor del color seleccionado en HEX, RGB completo con formato rgb(), y HSL completo con formato hsl(). Cada campo tiene su propio botón de copiar que pone el valor exacto en el portapapeles en el formato listo para pegar directamente en el código CSS. Esto elimina la conversión manual y los errores de transcripción: pegas el HEX de Figma en el campo HEX, y obtienes el HSL correspondiente para tus custom properties de CSS en un clic. Para Tailwind CSS, el HEX obtenido se puede introducir en la configuración de color personalizado de tailwind.config.js.
Uso del selector en contraste y accesibilidad
Uno de los usos más importantes del selector de color en diseño web es verificar el contraste de los colores de texto y fondo para cumplir las guías de accesibilidad WCAG. El nivel AA de WCAG requiere un contraste mínimo de 4.5:1 para texto normal y 3:1 para texto grande. El nivel AAA requiere 7:1 para texto normal. WikiPlus muestra el valor de luminosidad del color (el campo L de HSL), que es el principal factor en el cálculo de contraste. Para verificar el ratio de contraste entre dos colores específicos, usa el valor HEX o RGB obtenido en WikiPlus y pégalo en una herramienta de verificación de contraste como WebAIM Contrast Checker.
Preguntas frecuentes
- ¿Cómo convierto un color HEX a RGB manualmente?
- Un color HEX como #1A4B8C se divide en tres pares: 1A (rojo), 4B (verde), 8C (azul). Cada par hexadecimal se convierte a decimal: 1A hex = 26 decimal, 4B hex = 75 decimal, 8C hex = 140 decimal. El resultado es rgb(26, 75, 140). WikiPlus hace esta conversión automáticamente; la explicación manual es útil para entender el sistema cuando necesitas depurar sin herramientas.
- ¿Qué es el color HSL con alfa (HSLA)?
- HSLA es el formato HSL con un cuarto valor para la transparencia (alfa) de 0 (completamente transparente) a 1 (completamente opaco). Por ejemplo, hsla(210, 70%, 45%, 0.8) es el mismo azul de hsl(210, 70%, 45%) con un 80 % de opacidad. Es útil para superponer colores con transparencia en CSS, como fondos de overlays o bordes semitransparentes. WikiPlus muestra el valor HSLA cuando ajustas el slider de transparencia.
- ¿Puedo usar el selector para identificar el color de una imagen?
- WikiPlus Selector de Color es un generador y conversor de colores, no un cuentagotas para imágenes. Para identificar el color exacto de un píxel en una imagen o captura de pantalla, usa la herramienta Cuentagotas de color de tu sistema operativo (en Windows: aplicación Lupa con zoom > cuentagotas; en macOS: Digital Color Meter en Aplicaciones > Utilidades) o el cuentagotas integrado en Figma, Photoshop o el propio selector de color del sistema.