Conversor de colores

La conversión de colores entre HEX, RGB y HSL implica transformaciones matemáticas entre diferentes modelos de color. Los colores HEX usan notación hexadecimal (#RRGGBB) donde cada par representa un canal de color (Rojo, Verde, Azul) con valores de 00 a FF (0-255 en decimal). RGB es una representación numérica directa de los mismos tres canales. HSL (Tono, Saturación, Luminosidad) usa un sistema de coordenadas cilíndrico. El Tono es un ángulo de 0-360 grados en la rueda de colores, la Saturación es un porcentaje que indica la pureza del color, y la Luminosidad indica qué tan claro u oscuro es el color. Convertir RGB a HSL implica calcular los valores máximo y mínimo de los canales, y luego derivar el tono de las diferencias entre canales. Todas las conversiones en esta herramienta usan fórmulas matemáticas precisas implementadas en JavaScript, con limitación de valores de entrada para prevenir resultados inválidos (por ejemplo, los valores RGB se restringen a 0-255, el tono HSL a 0-360). La vista previa del color en vivo se actualiza instantáneamente usando CSS background-color.

1. Ingresa un valor de color en cualquier formato soportado: HEX (#ff6600), RGB (255, 102, 0) o HSL (24, 100%, 50%). 2. La herramienta convierte instantáneamente a todos los demás formatos. 3. La vista previa en vivo muestra el color seleccionado. 4. Haz clic en cualquier valor de salida para copiarlo a tu portapapeles. 5. Ajusta los valores de cada canal usando los campos de entrada. Consejo: La notación abreviada HEX (por ejemplo, #f60) se expande automáticamente a la forma completa (#ff6600).

HEX: El formato más común en desarrollo web. Usado en CSS, herramientas de diseño y guías de marca. Cada canal va de 00 (nada) a FF (intensidad máxima). RGB: Modelo de color aditivo donde se combinan luz roja, verde y azul. (0,0,0) es negro, (255,255,255) es blanco. Usado en pantallas digitales y la función CSS rgb(). HSL: Más intuitivo para diseñadores. El Tono selecciona el color base en la rueda, la Saturación controla la vivacidad (0% = gris), y la Luminosidad controla el brillo (0% = negro, 100% = blanco). CSS soporta la función hsl() de forma nativa.