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

Цвет фона веб-страницы задается с использованием атрибута bgcolor тега .

Пример 1. Изменение цвета фона

Цвет можно указывать в шестнадцатеричном значении или по его имени.

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

Фоновый рисунок

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

Пример 2. Добавление фонового рисунка

Если изображение меньше размера экрана монитора, оно будет размножено по горизонтали и вертикали.

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

Пример 3. Использование фонового рисунка и цвета фона

Фиксированный фон

По умолчанию, при использовании полосы прокрутки, фоновый рисунок перемещается вместе с содержимым веб-страницы. Internet Explorer позволяет сделать фон неподвижным с помощью атрибута bgproperties ="fixed " тега .

Пример 4. Задание фиксированного фона

При указании атрибута bgproperties , как показано в примере 4, фоновый рисунок на веб-странице будет оставаться неподвижным, а текст, рисунки и другие элементы станут перемещаться вместе с полосой прокрутки.

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

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

Например, взгляните на цветные образцы на изображении выше. Левый столбец состоит из цветов с максимальной яркостью и насыщенностью. Правая колонка состоит из цветов с яркостью 80% и насыщенностью 80%. Толерантность к левому столбцу будет ниже, чем справа, потому что яркие насыщенные цвета очень резки для ваших глаз.

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

Начнем с теории.

Яркость Vs. Насыщенность

Яркость и насыщенность - это разные свойства цвета. Первое - это сколько белого или черного цвета смешивается в данном цвете, в то время как второе относится к количеству серого цвета.

Увеличение яркости не значит, что насыщенность уменьшается тоже. Когда вы уменьшаете насыщенность, вы поворачиваете цвет в оттенок серого. Когда вы увеличиваете яркость, вы увеличиваете количество цветной составляющей, но не делаете цвет серым ().

Специфика коррекции контурной резкости полноцветного изображения

1. Цветовой тон и Насыщенность

2. Контурная резкость

3. Авто коррекция

Цветовой фон и насыщенность

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

Этот метод реализуется в графических редакторах как коррекция изображения в цветовой модели HSL.

Такая компьютерная цветовая модель по своей основе похожа на HSB (HSV). Но её основными параметрами являются: тон, светлота и насыщенность. Если представить цветовую модель HSL в виде фигуры, то это будет двойной (отраженный) шестигранный конус. Его основанием, как и у HSB, служат базовые цвета, а вершинами: белый цвет, регулируемый насыщенностью, и черный, характеризуемый светлотой. Таким образом, цветовая модель HSL является одним из наиболее ярких примеров интуитивных понятий тона, насыщенности и яркости.

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

Интерфейс коррекции изображения в цветовой модели HSL на примере

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

Нормальная цветовая насыщенность

Выход за пределы цветового охвата

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

Расположение меню Контурная резкость

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

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