Как сделать так, чтобы цвет отображался одинаково на разных фонах?

Предыстория восприятия цвета:

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

Это известно как эффект контраста , показанный ниже — центральные прямоугольники идентичны:

введите описание изображения здесьИсточник: Викимедиа

Иллюстрация (и отчет) НАСА делает эффект цвета фона еще более очевидным:

введите описание изображения здесь

введите описание изображения здесьИсточник: Исследовательская лаборатория использования цвета НАСА .

(Обратите внимание, что два верхних цвета на втором изображении кажутся одинаковыми, но на самом деле они совершенно разные.)


Что насчет веб-дизайна?

Мой вопрос относится к веб-дизайну, в частности, в данном случае к цвету текста ссылки на разных фонах.

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


Давайте рассмотрим пример для этого вопроса:

Рассмотрим мой пример ниже с желтым текстом #FFF000на следующих фонах:

  • белый #FFFFFF,
  • черный #000000,
  • и серый #555555.


Сравните цвета на разных фонах для текста веб-дизайна


Как и ожидалось, совсем не похоже. ( Просмотрите и загрузите файл .PSD здесь. )

Как мы можем сделать так, чтобы это выглядело одинаково на всех трех? Ясно, что текст на белом фоне должен быть более темным желтым, а текст на сером требует настройки оттенка/тона. (Окружающий текст также повлияет на это, но это, вероятно, сложнее учесть.)

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

Вам нужно будет использовать желтые. Обратите внимание, что в ваших примерах они использовали цвета, похожие на те, которые они пытаются изменить.
@Йоханнес, что ты имеешь в виду?
В вашем первом примере использовались все оттенки серого. Во втором примере ваш фиолетовый цвет стал более синим за счет использования очень яркого фиолетового. Тогда в вашем желтом примере вы бодаетесь желтым с белым, серым и черным. Итак, я хочу сказать, что вместо этого вам нужно использовать желтый цвет, чтобы он выглядел одинаково на разных фонах.
Мне трудно объяснить это, прошу прощения.
@Johannes, спасибо, но мне трудно понять. Не стесняйтесь отвечать — PSD выше для скачивания.
@Non-StopTimeTravel, да, это классика!

Ответы (2)

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

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

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

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

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

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

Дайте мне знать, выглядят ли эти два набора патчей одинаково поверх черных и белых строк:

введите описание изображения здесь

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

введите описание изображения здесь

Я использовал режим смешивания слоев GIMP под названием Grain Extract/Merge, который позволил мне найти самый светлый серый цвет, извлекая нейтральный участок из другого, а затем самый темный, объединив их вместе. Другими словами: я нашел два оттенка серого, у которых аддитивное усреднение нейтрально.

С цветом на черном или белом фоне вы можете использовать Grain Merge, чтобы найти усредненный аддитивным цветом цвет, а с помощью Grain Extract — дополнительный к последнему.

РЕДАКТИРОВАТЬ: проверьте это. Вы можете обнаружить, что эти желтые цвета выглядят одинаково.

введите описание изображения здесь