Selector de color
Elige cualquier color y obtén al instante sus valores HEX, RGB y HSL. Convierte entre formatos de color para CSS, sistemas de diseño y guías de marca.
También buscada como: hex rgb · paleta de colores · color picker · convertir colores · hex to rgb · selector color
#3B82F6
rgb(59, 130, 246)
hsl(217, 91%, 60%)
Trabajar con colores en el desarrollo web y el diseño digital exige precisión. Ya sea que estés construyendo un sitio web, definiendo una identidad de marca o ajustando un componente de interfaz, conocer los valores exactos de un color en todos los formatos te ahorra tiempo y evita inconsistencias. El Selector de Color de Yanapex te permite elegir cualquier color visualmente y ver al instante sus representaciones HEX, RGB y HSL una junto a otra. Ya no necesitas adivinar ni copiar valores de una herramienta de diseño solo para descubrir que están en el formato incorrecto para tu hoja de estilos CSS. Todo se actualiza en tiempo real mientras arrastras el selector o ajustas los controles deslizantes RGB.
HEX, RGB y HSL son los tres formatos de color CSS que encontrarás a diario. Cada uno tiene ventajas específicas: HEX es compacto y ampliamente compatible, RGB se corresponde directamente con el hardware de la pantalla, y HSL facilita razonar sobre el brillo y la saturación. Esta herramienta conecta los tres formatos al instante.
Escribe un código HEX o arrastra el selector de color para elegir un color.
Ajusta los controles deslizantes de rojo, verde o azul para afinar el color.
Copia el valor HEX, RGB o HSL y pégalo en tu CSS o herramienta de diseño.
¿Qué es un selector de color?
Un selector de color es una interfaz visual que permite elegir un color en un espectro y obtener su representación numérica exacta. Esta herramienta ofrece conversión en ambas direcciones: selecciona desde la rueda de colores para obtener los valores HEX, RGB y HSL, o escribe un código HEX conocido en el campo de entrada para ver sus equivalentes al instante. Los controles deslizantes de los canales RGB permiten ajustar los componentes rojo, verde y azul individualmente, lo que facilita crear variaciones de color sin salir de la herramienta y sin necesidad de calcular conversiones manualmente.
Cómo usar esta herramienta
Hay dos formas de usar esta herramienta. Primero, haz clic o arrastra dentro del área del selector de color para elegir visualmente cualquier color: los valores HEX, RGB y HSL se actualizan al instante. Segundo, escribe un código HEX de seis dígitos directamente en el campo de entrada (con o sin el prefijo #) y la herramienta calculará y mostrará los valores RGB y HSL correspondientes. Usa los controles deslizantes de rojo, verde y azul para ajustar canales individuales con mayor precisión cuando necesites afinar el color.
¿Por qué es útil este conversor de colores?
Los diseñadores y desarrolladores necesitan valores de color precisos de forma constante. Cuando las guías de marca especifican un color primario en HEX pero tu CSS usa variables HSL, o cuando un cliente te envía un valor RGB y tu sistema de diseño espera HEX, la conversión manual es lenta y propensa a errores. Esta herramienta elimina esa fricción. También es útil al construir paletas de colores accesibles: el formato HSL facilita ajustar la luminosidad manteniendo constantes el tono y la saturación, que es exactamente lo que necesitas para generar escalas de colores accesibles y consistentes.
Ejemplos de uso real
Los casos de uso más comunes incluyen: extraer el código HEX exacto de un color muestreado en una captura de pantalla, convertir el color de marca de HEX a HSL para generar tintes y sombras de forma programática, ajustar los canales RGB individuales para probar variaciones de color en un componente de interfaz, y confirmar que un código HEX muestra el color visual correcto antes de añadirlo a una hoja de estilos. Los desarrolladores frontend usan esta herramienta al trabajar con propiedades personalizadas CSS, archivos de configuración de Tailwind y design tokens.
Preguntas frecuentes
¿Cuál es la diferencia entre HEX, RGB y HSL?
HEX (#3b82f6) es una abreviatura hexadecimal de seis dígitos utilizada en HTML y CSS. RGB (rgb(59, 130, 246)) especifica la intensidad de los canales rojo, verde y azul en una escala de 0 a 255, reflejando cómo los monitores mezclan físicamente la luz para producir colores. HSL (hsl(217, 91%, 60%)) expresa el tono como un grado en la rueda de colores (0–360), la saturación como un porcentaje de intensidad del color, y la luminosidad como un porcentaje de negro a blanco. Los tres formatos son totalmente compatibles con el CSS moderno.
¿Qué formato de color debo usar en CSS?
HEX es el más compacto y el más utilizado para colores estáticos. RGBA es preferible cuando necesitas transparencia, por ejemplo rgba(59, 130, 246, 0.5) para una capa semitransparente. HSL es ideal cuando necesitas generar escalas de color de forma programática, ya que puedes incrementar o decrementar el valor de luminosidad para crear tonos más claros o más oscuros manteniendo el mismo tono. Muchos sistemas de diseño modernos usan propiedades personalizadas HSL precisamente por esta razón.
¿Puedo ingresar un valor de color manualmente?
Sí. Escribe cualquier código HEX de seis dígitos válido en el campo de entrada, con o sin el símbolo #. La herramienta analiza el valor automáticamente y actualiza el selector visual, los controles deslizantes RGB y los tres formatos de visualización a la vez. También puedes usar los controles deslizantes para ajustar los canales individuales después de ingresar un código HEX.
¿Los valores de salida están listos para pegar en CSS?
Sí. Los valores HEX, RGB y HSL que muestra esta herramienta están formateados exactamente como valores de color CSS válidos. HEX incluye el prefijo #. RGB está formateado como rgb(r, g, b) con valores enteros. HSL está formateado como hsl(h, s%, l%). Puedes copiar cualquiera de ellos directamente en una hoja de estilos, un archivo de configuración de Tailwind o una declaración de propiedad personalizada CSS.
¿Esta herramienta funciona en dispositivos móviles?
Sí. El selector de color y los controles deslizantes son completamente responsivos y funcionan en dispositivos táctiles. En móvil, toca y arrastra dentro del área de color para seleccionar un tono, y usa los controles deslizantes para ajustar los canales. Todos los valores se actualizan en tiempo real igual que en el escritorio.