Пользователь
0,0
рейтинг
12 августа 2013 в 16:44

Дизайн → Теория цвета в цифрах tutorial

Разные люди могут по-разному представлять один и тот же цвет по его названию. Например голубой цвет может на самом деле быть цветом морской волны или небесным. Гораздо точнее цвет определяется шестнадцатеричным кодом, всего существует 16777216 комбинаций. Поэтому дизайнеру может быть полезно распознавать цвет, просто взглянув на его hex-код.

Основы


Начнем с простого: рассмотрим обычный hex-код, где каждая из трех пар цифр контролирует один из цветов RGB — красный, зеленый, синий. Числа могут принимать значения цифр от 0 до 9 и букв от A до F.



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



То есть величина чисел в парах означает количество цвета, проще говоря, если все числа максимальные, то в результате будет белый цвет — #FFFFFF, если числа минимальные, нули, то цвета нет, получается черный — #000000. Если изменять каждую пару, то получается: #FF0000 — самый яркий красный, #00FF00 — самый яркий зеленый и #0000FF — самый яркий синий. Соответственно, #00FFFF — самый яркий голубой, #FF00FF — самый яркий пурпурный и #FFFF00 — самый яркий желтый.



Распознавание цвета


Шестнадцатеричный код может быть сокращен с шести символов до трех. Например цвет #FAE означает #FFAAEE. Такая возможность иногда помогает упростить код, и что важнее, легко сократить количество оттенков, если это требуется.

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



Понимание цвета по hex-коду позволяет веб-дизайнеру быстрее ориентироваться в коде страницы, кроме того, можно всегда произвести впечатление на коллег или клиентов, сказав «Ах, какой прекрасный оттенок бордового».

Можно также легко менять яркость, оттенок или насыщенность цвета, отредактировав лишь его шестнадцатеричный код. В первом примере ниже одна из пар меняется с шагом в 10%, при этом растет яркость цвета. Во втором примере яркость растет, но насыщенность падает:



Подчеркивание ссылок


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

  • Для темного текста на светлом фоне делаем ссылки ярче.
  • Для яркого текста на темном фоне делаем ссылки темнее.

Чтобы это работало, необходимо использовать тег span внутри каждого тега a, например:

a { text-decoration:underline;color:#aaaaff; }
a span { text-decoration:none;color:#0000ff; }



Получившиеся ссылки легче читаются, т.к. подчеркивание не смешивается с символами. Однако добавлять span в каждую ссылку не очень рационально. Поэтому можно убрать подчеркивание ссылок, но при этом добавить border-bottom:

a { text-decoration: none; border-bottom: 1px solid #aaaaff; }

Цвета контента


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

h1, p { color: #797979; }



Уменьшение первых цифр в парах hex-кода повысит контрастность текста, а значит читабельность улучшится:

h1 { color: #797979; }
p { color: #393939; }



Редактирование фона


Легко управлять фоном, изменяя hex-код цвета:

  • #404040 — нейтральный
  • #504030 — теплее
  • #304050 — холоднее



Фон страницы визуально более чувствителен к изменениям цвета, чем контент. Поэтому можно легко сделать его теплее или холоднее, корректируя и вторую цифру в парах hex-кода. Например:

  • #404040 — нейтральный
  • #594039 — теплее
  • #394059 — холоднее



Подбор и комбинирование цветов


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



Использованный материал и полезное чтиво


@grokru
карма
407,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Дизайн

Комментарии (24)

  • +14
    Как насчет использования hsl цветов в цветовых константах? Ими управлять еще проще и интуитивно понятнее.
  • +4
    Спасибо за материал, познавательно получилось. Наверное более честно было бы пометить ее как перевод, ну да ладно, вам виднее.

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

    Кстати если кто не верит, что это вообще возможно, подбирать цвет по цифрам — всего 10 лет назад любой хороший полиграфист знал наизусть большую часть важных оттенков в CMYK. А если хороших полиграфистов собиралось больше 3х то они устраивали дикие для постороннего уха жаркие баталии на тему лучшего оттенка для, например, чистой кожи лица или идеального составного черного. Связано с особенностями печатного процесса, когда цвета, мало отличимые на глаз на мониторе получились по разному на печати. (На бытовом уровне сейчас уже неактуально)
    • 0
      Таки да, 10 лет назад любой хороший полиграфист . Жизнь требовала в то время. Сейчас и мониторчики, и освещение умеют делать правильной температуры и спектра. Так что с пипеткой по зонам бегать уже не обязательно. По этому нету такой необходимости.

      Я, конечно, сильно сомневаюсь что кто-то будет подбирать цвета только по цифрам, учитывая что это можно сделать в любом дебагере или прямо на макете страницы в редакторе, но знать такие вещи желательно. Не совсем верно, часто есть styleguide или вбитые в голову цвета, которые проще ввести, чем попасть мышкой.
    • 0
      При верстке css постоянно пишу цвет по hex-кодам, так намного удобнее чем через колорпикер моей IDE.
  • +1
    На второй картинке слева написано «#d03010», а фактически нарисовано «#d03020».

    Затем (справа) написано «#c0d050», а фактически нарисовано «#c0f0d0».
    • +1
      Это из-за сжатия в PNG с 8-битной палитрой. Наверное использовался оптимизатор картинок.
    • 0
      Поддержу. Заметил на другой картинке
      картинка под спойлером
      image

      Очень пастельные красный, зеленый и синий цвета. Приближенный к CMYK палитре, а не RGB. И это не «из-за сжатия в PNG»
      Не хорошо обманывать в статье про цвета.
      • 0
        Возможно сохранили с цветовым профилем в метаданных. Хотя… нет.
        • 0
          PNG не поддерживает цветовые профили. Конечно не исключено, что сначала картинки сохранялись в JPEG, что глупо, или TIFF, что маловероятно…
  • +18
    Автор очень гордится тем, что разобрался с позиционными системами счисления
    • +2
      Скорее заметил свойства записи шестнадцатиричной, но к сути систем счисления пока не приступил.
    • +6
      После фразы «Вторая цифра каждой пары уточняет оттенок», я не уверен, что таки разобрался.
  • +2
    Когда-то делал мини-игру на эту тему «угадай цвет» (ползунок регулирует сложность). И еще ссылка в углу квадрата с цветом ведет на довольно интересный сайт.
  • +8
    Вторая цифра каждой пары уточняет оттенок
    Что это означает? Никакой оттенок она не уточняет, она совершенно равноправна с первой цифрой пары.
    • +1
      «Цена деления» старшей цифры — 16, младшей — 1, поэтому можно сказать что младшая уточняет.

      Это напоминает мне UI настройки на одном советском осциллографе, где для регулировки положения «картинки» вертикального усиления были две ручки: «грубо», «плавно». Их значения суммировались с разными весами.
      • +3
        Да это же просто двузначное число.
        Как тогда десятичная rgb-запись 255 будет трактоваться? Первая цифра определяет, вторая — уточняет, а третья — перепроверяет?:)
        • 0
          что я знаю о кругах?
  • +14
    Пора вводить на хабре флажок «К.О.», дополнительно к tutorial и прочему.
    • +1
      Вот на самом деле… статья найдет читателя. Я тож так раньше… а потом… все таки это психология потребления. Дайте мне не КО.)
  • +1
    Не помешало бы в статье упомянуть о короткой форме записи цветов и web-safe цветах.
    Короткая запись #123 то-же самое что и #112233.
    Web-safe цвета — 12битная палитра состоящая из цветов, которые могут быть записаны в короткой форме. Её особенность — минимальные искажения на мониторах любой глубины цвета. Ко всему прочему, на ней тестированы алгоритмы сглаживания шрифтов. По этому желательно для текста использовать web-safe цвета.
  • +2
    Понимание цвета по hex-коду позволяет веб-дизайнеру быстрее ориентироваться в коде страницы


    Да дело не в том что дизайнеры виноваты что не учат hex коды. Зачем? Я глубого убежден, что это всего лишь историческая концепция интерфейса представления информации. Так оно сложилось, как раньше 8 символов на имя и 3 на расширение, что мы все таки решили в текстовых редакторах показывать не двоичный код, а текст. Почему мы не верстаем в 16 ричном редакторе? Потому что это глупо. Глупо тратить время на ненужные операции.

    Ровно так же с представлением цвета в тексте. Так оно сложилось, что никто, кроме веб IDE для вестки и веб разработки не счел нужным рядом с кодом цвета выводить этот самый цвет рядом. Для того чтобы не напрягать мозг на мелочевку. Оличный пример phpstorm. Кто в курсе, тот понял про что я.

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

    Зачем развивать способности к чтению матрицы? В качестве справочника да, но не в качестве призыва.
    • 0
      Вот, согласен. Phpstorm, пипетки на любой вкус, куча сервисов по подбору палитры. Этого всего должно хватать, чтобы абстрагироваться от хексов. Тем более, этим вообще дизайнер долже заниматься, по-идее. А верстальщик только копипастить цвет из шаблона.
  • +7
    Я надеялся, что прочитав статью, я смогу на глаз, посмотрев значения цвета, прикидывать цвет.

    Так же тут уже упоминалось
    о короткой форме записи цветов и web-safe цветах

    Ещё о буквенном написание названия цветов и об RGB(A) можно было бы рассказать.

    Можете минусить, но статья ни о чем, ибо не полная. Кто сверстал хотя бы пару сайтов — это всё прекрасно знает.
  • +1
    В первом примере ниже одна из пар меняется с шагом в 10%

    А что за шкала HSB, которую автор, незаметив мимоходом, подкинул-то?
    Она к RGB не имеет никакого отношения (на данном уровне подробности статьи).

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.