Кольорова гармонія: HSL Колірний Круг та Правила за їх Походженням Гарних Палітр

HSL: колір як кут, а не три окремі канали

RGB зберігає колір як три незалежні канали інтенсивності, що зручно для дисплея, але марне для розуміння "подібних" або "протилежних" кольорів. HSL — відтінок, насиченість та світлість — перепараметризує той самий колірний простір так, що кут (відтінок) є одним кутом від 0 до 360 градусів навколо кола, насиченість — відстань від сірого центру, а світлість — наскільки близький колір до чорного або білого. Оскільки кут (відтінок) буквально є кутом, правила гармонії кольорів стають простими геометричними правилами: вибирайте кути з певною взаємозв’язком, і отримані кольори зазвичай здаються цілеспрямованими, а не випадковими.

Класичні правила гармонії, за кутами

Доповнювальна колірна палітра: колір + 180° – максимальний контраст, 1 пара Роздільно-доповняльна колірна палітра: колір + 150°, колір + 210° – контраст, менше напруги, ніж у чистої доповнювальної палітри. Тріадна колірна палітра: колір + 120°, колір + 240° – збалансована, яскрава, рівномірно розташовані кольори. Четвірка (квадратна) колірна палітра: колір + 90°, колір + 180°, колір + 270° – насичена, потребує одного домінуючого кольору. Аналогічна колірна палітра: колір ± 30° – спокійна, низький контраст, природно узгоджена. Монохромна колірна палітра: один колір, що змінюється лише на насиченість та відтінок – найбезпечніша, гарантовано узгоджена. Доповнювальні пари (на відстані 180°) створюють найсильніший можливий контраст, оскільки вони знаходяться на протилежних кінцях колірного круга; аналогічні кольори (в межах приблизно 30°) мають достатньо схожих характеристик, щоб викликати відчуття спокою та єдності. Тріадна та четвірка палітри найкраще працюють, коли один колір обрано як візуально домінуючий, а інші використовуються помірно як акценти – три або чотири кольори на повну силу і з рівною інтенсивністю схильні конкурувати, а не гармонізуватися.

Complementary       hue, hue + 180°                    maximum contrast, 1 pair
Split-complementary hue, hue + 150°, hue + 210°         contrast, less tension than pure complementary
Triadic             hue, hue + 120°, hue + 240°          balanced, vivid, evenly spaced
Tetradic (square)   hue, hue + 90°, hue + 180°, hue + 270°   rich, needs one dominant colour
Analogous           hue, hue ± 30°                        calm, low contrast, naturally cohesive
Monochromatic       one hue, varying only S and L          safest, guaranteed to cohere

Чому комплементарні кольори виглядають настільки інтенсивно разом

Це не просто естетична конвенція – це корени у реальній фізіології ока. Колірне бачення людини перекодує сигнали трьох типів колбочок в опірні канали: канал червоний-зелений та канал блакитний-жовтий, замість того, щоб передавати окремо незмішані сигнали червоного, зеленого та синього. Кольори, що знаходяться навпроти один одного на колісному діаграмі відтінків, змушують ці опірні канали діяти на межі в протилежних напрямках одночасно, що і створює вібруючий ефект високого контрасту при розміщенні поруч – а також викликає класичний ефект післяобразування, коли погляд на насичений колір та подальше відведення погляду показує примарне зображення в його комплементарному відтінку, оскільки змучений опірний канал тимчасово перевищує межу.

RYB проти RGB: дві різні колірні схеми, два різних відповіді

Ключова та часто пропущена деталь: традиційна художня кольорова колірна схема (червоно-жовто-блакитна, RYB) описує віднімальне змішування пігментів, де кожен доданий пігмент поглинає більше довжин хвиль, а змішування схиляється до темряви або каламутності. Цифрові інструменти використовують RGB колірну модель, яка описує аддитивне змішування світла, де додавання довжин хвиль рухається до білого. Обидві колірні схеми розміщують відтінки в різних позиціях – наприклад, оранжева колірна схема RYB приблизно там же, де знаходиться жовто-зелена колірна схема RGB, тому гармонія, прочитана правильно з друкованої пігментної колери, не буде переноситися ідентично в CSS-вибірник кольорів, і навпаки.

Де HSL обманює вас

Значення світлості в HSL є математичним середнім каналів RGB кольору, а не вимірюванням того, наскільки яскраво колір здається людському оку. Оскільки людське зору значно чутливіше до жовто-зелених довжин хвиль, ніж до блакитних, чистий жовтий та чистий синій, встановлені на однакову світлість HSL 50%, виглядатимуть зовсім не однаково яскравими – жовтий буде здаватися набагато яскравішим. Саме тому палітра, згенерована рівномірним обертанням відтінку за фіксованої світлості та насиченості HSL, може виглядати нерівномірно, з деякими колірними пробами, які "виділяються", а з іншими – віддаляються. Колірні простори, що базуються на сприйнятті, такі як CIELAB або новіший HSLuv, виправляють це, моделюючи реальну чутливість людського зору до світла, і все частіше використовуються серйозними дизайнерськими інструментами для створення дійсно збалансованих палітр замість простого обертання HSL.

Frequently asked questions

Спробуйте наживо

Усе, що вище, працює прямо у вашому браузері — відкрийте Colour Harmony і змінюйте параметри під час роботи. Нічого не встановлюється, нічого не завантажується на сервер, уся модель живе в одній вкладці.