Сочетание цветов текста и фона – Вариации Сочетания Текста И Фонового Изображения В Веб-Дизайне И Photoshop / WAYUP

Вариации Сочетания Текста И Фонового Изображения В Веб-Дизайне И Photoshop / WAYUP

О популярности метода наложения текста на фоновое изображение можно говорить и не наговориться. Достаточно открыть номинации на лучший сайт дня/недели/месяца на Awwwards или cssdesignawards и увидеть собственными глазами многообразие фантазии веб-дизайнеров. Если присмотреться, то можно увидеть и гораздо большее. Где-то дополнительно использовались градиенты, затемнения, эффекты шрифта, а иногда при, казалось бы, похожих фотографиях текст размещается в разных местах. И дело здесь вовсе не в погоне за уникальностью.

На изображении может быть что угодно. Но что представляет собой ваш пользовательский интерфейс? Сможет ли эффект наложения всегда быть читаемым? Разумеется, ни одни веб-дизайнер не хочет, чтобы посетители или заказчик напрягали зрение и долго думали: «что же там написано-то»? И это тем более важно, если вы создаете дизайн сайта/приложения для смартфона. На маленьких экранах и текст-то маленький, а значит, и читать его сложнее. А если вокруг еще и картиночек много, то и совсем может приключиться беда.

Тем не менее, существуют некоторые методы сочетания или даже обработки такого эффекта, при котором можно быть уверенным в том, что текст будет видимым и разборчивым.

Текст и изображения в веб-дизайне

Для начала давайте посмотрим на некоторые особо яркие примеры сочетания текст и фонового изображения. Это проекты: Indykpol, Ginetta, New Vista Behavioral Health, 100 Days of Winter, Harajuku Dacci Pasta Labo, A Little Italian Food Workshop, Peter Zilka, Family Legacy, purpleandgrey, catscarf, Hero Image.

А теперь стоит обратить внимание на некоторые моменты этих сайтов: laferme, storymarketing, foster-designs, Article Cards

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

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

Именно поэтому мы посмотрим, как сделать наложение текста удобным для чтения. И нет, разумеется, универсального решения. Все сводится к вашему личному предпочтению или даже подходящий метод для одного проекта совсем «не в кассу» будет выглядеть на другом.

Эффект холста

Холст представляет собой твердый полупрозрачный градиент, находящийся между изображением и текстом. В таком варианте текст может быть всегда белым, а градиент на холсте может быть от 40% непрозрачности от черного к белому (или прозрачному). Но опять же, это дело личного вкуса. Хотя именно 40%  непрозрачности от черного к белому/прозрачному работает наилучшим образом. В таких композициях можно увидеть, что изображение плавно замирает, текст обретает больше контраста и становится доступным для чтения. Для примера, мы создали и 30% и 69% непрозрачности. Вид, конечно, оставляет ждать лучшего.

Преимущества

• Простое и популярное решение
• Улучшенная контрастность текста
• Едва заметные изменения в общей конструкции

Недостатки

• Резкие градиенты могут разрушить привлекательность изображения
• Можно слишком сильно затонировать фон и суть его будет не видна

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

Тонирование

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

Преимущества

• Полезно для больших заголовков, текстовых блоков, которые размещаются на всей площади изображения
• Когда в приоритете текст, а не фоновая фотография

Недостатки

• Изображение скрывается целиком
• Фоновое изображение вообще может быть уменьшено, словно существует только для эстетики

Цветовые наложения

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

Какой цвет выбрать? Зависит от бренда. Но опять же, суть в том, чтобы текст был видим и четок.

Мягкие градиенты

Наверно, самый непростой вариант добавления контраста текста при сложном фоне. Не стоит использовать яркие и кричащие цвета, которые хороши сами по себе, но плохо сочетаются вместе. Для удобства воспользуйтесь coolors или Kuler, чтобы подобрать цвета, которые сработаются в сочетании друг с другом и будут подходить под композицию.

Сравните два градиента и поймете, о чем идет речь.

Преимущества

• Лучший вариант акцента на цвете бренда (если его уместно использовать)
• Однотонная часть градиента лучше подчеркивает текст

Недостатки

• Не подходит для фотографий с людьми, фауной, поскольку черты лиц и мордочек плохо узнаются. Они скрываются за общей тонировкой и плохо различимы.

Размытие

Эффект размытия по Гауссу позволяет смягчить изображение и сделать текст более видимым. Те, кто обладают iPhone, уже знакомы с такой техникой. В дизайне iOS размытие используется для обозначения глубины. В то время как  в Android используется тень для обозначения глубины (высоты).

Не стоит размывать слишком сильно, образы должны оставаться видимыми и узнаваемыми.

Преимущества

• Помогает уменьшить значимость изображения
• Текст проще выделить на фоне фотографии

Недостатки

• Изображение полностью приносится в жертву удобству чтения
• Не решается проблема с подбором цвета для текста
• Не задействуются цвета бренда; нет соответствия большинству общепринятых стилей

Выделение текста

В данном случае мы изменяем цвет фона для самого текста, имитируя, тем самым, выделение маркером на бумаге части текста. Метод хорошо работает, если конструкция состоит из небольшого текстового объема и очень большого количества свободного фона. И, да, выделение не всегда бывает черным. Это может быть доминирующий цвет самой фотографии, цвет бренда.

Черное и белое

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

Эффект Glitch 

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

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

Открываем наше изображение, создаем слой-копию и немного осветляем с помощью Корректирующего слоя «Цветовой тон/Насыщенность». Если изображение и без того светлое, то можно особо и не осветлять.

Создаем текстовой слой с заголовком, названием, текстом. Подбираем шрифт, при необходимости с помощью Свободного трансформирования (Ctrl+T) увеличиваем размер. Цвет текста совершенно неважен, но вот шрифт желателен жирный. Иными словами, буковки должны быть широкими, в противном случае, никакого эффекта видно не будет.

Переходим на наш фон и делаем еще одну копию. Перемещаем её над текстом. Нажимаем ПКМ на слое в Панели слоев и выбираем из меню «создать обтравочную маску». Дополнительно слой с фотографией можно покрутить, деформировать и подобрать ту часть, что на буквах будет лучше смотреться.

 

Теперь создадим еще один пустой слой и разместим его между текстом и фоном. Выделим его на панели слоев, зажимаем Ctrl + ЛКМ по слою с текстом. У нас на экране появится выделение букв. Выбираем темно-серый цвет и, будучи на новом пустом слое, заливаем контур.

Активируем инструмент Перемещение и с помощью стрелок на клавиатуре немного двигаем наш слой в желаемую сторону. Открываем Фильтр -> Размытие — > Размытие по Гауссу и размываем нашу тень так, чтобы явной она не была. Но наличие её все же нужно для придания глубины. Можно сделать совершенно плоское изображение, но оно «потеряется».

Создаем еще один слой и размещаем между тенью и фоном. Рисуем на нем серый прямоугольник с закругленными углами.

Создаем еще одну копию фонового слоя и размещаем его прямо над прямоугольником, а режим наложения выбираем «мягкий свет».

Теперь выделяем на панели слоев слои с тенью, текстом и текстурой и делаем общую копию трех слоем (Ctrl+J). Много тени, понимаем, но иначе пока нельзя. Потом уберем.

Выделяем только два слоя (Море и Фон копия 8), выбираем инструмент Выделение. Выделяем часть буквы или, может, часть всего слова, переходим на инструмент Перемещение и с помощью стрелок на клавиатуре сдвигаем часть рисунка по направлению тени. Если сдвинуть в противоположную сторону у вас получится сильное затенение. Если тень отключить – сольется. А так получается разбитый текст.

Можно разбить весь, можно частями, можно только одну букву – вариаций много.  Можно немного уменьшить слои с буквами и тенью, размыть границу прямоугольника и прочее и прочее. Если теней много, их можно размыть, снизить яркость слоя. Можно даже текстуру другую использовать.

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

Существует много сайтов с эффектом Glitch, хотя они и являются по большей части авторскими: wmnvm, oxtral, michaelvillar, jigsaw, bobby

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

Выводы

Мы рассмотрели разные методы, которые делают текст читабельным и не жертвуют при этом фоновым изображением. Даже в случае с разбивкой текста (Glitch), его (текст) можно понять, а морские волны и пену – разглядеть и узнать.

Хороший дизайн – продуманный дизайн. Дизайн, что обладает сбалансированными эстетическими визуальными эффектами, удобством и ясностью. Но и этого порой недостаточно. Может быть очень красиво, но непонятно, неприятно. Как вы видели, есть идеи смешивать разные виды, сочетать разные методы и привносить что-то новое. Вашему воображению нет предела.

Главное — правильные акценты и легкость эффекта. Даже если вы создаете текст, сквозь который видно фоновую фотографию, разбивка или добавление эффекта рваности должны быть воздушными. Любой стиль дизайна не обладает тяжеловесностью. Четкостью – да, контрастом – да, но не перегрузкой фотоэффектов. Даже наш эффект при малом размере смотрится понятно, четко и легко, ибо разрывы и тени неяркие и не «тяжелые».

wayup.in

Цвет шрифта и цвет фона

• Цветовая комбинация — цвет шрифта и цвет фона — очень сильно влияют на разборчивость текста.

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

Черный шрифт на белом фоне, не так ли? А вот и нет.

• Наиболее удобной цветовой комбинацией в наружной рекламе считается черный шрифт на желтом фоне.

По данным института цвета «Pantone Color Institute» желтый и черный цвета представляют собой хроматические противоположности, а контраст яркости между этими двумя цветами составляет 85 процентов.

Итак, продолжим рейтинг читабельности шрифта на цветных фонах.

Цвет шрифта и цвет фона — Рейтинг

3 место — желтый шрифт на черном фоне

4 место — белый цвет шрифта на черном фоне

5 место — синий шрифт на белом фоне

6 место — белый шрифт на синем фоне

7 место — синий шрифт на желтом фоне

8 место — желтый цвет шрифта на синем фоне

9 место — зеленый шрифт на белом фоне

10 место — белый шрифт на зеленом фоне

11 место — красный шрифт на белом фоне

12 место — белый шрифт на красном фоне

13 место — красный шрифт на желтом фоне

14 место — желтый шрифт на красном фоне

15 место — розовый шрифт на белом фоне

16 место — белый цвет шрифта на розовом фоне

17 место — розовый шрифт на желтом фоне

18 место — желтый шрифт на розовом

• Согласно данным Т.Х Нильссона — эксперта в области читабельности цветной графики и шрифта в рекламе — шесть комбинаций оказались более читабельными, чем черный шрифт на белом фоне.

Шрифт на фоне — Рейтинг

1. Черный на розовом
2. Черный на желтом
3.  Черный на оранжевом
4.  Темно-зеленый на желтом
5.  Черный на красном
6.  Темно-зеленый на белом
7.  И вот только здесь! — Черный на белом

Тем не менее все исследователи считают, что темный шрифт на светлом фоне представляет собой наиболее читабельную комбинацию.

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

Резюмируем!

Когда вам надо будет создать рекламный текстовый баннер — заметный и читабельный — воспользуйтесь советами этой статьи.

Вот, например, я сделала такой баннер — заголовок к статье.

 

2photo-paint.com

Правильное сочетание цветов

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

Правильное сочетание цветов

Правильное сочетание 30 цветов: от белого до чёрного.

1. Белый сочетается со всеми цветами. Наилучшее сочетание с синим, красным и черным.
   

   #FFFFFF
   #0000FF	#FF0000	#000000

2. Бежевый сочетается с голубым, коричневым, изумрудным, черным, красным.

   #F5F5DC
   #00BFFF	#A52A2A	#50C878	#FF0000

3. Серый (базовый цвет) сочетается с «капризными» цветами: фуксия, красный, фиолетовый, розовый, синий.

   #808080
   #FF00FF	#FF0000	#8B00FF	#FFC0CB	#0000FF

4. Розовый сочетается с коричневым, зеленой мятой, оливковым, серым, бирюзовым, светло-голубым.

   #FFC0CB
   #A52A2A	#98FF98	#808000	#808080	#30D5C8	#E0FFFF

5. Фуксия сочетается с серым, желто-коричневым, зеленым лаймом, зеленой мятой, коричневым.

   #FF00FF
   #808080	#D2B48C	#32CD32	#98FF98	#A52A2A

6. Красный сочетается с желтым, бурым, зеленым, синим, черным.

   #FF0000
   #FFFF00	#45161C	#008000	#0000FF	#000000

7. Томатно–красный сочетается с голубым, зеленой мятой, песочным, сливочно–белым, серым.

   #EC2D01
   #00BFFF	#98FF98	#FCDD76	#FDF4E3	#808080

8. Вишнево-красный сочетается с лазурным, серым, светло-оранжевым, песочным, бледно-желтым, бежевым.

   #911E42
   #007FFF	#808080	#FFA000	#FCDD76	#FDEAA8	#F5F5DC

9. Малиново-красный сочетается с белым, черным и дамасской розой.

   #DC143C
   #FFFFFF	#000000	#FF4364

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

    #A52A2A
    #00FFFF	#FFFDD0	#FFC0CB	#FFF9D0	#008000	#F5F5DC

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

    #CD853F
    #FDEAA8	#FFFDD0	#0000FF	#008000	#C5007F	#FF0000

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

    #654321
    #FFF44F	#00BFFF	#98FF98	#FF99CC	#32CD32

13. Рыжевато-коричневый сочетается с розовым, темно-коричневым, синим, зеленым, пурпурным.

    #B7410E
    #FFC0CB	#654321	#0000FF	#008000	#C5007F

14. Оранжевый сочетается с голубым, синим, лиловым, фиолетовым.

    #FF8000
    #00BFFF	#0000FF	#CC99FE	#8B00FF

15. Светло–оранжевый сочетается с серым, коричневым, оливковым.

    #FFA000
    #808080	#A52A2A	#808000

16. Темно–оранжевый сочетается с бледно–желтым, оливковым, коричневым, вишнёвым.

    #FF5300
    #FDEAA8	#808000	#A52A2A	#911E42

17. Желтый сочетается с синим, лиловым, светло-голубым, фиолетовым, серым, черным.

    #FFFF00
    #0000FF	#CC99FE	#E0FFFF	#8B00FF	#808080	#000000

18. Лимонно-желтый сочетается с вишнево-красным, коричневым, синим, серым.

    #FFF44F
    #911E42	#A52A2A	#0000FF	#808080

19. Бледно-желтый сочетается с фуксией, серым, коричневым, красным, желтовато-коричневым, синим, пурпурным.

    #FDEAA8
    #FF00FF	#808080	#A52A2A	#FF0000	#CC7722	#0000FF	#C5007F

20. Золотисто-желтый сочетается с серым, коричневым, лазурным, красным.

    #FFD700
    #808080	#A52A2A	#007FFF	#FF0000

21. Оливковый сочетается с апельсиновым, светло-коричневым, коричневым.

    #808000
    #FF8800	#CD853F	#A52A2A

22. Зеленый сочетается с золотисто-коричневым, оранжевым, салатовым, желтым, коричневым, серым, кремовым, черным, сливочно-белым.

    #008000
    #DAA520	#FF8000	#7FFF00	#FFFF00	#A52A2A	#808080	#FFFDD0	#000000	#FDF4E3

23. Салатовый цвет сочетается с коричневым, желтовато-коричневым, палевым, серым, темно-синим, красным.

    #7FFF00
    #A52A2A	#CC7722	#FFF9D0	#808080	#000080	#FF0000

24. Бирюзовый сочетается с фуксией, вишнево-красным, желтым, коричневым, кремовым, темно-фиолетовым.

    #30D5C8
    #FF00FF	#911E42	#FFFF00	#A52A2A	#FFFDD0	#800080

25. Электрик сочетается с золотисто-желтым, коричневым, светло-коричневым, серым, серебряным.

    #2C75FF
    #FFD700	#A52A2A	#CD853F	#808080	#C0C0C0

26. Голубой сочетается с красным, серым, коричневым, оранжевым, розовым, желтым.

    #00BFFF
    #FF0000	#808080	#A52A2A	#FF8000	#FFC0CB	#FFFF00

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

    #000080
    #DCD0FF	#00BFFF	#ADFF2F	#A52A2A	#808080	#FDEAA8	#FF8000	#008000	#FF0000

28. Лиловый сочетается с оранжевым, розовым, темно-фиолетовым, оливковым, серым, желтым.

    #CC99FE
    #FF8000	#FFC0CB	#800080	#808000	#808080	#FFFF00

29. Темно-фиолетовый сочетается с золотисто-коричневым, бледно-желтым, серым, бирюзовым, зеленой мятой, светло-оранжевым.

    #800080
    #DAA520	#FDEAA8	#808080	#30D5C8	#98FF98	#FFA000

30. Черный универсален, сочетается со всеми цветами. Наилучшее сочетание с оранжевым, розовым, салатовым, красным, сиреневым, желтым, белым.

    #000000
    #FF8000	#FFC0CB	#7FFF00	#FF0000	#C8A2C8	#FFFF00	#FFFFFF

Смотрите также:

htmlweb.ru

Белым по чёрному. Разгружаем глаза / Habr

Все слышали выражение “чёрным по белому написано”. Пришло оно к нам из бумажного мира и как-бы утверждает, что именно это сочетание цветов для текста и фона дает наилучший контраст и читабельность. Предлагаю опровергнуть это предположение и чаще пользоваться противоположной цветовой схемой. В этой статье я не буду убеждать в целесообразности цветового решения “белым по чёрному” (и некоторые утверждения могут быть спорными). Цель этой статьи сделать обзор инструментов, которые позволяют быстро и удобно инвертировать яркие цвета в часто используемых приложениях с целью уменьшить нагрузку на глаза. А также предлагаю инвертировать упомянутое выражение и в эпоху ЖК дисплеев говорить “белым по чёрному написано напечатано”.

Белый фон и чёрный текст по инерции сохранился во множестве приложениях, чтобы симулировать визуальное восприятие чернила на белой бумаге. Может быть, эффективность “чёрным по белому” и справедливо относительно бумаги (кстати, откуда на бумаге взялся именно черный и белый?¹), но когда речь идет о мониторах, то здесь уже нет бумаги и отраженного света. Большинство мониторов являются источниками света и белый фон может быть утомительным для глаз, поскольку белый цвет это максимум светового потока который излучает пиксель (при заданной яркости монитора). Соответственно суммарное световое излучение на глаза наибольшее при белом фоне. Как альтернативный вариант, многим более приятна и менее утомительная противоположная схема — белый текст на чёрном фоне*, который суммарно излучает меньше света. Должен признать, что здесь не всё так просто с излучением, поскольку у человеческого зрения довольно сложный механизм и на восприятия света влияет много факторов как яркость дисплея, тип дисплея, расстояние, внешнее осветление, зрительная адаптация, хроматическая адаптация, а также индивидуальные психофизиологические особенности. Поэтому сравнение этих двух типов цветовых схем до сих пор довольно неоднозначный вопрос как для экспертов зрения, так и для графических дизайнеров, и сильно зависит от условий их использования.

Хочу отметить, что все нижеприведенные приёмы переключения контраста менее утомительны для глаз при длительном чтении/написании текста. И это не зависит от крутости дизайна или личных предпочтений в цветах (см. эксперимент). В остальных ситуациях это не так важно.

*А также, когда упоминаю “белым по чёрному” я не имею ввиду абсолютно белый и абсолютно чёрный (и не буду вдаваться в нюансы “чёрности”). Даже наоборот — не рекомендую использовать эти крайности. При слишком большом контрасте сильнее чувствуется рассеивание света в глазах и белые буквы начинают “расползаться” на чёрном фоне. Этот эффект хорошо иллюстрирует оптическая иллюзия иррадиации. Лучше выбирать градации серого (напр., светло серый на темно сером). Главное — удобный контраст. Наверное, правильнее было б называть эту схему ”светлым по темному”, но звучит как-то не очень.

И так, список популярных приложений в которых легко засидеться и где чёрный фон поможет уменьшить нагрузку на глаза:

Браузер

до и после

Chrome (Chromium)

Clearly
Если хочется комфортно прочитать статью без лишнего визуального мусора, то для этого ребята из Evernote создали отличное расширение Clearly. Помимо того, что оно удаляет всё кроме главного текста, еще даёт возможность выбирать цвета. Если не нравиться стандартная тёмная схема, то можно создать свою.
Hotkeys

Для удобства авто разширения предоставил возможность переключения при помощи горячих клавиш. Лично мне сочетание из трёх клавиш (Ctrl+Alt+?) кажется неудобным. Хром позволяет отдельно настроить горячие клавиши для вызова конкретного расширения: Tools > Extensions, внизу есть Configure Commands (у меня Alt+R).

High Contrast
Более простое решение. Им иногда удобнее пользоваться чем Clearly (напр., на форумах). Есть возможность быстро создать исключение или задать схему по умолчанию.

HotkeysДля себя настроил следующим образом — горячие клавиши Alt+H, расширение включено (Enabled) постоянно, режим Normal установил по умолчанию, а для нужных сайтов включаю Inverted Color. Так я косвенным образом веду список сайтов, на которых инверсия включается автоматически и не нужно вручную переключать туда-сюда режимы.
Существенный минус расширения в том, что цвет изображений также изменяется.

К сожалению, сочетание клавиш (Shift+F11) нельзя поменять в настройках. Но если очень хочется, то можно копнуть исходники. У меня расширение находиться в:
%LocalAppData%\Chromium\UserData\Default\Extensions\djcfdncoelnlbldjfhinnjlhdjlikmph\0.4_0\
или просто в поиске найти highcontrast.js, довольно уникальное имя для файла. Далее делаем следующие изменения в файлах:
highcontrast.js, строка 12, evt.keyCode == 122 меняем на нужный, и заодно если не нравится Shift, то evt.shiftKey меняем на evt.altKey или evt.ctrlKey.
А также для внешности — в popup.js, строка 100 и в manifest.json, строка 8.

Stylish
Позволяет использовать на посещаемой странице произвольный стиль. Доступно множество готовых на userstyles.org. Минус в том, что их авторы не всегда вовремя обновляют стиль при изменениях на сайте. Полезные тёмные стили: Wikipedia, Google Search, Habrahabr, StackOverflow, YouTube, Facebook.
_{предлагайте(или создавайте свои) тёмные стили для популярных сайтов, добавлю в список}

Theme
Для того, что бы элементы интерфейса браузера не контрастировали с тёмной расцветкой содержимого страницы, лучше также выбрать какую-нибудь тёмную тему. У меня James White.

Что мне не нравиться в Хроме, так это мелькание белого фона при прорисовке страницы. Насколько я понимаю, это происходить на уровне движка, и на пользовательском уровне изменить нельзя, даже если поменять цвета в ОС. Считаю, что на этом месте нужно кинуть камень в огород Хром разработчиков. Почему они цвет канваса определяют самостоятельно, а не берут из системных настроек ОС? То же самое касается Skype и ряда других “серьезных” приложений.

Firefox

Clearly
См. описание выше.

Blank Your Monitor
Похоже на High Contrast.

HotkeysПрисутствует то же неудобство сочетания из трёх клавиш. Можно исправить с помощью Customizable Shortcuts: Options > Shortcuts > Action: Other — bymer-key.

Stylish
См. описание выше.

Шкуры для лиса. У меня FT DeepDark.

Opera

С Оперой не так густо. Всё, что удалось найти, это расширение Contrast Changer. Или более простой вариант в виде bookmarklet.
Как альтернатива Clearly можно использовать онлайн сервис Instapaper и их bookmarklet.
Также с недавних пор появился Stylish разширение.
Подбираем тёмную тему. Например, Opera Simple Dark.
альтернатива StylishНа userstyles.org каждый стиль можно сохранить в виде userscript. Складываем все скрипты в одну директорию, переименовываем так, чтобы имена файлов заканчивались на “.user.js” и указываем путь в настройках:
Tools > Preferences > Advanced > Content > JavaScript Options > User JavaScript folder. К сожалению, не все стили отображаются также как в Stylish.

Internet Explorer

С выбором разширений для этого браузера все грустно, ничего путевого не нашел. Но похоже, что цвета можно поменять следующим образом — Internet Options > Appearance: Colors, но перед тем надо отметить Accessibillity > Formatting: Ignore colors specified on webpages. Насколько хорошо работает не знаю, лично не пробовал.

Обозреватель документов

Adobe Reader
Позволяет инвертировать цвет документа, но только если не скан/изображение:
Edit > Preferences (Сtrl+K) > Accessibility > Documents Color Options: Replace Document Colors, Use High Contrast Colors. Удобнее читать во весь экран (Ctrl+L), чтобы не мешали яркие элементы интерфейса (или менять цвет этих элементов в ОС).
HotkeysAdobe Reader запоминает последнюю позицию меню в настройках. Если позиция осталась на Accessibility и её не менять, то можно инвертировать цвет сочетанием клавиш Ctrl+K | Tab | Space | Enter. Можно автоматизировать при помощи макросов.

WinDjView
Быстрый DjVu обозреватель с возможностями аннотации (только под Windows). Позволяет инвертировать цвет всего документа, включая скан/изображения:
File > Settings (Ctrl+,) > Display: Invert Colors. Удобней читать во весь экран (Ctrl+L).

HotkeysWinDjView также запоминает последнюю позицию меню в настройках. Если её не менять, то можно инвертировать цвет сочетанием клавиш Ctrl+, | Space | Enter. Можно автоматизировать при помощи макросов.

Текстовый редактор

Microsoft Word 2010
до и после

Чтобы изменить цвет интерфейса:
File > Options > General > User Interface options > Color Scheme: Black. Чтобы изменить цвет бумаги (фон), нужно менять цвета в ОС.
Для старых версий офиса ничем не могу помочь.

Google Docs

до и после

С инвертированием цветов в Google Docs отлично справляется chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph>High Contrast и BlankYourMonitor. High Contrast немножко тормозит в больших документах. Есть другой вариант, это минималистичный стиль Write Room, который также убирает панель инструментов (при наведении курсора появляется назад).

Sublime Text

после
Удобный, быстрый и богатый текстовый редактор с подсветкой синтаксиса, но без форматирования текста. По умолчанию идет с тёмной схемою и с хорошей читабельностью шрифтом. Использую его вместо блокнота.

Среда разработки

Visual Studio
Расцветка меняется в настройках (Tools > Options > Environment > Fonts and Colors), но это может быть длительная процедура, поскольку тяжело подобрать подходящие цвета с первого раза.
Есть более удобные решения для последних версий (2005/2008/2010/2012). Онлайн приложение Visual Studio Theme Generator генерирует конфигурационный файл (.vssettings) с выбраными цветами. А также сформировалось целое сообщество стилеводов на Studio Styles, где есть выбор среди множества готовых стилей.
В любом случае, перед изменением цветов лучше сделайте бекап текущих настроек (Tools > Import and Export Settings), можно экспортировать исключительно цветовые параметры.

К сожалению, не все цвета меняются из настроек студии и для того, что бы поменять цвет фона в окнах Solution Explorer, Output и т.п., нужно обязательно менять цвет в ОС.

Visual Studio 2010

до и после

Чтобы каждый раз не менять настройки студии, специально для изменения цветовой схемы было создано расширение Visual Studio Theme Editor (добавляет дополнительное меню Theme). В этом посте об использовании, хотя там все довольно интуитивно. Я использую тему Expression отсюда.

Visual Studio 2012
В этой версии разработчики наконец-то включили возможность изменения темы в стандартные настройки, среди которых есть и Dark Theme. Для этой студии также отдельно есть расширение Visual Studio 2012 Color Theme Editor. Зачем? Не знаю. Лично VS2012 еще не видел.

Eclipse
Цветовые возможности похожие с Visual Studio. Можно установить Eclipse Color Theme Plugin и использовать теми (.xml) для этого плагина. Или использовать конфигурационные файлы (.epf). Широкий выбор тем на Eclipse Color Themes. Делайте бекап настроек перед изменениями.

Matlab
Все цвета меняются вместе с цветами ОС (по крайней мере в Win7). Если отдельно от ОС, то есть инструкция для Dark theme for Matlab 2007. Эти же установки подходят для 2010 (предполагаю для других версий так же).

Разное

Windows 7
до и после

Тем, кому не хочется основательно менять цвета всех окон, предлагаю поменять хотя бы цвет taskbar, чтобы он не контрастировал с темным браузером или редактором (Control Panel > Appearance and Personalization > Personalization > Window Color). Остальные цвета находятся там же в Advanced appearance settings.
В поиске по ключевым словам “dark theme” или “black theme” найдете множество сайтов с темами. Много качественных (не только для Windows) находятся на deviantART.
Первое, что мне подошло это Dark Soft (использовал только стили, бинарные файлы (explorer.exe) не применял).

Linux, MacOS, Windows 8, Windows XP
Как работать со стилями этих ОС не знаком. Добавляйте в комментариях, будем пополнят список.

Mobile
Делитесь своими мобильными цветами. Посколько пользуюсь старым телефоно, ничего здесь не предложу

Могу только предложить пользователям Opera Mobile не самое удобное решение — он умеет, как и его старший брат, накладывать произвольные стили.

Еще бонус “белового на чёрном” для мобильных устройств в том, что такое сочетание потребляет меньше энергии (т.к. излучает меньше света). На сколько меньше? Не знаю. Подозреваю, что при длительном чтении весьма ощутимо. Было б интересно увидеть статистику.

VLC Player

до и после

При чём здесь видео к чтению? А ни при чём 🙂
на самом деле, тем, кто смотрят видео уроки и длительные туториалы, где в основном присутствует символьная и/или графическая информация на белом фоне, удобно сделать инверсию цвета. Я так делаю почти для всех курсов Coursera.
Tools > Effects and Filter (Ctrl+E) > Video Effects > Colors > Negate colors. К сожаление горячих клавиш для эффектов нету, и это очень не удобно. Но можно автоматизировать при помощи макросов.

Total Commander

до и после

Цвет меняется в Configuration > Options > Color. Для полностью тёмной версии нужно менять цвета в ОС. Вот мои цветовые параметры, заменять в wincmd.ini:
wincmd.ini

[Colors]
InverseCursor=0
InverseSelection=0
BackColor=0
BackColor2=-1
ForeColor=47360
MarkColor=253
CursorColor=12632256
CursorText=-1
ColorFilter1=*.mp3;*.wav;*.mp2;*.wma; *.aac;
ColorFilter1Color=11452183
ColorFilter2=*.jpg;*.jpeg;*.gif;*.tiff;*.png;*.bmp;
ColorFilter2Color=6667080
ColorFilter3=*.pdf;*.odt;*.txt;
ColorFilter3Color=8421504
ColorFilter4=*.doc;*.docx;*.rtf;*.xls;*.xlsx;*.ppt;*.pps;
ColorFilter4Color=12615680
ColorFilter5=*.avi;*.mpeg;*.mpg;*.mp4;*.vob;*.mov;*.flv;*.wmv;
ColorFilter5Color=16745613
ColorFilter6=*.exe; *.lnk;
ColorFilter6Color=4227200
ColorFilter7=*.zip; *.rar; *.7zip;*.iso;
ColorFilter7Color=39835

Gmail
В наличие есть несколько тёмных тем, они обозначаются чёрным треугольником на иконке. К сожалению, фон открытого письма остается белым. Думал исправить это стилем, но не нашел подходящего. Может кто-то из вас напишет такой стиль? Или по крайней мере обновит Gmail Dark Message Pane?

Не уверен насколько MediaMonkey популярна, но кому-то должно пригодится — VitreousDark.

---

Контрастность

Как уже упоминалось выше, не используйте слишком сильный контраст (макс. белый на макс. чёрном). Контрастность ≠ читабельность. Светло серый на тёмно сером более комфортно воспринимается. Какая именно градация серого — подбирайте индивидуально.

Контраст играет роль не только в изображении на дисплее, но и с окружающим миром. То есть, берите во внимание освещение в помещении и старайтесь избегать слишком сильного контраста между освещением и яркостью дисплея/цветов. Особенно это касается полуночников. Если уж работаете в темноте, переключитесь на тёмные цветовые схемы — глаза будут уставать гораздо меньше. Конраст между темной и свтелой темой в темном помещении может отличаться в 20 раз и больше!

Расстояние

Не забывайте о законе обратных квадратов. Если вы привыкли наклонятся к монитору, то при чтении увеличьте шрифт (Ctrl+) и отклонитесь хотя бы на 15см более назад. Это существенно уменьшит количество света излучаемого на глаза. Конечно у монитора слишком большая площадь, чтобы считать его точечным источником света и применять к нему этот закон. Но как показывает простой эксперимент — при не слишком ярком окружающем освещении, отклонившись назад с расстояния 55см к 75см, освещение от монитора уменьшается в 1.5 раза (а в темноте и то больше). Рекомендуемое расстояние от монитора — 50-70см.

Перерывы

Регулярные перерывы от работы за монитором более полезны для зрения, чем всё вышеперечисленное вместе взято. Но как же это не забывать делать регулярные перерывы?

Мне исключительно понравилось приложение Workrave. Настраивается на разные промежутки времени и разные по длине паузы (напр., 3 коротких через каждых 15мин., 1 длинная каждый час). Умеет блокировать систему на определенное время без возможности отмены, что очень мотивирует встать с рабочего места 🙂 Имеет много маленьких удобностей в настройках. Например, за несколько секунд перед блокировкой выскакивает предупреждение и если уж сильно заняты и сейчас не до паузы, то просто продолжаете работать — приложение заметить активность (клавиатуры, мыши) и отменит блокировку. Также самостоятельно определяет когда вы сами делаете перерыв и сбрасывает свой таймер.

Упражнения

Подозреваю, что большинству читателям знакомы симптомы компьютерного зрительного синдрома такие как спазм аккомодации (псевдомиопия, ложная близорукость) или сухой глаз. В сети достаточно информации как предотвратить эти расстройства путём различных упражнений и гимнастики для глаз. Главное регулярно их делать, хотя бы несколько раз на день. Хочу отдельно отметить 2 типа.

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

Второй тип это фейс-пальминг.

фейс-пальмингДа-да, именно оно. Так что каждый раз, когда реагируете на эпикфейл, имеете возможность размять глаза. Этот метод также известен как пальминг. Вокруг этого слова по сей день много спекуляций и неоднозначных личностей. Поэтому сразу оговорюсь, что рекомендую это упражнение не как метод улучшить зрение, а как метод расслабить глаза. Темнота дает возможность “отдохнуть” фоторецепторам, а тепло разогретых рук расширяет сосуды глаз и стимулирует кровообращение. Также это увлажнит глаза, поскольку при работе за монитором человек почему-то моргает в разы меньше. Ну и учитывая, что мозг большинство энергии тратит на обработку визуальной информации, то это также способ немножко расслабить извилины.
Чтобы самому убедится в некоторых утверждениях сделанных в этой статье, я провёл простой эксперимент, в котором измерял количество света излучаемого на глаза в разных условиях. Измерял освещённость с помощью Minolta CL-200A. Фотодатчик держал на уровне глаз развернутым в сторону дисплея. В качестве светлой схемы взял за пример Google Docs (скрин), в качестве тёмной — Sublime (скрин).
Осветление. Старался смоделировать повседневные ситуации — яркое освещение с помощью люминесцентных ламп (офис), более мягкое освещение с помощью металлогалогенной лампы (дом) и без освещение (ночью). Дневной свет исключил поскольку результат сильно зависит от множества факторов (напр., погода) и имеет большой разброс в измерениях.
Расстояние. За дальнее расстояние взял длину своей руки 75 см. Ближнее — уклон на ~20 см вперед ближе к монитору.
Яркость дисплея. В условиях без осветления проводил измерения дважды — с максимальной яркостью дисплея и, соответственно, — минимальной.
Результаты измерений. Все данные свёл в одну таблицу. Для сравнения использовал соотношение между освещённостями в разных условиях. Как видно с таблицы при „среднем“ освещении отклонившись назад, освещённость уменьшается в 1.5 раза. А в темноте, если использовать темную схему, то освещённость уменьшается в 25 раз.
Disclaimer! Результаты эксперимент не претендуют на универсальность выводов, так как эксперимент делался “на коленке”. Но смею предположить, что похожие результаты будут наблюдаться у множества повседневных ситуациях.

Вот и всё. Надеюсь изложенный здесь материал кому-то пригодиться и поможет хоть немного разгрузить глаза.

---

_{¹В прошлом большинство бумаги делалось с древесины или растений, в которых содержится целлюлоза и/или лигнин. Именно эти вещества придают бумаге желтоватый цвет, который со временем научились отбеливать. Лигнин также источник ванильного аромата старых книг. А чернила (само слово уже намекает на цвет) уже делались чёрными для лучшей контрастности. В древности сажа была основным сырьем для чернил, потом долгое время были популярны чернила из дубовых орехов.}

habr.com

FLAT COLORS. Подобрать цвет фона и шрифта для сайта онлайн.

Flat дизайн — новое направление в web-дизайне. Особенностью «плоского» дизайна является минималистический подход к оформлению объектов интерфейса сайта. Отсутствие теней и градиентов подчеркивает удобство использования и восприятия объектов на сайте.

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

RED

PINK

PURPLE

BLUE

GREEN

YELLOW

ORANGE

GRAY

ALL

MY

BACKGROUND

 

#F39C12

#D64541

#87D37C

#8E44AD

#3498DB

#F64747

#1F3A93

#3FC380

#03A678

#DB0A5B

#9A12B3

#BDC3C7

#4B77BE

#22313F

#DCC6E0

#2ABB9B

#CF000F

#65C6BB

#1BBC9B

#6C7A89

#4DAF7C

#F5D76E

#FFECDB

#F9690E

#F4B350

#D2527F

#90C695

#F89406

#FF0000

#F27935

#F62459

#F9BF3B

#9B59B6

#6BB9F0

#95A5A6

#1E824C

#26A65B

#87D37C

#68C3A3

#336E7B

#E26A6A

#52B3D9

#E4F1FE

#674172

#67809F

#DB0A5B

#00B16A

#89C4F4

#90C695

#F4D03F

#F2F1EF

#D35400

#C0392B

#5C97BF

#1E8BC3

#663399

#4183D7

#BF55EC

#81CFE0

#EF4836

#EEEEEE

#EB974E

#E08283

#F1A9A0

#03C9A9

#F2784B

#03C9A9

#4ECDC4

#3A539B

#ECF0F1

#E74C3C

#36D7B7

#913D88

#049372

#22A7F0

#F22613

#EB9532

#C5EFF7

#D24D57

#AEA8D3

#26C281

#F5AB35

#F7CA18

#68C3A3

#D2D7D3

#BE90D4

#2ECC71

#19B5FE

#DADFE1

#ABB7B7

#BFBFBF

#F64747

#E87E04

#66CC99

#2C3E50

#D24D57

#FDE3A7

#90C695

#C8F7C5

#ececec

#1BA39C

#86E2D5

#34495E

#59ABE3

#16a085

#D91E18

#F62459

#2574A9

#96281B

#A2DED0

#E67E22

#019875

hello-site.ru

Применение желтого цвета в рекламе

Цветовые комбинации фона и цвета шрифта — очень важный фактор влияющий на читабельность текста!

По данным института цвета «Pantone Color Institute» желтый и черный цвета представляют собой хроматические противоположности, а контраст яркости между этими двумя цветами составляет 85 процентов, именно такое сочетание является самым читабельным в рекламе.

Цвет, и это очевидно, самый влиятельный психологический инструмент, имеющийся в распоряжении веб-дизайнера и интернет-маркетолога. Всплеск цвета, соответствующего контексту ситуации, мгновенно настраивает читателя на нужный эмоциональный лад. 85% покупателей делают свой выбор на основе цвета!

В отношении текста цвет применяется для выделения различных элементов, требующих привлечения внимания пользователя. Понятно, что теперь, когда у нас имеются 16 777 216 цветов, отображаемых на средней руки мониторе, мы можем раскрасить наш текст в любую, самую фантастическую гамму. Однако делать этого не будем — первое правило электронной верстки текста гласит: «читать, не страдая».

И так, рейтинг контрастности:

1-е место — черный на желтом.

2-е место в рейтинге читабельности занимает черный на белом.

3-е место — желтый на черном.

4 место — белый цвет шрифта на черном фоне.

5 место — синий шрифт на белом фоне.

6 место — белый шрифт на синем фоне.

7 место — синий шрифт на желтом фоне.

8 место — желтый цвет шрифта на синем фоне.

9 место — зеленый шрифт на белом фоне.

10 место — белый шрифт на зеленом фоне.

11 место — красный шрифт на белом фоне.

12 место — белый шрифт на красном фоне.

13 место — красный шрифт на желтом фоне.

14 место — желтый шрифт на красном фоне.

15 место — розовый шрифт на белом фоне.

16 место — белый цвет шрифта на розовом фоне.

17 место — розовый шрифт на желтом фоне.

18 место — желтый шрифт на розовом…. то-есть совсем нечитабельно.

Но не все с этим полностью согласны, например, Т.Х Нильссон — эксперт в области читабельности цветной графики и шрифта в рекламе, составил свой рейтинг и согласно его данным, наиболее читабельными являются следующие 6 комбинаций:

1. Черный на розовом.
2. Черный на желтом.
3. Черный на оранжевом.
4. Темно-зеленый на желтом.
5. Черный на красном.
6. Темно-зеленый на белом.
7. Черный на белом (на самом последнем месте…).

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

Итог: текст вашего сообщения/рекламы бесполезен, если он нечитабелен — помогите читателю и себе! Выбирайте наиболее читабельные цветовые комбинации и, конечно, шрифты:)

www.livemaster.ru

Рекомендации по сочетанию цвета шрифта и фона

Оценка четкости восприятия цветовых образов на ахроматическом поле

Цвет символов	Цвет фона
	черный	серый	белый
Красный Синий Зеленый Малиновый Желтый	Плохо Плохо Отлично Отлично Хорошо	Отлично Плохо Плохо Отлично Плохо	Хорошо Хорошо Плохо Отлично Плохо

Оценка четкости восприятия цветовых образов

на цветном фоне

Цвет символа	Цвет фона
	красный	синий	зеленый	циан	малиновый	желтый
Красный Синий Зеленый Циан Малиновый Желтый	– Плохо Плохо Отлично Плохо Отлично	Плохо – Отлично Отлично Отлично Хорошо	Отлично Отлично – Плохо Отлично Отлично	Хорошо Хорошо Отлично – Отлично Отлично	Плохо Хорошо Отлично Отлично – Отлично	Хорошо Хорошо Отлично Отлично Хорошо –

Влияние цвета на ощущение пространства, температуры, эмоционального состояния

Цвет	Ощущение пространства	Ощущение температуры	Эмоциональное состояние
Красный Оранжевый Желтый Зеленый Синий Фиолетовый	Рядом, близко Очень близко Близко Отдаленно Отдаленно Очень далеко	Горячо Тепло Тепло Нейтрально Холодно Холодно	Беспокойство Воодушевление Бодрость Спокойствие Успокоение Утомление, агрессивность

studfile.net