Convertir códigos de color
Formato #RRGGBB. El más usado en CSS
Rojo, Verde, Azul (0-255)
Tono, Saturación, Luminosidad. Ajuste intuitivo de color
Tono, Saturación, Valor. Usado en herramientas gráficas
Espacio de color CSS moderno perceptualmente uniforme
Incluye canal alfa (transparencia)
El selector de colores (Color Picker) es una herramienta en línea que permite convertir códigos entre diversos modelos de color y seleccionar colores visualmente. Los códigos de color precisos son esenciales en el desarrollo web, diseño UI/UX y diseño gráfico. Esta herramienta admite los principales formatos de color como HEX, RGB, HSL, HSV y OKLCH, y permite explorar colores mediante controles deslizantes intuitivos y paletas, además de copiar códigos instantáneamente. También admite el canal alfa (transparencia) para trabajar con colores semitransparentes.
Seleccionar un color
Arrastre el deslizador de color o haga clic en el área de selección de color para elegir el color deseado. También puede introducir directamente un código HEX u otro formato.
Verificar los formatos
El color seleccionado se convierte automáticamente y se muestra en todos los formatos: HEX, RGB, HSL, HSV y OKLCH.
Ajustar la transparencia
En la pestaña alfa puede ajustar la transparencia en un rango de 0 a 100 % para crear colores semitransparentes.
Copiar el código
Al hacer clic en el valor del formato de color que necesite, se copiará automáticamente al portapapeles. Péguelo directamente en su CSS, herramientas de diseño, etc.
HEX es una notación hexadecimal en formato #RRGGBB, la más comúnmente utilizada en CSS. RGB expresa el color mediante la combinación de rojo (0-255), verde (0-255) y azul (0-255). HSL lo expresa mediante tono (Hue, 0-360), saturación (Saturation, 0-100 %) y luminosidad (Lightness, 0-100 %), siendo el más cercano a la percepción intuitiva humana.
OKLCH es un espacio de color CSS moderno perceptualmente uniforme (perceptually uniform). En el HSL tradicional, incluso con la misma saturación y luminosidad, el brillo percibido variaba según el tono. OKLCH resuelve este problema, lo que lo hace ventajoso para generar paletas de colores consistentes. Está incluido en el estándar CSS Color Level 4.
El valor alfa es un número entre 0 (completamente transparente) y 1 (completamente opaco) que indica la transparencia del color. En CSS se utiliza como rgba(59, 130, 246, 0.5), y en HEX se añaden 2 dígitos al final como #3B82F680. Se emplea en superposiciones, sombras, fondos, entre otros.
Según las directrices WCAG 2.1, la relación de contraste de luminosidad entre el texto y el fondo debe ser de al menos 4,5:1 para texto normal y 3:1 para texto grande. Al seleccionar colores, es importante verificar el contraste con el color de fondo para garantizar que las personas con discapacidad visual también puedan leer el contenido.
Al introducir en esta herramienta el código HEX copiado de herramientas de diseño como Figma o Sketch, se convierte automáticamente a formatos utilizables en CSS como RGB y HSL. Gestionar los colores mediante variables CSS facilita el cambio de tema, y el formato HSL es conveniente para ajustar la luminosidad y la saturación.