Генератор цветовой палитры - Создание гармоничных цветовых схем

Что такое генератор цветовой палитры?

Генератор цветовой палитры — это инструмент, который создаёт набор сочетающихся цветов на основе одного исходного цвета, называемого основным. Этот генератор принимает основной цвет и тип гармонии, а затем рассчитывает остальные цвета палитры по правилам теории цвета. Он поддерживает четыре типа гармонии: комплементарную, аналоговую, триадическую и монохроматическую.

Как инструмент создаёт палитру

Инструмент преобразует основной цвет из шестнадцатеричного кода (например, #3B82F6) в цветовую модель HSL. HSL описывает цвет тремя числами:

• Тон: положение цвета на 360-градусном цветовом круге (0° — красный, 120° — зелёный, 240° — синий).
• Насыщенность: интенсивность цвета — от 0 % (серый) до 100 % (чистый цвет).
• Светлота: близость цвета к чёрному или белому — от 0 % (чёрный) до 100 % (белый).

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

Как рассчитываются комплементарные цвета

Формула:

$h' = (h + 180) \bmod 360$

где h — тон основного цвета в градусах, а h′ — новый тон. Операция mod возвращает результат, вышедший за пределы полного оборота, обратно на цветовой круг.

Насыщенность и светлота остаются неизменными.

Пример: чистый синий цвет, #0000FF, имеет тон 240°, насыщенность 100 % и светлоту 50 %. При добавлении 180° получается тон 60°. Преобразование тона 60° обратно в шестнадцатеричный код при той же насыщенности и светлоте даёт #FFFF00, то есть жёлтый цвет. Поэтому этот инструмент сочетает синий с жёлтым, а не с оранжевым.

Это может сбивать с толку, поскольку на уроках изобразительного искусства часто изучают другой цветовой круг — пигментный круг RYB (красный — жёлтый — синий), где противоположным синему считается оранжевый. Этот инструмент работает с основанным на RGB цветовым кругом HSL, используемым экранами, поэтому его комплементарные пары отличаются от круга смешения красок.

Как рассчитываются аналоговые цвета

Аналоговые цвета находятся рядом с основным цветом на цветовом круге. Инструмент создаёт два тона на расстоянии 30° и два тона на расстоянии 60° от основного тона — все с той же насыщенностью и светлотой.

$h \pm 30^{\circ}, \qquad h \pm 60^{\circ}$

где h — тон основного цвета.

Пример: синий цвет, #0000FF (тон 240°), даёт тон 270° (#8000FF), тон 210° (#0080FF), тон 300° (#FF00FF) и тон 180° (#00FFFF). Вместе с основным цветом палитра содержит пять цветов.

Как рассчитываются триадические цвета

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

$h + 120^{\circ}, \qquad h + 240^{\circ}$

Пример: красный цвет, #FF0000 (тон 0°), даёт тон 120° (#00FF00, зелёный) и тон 240° (#0000FF, синий). Трёхцветный набор состоит из красного, зелёного и синего — тех же трёх тонов, которые используются как основные цвета на цифровых экранах.

Как рассчитываются монохроматические цвета

Монохроматические цвета сохраняют тот же тон и насыщенность, изменяется только светлота. Инструмент сдвигает светлоту на 15 и 30 процентных пунктов в каждом направлении, ограничивая результат диапазоном от 5 % до 95 %.

$l \pm 15, \qquad l \pm 30$

где l — светлота основного цвета в процентных пунктах.

Пример: синий цвет, #0000FF (светлота 50 %), даёт светлоту 65 % (#4D4DFF), светлоту 35 % (#0000B3), светлоту 80 % (#9999FF) и светлоту 20 % (#000066).

Из-за ограничений 5 % и 95 % основной цвет, уже очень светлый или очень тёмный, может дважды достичь одного и того же предельного значения. Чёрный цвет, #000000, даёт светлоту 15 % (#262626), 5 % (#0D0D0D), 30 % (#4D4D4D) и снова 5 % (#0D0D0D), поэтому один цвет повторяется.

Использование инструмента

1. Выберите основной цвет с помощью инструмента выбора цвета или введите шестнадцатеричный код, например #3B82F6.
2. Выберите тип гармонии: комплементарный, аналоговый, триадический или монохроматический.
3. Просмотрите созданную палитру. На кнопке каждого образца отображается его шестнадцатеричный код.
4. Нажмите эту кнопку, чтобы скопировать шестнадцатеричный код, или используйте «Скопировать все цвета», чтобы сразу скопировать всю палитру.

Проверка контрастности для доступности

На каждом образце цвета отображаются два небольших значка: один показывает контраст с белым, другой — контраст с чёрным. Инструмент рассчитывает коэффициент контрастности по формуле WCAG (Руководства по обеспечению доступности веб-контента):

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

где C — коэффициент контрастности.

L1 — относительная яркость более светлого цвета, а L2 — относительная яркость более тёмного цвета. Яркость рассчитывается на основе значений красного, зелёного и синего каналов цвета. На значке отображается «AA», если коэффициент равен 4,5 или выше, что соответствует минимальному требованию WCAG для текста обычного размера. Если коэффициент ниже 4,5, отображается «!». При наведении на значок показывается точное значение коэффициента. Чёрный текст на белом фоне получает коэффициент 21 — это максимально возможное значение.

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

Часто задаваемые вопросы

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

Почему этот инструмент сочетает синий с жёлтым, а не с оранжевым, для комплементарных цветов? Инструмент поворачивает тон на 180° на круге HSL, основанном на смешении красного, зелёного и синего света экранами. Пигментный круг красный — жёлтый — синий, который изучают на уроках искусства, даёт другие комплементарные пары, поскольку в нём смешиваются пигменты, а не свет.

Сколько цветов создаёт каждый тип гармонии? Комплементарная гармония создаёт всего 2 цвета, включая основной. Триадическая — 3. Аналоговая — 5. Монохроматическая — 5.

Какую цветовую модель инструмент использует внутри? HSL (тон, насыщенность, светлота). Он преобразует введённый шестнадцатеричный код в HSL, выполняет расчёты, а затем преобразует результат обратно в шестнадцатеричный код.

Проверяет ли инструмент доступность цветов? Да. На каждом образце показывается, достаточно ли его контрастности с белым и чёрным, чтобы соответствовать стандарту WCAG AA для обычного текста, который требует коэффициента не менее 4,5.

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

Форматы цветов

Инструмент записывает каждый созданный цвет в виде шестизначного шестнадцатеричного кода со знаком # перед ним (например, #ff0000 для красного цвета). Шестнадцатеричные коды напрямую соответствуют значениям красного, зелёного и синего компонентов от 0 до 255 для каждого компонента. Основной цвет отображается точно в том виде, в каком был введён, поэтому трёхзначная сокращённая запись, например #F00, сохраняется в кратком виде. Трёхзначные коды обозначают тот же цвет, что и шестизначная форма: каждая цифра удваивается, поэтому #F00 — это #FF0000. HSL — альтернативный способ описания тех же цветов с использованием тона, насыщенности и светлоты вместо значений красного, зелёного и синего компонентов.