Softonic

Обозреватель цветового круга

Шаг 1 / 4

Выберите основной цвет

Далее

Перетаскивайте маркер по цветовому кругу и наблюдайте, как вместе с ним вращаются метки гармоний: дополнительная с шагом 180°, триадная с шагом 120°, а также аналогичные соседние цвета, раздельно-дополнительная и тетрадная. Переключайтесь между HSL (кругом для инженеров) и RYB (кругом художника), сравнивайте, в чём они расходятся, и копируйте понравившееся сочетание в виде палитры.

Как работает обозреватель цветового круга

  1. 1

    Перетаскивайте маркер по кругу

    Маркер задаёт основной цвет. Насыщенность и светлоту можно регулировать отдельными ползунками.

  2. 2

    Выберите гармонию

    Дополнительная, аналогичная, триадная, раздельно-дополнительная, тетрадная, монохромная. Метки гармонии вращаются вместе с основным цветом.

  3. 3

    Переключите модель (HSL или RYB)

    Круг HSL симметричен (красный напротив голубого, зелёный напротив пурпурного). Круг RYB асимметричен (красный напротив зелёного, синий напротив оранжевого) и ближе к интуиции смешивания красок.

  4. 4

    Скопируйте палитру

    HEX, RGB, HSL для основного цвета и каждой метки гармонии. Переменные CSS, карта Sass или обычный CSV.

Круг HSL и круг RYB

Оба круга располагают цвета по окружности, но расходятся в том, какие цвета считать «противоположными»:

Основной цвет Дополнение HSL Дополнение RYB
Красный Голубой Зелёный
Оранжевый Бирюзовый Синий
Жёлтый Синий Фиолетовый
Зелёный Пурпурный Красный
Синий Жёлтый Оранжевый
Фиолетовый Жёлто-зелёный Жёлтый
  • HSL (тон, насыщенность, светлота): цилиндрическое представление sRGB, применяемое в CSS и цифровом дизайне. Прибавление 180° выбирает противоположный тон на этом цифровом круге.
  • RYB (красный, жёлтый, синий): традиционный концептуальный круг из художественного образования. Обозреватель приблизительно воспроизводит эту систему, меняя расположение тонов; он не предсказывает результат смешивания настоящих пигментов.

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

Определения гармоний на круге

  • Дополнительная: основной цвет + 180°. Наибольшее различие тонов на выбранном круге.
  • Аналогичная: основной цвет и соседи на -30° и +30°. Мягкая и цельная.
  • Триадная: основной цвет + 120° + 240°. Сбалансированная яркость.
  • Раздельно-дополнительная: основной цвет + 150° + 210°. Насыщенная, но без полного напряжения дополнительной схемы.
  • Тетрадная / квадрат: основной цвет + 90° + 180° + 270°. Четыре тона на равном расстоянии.
  • Монохромная: один и тот же тон, разная светлота/насыщенность.

Температура на круге

  • Тёплая половина: красный, оранжевый, жёлтый. Традиционно выступает вперёд (притягивает взгляд).
  • Холодная половина: зелёный, синий, фиолетовый. Традиционно отступает назад.
  • Нейтральные: малонасыщенные цвета; относятся к той или иной половине в зависимости от подмеса.

Практическое применение

  • Подбор палитры бренда: перетаскивайте маркер, пока не найдёте подходящий цвет, а затем посмотрите триадные или тетрадные метки для дополнительных акцентов.
  • Этюды и изучение цвета: выберите фотореференс, найдите доминирующий тон и посмотрите аналогичные соседние цвета для монохромной тушёвки.
  • Иллюстрация: выбирайте дополнительную пару для теней, например, для оранжевого предмета пишите тени синим, а не просто более тёмным оранжевым.
  • Эскиз дизайна интерьера: триадные круги соответствуют классическим интерьерным палитрам (синий/жёлтый/красный в традиционном американском стиле; зелёный/оранжевый/фиолетовый в богемном).

Почему круг не вполне интуитивен

Реальное восприятие цвета человеком сложнее, чем предполагает любой из кругов. Система Манселла, LAB и OKLCH стремятся к перцептивно равномерному расположению, и оно не образует простой окружности: цветность меняется в зависимости от светлоты для каждого тона. Для серьёзной работы над дизайн-системой перцептивные цветовые пространства дают более чистый результат, чем круги; а для концептуального исследования цвета круг по-прежнему выигрывает в наглядности.

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

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

Модели по-разному располагают цветовые тона. HSL использует угол тона sRGB, поэтому напротив красного находится голубой. В традиционной системе RYB напротив красного находится зелёный. Здесь RYB является визуальным приближением, а не прогнозом смешивания конкретных красок.

Для обучения, набросков идей и общения с клиентами, да. Для точной работы с палитрой профессионалы всё чаще используют перцептивные пространства (LAB, OKLCH), где светлота и цветность не зависят от тона.

Скопируйте палитру в формате CSS, Sass или CSV и сохраните её в своём рабочем пространстве. У обозревателя нет библиотеки палитр или хранилища учётной записи. В четырёхэтапном режиме видимые настройки круга включаются в URL и могут остаться в истории браузера.

Сопутствующие инструменты

Смешивание цветов

Смешайте два HEX-цвета в 2-20 равномерных образцов. Каждый промежуточный цвет показывается как HEX-код в верхнем регистре, включая оба края.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Генератор вымышленных телефонных номеров

Создавайте до 50 вымышленных номеров из официально зарезервированных диапазонов пяти стран.

Генератор бейджей README

Создавайте бейджи shields.io для файлов README на GitHub: статус сборки, версия, лицензия, число загрузок и покрытие кода. Просмотрите и скопируйте фрагмент Markdown.

Генератор случайных адресов

Создавайте 1–20 похожих на адрес записей для макетов и тестов в трёх упрощённых форматах.

Инструмент доступен на других языках