Як зробити так, щоб колір виглядав однаковим на різних фонах?


17

Фон щодо сприйняття кольорів:

Завдяки природі людського ока та візуальної обробки мозку, існує оптична ілюзія, що той самий колір буде виглядати по-різному залежно від фону .

Він відомий як ефект контрасту , показаний нижче - центральні прямокутники однакові:

введіть тут опис зображенняДжерело: Вікімедіа

Ілюстрація (та звіт) НАСА робить ефект кольору фону ще більш очевидним:

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

введіть тут опис зображенняДжерело: Лабораторія дослідження кольорового використання NASA

(Зверніть увагу, як два верхні кольори на другому зображенні виглядають однаково, але насправді є абсолютно різними.)


Що з веб-дизайном?

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

Як можна задати колір тексту для даного кольору тексту, щоб він виглядав однаковим на певному тлі?


Давайте розглянемо приклад цього питання:

Розглянемо мій приклад нижче, з жовтим текстом #FFF000на таких фонах:

  • білий #FFFFFF,
  • чорний #000000,
  • і сірий #555555.


Порівняйте кольори на різних фонах для тексту веб-дизайну


Як і очікувалося, це зовсім не так. ( Переглянути та завантажити .PSD файл тут. )

Як ми можемо зробити так, щоб він виглядав однаково на всіх трьох? Зрозуміло, що текст на білому тлі повинен бути темніше жовтого, а текст на сірому потребує коригування відтінку / тону. (Навколишній текст також вплине на нього, але це, ймовірно, важче пояснити.)

Чи можна якось обчислити цей ідеальний колір на основі Hex, RGB чи іншої системи? Саме тут лежить суть цього питання, оскільки це було б набагато ефективніше, ніж наближення вручну.


Вам потрібно буде використовувати жовті. Зауважте у своїх прикладах, що вони використовували кольори, подібні до того, який вони намагаються зробити зовнішнім.
Ганна

2
@Johannes, що ти маєш на увазі?
Баумр

У вашому першому прикладі використовували кольори всі відтінки сірого. У вашому другому прикладі фіолетовий колір виглядав синішим завдяки використанню дуже яскравого фіолетового. Тоді у своєму жовтому прикладі ви бавите жовтий колір білих, сірих та чорних. Тож, про що я говорю, вам потрібно використовувати жовті кольори, аби жовтий виглядав однаково на різних фонах.
Ганна


Відповіді:


10

Здається, ви шукаєте аналог допоміжних кольорів , але в просторі легкості, а не відтінку . Наскільки я можу сказати, такого загального відображення не існує.

Припустимо, ви могли б компенсувати ефект, взявши при цьому лінійну кореляцію між фоном та переднім планом, так що по мірі темніння тексту текст переднього плану освітлюється на стільки ж. Я припускаю, що відтінок залишається фіксованим. Завжди буде середина, коли фон і передній план мають однаковий колір.

Як приклад, розглянемо чорний на білому. Зворотна легкість для тих самих відтінків біла на чорному, але якщо ви намагалися знайти передній план для кожного проміжного фону одного відтінку, то посередині точки ви потрапляєте в сірий-сірий колір і нічого не бачите.

З тієї самої причини я не бачу, що може існувати будь-яке досить просте відображення - навіть збиткове.


1
Щоб вирішити це, я думаю, що нам потрібно було б побудувати модель (середнього) людського ока та знайти найкраще підходяще за допомогою генетичного алгоритму
Баумр

1
@Baumr: Може бути гарною докторською дисертацією :)
Гонки легкості з Монікою

0

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

Повідомте мене, якщо ці два набори виправлень виглядають однаково поверх чорно-білих рядків:

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

Тому що, як виглядають ці плями поверх нейтрального сірого, зображено на цій фотографії:

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

Я використовував режим змішування шарів GIMP під назвою Зерновий Екстракт / Злиття, який дозволив мені знайти найсвітліший сірий, витягнувши нейтральний пластир з іншого, а потім найтемніший, зроставши їх два разом. Іншими словами: я знайшов два сірі, середнє значення добавки яких є нейтральним.

За допомогою кольору на чорному або білому тлі, ви можете використовувати зерно Злиття, щоб знайти колір, усереднений добавкою, а з Екстрактом зерна доповнити останні.

EDIT: перевірити це. Ви можете виявити, що ці жовті кольори здаються однаковими.

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.