🔄 Цвета ✓ Бесплатно

Инверсия
цвета

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

🔄Инверсия каналов
🎯Дополнительный цвет
🌗Зеркало по светлоте
Перевод в серый
Исходный цвет
Готовые цвета:
Инверсия и дополнительный цвет — разные операции, хотя их часто путают. Совпадают они только на чистых каналах вроде красного. Для остальных цветов результаты расходятся, иногда сильно.
Инверсия и дополнительный дали разное

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

Значения
ОперацияHEXRGB
Исходный цвет#4F8EF7rgb(79, 142, 247)
Инверсия#B07108rgb(176, 113, 8)
Дополнительный#F7B84Frgb(247, 184, 79)
Зеркало по светлоте#0847B0rgb(8, 71, 176)
В оттенок серого#888888rgb(136, 136, 136)

Контраст исходного цвета с его инверсией — 1.26 : 1. Этого мало для текста: у цветов средней светлоты инверсия почти не помогает, она даёт похожую яркость.

Инверсия — это не противоположный цвет

Инверсия вычитает каждый канал из 255: получается негатив, как на фотоплёнке. Дополнительный цвет — совсем другая операция: тон поворачивается на 180 градусов по цветовому кругу, а насыщенность и светлота остаются прежними.

Разница видна на примере. Синий #4F8EF7 при инверсии даёт коричневый #B07108, а дополнительным к нему будет светло-оранжевый #F7B84F. Причина в том, что инверсия заодно переворачивает светлоту: светлый цвет становится тёмным. Совпадают операции только на чистых каналах — у красного оба способа дают циан.

  • Инверсия — негатив, меняет и тон, и светлоту
  • Дополнительный — только поворот тона
  • Зеркало светлоты — только светлота, тон на месте
  • Серый — по формуле яркости, а не средним каналов
  • Совпадение — только у чистых красного, зелёного и синего
Зачем нужна инверсия Задачи
Негатив изображения прямое применение
Курсор поверх любого фона режим difference
Выделение в редакторе видно на всём
Тёмная тема инверсией не делается
Зачем дополнительный Задачи
Акцентная кнопка максимум внимания
Пара для иллюстрации живой контраст
Второй цвет графика хорошо различим
Текст на фоне светлота та же

Частые вопросы

Вычтите каждый канал из 255. Для #4F8EF7 это 255 минус 79, 142 и 247 — получается 176, 113 и 8, то есть #B07108. В шестнадцатеричной записи то же самое даёт вычитание кода из #FFFFFF.
Инверсия переворачивает и тон, и светлоту, поэтому светлый синий превращается в тёмно-коричневый. Дополнительный цвет поворачивает только тон на 180 градусов, сохраняя светлоту, — от того же синего получится светло-оранжевый. Совпадают они лишь у чистых красного, зелёного и синего.
Нет, и это распространённая ошибка. Инверсия переворачивает вместе с фоном все цвета: фирменный синий станет коричневым, фотографии превратятся в негативы. Тёмную тему собирают отдельной палитрой, а не автоматическим преобразованием.
Потому что серый лежит посередине шкалы. Значение 128 при вычитании из 255 даёт 127 — почти то же самое. По той же причине инверсия плохо подходит для контраста: у цветов средней светлоты она даёт похожую яркость.
По формуле яркости, где каналы берутся с разными весами: зелёный вносит около семидесяти процентов, красный двадцать один, синий семь. Простое усреднение трёх каналов даёт заметно неверный результат, потому что глаз воспринимает зелёный намного ярче синего.
В негативах изображений и в режимах наложения. Например, курсор или рамка выделения, нарисованные в режиме difference, остаются видимыми на любом фоне — потому что автоматически становятся противоположными тому, что под ними.