Цветовой круг

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

В этом инструменте используется цифровая модель HSL на основе sRGB. Оттенок задаётся углом от 0 до 359 градусов. Насыщенность и светлота выбранного цвета сохраняются при перемещении по кругу; задать произвольный цвет можно через палитру браузера или HEX. Художественные круги RYB и другие модели могут давать иные сочетания: математическая схема зависит от выбранной модели.

Сервис mePage работает бесплатно и без регистрации. Цвета рассчитываются в браузере, без отправки палитры на сервер. Круг и результат расположены в основной рабочей области страницы.

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

Контрастная схема добавляет цвет с противоположной стороны цифрового круга, на расстоянии 180°. Триада использует три оттенка с шагом 120°, а тетрада в этом инструменте построена как квадрат с шагом 90°.

Аналогия объединяет базовый оттенок и соседние, на расстоянии 30° в обе стороны. Раздельный контраст добавляет к базовому цвету два оттенка около противоположного, на расстоянии 150° и 210°. Акцентная аналогия сочетает близкие тона с одним противоположным акцентом.

HEX записывает цвет шестнадцатеричным кодом, например #7563D8. RGB описывает красный, зелёный и синий каналы числами от 0 до 255. Эти форматы удобно использовать при оформлении сайта и цифровых макетов.

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

CMYK описывает доли голубого, пурпурного, жёлтого и чёрного. Здесь используется приблизительное математическое преобразование без ICC-профиля. Для печати согласуйте значения с типографией: изображение на экране не гарантирует совпадение с физическим образцом.

Выберите оттенок мышью или касанием внешнего кольца. Для управления с клавиатуры переведите фокус на круг и используйте клавиши направления. Shift увеличивает шаг изменения. Home переводит оттенок к началу шкалы, End к её концу.

Для точного исходного цвета введите HEX из трёх или шести символов, например #ABC или #AABBCC. Правила гармонии сразу пересчитают палитру. Готовые варианты характера меняют насыщенность и светлоту базового цвета без отдельных ползунков.

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

Определите роли цветов: основной, фоновый и акцентный. Наличие нескольких оттенков в схеме не означает, что их нужно использовать в одинаковом объёме. Более активный цвет удобно оставить для небольших деталей и важных действий.

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

Для плавных переходов между выбранными оттенками используйте генератор CSS-градиентов mePage. В нём можно настроить фон и получить CSS для своего элемента.

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

RGB и HSL в этом инструменте предназначены прежде всего для цифровых задач. CMYK используйте как ориентир до проверки в рабочем профиле. Палитры RAL, NCS и Pantone не подменяются приблизительными названиями или автоматически выдуманными соответствиями.

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