Инверсия и насыщенность, invert и saturate

Ещё два фильтра для цветовых эффектов — инверсия цвета и цветовая насыщенность. Как понятно из названия, при инверсии цвета меняются на противоположные, и мы получаем «негатив» картинки, а цветовая насыщенность делает краски ярче и противоположна по смыслу фильтру обесцвечивания.

Инверсия цвета — invert. Допустимые простые числовые значения от 0 до 1 и процентные значения от 0% до 100%.

.effect {
  filter: invert(1); /* полная инверсия цвета */
  filter: invert(50%); /* инверсия цвета наполовину, все цвета серые */
}

Цветовая насыщенность — saturate. Допустимые простые числовые значения от 0 и выше и процентные значения от 0% и выше. При значении фильтра 1 или 100% элемент отображается без изменений. Если установить нулевое значение, то картинка обесцветится, как при использовании фильтра grayscale.

.effect {
  filter: saturate(2); /* цвета ярче вдвое */
  filter: saturate(50%); /* цвета вдвое бледнее */
  filter: saturate(0); /* обесцвеченная картинка */
}