— Как мы видим?
— Глазами
Да, а если чуть подробнее, то свет через линзу попадает на чувствительные клетки, они отправляют сингалы в мозг, а он уже это интерпритирует в изображения.
Эти чувствительных клетки — палочки и колбочки. У человека в глазах примерно 130 млн палочек и 7 млн колбочек. Палочки отвечают за воприятие света (яркости), колбочки — за восприятие цвета (спектра). Можно заметить, что мозг получает информации о цвете гораздо меньше, чем о яркости. И вот вам наглядный пример:
В первом случае работают только колбочки (условно), во втором — палочки. Мозгу очень сложно без канала яркости понять, на что же сейчас смотрят глаза.
Можно сделать вывод, что 80% важности в изображении занимает яркость или то, сколько света отражается от предмета. 20% — цвет.
Вот картинка целиком:
Хороший и качественный дизайн — это на 80% работа с яркостью и на 20% с цветом.
Запоминаем и медитируем.
Про мониторы, RGB, HSL и битность
Экран, на котором вы читаете эту статью, состоит из множества пикселей, которые состоят из светодидов красного, зеленого и синего цвета, которые могут светиться разной степени яркости. Математики и программисты, которые решили превратить весь наш мир в цифры, решили что изображения они поделят на эти 3 цветовых канала (но это на самом деле придумала природа, потому что колбочки бывают трех типов), а яркость на степени от 0 до 255 (8 бит). Это и есть пространство RGB — то есть указание на сколько ярко светиться красная (Red), зеленая (Green) и синяя (Blue) составляющая пикслея монитора.
Для удобства записи и сокращения количества символов придумали HEX — 16-ричное значение каждого канала, где 255 превращается в FF.
Да, существуют 10-, 16-, 32- битные изображения, фото- видео-камеры и HDR-телевизоры. Но мы тут больше про web и у нас тут RGB и 8 бит на канал 🤷♂️.
«Думать» в пространстве RGB при создании дизайна сложно. Я лично с трудом вспомню, какой цвет дает смешение красного и зеленого канала.
Гораздо проще мыслить в пространстве HSL (HSB).
Другие математики придумали другую форму записи цвета — они поделили на другие три канала: Hue (оттенок), Saturation (насыщеность) и Lightness/Brightens (яркость).
Когда у дизайнера стоит задача выделить элемент на фоне другого элемента (а это и есть основная задача дизайнера) — он может строить относительные цвета графических элементов, сдвигая оттенок, насыщеность и яркость, решая ту или иную дизайнерскую задачу.
Еще одни математики придумали Lab (Lightness + a + b), и если с L все понятно, то попробуйте назвать, на сколько надо сдвинуть канал a или b чтобы из красного сделать синий?
Ты не умничай, ты пальцем покажи
Для цвета кнопки в состоянии hover можно сдвигать яркость выше или ниже примерно на 10.
Обратите внимание, что изминение яркости в HSL на 10 затронуло изминение всех трех значений RGB.