Бесплатный онлайн-инструмент
Сочетание цветов
Укажите свой цвет — инструмент подберёт к нему акцентный, аналогичные и триадные цвета, оттенки и читаемый цвет текста.
Заголовок на вашем цвете
Так выглядит текст поверх выбранного цвета.
Как пользоваться
- Выберите цвет в палитре или вставьте HEX-код — например, основной цвет вашего бренда или сайта.
- Инструмент разложит его по цветовому кругу: комплементарный акцент, аналогичные соседи, триада, раздельно-комплементарная схема и монохромные оттенки.
- Клик по любому цвету копирует его HEX-код. Внизу — живой пример: ваш цвет как фон с подобранным акцентом и читаемым текстом.
Перевести код в RGB и HSL можно в конвертере HEX в RGB. Целая палитра с нуля — в генераторе палитр, а полное оформление страницы из одного цвета — в цветовой схеме сайта.
Частые вопросы
Что такое комплементарный цвет?
Это цвет, расположенный напротив исходного на цветовом круге (через 180°). Такая пара даёт максимальный контраст, поэтому комплементарный цвет чаще всего берут как акцентный — для кнопок, ссылок и выделений.
Какую схему выбрать для сайта?
Аналогичные цвета — спокойные разделы и фоны, они почти не спорят между собой. Комплементарный — один яркий акцент. Триада — когда нужно три равноправных цвета, например для графиков. Раздельно-комплементарная — компромисс: контраст мягче, чем у чистой пары.
Как определяется цвет текста поверх цвета?
По яркости (luminance): если фон светлый, инструмент предлагает тёмный текст, если тёмный — белый. Это базовая проверка читаемости; для точного соответствия WCAG проверяйте контраст пары отдельно.
Чем оттенки отличаются от сочетаний?
Оттенки — это тот же цвет разной светлоты (монохромная гамма): подходят для ховеров, фонов и границ. Сочетания — другие тона с цветового круга, которые гармонируют с исходным.
Можно ли вставить цвет в формате RGB?
Поле принимает HEX-запись: полную #ff6b35 и короткую #f60. Перевести RGB или HSL в HEX можно в нашем конвертере цветов — ссылка под инструментом.