Cambiar el matiz de un color o imagen

Cambiar el matiz de un color

Escribe o pega un valor HEX, RGB o HSL, o elige uno con el selector de color. Después mueve el control deslizante, arrastra el punto de la rueda de color o pulsa un ángulo rápido. La herramienta muestra el color original y el desplazado con sus ángulos de matiz, y puedes copiar el resultado como HEX, RGB o HSL.

• El desplazamiento va de -180° a +180°. Un número mayor da la vuelta a la rueda.
• Con el método HSL, la saturación y la luminosidad no cambian, así que el color nuevo tiene la misma intensidad y el mismo brillo.
• El gris, el negro y el blanco no tienen matiz, por lo que no cambian.

Cambiar el matiz de una imagen

Pasa a Imagen y suelta un archivo o elige uno. Todos los píxeles giran el mismo ángulo, de modo que un cielo azul puede pasar a verde o naranja sin perder detalle. Las zonas transparentes de un PNG siguen siendo transparentes.

• Funciona con archivos PNG, JPG, WebP, AVIF y BMP.
• Cambia toda la imagen. Para recolorear solo un objeto, selecciónalo antes en un editor de imágenes.
• No se sube nada. El trabajo se hace en tu navegador.

Elige el ángulo según la relación de color que busques

Algunos ángulos dan parejas de color clásicas. Úsalos como punto de partida y ajusta unos grados hasta que el resultado encaje con tu diseño. Si buscas colores complementarios, el ángulo es 180°.

Método HSL o hue-rotate() de CSS

El método por defecto gira el matiz en HSL, así que se conserva la luminosidad. El filtro hue-rotate() de CSS funciona de otra forma: multiplica los valores RGB por una matriz fija, y un color puede quedar mucho más oscuro o más claro tras el giro. El rojo puro girado 60° se convierte en amarillo con el método HSL y en un marrón oscuro con el método CSS. Elige el método CSS cuando el resultado deba coincidir con un filtro de tu hoja de estilos, y el método HSL cuando quieras mantener la luminosidad.

• Con el método CSS activo, copia filter: hue-rotate(30deg); directamente en tu CSS.
• Compara los dos métodos con el mismo color antes de decidir.

Para qué sirve un cambio pequeño de matiz

Diseñadores y artistas usan el desplazamiento de matiz para algo más que recolorear. Un giro de 5 a 15 grados mantiene el color en su familia y le da algo de variedad.

• Pintores y artistas de pixel art llevan las sombras hacia un matiz y las luces hacia otro para que el sombreado no se vea plano.
• Los diseñadores de interfaces prueban colores de acento girando 30 grados el color de marca.
• Quienes crean juegos o fotos de producto recolorean un sprite o una foto sin volver a dibujarlos.