Convertidor de Color

Cómo usarlo

Un color en la web generalmente se escribe en uno de tres formatos: HEX, RGB o HSL. HEX empaqueta un color en una sola cadena — un # seguido de seis dígitos hexadecimales, tomados en pares para rojo, verde y azul, cada par oscilando entre 00 (ninguno) a FF (completo). RGB explica los mismos tres canales como números simples en lugar de pares hexadecimales, con rojo, verde y azul cada uno ejecutándose de 0 a 255. HSL toma un ángulo diferente: en lugar de intensidades de canal, describe el matiz como una posición alrededor de una rueda de color de 360°, luego saturación y luminosidad como porcentajes, que se asignan mucho más naturalmente a cómo las personas realmente piensan en el color. Cada formato persiste porque es mejor adecuado para un trabajo diferente, no porque uno reemplazó a otros. HEX es compacto y fácil de pegar en CSS o una herramienta de diseño — seis caracteres capturan un color exacto sin ambigüedad. RGB se asigna directamente a cómo las pantallas realmente producen color, mezclando luz roja, verde y azul a nivel de píxeles, y se extiende limpiamente a rgba() al agregar un cuarto canal alfa para transparencia. HSL es el que los humanos buscan cuando ajustan un color en lugar de especificarlo desde cero: aumentar o disminuir la luminosidad da un tono predeciblemente más claro u oscuro, y deslizar el matiz se mueve suavemente alrededor de la rueda de color para construir una paleta coincidente. Un ejemplo concreto aclara la relación. Toma un azul medio: como HEX es #3B82F6. Dividido en pares, 3B, 82 y F6 se convierten de hexadecimal a decimal como 59, 130 y 246 — exactamente el mismo color escrito como rgb(59, 130, 246). Convierte esos mismos valores rojo, verde y azul en matiz, saturación y luminosidad y obtienes hsl(217°, 91%, 60%): un matiz de 217° se encuentra en el segmento azul de la rueda de color, 91% saturación significa que es un azul vívido y puro, y 60% de luminosidad lo coloca aproximadamente en el medio del rango de luminosidad de negro a blanco. Las tres cadenas describen el color de píxel idéntico. Para usar el convertidor, escribe un color en la entrada en cualquiera de los tres formatos — un código HEX, un valor rgb() o un valor hsl() — o haz clic en el selector de color y elige visualmente. Tan pronto como se reconoce un color válido, los otros dos formatos se actualizan instantáneamente junto con una muestra de vista previa en vivo, para que puedas confirmar que el resultado coincida con lo que esperas antes de copiarlo. Haz clic en el icono de copiar junto a cualquier valor para obtenerlo en ese formato exacto para pegar en CSS, una herramienta de diseño o código. Convertir entre formatos surge constantemente en el trabajo real: hacer coincidir el color exacto de una marca cuando un cliente entrega un código HEX pero tu herramienta de diseño quiere controles deslizantes HSL, construir un tema CSS donde necesites valores RGB consistentes para superposiciones rgba(), ajustar la luminosidad de un color base hacia arriba o hacia abajo un pequeño porcentaje para crear un estado de hover o activo convincente, y verificar que los colores de texto y fondo tengan suficiente contraste para accesibilidad comparando sus valores de luminosidad.

Preguntas frecuentes

¿Qué es un código de color HEX?

Un código de color HEX es un símbolo hash seguido de seis dígitos hexadecimales, como #3B82F6. Los seis dígitos forman tres pares, cada par establece la intensidad de rojo, verde y azul en una escala de 00 (ninguno) a FF (completo, 255 en decimal). Porque es compacto e inequívoco, HEX es la forma más común de especificar colores exactos en CSS y herramientas de diseño.

¿Cuál es la diferencia entre RGB e HSL?

RGB describe un color como tres intensidades de canal — rojo, verde y azul, cada uno de 0 a 255 — coincidiendo con cómo las pantallas mezclan luz para producir color. HSL describe el mismo color como matiz (su posición en una rueda de color de 360°), saturación (qué tan vívido o apagado es) y luminosidad (qué tan cerca de negro o blanco). RGB es preciso para pantallas; HSL es más fácil para que los humanos ajusten intuitivamente.

¿Cómo convierto HEX a RGB?

Divide los seis dígitos HEX en tres pares — el primero para rojo, el segundo para verde, el tercero para azul — y convierte cada par de hexadecimal a decimal para obtener un número de 0 a 255. Por ejemplo, #3B82F6 se divide en 3B, 82 y F6, que se convierten en 59, 130 y 246, dando rgb(59, 130, 246). Este convertidor hace las matemáticas instantáneamente mientras escribes.

¿Qué hace el canal alfa?

El canal alfa controla la transparencia, agregado como un cuarto valor junto a rojo, verde y azul en rgba() o hsla(), oscilando de 0 (completamente transparente) a 1 (completamente opaco). Permite que un color se mezcle con lo que se encuentra detrás de él — útil para superposiciones, bordes sutiles o atenuar un elemento sin cambiar su color subyacente. HEX también lo admite, como un par 4º u 8º de dígitos opcional.