Цветовое колесо — онлайн-колесо выбора цвета и дополнительные цвета
Используйте этот интерактивный цветовой круг к выбрать цвет, находить дополнительные цвета, и исследовать аналогичный, триадный, тетрадный, и сплит-дополнительный схемы. Это быстрый способ подобрать цвет, протестировать контрастные цвета и создать комбинации цветов, которые хорошо сочетаются друг с другом.
Функции
- Интерактивный колесо выбора цвета (HSV) с плавным перетаскиванием и точным вводом (HEX/RGB/HSL).
- Мгновенный генератор дополнительных цветов плюс аналогичные, триадные, расщепленно-дополнительные, тетрадные и монохроматические варианты.
- Подсказки WCAG по контрастности для читаемого текста пользовательского интерфейса и кнопок с помощью контрастные цвета.
- Экспорт палитры в PNG, Svg, или CSS-переменные для быстрой передачи.
- Адаптивный холст, сохраняющий всю полноту цветовой круг виден на каждом экране.
Приложения
Брендинг и пользовательский интерфейс: Создавайте гармоничные палитры, соответствующие индивидуальности вашего бренда. Используйте дополнительный цветовой круг для создания эффективных призывов к действию или триадный цвет Схема для сбалансированной навигации и цветов диаграмм.
Иллюстрация и одежда: Исследовать аналогичные схемы для градиентов, которые кажутся естественными. Если вам нужны цвета, которые хорошо сочетаются с одеждой, этот инструмент поможет. найти дополнительные цвета который бросается в глаза («дополнительные цвета подходят друг другу»).
Интерьер и покраска: Перевести Цветовое колесо RGB к цветовой круг краски мышление; начните с анкерного оттенка и протестируйте противоположные цвета или отключен звук третичные цвета для баланса.
Дата визита: Выбирайте палитры с достаточным контрастом для диаграмм; а сплит-дополнительный набор часто позволяет избежать путаницы, сохраняя при этом разнообразие.
Как это работает
- Выберите цвет: перетащите колесико или введите HEX/RGB/HSL.
- Выберите схему: комплементарный, аналогичный, триадный, расщепленно-дополнительный, тетрадный или монохроматический.
- Уточнить значение: отрегулируйте Яркость (значение), чтобы контролировать светлый/темный.
- Проверьте контраст: убедитесь, что текст соответствует требованиям WCAG на светлом/темном фоне.
- Экспорт: загрузите PNG/SVG или скопируйте переменные CSS для передачи разработчикам.
Совет: если вам нужно быстро генератор цветовых комбинаций, начните с Одинарный → Дополнительный → Триадный, чтобы сравнить настроение и читабельность.
Часто задаваемые вопросы
Что такое цветовой круг в теории цвета?
The колесо теории цвета располагает оттенки по кругу, чтобы вы могли видеть такие отношения, как дополнительные (противоположности), аналогичные (соседи) и триадные (равномерно расположенные). Это основа для цветовая гармония и подбирая цвета, которые сочетаются друг с другом.
Как найти дополнительные цвета?
Выберите базовый оттенок; его дополнительный цвет сидит прямо напротив колеса. Используйте схему приложения «Дополнительно», чтобы мгновенно сгенерировать пару и оценить контраст.
Что такое первичные, вторичные и третичные цвета?
Первичные оттенки — это базовые цвета; их смешивание дает вторичные цвета, а смешивание основного цвета с соседним вторичным создает третичные цвета, образуя классический 12-цветный круг.
Цветовой круг RGB или цветовой круг краски?
The Цветовое колесо RGB моделирует аддитивный свет для экранов; традиционные малярные колеса RYB являются субтрактивными. Пары дополнений незначительно различаются между моделями.
Каковы цвета радуги по порядку?
Красный, Оранжевый, Желтый, Зеленый, Синий, Индиго, Фиолетовый — полезны при построении колесо цветового спектра или преподавание основ теории цвета.
Какие цвета хорошо сочетаются в пользовательском интерфейсе?
Пытаться аналогичный для гладкой гармонии, триадный для сбалансированного контраста или дополнительный для сильного акцента (кнопки, оповещения). Всегда проверяйте коэффициент контрастности.
Глоссарий (теория цвета)
Дополнительные цвета: противоположные оттенки на колесе, которые максимизируют контраст (например, синий ↔ оранжевый).
Аналог: соседние оттенки, которые создают мягкие градиенты и визуальное единство.
Триадный: три оттенка, расположенные на расстоянии 120° друг от друга; яркий, но сбалансированный.
Тетрадный: две дополнительные пары; богатый, но требует тщательного баланса.
Первичное/Среднее/Третичное: базовые оттенки, их смеси и промежуточные этапы в 12-цветном круге.
Цветовой тон/Насыщенность/Значение (HSV): угол на колесе, интенсивность цвета и яркость.
Доступность и контраст
Используйте подсказки по контрасту, чтобы обеспечить читаемость текста. Для обычного текста стремитесь к соотношению ≥ 4,5:1; для большого текста, ≥ 3:1. Если вы сомневаетесь, выберите более светлый фон и более темный дополнительный цвет или увеличьте яркость/значение для лучшей читаемости.