Convertidor de Colores - HEX a RGB, HSL y HSV Online
Convierte colores entre formatos HEX, RGB, HSL y HSV con vista previa en vivo. Selecciona colores visualmente y copia códigos CSS.
Preguntas Frecuentes
Que es un Convertidor de Colores?
Un Convertidor de Colores es una herramienta que transforma valores de color entre diferentes formatos como HEX, RGB, HSL, HSV y CMYK. Cada formato representa los colores de manera diferente: HEX usa notacion hexadecimal (#FF5733), RGB usa valores rojo-verde-azul (rgb(255, 87, 51)), HSL usa tono-saturacion-luminosidad (hsl(14, 100%, 60%)), y CMYK se usa para impresion. Esta herramienta permite una conversion fluida para desarrollo web, diseno y trabajo de accesibilidad.
Cual es la diferencia entre HEX, RGB y HSL?
HEX es un formato hexadecimal compacto de 6 digitos (#RRGGBB) comunmente usado en CSS y herramientas de diseno. RGB (Rojo, Verde, Azul) usa valores decimales de 0-255 para cada canal, haciendolo intuitivo para manipulacion programatica. HSL (Tono, Saturacion, Luminosidad) es mas amigable para humanos: el tono es el color (0-360 grados), la saturacion es la intensidad (0-100%), y la luminosidad es el brillo (0-100%). Usa HEX para notacion compacta, RGB para calculos y HSL cuando ajustes propiedades de color visualmente.
Cual es la diferencia entre HSV y HSL?
Tanto HSV (Tono, Saturacion, Valor) como HSL (Tono, Saturacion, Luminosidad) usan el mismo componente de tono (0-360 grados), pero difieren en como representan el brillo. En HSV, el Valor maximo (V=100%) da colores puros, mientras que en HSL, la Luminosidad maxima (L=100%) siempre resulta en blanco. HSV es preferido por disenadores graficos y selectores de color porque se mapea mas intuitivamente a la mezcla de pintura. HSL es mejor para CSS porque ajustar la luminosidad crea tintes y sombras predecibles.
Que es la relacion de contraste WCAG y por que importa?
La relacion de contraste WCAG (Pautas de Accesibilidad para el Contenido Web) mide la diferencia de luminancia entre los colores de primer plano y fondo. La relacion va de 1:1 (sin contraste) a 21:1 (negro sobre blanco). Para cumplimiento de accesibilidad, el texto normal requiere 4.5:1 (AA) o 7:1 (AAA), mientras que el texto grande (18px+ negrita o 24px+) requiere 3:1 (AA) o 4.5:1 (AAA). El contraste adecuado asegura que el contenido sea legible para usuarios con discapacidades visuales y en diversas condiciones de iluminacion.
Que son las armonias de color y como las uso?
Las armonias de color son combinaciones de colores esteticamente agradables basadas en sus posiciones en el circulo cromatico. Los colores complementarios estan opuestos entre si (ej., azul y naranja), creando alto contraste. Los colores analogos son adyacentes (ej., azul, azul-verde, verde), creando disenos armoniosos. Los colores triadicos forman un triangulo (ej., rojo, amarillo, azul), ofreciendo variedad equilibrada. Usa complementarios para enfasis, analogos para disenos cohesivos y triadicos para interfaces vibrantes.
Es seguro y privado este convertidor de colores?
Si. Esta herramienta se ejecuta 100% en tu navegador usando JavaScript del lado del cliente. Ningun dato de color, paletas o informacion de diseno se envia a ningun servidor. Todas las conversiones, calculos de contraste y generacion de paletas suceden localmente en tu dispositivo. Esto lo hace seguro para trabajar con colores de marca confidenciales, proyectos de clientes o cualquier trabajo de diseno sensible.
Ejemplos de Codigo
// HEX to RGB
const hexToRgb = (hex) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
};
// RGB to HSL
const rgbToHsl = (r, g, b) => {
r /= 255; g /= 255; b /= 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) { h = s = 0; }
else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
case g: h = ((b - r) / d + 2) / 6; break;
case b: h = ((r - g) / d + 4) / 6; break;
}
}
return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
};
console.log(hexToRgb('#FF5733')); // { r: 255, g: 87, b: 51 }
console.log(rgbToHsl(255, 87, 51)); // { h: 11, s: 100, l: 60 }