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 и могут остаться в истории браузера.

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

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Конвертер BBCode в HTML

Преобразуйте BBCode (разметку форумов) в чистый HTML. Поддерживает теги форматирования, списки, цитаты, код, изображения, ссылки и таблицы.

Генератор случайных цветовых палитр

Создавайте случайные палитры из 2–15 цветов, выбирайте яркий, пастельный, приглушенный или темный стиль и копируйте HEX-коды или CSS-переменные.

Выбор цвета HEX

Выберите или введите HEX-цвет и получите RGB, HSL, примерный CMYK, относительную яркость и контраст с белым и чёрным.

Конвертер двоичного кода в ASCII

Вставьте двоичный код (байты через пробел или длинный поток битов) и получите текст ASCII, который он представляет. Поддерживает 7-битные и 8-битные кодировки.

Генератор цветовой палитры

Создавайте монохромные, аналоговые, комплементарные, триадные или тетрадные палитры из базового HEX-цвета и экспортируйте готовые CSS-переменные.