Сочетание цветов: почему это читается

Урок 8.4 · Интерфейсы и сайты с нуля · Модуль 8. Интерфейс, который понятно · По подписке

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

Нужно знать заранее: Урок 8.3

Объяснение

Зачем это нужно: «Подобрать цвета» — не значит найти красивые оттенки по одному. Красиво выглядит не набор цветов, а система: у каждого цвета есть работа, и они не спорят друг с другом. Именно поэтому сайт с тремя цветами часто выглядит дороже, чем сайт с двенадцатью.

Как это работает: Любой цвет в CSS можно описать тремя величинами: оттенок (hue — угол на цветовом круге), насыщенность (saturation — насколько цвет чистый) и светлота (lightness — насколько он светлый). Два цвета с одним оттенком, но разной светлотой выглядят родственными. Это и есть основа палитры. Три способа сочетать цвета: монохромный — один оттенок в разных светлотах. Самый безопасный: так собраны почти все «спокойные» интерфейсы; аналогичный — соседние оттенки (синий и фиолетовый). Мягко и цельно; контрастный — противоположные (синий и оранжевый). Даёт силу, но пользоваться им надо точечно: на акцент, а не на всё сразу.

Уроки модуля 8

• 8.1 Один главный объект: иерархия экрана (бесплатно)
• 8.2 Близость и воздух: отступы вместо рамок (по подписке)
• 8.3 Цвет — это сигнал, а не украшение (по подписке)
• 8.4 Сочетание цветов: почему это читается — вы здесь (по подписке)
• 8.5 Контраст: чтобы видели все (по подписке)
• 8.6 Кнопка, которая ведёт себя как кнопка (по подписке)
• 8.7 Проект: переделать страницу по правилам (по подписке)
• 8.8 Разбор экрана: почему не видно главного (по подписке)