Как изменить цвет картинки css

Как через css поменять цвет png изображения?

Доброе утро!
Есть желтое png изображение, хочется, чтобы при наведении становилось черным.
Как можно сделать через css?
Спасибо!

• Вопрос задан более трёх лет назад
• 34603 просмотра

3 комментария

Оценить 3 комментария

Только заменой самого изображения, т.к. цветом можно управлять только svg.
Кристина @KrisIris Автор вопроса
Спасибо!
А svg как поменять? Через hover и background или fill?

цвет svg через fill

svg:hover

Решения вопроса 0
Ответы на вопрос 5

Разработчик
CSS Filters только так, если через CSS.
Ответ написан более трёх лет назад
Комментировать
Нравится 6 Комментировать

Смотря что именно должно получиться. Вы бы скриншоты приложили. Например, если совсем примитивно надо, то просто полупрозрачный png и менять фон дива под ним.

UPD
Исходя из скриншота:
Сделайте png, только инвертированными. Фон иконки совпадает с фоном сайта, а контур изображения прозрачный. И меняйте цвет фона дива, в котором находится иконка.

Как изменить цвет картинки в HTML: простой и эффективный способ

Узнайте, как изменить цвет картинки в html с помощью CSS-фильтрации и фоновых изображений. Улучшите дизайн своих веб-страниц с помощью этого простого руководства.

HTML — это язык разметки, который часто используется для создания веб-страниц. Он позволяет добавлять мультимедийные элементы, такие как изображения, на страницы.

Иногда требуется изменить цвет картинки, чтобы сделать ее более яркой и привлекательной. С помощью HTML и некоторых CSS стилей это можно легко сделать.

В этой статье мы рассмотрим простой и понятный метод изменения цвета картинки в HTML, который позволит вам быстро и легко сделать вашу веб-страницу более красочной и запоминающейся.

Как изменить цвет картинки в HTML

В HTML можно изменять цвет изображения без необходимости изменения самого файла картинки. Для этого можно использовать стили CSS.

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

Затем, используя тег style, можно задать цвет для изображения, например:

Читать далее«Знак больше и меньше в математике: картинки и уроки для понимания направления» — Научитесь правильно использовать знаки больше и меньше в математике с помощью понятных картинок и подробных уроков. Узнайте, в какую сторону обращается каждый из этих знаков и как это влияет на решение уравнений и неравенств.

img filter: grayscale(100%); >

img filter: sepia(100%); >

img filter: brightness(50%); >

Вместо эффектов, приведенных выше можно использовать любой другой CSS-стиль, который подойдет вам.

Теперь вы знаете, как изменить цвет картинки в HTML при помощи CSS стилей.

Необходимое оборудование

Для изменения цвета картинки в HTML вам потребуются следующие инструменты:

• Редактор HTML-кода или текстовый редактор. Можно использовать любой удобный для вас редактор, например, Sublime Text, Notepad++, Visual Studio Code и т.д.
• Изображение, которое вы собираетесь изменить. Оно должно быть сохранено в формате PNG, JPEG или GIF.
• Графический редактор. Например, Adobe Photoshop или GIMP. Данный инструмент поможет вам изменить цвет изображения в необходимом формате, например, RGBA или HEX.

Если вы не очень знакомы с графическими редакторами, то можно воспользоваться онлайн-сервисами для изменения цвета изображений, например, Canva, Lunapic или Online Image Editor.

Шаг 1: Преобразование картинки в формат SVG

Перед тем, как изменить цвет картинки в HTML, необходимо преобразовать ее в формат SVG (Scalable Vector Graphics).

SVG является векторным форматом, который не теряет качество изображения при изменении размера и позволяет легко редактировать цвета и элементы изображения.

Если у вас уже есть SVG-файл, который вы хотите использовать, то переходите к следующему шагу. В случае, если у вас есть другой формат файла, необходимо преобразовать его в SVG. Сделать это можно с помощью онлайн-конвертеров или графических редакторов, таких как Adobe Illustrator.

Важно помнить, что при экспорте в SVG нужно установить правильные настройки, чтобы картинка была максимально пригодна для дальнейшего редактирования и использования в HTML.

Шаг 2: Добавление картинки в HTML-код

Читать далее«Как центрировать заголовок на сайте: правила установки в HTML» — в формате Как центрировать заголовок на сайте: правила установки в HTML.

Для добавления картинки в HTML-код используется тег . Этот тег не имеет закрывающего тега, а вместо этого использует атрибуты для передачи информации о картинке.

Атрибут src обязательный и указывает путь к файлу картинки. Этот путь может быть абсолютным, начиная с корневой директории сайта или относительным, относительно расположения HTML-файла.

Пример использования тега с атрибутом src:

Атрибут alt необязательный и содержит альтернативный текст для случаев, когда картинка не может быть загружена или ее содержание не может быть понятно по какой-либо причине.

При добавлении картинки рекомендуется указывать ее размеры, чтобы браузер мог зарезервировать пространство для картинки до ее загрузки. Для этого используются атрибуты width и height:

Также можно добавить другие атрибуты, такие как title или class, для уточнения информации о картинке или классов для стилизации с помощью CSS.

Шаг 3: Изменение цвета картинки с помощью языка CSS

Чтобы изменить цвет картинки с помощью языка CSS, необходимо задать стиль элементу img с помощью свойства filter:

1. filter: grayscale(100%); — превращает цветную картинку в черно-белую
2. filter: sepia(100%); — делает картинку похожей на старую фотографию с желтоватой окраской
3. filter: invert(100%); — инвертирует цвета на картинке, т.е. все черное становится белым, а белое — черным
4. filter: saturate(200%); — усиливает насыщенность цветов на картинке в два раза
5. filter: hue-rotate(90deg); — поворачивает цветовой круг на 90 градусов, что приводит к изменению оттенков на картинке

Также можно задать цветовой фильтр с помощью свойства background-color:

• background-color: red; — окрасит картинку в красный цвет
• background-color: blue; — окрасит картинку в синий цвет

Важные заметки

1. Необходимость изменения цвета картинки

Иногда возникает необходимость изменить цвет картинки, чтобы подчеркнуть её дизайн или подстроить её под общую цветовую гамму документа или веб-страницы.

2. Метод изменения цвета

Существует несколько способов изменения цвета картинки в HTML, но наиболее простым и понятным является опция «filter» в CSS. Однако, необходимо учитывать, что данная опция не поддерживается в старых версиях браузеров, поэтому перед использованием следует проверить её работоспособность на различных устройствах и браузерах.

3. Подбор цвета

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

4. Ограничение количества картинок

Частое использование картинок на странице может снизить её скорость загрузки, что может оттолкнуть пользователя. Поэтому, необходимо ограничивать количество картинок и убеждаться в их оптимизации для повышения скорости страницы.

Альтернативные методы изменения цвета картинки

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

• CSS Blend Mode — позволяет комбинировать два изображения с разными цветами и создавать новые эффекты;
• CSS Mask Image — позволяет «вырезать» форму изображения и заменить ее другим цветом или изображением;
• CSS Gradients — позволяют создавать более сложные градиенты с несколькими цветами;
• SVG Filters — мощный инструмент для создания различных эффектов, включая изменение цветов изображений.

В зависимости от конкретной задачи, можно выбрать наиболее подходящий метод и достичь нужного эффекта без длительного поиска подходящих изображений.

Видео по теме:

Вопрос-ответ:

Как изменить цвет картинки в HTML?

Для изменения цвета картинки в HTML используется атрибут style. Пример: . В данном случае, цвет картинки изменится на красный.

Можно ли изменить цвет только части картинки?

Да, можно. Для этого нужно использовать маскирование. Пример: . В данном случае, правая половина картинки будет замаскирована черным цветом.

Как изменить цвет через CSS?

Для изменения цвета картинки через CSS используется свойство filter. Пример: . В данном случае, цвет картинки изменится на зеленый (если исходный цвет был красным).

Как изменить цвет градиента?

Для изменения цвета градиента нужно задать соответствующие значения свойствам background и background-image. Пример: background: linear-gradient(to right, #ff0000, #00ff00); background-image: linear-gradient(to right, #ff0000, #00ff00);. В данном случае, градиент будет идти от красного цвета до зеленого.

Как изменить цвет фона?

Для изменения цвета фона используется свойство background-color. Пример: background-color: #ff0000;. В данном случае, фон страницы будет красным цветом.

Можно ли изменить цвет картинки с помощью JavaScript?

Как изменить цвет картинки в Adobe Photoshop?

Для изменения цвета картинки в Adobe Photoshop нужно выбрать слой с картинкой, затем выбрать меню Adjustments -> Hue/Saturation. После этого нужно изменить значения Hue, Saturation и Lightness в соответствующих полях. В данном случае, цвет картинки изменится в соответствии с заданными значениями.

Какие браузеры поддерживают изменение цвета картинки

В настоящее время изменение цвета картинки в HTML поддерживают большинство современных браузеров.

Изменение цвета background картинки поддерживается в браузерах Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, Opera.

Если же речь идет о CSS-свойстве filter, которое позволяет изменять цвет и другие параметры картинки, его поддерживают все современные браузеры, включая Internet Explorer начиная с версии 10.

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

Возможные проблемы и их решение

1. Неверный синтаксис CSS

Если цвет фона, который вы пытаетесь установить, не работает, возможно, вы указали его в неправильном формате. CSS-цвета могут быть указаны в HEX, RGB или HSL форматах. Проверьте, правильно ли указан синтаксис.

2. Конфликт с другими стилями

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

3. Проблемы с кешированием

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

4. Необходимость использования !important

Если ваш стиль не работает и вы уверены, что правильно указали синтаксис и у вас нет конфликта со стилями, возможно, вам нужно использовать !important чтобы сделать ваш стиль приоритетным над остальными.

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

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

Как поменять цвет ссылки при наведении на картинку?

Сейчас меняется, только если на саму ссылку наводишь. И подскажите, пожалуйста, свойство, которое увеличивает яркость картинки при наведении на нее?

Отслеживать
11 1 1 золотой знак 2 2 серебряных знака 8 8 бронзовых знаков
задан 22 мар 2015 в 9:46
61 2 2 серебряных знака 11 11 бронзовых знаков
Т.е. первоначально opacity: 0.7, а при наведении 1.
22 мар 2015 в 9:50

@rodion, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом).

22 мар 2015 в 16:49

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

.temnyi img:hover

Яркость измеряется от нуля до единицы, 1 — это полная яркость (белый цвет), а 0 — первоначальная яркость.

.temnyi img:hover

Отслеживать
ответ дан 22 мар 2015 в 13:05
Узбек Баха Узбек Баха
2,548 4 4 золотых знака 20 20 серебряных знаков 45 45 бронзовых знаков
браузеры, поддерживающие данный параметр caniuse.com/#feat=css-filters
22 мар 2015 в 13:09
@soledar10, ты прав, но другой вариант нет для css.
22 мар 2015 в 14:25

Обычно делают так:

Накладывают поверх картинки через псевдокласс белый фон с opacity:0.2, а потом при наведении через transition его убирают. Создается эффект контрастности и яркости. Можно наложить не белый фон, а цвет — средний от исходной картинки.

Поменять цвет ссылки:

img:hover a

Отслеживать
11 1 1 золотой знак 2 2 серебряных знака 8 8 бронзовых знаков
ответ дан 22 мар 2015 в 16:07
Olga Moscow Olga Moscow
695 5 5 серебряных знаков 16 16 бронзовых знаков

Про фильтры для картинок вам уже ответили. Вот решение вопроса с подсветкой ссылки при наведении на картику. У вас тайтл (.svetly) с position:absolute — вы можете без видимых изменений в отображении поменять местами в разметке его с картинкой и воспользоваться селектором «+» чтобы повлиять на следующий (в разметке) элемент. https://jsfiddle.net/thzcr7qc/

.temnyi < position: relative;margin-bottom: 15px;>.svetlyi < position: absolute; right: 0px; bottom: 5px;background: rgba(0, 0, 0, 0.5); padding: 4px 9px 5px 9px; color: #fff; width: 235px;>.temnyi a:hover, .temnyi a:first-of-type:hover + a

правда теперь наверно у вас возникнет вопрос как при наведении на ссылку применять фильтр к картинке — но это уже другая история.

Как поменять цвет одежды, волос, предметов на фотографии

Как подогнать обложку поста под цветовую палитру профиля? Ведь люди подписываются чаще на те блоги, где лента оформлена красиво и гармонично. Любой неподходящий кадр – и вот уже профиль не такой привлекательный, как хотелось бы.

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

С задачей можно справиться всего за несколько минут. Без долгого изучения премудростей Фотошопа. Покажу на примере нескольких онлайн-сервисов и программ – для ПК и телефона. Все они бесплатные и не наносят на фото свой водяной знак.

Онлайн-сервисы

Онлайн-редакторы – удобный вариант быстрой обработки фото, когда нет времени и желания скачивать десктопные программы и разбираться в их запутанном интерфейсе. Ниже рассказала о трех популярных сайтах, которые позволяют заменить цвет – как на всей картинке в целом, так и для отдельных объектов.

IMGonline

IMGonline – сайт, где собраны отдельные инструменты для работы с фото: конвертация в разные форматы, изменение разрешения, извлечение и редактирование данных EXIF, сжатие, улучшение качества, редактирование, объединение двух картинок в одну, замена фона и цвета и многое другое.

Работают инструменты независимо друг от друга, у каждого своя страница на сайте, то есть это не обычный фоторедактор, где все функции находятся в одном окне.

Замена цвета происходит на всем фото. Чтобы протестировать работу сервиса, я решила поменять цвет неба на картинке. Для замены я выбрала голубой (здесь «Небесный»). В качестве нового оттенка указала зеленый. К сожалению, на фото было несколько людей, чья одежда была также в голубых тонах, поэтому замена произошла и там. Таким образом, нужно быть внимательным. Если видите, что цвет присутствует в нескольких местах, попробуйте сначала удалить ненужные объекты в других сервисах, а затем вернитесь к инструменту IMGonline. Если вы не хотите стирать предметы или людей с фото, тогда воспользуйтесь другим сайтом – Pixlr. О нем я рассказала ниже в статье.

Как пользоваться IMGonline:

1. Перейдите на сайт и выберите файл с фото, хранящийся на ПК. На панели ниже укажите цвет, который нужно убрать – в выпадающем меню либо в формате HEX(код конкретного тона можете узнать по ссылке «открыть палитру»). Таким же образом выберите новый оттенок чуть ниже. Интенсивность, сглаживание и усиление можете пока оставить как есть.
2. В следующем блоке настроек укажите формат изображения, который хотите получить на выходе. Также дайте знать системе, хотите ли вы сохранить EXIF и другую информацию из свойств оригинального фото (в эти данные, в том числе, входят координаты места, где проводилась съемка). Щелкните «ОК».
3. Обработка занимает 5-30 секунд. Далее откроется страница с результатом обработки. Можете сразу скачать фото с помощью ссылки либо открыть его в браузере для предпросмотра.
4. В моем случае замена получилась весьма качественная (не считая того, что новый цвет применился и к другим объектам с указанным оттенком). Если открыли картинку в браузере, можете не возвращаться на сайт IMGonline, а сразу щелкнуть правой кнопкой по фото и выбрать «Сохранить изображение как».

UseDevTools (Usetoolz.com)

В сервисе UseDevTools есть инструменты для работы с фото, паролями (их генерация), форматами JSON и XML, Javascript и CSS. Замена цвета здесь происходит также на всей картинке. Но плюс в том, что оттенков гораздо больше на выбор – доступна целая палитра.

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

Как пользоваться сервисом:

1. Перейдите по ссылке на сайт Usetoolz.com и нажмите на иконку в виде листа со стрелкой, чтобы загрузить фото в сервис. Либо перетащите файл на серое окошко. Также можно вставить изображение из буфера обмена зажав клавиши «Ctrl + V». Когда картинка загрузится, щелкните по палитре.
2. Укажите исходный цвет, который нужно удалить («Основной»), и новый («Вспомогательный»). Нажмите «Выбрать».
3. Теперь кликните по кнопке «Операция: Заменить цвет» на той же верхней панели. Оцените результат. Если качество вас не совсем устраивает, можете поэкспериментировать со значением «Допуска».
4. Также при желании воспользуйтесь двумя другими инструментами – для замены цвета с элементами прозрачности. Когда закончите обработку, щелкните по дискете для скачивания фото на ПК.

Pixlr

Если нужно заменить цвет только одного объекта (чтобы оттенок на остальных участках остался прежним), воспользуйтесь онлайн-фоторедактором Pixlr. Здесь есть две функции для раскрашивания предметов в другие тона:

• собственно, «Замена цвета» (для ручной обработки кистью);
• «Заливка» (автоматическая – вы просто выбираете новый оттенок, а затем кликаете по области, которую нужно закрасить).

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

Все основные функции редактора бесплатные. Но есть и вариант с подпиской «Премиум» за 5$ в месяц. Дополнительно вы получаете 50 000 шаблонов, шрифтов, наклеек, наложений; доступ к инструментам искусственного интеллекта (например, удаление фона в один клик); эксклюзивные уроки по обработке фото.

Как пользоваться сервисом:

1. Перейдите на сайт Pixlr и запустите продвинутый редактор.
2. Откройте фото при помощи одноименной кнопки либо вставьте ссылку на снимок, опубликованный в интернете («Загрузить URL»).
3. После загрузки фото на сервис, включите инструмент «Замена цвета» на панели слева.
4. Укажите размер кисти, уровень непрозрачности, допуск.
5. Выберите цвет на палитре, а затем вручную мышкой закрасьте нужные места.
6. Если хотите воспользоваться автоматической функцией раскрашивания, включите инструмент «Заливка» на той же панели слева. Выберите цвет на палитре.
7. Далее щелкайте по местам, которые нужно закрасить. Сервис будет сам распознавать границы объекта и заливать их выбранной краской. Далее при необходимости возьмите тот же инструмент «Замена цвета» и вручную скорректируйте границы, если что-то пошло не так.
8. Когда завершите обработку, кликните «Файл». В меню выберите «Сохранить» либо «Экспорт».
9. Укажите формат будущего изображения: jpg, png, webp, pdf (вкладка «Документ»). Далее настройте качество, разрешение картинки. Нажмите «Сохранить как» и выберите папку для скачивания файла в «Проводнике Windows».

Программа Akvis Coloriage для ПК

Akvis Coloriage – программа, которую можно использовать как для замены цвета на цветных фотографиях (обработать можно отдельные объекты), так и для раскрашивания черно-белых снимков (только местами или полностью, например, чтобы отреставрировать старое фото). Причем за один раз можно применить несколько цветов.

Закрашивание полуавтоматическое, но есть кисти для ручной корректировки. Программа сама распознает границы выделенного объекта (даже если вы обрисовали его не так четко, как хотелось бы – это действительно очень тяжело сделать мышкой, так как рука может дрогнуть в любой момент).

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

В фоторедактор можно загрузить такие форматы фото: jpeg, tiff, png, bmp.

Программу можно использовать как отдельное приложение и как плагин, который встраивается в другие фоторедакторы: AliveColors, Adobe Photoshop, Photoshop Elements, Corel PaintShop Pro и некоторые другие.

Весь функционал доступен бесплатно только первые 10 дней. Это тестовый период. Далее придется приобрести лицензию (один платеж, и вы получаете доступ навсегда – для 2 компьютеров). Стоит от 3900 рублей (до домашнего использования) до 9900 (для бизнеса).

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

1. Нажмите на кнопку «Открыть изображение» и выберите фото, хранящееся на жестком диске ПК.
2. Далее укажите новый цвет на палитре.
3. Либо выберите оттенок в библиотеке выше.
4. Если искомый цвет уже присутствует на фото, нажмите на инструмент «Пипетка» и щелкните по нужному оттенку на картинке.
5. Нажмите правой кнопкой мыши на фото – настройте размер кисти.
6. Теперь закрасьте участок, цвет которого хотите изменить – во вкладке «До». С помощью карандаша обведите контур объекта. Если нужно что-то подкорректировать, воспользуйтесь инструментом «Ластик» (он второй на панели слева). С помощью кисти в виде щита проведите замкнутую линию вокруг цветного контура. Так вы дадите программе понять, что остальные участки фото закрашивать не нужно. Если вдруг в процессе поняли, что хотите другой цвет (не тот, что выбрали изначально), укажите его на палитре справа внизу либо в библиотеке, а затем включите инструмент с тюбиком (тот, что с мерцанием поменяет цвет сразу для всех штрихов). Теперь кликните мышкой по цветной линии – оттенок автоматически поменяется на другой.
7. Щелкните по кнопке «Play» справа вверху. Подождите несколько секунд.
8. В итоге во вкладке «После» появится картинка с уже закрашенным участком. При необходимости подкорректируйте автоматическое закрашивание вручную – с помощью кистей и ластика на панели слева. Когда все будет готово, нажмите на кнопку в виде файла со стрелкой вниз. Укажите папку для сохранения фото.

Мобильные приложения

Нет доступа к компьютеру? Не беда – выполните все манипуляции на смартфоне. Ниже три приложения вам в помощь. Для iOS можете также использовать «Изменение цвета фото» от Uniqo Lab.

PicsArt

PicsArt (Андроид, iOS) – один из популярных мобильных фоторедакторов с уймой инструментов и функций. От настройки стандартных параметров (яркость, контраст, насыщенность и т. д.) до изменения фона и цветов на снимках. Также здесь есть различные фильтры, эффекты, стикеры (можно создавать даже собственные наклейки), ретушь селфи, макияж, инструмент для размытия фона, дизайнерские шрифты для текста, редактор мемов, сотни шаблонов для контента в соцсетях.

Можно редактировать не только фото, но и видео: создание и монтаж роликов, в том числе рилзов, добавление музыки, видеоколлажи, глитч-эффекты, слайд-шоу, кадрирование и т. д.

К сожалению, не все опции бесплатные. Доступ к полному функционалу только по подписке: 299 рублей в месяц либо 1990 в год. Есть тестовый период 7 дней. Покупать платный вариант, конечно же, необязательно. Бесплатного набора функций хватит с головой для скромных нужд, в том числе для замены цветов на фото. Для этих целей есть аж 2 инструмента:

1. «Возмещение». Вы выбираете исходный цвет и оттенок, который должен прийти на замену. Сервис меняет указанный тон на всей картинке (выбрать один объект для обработки не получится).
2. «Ретушь». Здесь вы можете изменить оттенок кожи, цвет волос и глаз.

Как перекрасить объект в этом приложении:

1. Запустите программу и при желании сразу в ней зарегистрируйтесь. Создайте учетную запись с помощью электронной почты либо за счет готовых аккаунтов Вконтакте или Google. Если пока не хотите, тапните «Пропустить» справа вверху.
2. Закройте предложение пройти тестовый период платной версии либо, собственно, воспользуйтесь им.
3. Разрешите программе доступ к мультимедиа.
4. На экране появятся фото из галереи. Выберите нужную картинку. По умолчанию будут показываться недавние снимки – вы можете открыть любую папку (альбом).
5. Зайдите в раздел «Эффекты».
6. Выберите «Цвет», а затем «Возмещение».
7. С помощью круга укажите цвет, который вы хотите закрасить.
8. Далее выберите новый оттенок на палитре и его интенсивность. Тапните по галочке, чтобы сохранить изменения.
9. Поработайте при желании с другими инструментами фоторедактора, добавьте стикеры, отретушируйте снимок. Когда все будет готово, тапните по стрелке вверху, чтобы сохранить картинку в галерею.
10. При необходимости сразу отправьте фото друзьям – в мессенджере или в соцсети.

Как поменять цвет волос и глаз в инструменте «Ретушь»:

1. Выберите фото на главной странице приложения. Далее откройте раздел «Ретушь».
2. Укажите, что именно хотите отредактировать: кожа, волосы, глаза. Я рассмотрю второй вариант.
3. Выберите способ распознавания волос: автоматический или ручной (в это случае самостоятельно закрасьте пряди). Укажите цвет и его интенсивность. Далее кликните по галочке для сохранения изменений и скачайте фото в галерею.

Изменить цвет

Приложение «Изменить цвет» – простой вариант для тех, кто не хочет обрабатывать фото дополнительными инструментами, которые есть в том же PicsArt. Легкая программа с интуитивно понятным интерфейсом, которая не отнимает память на телефоне.

Можно выбрать не просто цвет, а его конкретный оттенок на палитре. Кисть тонко настраивается: ширина, степень размытия для более естественной обработки. Если нет готового фото, просто сделайте моментальный снимок на камеру. Обработанную картинку можно сохранить в форматах jpg и png.

Приложение бесплатное, подписку оформить не предлагают, но есть реклама.

Как заменить цвет на фото в этой программе:

1. Запустите приложение и выберите способ загрузки фото: галерея, моментальный снимок на камеру, приложение «Гугл Фото», папка в памяти устройства.
2. Тапните по кисти, чтобы открыть редактор.
3. Выберите цвет для замены на палитре, уровень непрозрачности.
4. Укажите ширину кисти, степень размытия. Если объект для закрашивания слишком детальный или имеет нечеткие границы, советую взять высокий уровень размытия (черное обрамление на круге станет шире). Так обработка получится более естественной: если и зайдете за края, это будет не так заметно.
5. Закрасьте объект кистью, при необходимости приближая картинку свайпами. Если вышли за границы, переключитесь на ластик и сотрите лишние линии. Когда закончите обработку, скачайте фото с помощью специальной кнопки.
6. Введите название и выберите формат. Тапните «Экспорт».

Change Photo Color от VicArt

В Change Photo Color тоже только одна функция – изменение цветов на фото. Но для ее реализации можно использовать целых 4 инструмента в зависимости от цели обработки: «RGB Tool», «BG Color», «Splash» и «Swap».

«RGB Tool» подойдет для корректировки цветов в целом на всей картинки. Вы можете выбрать, какой тон должен преобладать на фото: красный (Red), зеленый (Green) или синий (Blue).

«BG Color» изменит цвет заднего плана. Этот инструмент сам его распознает и закрашивает нужным вам оттенком, но, к сожалению, не всегда удачно. Скорректировать границы фона самостоятельно не получится.

«Splash» поможет сделать черно-белый снимок – полностью или частично.

«Swap» позволит изменить цвет уже отдельных объектов – их вы закрашиваете самостоятельно кистью выбранного размера.

Перед или после обработки можно обрезать фото под нужный размер публикации в соцсети – пост, сториз, видео и т. д.

Программа бесплатная, но есть реклама.

Итак, заменить цвет можно на всем фото либо для конкретных объектов/участков. В первом случае подойдут онлайн-сервисы IMGonline и UseDevTools. Для точечной обработки возьмите сайт Pixlr либо десктопную программу Akvis Coloriage. Простые мобильные приложения без дополнительных функций: Change Photo Color от VicArt и «Изменить цвет». Также можете поработать в полноценном мобильном фоторедакторе PicsArt. Там замена цвета – лишь одна из многочисленных функций.