Меню

Теория цвета как выбирать цвета для а и контента

Теория цвета: как выбирать цвета для сайта и контента

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

Какие цвета бывают

Цвета бывают первичные или основные, вторичные, третичные.

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

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

  • Зеленый = желтый + синий
  • Фиолетовый = синий + красный
  • Оранжевый = красный + желтый

Третичные цвета. Их создают путем сочетания первичного цвета со вторичным, который находится рядом с ним на цветовом круге. Этому требованию соответствуют 6 третичных цветов:

  • Пурпурный = красный + фиолетовый
  • Киноварь = красный + оранжевый
  • Фиолетовый = фиолетовый + синий
  • Бирюзовый = синий + зеленый
  • Янтарный = желтый + оранжевый
  • Шартрез = желтый + зеленый

Что такое цветовой круг?

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

Какие эмоции и ассоциации создают цвета

Разные цвета несут разное настроение для пользователей сайта

  • Красный — это сила, страсть, энергия. Он приводит к активным действиям на сайте.
  • Оранжевый несет радость и энтузиазм.
  • Желтый создает ощущение счастья, но не переборщите.
  • Зеленый ассоциируется с ростом.
  • Синий показывает спокойствие, а также уверенность. Светлые тона дают ощущение умиротворения.
  • Фиолетовый — цвет роскоши и креативности.
  • Черный — цвет силы и строгости.
  • Белый — цвет безопасности и чистоты.

7 основных цветовых схем

Эксперты в дизайне определили 7 распространенных цветовых схем:

— Монохроматическая. В ней всего один цвет с различными оттенками. В нем нет цветового контраста, она выглядит очень аккуратно.

— Аналогичная. Создается с помощью сочетания одного основного цвета с двумя цветами, находящимися рядом с ним на цветовом круге. Их используют для создания мягкого дизайна.

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

— Раздельная схема. В ней есть один доминирующий цвет и 2 цвета, смежные с доминирующим цветом. Схема создает тонкую цветовую палитру и сохраняет преимущества контрастных цветов.

— Триадная — высококонтрастная схема. Такие схемы создают выбором трех цветов. Они равномерно размещаются линиями вокруг цветового круга.

— Квадратная. В ней есть 4 цвета, равноудаленные друг от друга на цветовом круге. Схема обеспечивает значимый контраст дизайну. Рекомендуется выбрать один доминирующий цвет.

— Прямоугольная. Предлагает более тонкий подход к выбору цвета, чем квадрат.

Как выбрать цветовую схему

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

2. Задайте настроение сайту. Подумайте о настроении, которое вы хотите создать выбранной схемой.

3. Учтите цветовой контекст и как цвета смотрятся на контрасте. Посмотрите на изображении ниже. Середина каждой фигуры одного размера, формы и цвета. Меняется цвет фона. Но одни круги кажутся мягче, ярче в зависимости от цвета за ними.

4. Посмотрите на цветовой круг. Выберите несколько схем. Не все они подходят для дизайна вашего сайта — вы это увидите сразу. Действуйте методом проб и ошибок. Это поможет найти нужную цветовую схему.

5. Пользуйтесь правилом 60-30-10: основной цвет для 60% дизайна, вторичный цвет для 30% и акцентный цвет для 10%.

6. Создавайте несколько вариантов дизайна и посмотрите, какой из них выделяется. Потом подождите несколько дней и снова проверьте, не изменились ли ваши предпочтения.

Источник

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

Правильное сочетание 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

  • Таблица RGB цветов
  • Таблица «безопасных» цветов
  • Сводная таблица стилей
  • Сводная таблица специальных символов
  • Accessibility color wheel – сервис подбора цветов для фона и текста с учетом пользователей с ограниченными способностями.
    Accessibility color wheel поможет выбрать оптимальную пару цветов. В интерфейсе присутствует панель, имитирующая 3 вида цветовой слепоты.
Читайте также:  Таблица для изучения падежей

.
Прокомментировать/Отблагодарить

Источник



Лекция 4. Цветовые коды. Работа с цветом в образе и силуэте

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

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

Схема «Отрезок через центр круга»

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

Схема «Отрезок»

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

Схема «Треугольник равносторонний»

Создает образ из трех цветов, находящихся на трех углах равностороннего треугольника. Чтобы получить их, впишите треугольник в круг, соединив им три цвета. Рекомендуем брать за основу образа один из этих трех цветов, а остальные два использовать как акценты.

Схема «Треугольник остроугольный»

Создает образ из трех цветов, находящихся на трех углах остроугольного треугольника. Чтобы получить их, впишите треугольник в круг, соединив им три цвета. Рекомендуем брать за основу образа один из этих трех цветов, а остальные два использовать как акценты.

Схема «Прямоугольник»

Создает образ из четырех цветов, находящихся на углах прямоугольника. Чтобы получить их, впишите прямоугольник в круг, соединив четыре цвета. Рекомендуем брать за основу образа один из этих четырех цветов, а остальные три использовать как акценты.

Схема «Квадрат»

Создает образ из четырех цветов, находящихся на углах квадрата. Чтобы получить их, впишите квадрат в круг, соединив четыре цвета. Рекомендуем брать за основу образа один из этих четырех цветов, а остальные три использовать как акценты.

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

  • Цветовые коды. Работа с цветом в образе и силуэте
  • Цветовые коды. Работа с цветом в образе и силуэте
  • Цветовые коды. Работа с цветом в образе и силуэте
  • Цветовые коды. Работа с цветом в образе и силуэте
  • Цветовые коды. Работа с цветом в образе и силуэте

Работа с контрастами.
Влияние контрастов на силуэт

→ дополняющие цвета (желтый / фиолетовый, синий / оранжевый, зеленый / красный)

→ теплые (красный, желтый, оранжевый) и холодные (синий, фиолетовый, голубой) цвета

→ яркие и нейтральные (красный и бежевый, синий и дымчатый)

→ светлые и темные (бледно-желтый и фиолетово-черный)

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

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

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

  • Влияние оттенков на силуэт. Цветовые коды. Работа с цветом в образе и силуэте
  • Влияние оттенков на силуэт. Цветовые коды. Работа с цветом в образе и силуэте
  • Влияние оттенков на силуэт. Цветовые коды. Работа с цветом в образе и силуэте
  • Влияние оттенков на силуэт. Цветовые коды. Работа с цветом в образе и силуэте

​Работа с оттенками.
Влияние оттенков на силуэт

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

→ аналогичные или оттеняющие (желто-оранжевый и оранжевый)

→ нейтральные (серый, бежевый)

→ пастельные или мягкие (бледно-голубой, бледно-розовый)

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

Монохромные тона могут сочетать несколько оттенков, от светло-горчичного до коричневого, создавая цельный образ.

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

Сочетание 3 и 4 оттенков. Балансировка силуэта

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

Правило сочетания цветов, которое действует всегда:

3 цвета + 1 акцент = максимум 4 цвета (в схемах цветового круга)

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

Основные цветовые семейства. Работа с цветом в образе и силуэте

Ключевые цветовые семейства

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

Нейтральные

Нейтральные: черный, бежевый, нюдовый, молочно-белый, терракотовый, коричневый, белый.

Темные: черный, серый, бордовый, синий, хаки.

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

Яркие

Осенние: теплые тминный, бордовый, сине-зеленый, молочно-белый.

Летние: фруктовые и яркие лимонный, лазурный, ярко-розовый, зеленый.

Яркие цветовые семейства популярны для нарядов церемоний и торжеств, используются в женских деловых костюмах, модных нарядах и спортивной одежде.

Романтические

Романтические: цветочные и растительные сиреневые, фиалковые, розовые, салатовые, желтые.

Пастельные: перламутрово-белые, серебристые, нежно-голубые, нежно-розовые, нежно-коралловые, лавандовые.

Нежелательные цветовые коды. Работа с цветом в образе и силуэте

Ключевые цветовые коды

Цветовой код – это устоявшееся цветовое сочетание, которое вызывает у человека определенные ассоциации. Коды могут вызывать положительные или отрицательные эмоции и относиться не только к моде. Например, желтый и красный могут ассоциироваться с Макдональдсом, черные и желтые – с предупреждающими вывесками или Билайном. Также к нежелательным цветовым кодам можно отнести пары черный + оранжевый (Хэллоуин), зеленый + красный (Новый год).

  • Основные цветовые коды. Работа с цветом в образе и силуэте
  • Основные цветовые коды. Работа с цветом в образе и силуэте
  • Основные цветовые коды. Работа с цветом в образе и силуэте
  • Основные цветовые коды. Работа с цветом в образе и силуэте

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

Красный + черный: код соблазна и обольщения, популярен в роковых образах, церемониальном вечернем гардеробе.

Красный + серый: городской код, элегантный casual и спорт, современный контраст, более мягкий, чем черно-белый.

Красный + бежевый: сочетание классики и современности, роскошная повседневная одежда, женственность.

Красный + синий: легкое спортивное сочетание, casual городской гардероб.

  • Новые цветовые коды. Работа с цветом в образе и силуэте
  • Новые цветовые коды. Работа с цветом в образе и силуэте

Новые цветовые коды

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

Читайте также:  Таблицы ворд примеры таблиц

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

Красный + пастельный: тенденция, применимая не только в женской или мужской моде, но также в интерьере и декоре.

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

Следующие лекции IFM будут посвящены видам фигур и работе с ними и мужскому стилю. Следите за новостями Rendez-Vous Daily по хештегу #IFM4rendezvous, чтобы не пропустить полезные лекции.

Источник

Цветовые пространства: большой разбор

Всё, что нужно знать о CMYK, RGB, HSL, HSB, LAB и чистых градиентах.

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

  • CMYK ― цветовое пространство для печати;
  • RGB — цветовое пространство для экранов;
  • HSB и HSL — для тонкой настройки цвета;
  • независимые пространства LAB и LCh;
  • инструкция по созданию чистого градиента.

Ведущий интерфейсный дизайнер в K&K TEAM, увлечён дизайном, технологиями и людьми. В свободное время ведёт Telegram-канал «Karoza Ҩ»

Воспроизводимые представления цвета

Цветовые модели RGB и CMYK соответствуют физическому представлению цвета на носителе. RGB отвечает за то, с какой интенсивностью светятся диоды красного, зелёного и синего цветов внутри пикселя монитора. CMYK задает пропорции смешиваемой краски на листе бумаги.

Цветовое пространство CMYK — субтрактивное: если сложить все цветовые компоненты, то итоговый цвет будет чёрным. По этому же принципу работают обычные краски, а потому пространство CMYK используется в полиграфии. Через процентные соотношения в нём записаны пропорции смешения четырёх красок: бирюзовой ( Cian), пурпурной ( Magenta), жёлтой ( Yellow) и чёрной ( Key color, blac K). Интенсивность каждого цвета задаётся в процентах от 0 до 100.

Дизайнеры, работающие с печатью, знают, что не все видимые на экране цвета возможно воспроизвести в CMYK. Связано это с тем, что модель RGB ― с ней работает монитор ― построена на излучении света, а CMYK ― на поглощении.

Для более точного отображения цветов при печати требуется допечатная подготовка. Во время неё экранные цвета пространства RGB переводятся в CMYK, чтобы получаемые оттенки на экране и бумаге были максимально приближены друг к другу.

Pantone — американская компания, основанная в 50-е годы в Нью-Йорке и занимающаяся производством пигментов и продажей чернил. Компания разработала систему стандартизации цветов Pantone Matching System (PMS), в которой каждому цвету присваивается специальный код.

Поскольку не все цвета можно воспроизвести в CMYK наложением четырёх стандартных красок во время печати, в полиграфии существует дополнительная палитра Pantone. Например, серый и жёлтый, которые Pantone выбрала в качестве цветов 2021 года, получить наложением палитры CMYK на листе невозможно.

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

PMS — Pantone Matching System — система подбора цвета, но не цветовое пространство, так как у цветов есть код, но нет значений цветовых координат.

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

RGB ― это цветовое пространство, здесь каждый цвет задаётся в виде трёх координат. Смешение цвета происходит по аддитивному принципу ― если сложить все три основных цвета, то результат будет не чёрным, а белым. Поэтому RGB используется в системах, построенных на излучении света, что делает её самой распространённой ― с ней работают все экраны.

Цветовой оттенок в RGB создаётся смешиванием красного ( Red), зелёного ( Green) и синего ( Blue) каналов с разной интенсивностью излучения. Яркость каждого из трёх основных цветов закодирована числом от 0 до 255, то есть занимает 256 бит или 32 байта.

Например, RGB (90, 0, 157) соответствует фиолетовому, а RGB (255, 223, 0) — жёлтому.

Для удобства записи придуманы HEX-коды обозначения цветов, в которых интенсивность каждого из трёх цветов задаётся через двузначное число в шестнадцатеричной системе, что даёт те же 256 комбинаций или 32 байта, ведь
16 × 16 = 256.

В шестнадцатеричной системе цифры обозначаются от 0 до F, в результате
HEX-коды выглядят вот так: #5A009D — фиолетовый, #FFDF00 — жёлтый. Преимущество такой записи ― стандартизация и удобство копирования короткого цветового значения.

Иногда HEX-код в CSS или графических редакторах содержит только три знака, в таком случае каждый второй символ в записи с овпадает с первым. То есть #F45 интерпретируется как #FF4455, #000 — #00000.

Поскольку с цветовым пространством RGB работают все экраны, то применяется оно практически везде ― от разработки макетов для печати (цвета переводятся в CMYK в самом финале) до разработки сайтов и интерфейсов.

Свойства цвета

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

Важные понятия

Цветовой тон (Hue) — положение цвета в видимом спектре. Человеческий глаз различает цвета от красного до фиолетового, цветовой тон ― это место цвета в спектре. Красный, оранжевый, жёлтый, зелёный, голубой, синий, фиолетовый — всё это цветовые тона.

Насыщенность (Saturation) — интенсивность цвета, красочность, степень отличия цвета от равного по светлоте серого. Чем ближе цвет к серому, тем он менее насыщенный.

Яркость (Brightness) — приближённость цвета к чёрному. Чем ниже яркость, тем цвет темнее. Нередко яркость путают с насыщенностью, но это разные характеристики.

Цилиндрические цветовые пространства

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

Допустим, мы используем синий цвет RGB (63, 42, 255), но для второго макета нам нужен более тёмный синий того же тона или же зелёный той же яркости и насыщенности. При изменении одной характеристики изменились сразу три параметра: синий теперь имеет значения RGB (18, 12, 77), а зелёный —
RGB (67, 255, 42).

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

Координаты цвета существуют в кубической системе RGB, но в графических редакторах управление цветом реализовано с использованием другой модели ― цилиндрической версии RGB, которая называется HSB или HSV.

Читайте также:  Опасность суть термина виды классификация признаки и дерево причин опасностей

В HSB цветовой тон ( Hue) задаётся в градусах на цветовом круге от 0° до 360°, а насыщенность ( Saturation) и яркость ( Brightness) в процентах от 0% до 100%.

Чтобы получить в HSB чёрный, надо уменьшить яркость до 0%, а тон и насыщенность не важны. Для получения белого нужно понизить насыщенность до 0% — то есть приблизить цвет к серому, а яркость повысить до 100%. Для получения чистых цветов яркость и насыщенность должны быть 100%.

Иногда цветовое пространство HSB называют HSV ( H ue — цветовой тон, S aturation — насыщенность, V alue — значение). Не стоит путаться — это альтернативное название, а не другое цветовое пространство.

В CSS помимо HEX-кодов RGB применяют цилиндрическое цветовое пространство HSL, где вместо яркости ( Вrightness) используется светлота ( Lightness). HSB и HSL очень похожи, но не идентичны.

Главное отличие HSL в том, что при любых значениях тона и насыщенности светлота в 0% даст чёрный, а светлота в 100% — белый. В HSB 100% последнего параметра ― яркости — даёт наиболее яркий цвет, а белый возможен, только если насыщенность равна нулю.

То есть светлота в HSL отвечает за примесь чёрного или белого, освещённость. При конвертации цвета из системы HSL в HSB изменение параметра L будет влиять на два параметра сразу — S и B, неизменным сохранится только цветовой тон — H.

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

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

Дано: пользователи двух статусов.

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

Решение: поскольку в CSS можно задавать цвет в координатах HSL, будем использовать это цветовое пространство. Копируем цвет из макета и переводим его в HSL .

Для изменения цветового тона необходимо изменить параметр Hue, а остальные параметры сохранить. Для светлого фона используем значения HSL: [0–360°], 100%, 78%, а для тёмного — HSL: [0–360°], 100%, 30%.

Параметр Hue будет зависеть от имени пользователя, которое он ввёл при регистрации. После конвертации букв имени в битовую строку , они будут возвращаться в виде значений от 0 до 360. Эти значения, установленные для параметра H, и станут определять цвет ― у каждого имени он будет уникальным. Для этой операции можно использовать хеш-функцию , но есть и другие решения.

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

LAB и LCh

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

Создатели CIELAB, также известно как LAB, преследовали цель спроектировать такое цветовое пространство, которое не будет привязано к конкретному устройству и покроет весь видимый спектр. Также было важно, чтобы изменение значений координат было нелинейным и приводило к изменению цвета по логике, близкой к осознанию цвета человеком.

Значения цвета в LAB задаются через светлоту ( Lightness) и две координаты, отвечающие за хроматическую составляющую: тон и насыщенность.
A — положение цвета в диапазоне от зелёного до красного, B — от синего до жёлтого.

Параметр L варьируется от 0 до 100, а параметры A и B в большинстве сервисов для работы с LAB имеют значения от −128 до 128, поскольку координаты A и B обозначают не просто интенсивность какого-то цвета, а спектр между двумя цветами.

Система достаточно сложная, но можно попытаться представить её как смешение четырёх цветов — зелёного, красного, синего и жёлтого. На самом насыщенном срезе цветового пространства со светлотой 100 по углам находятся: зелёный — LAB (100, −128, 128), красный — LAB (100, 128, 128), фиолетовый — LAB (100, 128, −128), бирюзовый — LAB (100, −128, −128), а в самом центре белый —
LAB (100, 0, 0). Как и в случае с RGB, настраивать цветовой тон удобнее в цилиндрической версии LAB — LCh.

Цилиндрическая версия LAB называется LCh, вместо прямоугольных в ней используются полярные координаты. Параметр C ( Chroma — хроматическая составляющая, насыщенность) отвечает за длину радиуса и удалённость от центра цветового круга, а h ( Hue) за угол поворота в градусах — то есть цветовой тон.

LAB используют как промежуточное цветовое пространство для конвертирования RGB в CMYK и наоборот, поскольку оно не привязано к конкретному носителю.

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

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

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

Задача: создать чистый градиент между насыщенными цветами.

Проблема: из-за технических нюансов RGB между некоторыми насыщенными цветами при построении градиента возникает странный сероватый оттенок.

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

Решение: использовать LAB-градиент.

Открываем Lch and Lab colour and gradient picker, выбираем два цвета, между которыми надо сделать переход, и вводим желаемое количество ступеней.

Копируем цвета из колонки Lab и переносим в редактор, делая линейный градиент из выбранного количества шагов.

Если в качестве редактора вы используете Figma, то нужно установить плагин Chromatic Figma, который автоматически исправляет градиенты через LAB. Результат будет немного отличаться от инструмента Дэвида Джонстона.

Источник