Меняем цвета и оттенки

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

Есть png-иконки, например, из вк, синего цвета. Как с помощью css изменить его на белый?

P.S: нагуглил про filter: hue-rotate() , но с белым цветом это походу не вариант.

Ответы (2 шт):

Вы можете использовать css-фильтры:

• grayscale конвертирует цвета в ч/б
• sepia создает эффект сепии
• saturate задает насыщенность
• hue-rotate меняет цвета изображения в зависимости от заданного угла. Угол поворота определяет на сколько изменится данный цвет в цветовом круге от красного до фиолетового. Значение задается в градусах (0deg — 360deg)
• invert инвертирует цвета
• opacity задает прозрачность элемента
• brightness изменяет яркость изображения
• contrast изменяет контрастность изображения
• blur создает эффект размытости
• drop-shadow создает тень

Примечание: фильтры можно комбинировать между собой

Материал для прочтения: habrahabr

Если фон прозрачный, то можно выкрутить картинке яркость. Например:

Но остаётся некоторая неуверенность, до какого же уровня выкручивать, чтобы наверняка исчезли все оттенки, кроме белого. А вот brightness(0) даст полностью чёрную картинку, которую легко инвертировать:

filter: brightness(0) invert(1); 

Источник

Как изменить цвет PNG изображения с помощью CSS

Самый легкий способ для изменения цвета PNG изображения — это использование свойства filter.

Свойство filter применяет визуальные эффекты к элементу (изображению).

Оно имеет следующие значения:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() | initial | inherit;

С помощью этих значений мы можем изменить цвет изображения.

Фильтры являются новыми для браузеров и поддерживаются только очень современными браузерами. Можно использовать фильтры вместе с -Webkit-filter для Safari, Google Chrome и Opera.

Давайте попробуем пошагово изменить цвет изображения:

1. Создайте HTML.

• Скопируйте и вставьте ссылку изображения в основную часть (body section). Здесь мы создаем две изображения с классами «image1» и «image2».

body> img src="https://www.sccpre.cat/mypng/detail/122-1229311_bird-feathers-flying-macaw-wings-birds-with-white.png" width="500px" height="250px" alt="filter applied" /> " src="https://ru.w3docs.com/snippets/css/%3C/span%3Ehttps://www.sccpre.cat/mypng/detail/%3Cspan%20%3E122%3C/span%3E-%3Cspan%20%3E1229311%3C/span%3E_bird-feathers-flying-macaw-wings-birds-with-white.png%3Cspan%20%3E" width="500px" height="250px" alt="filter applied" /> 

2. Добавьте CSS.

Теперь добавляем стили к классам «Image1» и «Image2».

• Задайте ширину этих изображений с помощью свойства width.
• Добавьте свойство filter , чтобы изменить цвет изображения.
• Используйте значение «invert», которое инвертирует первое изображение. Здесь устанавливаем 100% для полного инвертирования изображения.
• Используйте значение «sepia» (100%), которое превращает второе изображение полностью в сепию.

Посмотрим, каким получился результат:

Пример

html> html> head> title>Измените цвет изображения title> style> img < width:40%; float:left; > .image1 < filter: invert(100%); -webkit-filter: invert(100%); > .image2 < filter: sepia(100%); -webkit-filter: sepia(100%); > style> head> body> h2>Измените цвет PNG изображения h2> img class="image1" src="https://www.sccpre.cat/mypng/detail/122-1229311_bird-feathers-flying-macaw-wings-birds-with-white.png" width="500px" height="250px" alt="filter applied" /> img class="image2" src="https://www.sccpre.cat/mypng/detail/122-1229311_bird-feathers-flying-macaw-wings-birds-with-white.png" width="500px" height="250px" alt="filter applied" /> body> html>

Рассмотрим другой пример, где использованы восемь значений свойства filter:

Пример

html> html> head> title>Заголовок документа title> style> body < background-color:#03030a; min-width: 800px; min-height: 400px > img < width:20%; float:left; margin:0; > /*Filter styles*/ .saturate < filter: saturate(3); -webkit-filter: saturate(3); > .grayscale < filter: grayscale(100%); -webkit-filter: grayscale(100%); > .contrast < filter: contrast(160%); -webkit-filter: contrast(160%); > .brightness < filter: brightness(0.25); -webkit-filter:brightness(0.25); > .blur < filter: blur(3px); -webkit-filter: blur(3px); > .invert < filter: invert(100%); -webkit-filter: invert(100%); > .sepia < filter: sepia(100%); -webkit-filter: sepia(100%); > .huerotate < filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); > .opacity < filter: opacity(50%); -webkit-filter: opacity(50%); > style> head> body> h2>Измените цвет PNG изображения h2> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="original"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="saturate" class="saturate"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="grayscale" class="grayscale"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="contrast" class="contrast"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="brightness" class="brightness"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="blur" class="blur"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="invert" class="invert"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="sepia" class="sepia"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="huerotate" class="huerotate"> img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="opacity" class="opacity"> body> html>

Можете также применить следующую технику:

body> div >div> div >div> body> Начните применить стили для IDs. Установите filter: hue-rotate; к ID "changed

#changed < -webkit-filter : hue-rotate(180deg); filter : hue-rotate(180deg); >

Результат будет выглядеть следующим образом:

html> html> head> title>Измените цвет изображения title> style> #original, #changed < background: url('https://image.freepik.com/free-photo/orange-red-siamese-fighting-fish-betta-splendens-isolated-white-background_51519-539.jpg'); background-size: cover; width: 30%; margin: 0 10% 0 10%; padding-bottom: 28%; float: left; > #changed < -webkit-filter : hue-rotate(180deg); filter : hue-rotate(180deg); > style> head> body> h2>Измените цвет PNG изображения h2> div id="original"> div> div id="changed"> div> body> html>

Источник

Перекрашиваем картинки с помощью CSS

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

А ещё он может поменять цвет любого элемента на странице — перекрасить его в сепию, сделать чёрно-белым или добавить насыщенности. Про это и будет сегодняшняя статья.

Меняем оттенок цвета

Каждое изображение на экране состоит из пикселей, у каждого пикселя свой цвет. Цветов много, но их все можно представить в виде цветового круга оттенков. А если этот круг разбить на секторы, то можно понять, как поменяется тот или иной цвет, если мы повернём этот круг на сколько-то градусов:

Например, если мы возьмём красный цвет, который лежит на нуле градусов, и повернём его на 60 градусов против хода часовой стрелки, то получим жёлтый цвет, а если на 120, то он превратится в зелёный. В это же время синий пиксель, который лежал на 240 градусах, после первого смещения превратится в фиолетовый (240 + 60 = 300), а после второго — в красный (240 + 120 = 360, или 0).

Зная это, мы можем пропорционально менять все цвета в изображении, просто поворачивая его на нужное количество градусов по кругу оттенков. Для этого в CSS используется команда filter: hue-rotate(), где в скобках указываются градусы, на которые поворачиваем круг. Например:

filter: hue-rotate(120deg); ← поворачиваем круг на 120 градусов filter: hue-rotate(-60deg); ← поворачиваем круг на 60 градусов в обратном направлении

Для примера поменяем цвета у эмодзи из стандартного набора:

А вот простой код, который за это отвечает:

       
Зелёный → красный: 
♻️ ✅ ❎ 🐍 🥦 → 
 
Зелёный → синий: 
♻️ ✅ ❎ 🐍 🥦 → 
 
Красный → зелёный: 
❤️ ❌ 🚗 🌶 🚨 → 
 
Красный → жёлтый: 
❤️ ❌ 🚗 🌶 🚨 → 
  

Сепия, чёрно-белое фото и насыщенность

Сепия — это имитация старой напечатанной фотографии, когда всё состоит из оттенков коричневого цвета (сепии). Чтобы сделать такой эффект, используют команду filter: sepia(100%) . Если нужно сохранить некоторые оттенки цветов, можно ослабить фильтр и указать, например, не 100%, а 50%:

Для перевода в чёрно-белый оттенок используют команду filter: grayscale() , где в скобках указывают число от 0 до 1. Например, фильтр с параметром 0,5 приглушит все цвета наполовину, а с единицей — сделает полноценную чёрно-белую картинку:

Насыщенность цветов управляется командой filter: saturate() по такому принципу:

• если в скобках единица, то насыщенность не меняется;
• если меньше единицы — цвета приглушаются и всё работает так же, как и команда filter: grayscale();
• если больше — цвета становятся насыщеннее в такое количество раз.

Например, если поставить насыщенность 0, то фото станет чёрно-белым, как в предыдущем случае, а если 3 — все цвета станут в 3 раза насыщеннее:

body < margin: 20px; >img < max-width: 48vw; >.sepia-50 < filter: sepia(75%); >.sepia-100 < filter: sepia(100%); >.bw-50 < filter: grayscale(0.5); >.bw-100 < filter: grayscale(1); >.sat-0 < filter: saturate(0); >.sat-50 < filter: saturate(0.5); >.sat-300

Сепия 50%

Что дальше

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

Источник

Как через CSS изменить цвет картинки PNG с желтого на синий?

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

Adamos: я правильно вас понимаю, что прозрачной вы ее собираетесь делать в фотошоп или другом инструменте?

SM: ну, если вы наложением рук меняете растровые картинки, то можно и без инструментов обойтись.
Если же вы хотите мне доказать, что CSS не может исправить внутренности растрового изображения, то вы не очень плодотворно тратите воскресный вечер.

Adamos: я не понимаю зачем такие танцы с бубном, если в фотошоп можно сделать любым цветом исходник и закинуть в верстку

SM: в фотошопе исходник можно сделать ОДНИМ любым цветом.
На странице — ЛЮБЫМ любым цветом, в динамике.
Игорь: я не собираюсь решать вашу задачу. Я всего лишь предложил решение вопроса. Хотите им воспользоваться — подумайте. Не хотите — ищите другой путь. Возможно, вам всего-то надо взять фотошоп и перекрасить иконки. Или не фотошоп, если там все-таки вектор.

Источник