Посещая различные сайты вы часто видите как у одного и того же товара можно изменить такое свойство как цвет. Одни разработчики для каждого цвета используют отдельные полноценные фото товаров заранее перекрашенные или сфотографированные, другие накладывают только часть цвета на существующую картинку, таким образом перекрывая ее.

Некоторые даже делают серверную часть и перекрашивают линии заранее продуманные в png файле. Но технологии не стоят на месте и с каждым дней в некоторых областях работа упрощается и перекладывается на плечи современного веб-браузера.

Например нам необходимо на сайте сделать выбор цвета автомобиля. Мы будем использовать blend-mode на CSS.

Возьмем такой код HTML:

<input type="color" value="#0000ff">

И следующий, простой, код стилей CSS:

body {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/9284591662_38b0438418_h.jpg) 25%/cover;
    height: 100vh;
    margin: 0;
}
 
input {
    padding: 0;
    border: none;
    position: absolute;
    width: 100%;
    height: 100%;
    mix-blend-mode: hue;
    cursor: pointer;
}
 
::-webkit-color-swatch {
    border: none;
}
 
::-webkit-color-swatch-wrapper {
    padding: 0;
}
 
::-moz-color-swatch,
::-moz-focus-inner {
    border: none;
}
 
::-moz-focus-inner {
    padding: 0;
}

Живой пример (для изменения цвета достаточно кликнуть на машину):

Единственным минусом blend-mode является то, что нельзя брать черный и белый цвет. Вы можете изменить фильтр на любой другой и выбрать вариант, который вам подойдет больше всего.