Пиксель

Сочетание цветов

Выберите один оттенок — генератор покажет, какие цвета с ним сочетаются. Шесть правил гармонии, палитра из фото и проверка читаемости текста.

Цвет, от которого строится схема. Можно ввести HEX вручную.

Палитра из фотографии

JPG, PNG или WebP до 10 МБ. Мы уменьшаем снимок до 480 px и считаем цвета на устройстве.

Без галочки выбор файла недоступен: фото — персональные данные.

Проверка контраста

Отношение яркостей текста и фона по WCAG 2.2. Минимум для обычного текста — 4,5:1, для крупного — 3:1.

— Контраст

Так выглядит обычный текст на этом фоне

Крупный текст 24 px

    Сочетание цветов держится на цветовом круге. Аналоговая схема берёт соседние оттенки: она спокойная и почти всегда безопасная. Комплементарная добавляет противоположный цвет — это сильный акцент, который легко перегрузить. Триада и тетрада распределяют цвета равномерно и дают более сложные, но выразительные комбинации.

    На практике важнее не название схемы, а пропорции. Один цвет становится основным, второй — фоновым, третий — акцентным. Правило 60–30–10 помогает не ошибиться: 60% площади занимает основной тон, 30% — поддерживающий, 10% — самый яркий.

    Если палитра должна совпадать с фотографией, интерьером или упаковкой, загрузите снимок: генератор выделит доминирующие цвета. А блок контраста покажет, можно ли размещать текст на выбранном фоне.

    Цветовой круг Соседние, противоположные и равноудалённые оттенки — без ручных расчётов.
    Пропорции 60–30–10 Подсказка, как распределить основной, поддерживающий и акцентный цвет.
    Проверка читаемости WCAG AA и AAA для текста на фоне — до публикации, а не после.

    Как это работает

    1. Введите базовый HEX или выберите цвет пипеткой.
    2. Переключите гармонию и сравните аналоговую, комплементарную и триаду.
    3. Скопируйте HEX или CSS и проверьте контраст текста.

    Где использовать сочетания

    • Фирменный стиль небольшой студии или магазина
    • Обложка курса и слайды презентации
    • Оформление соцсетей: фон, текст, кнопки
    • Подбор акцента к уже существующему логотипу
    Пипетка: цвет по фото Точный HEX, RGB и HSL в любой точке снимка. Работает на телефоне. Проверка контраста WCAG AA и AAA для текста на фоне, подбор безопасной пары цветов. Генератор градиентов Линейные и радиальные градиенты, готовый CSS и PNG для соцсетей. Генератор QR-кодов Ссылка, Wi-Fi, визитка, Telegram или меню — в одном коде. PNG, SVG и PDF для печати.

    Частые вопросы

    Сколько цветов должно быть в палитре?

    Для интерфейса или обложки обычно хватает 3–5: основной цвет, фоновый, текстовый и один-два акцента. Больше цветов сложнее удержать в одном стиле. Начните с базового оттенка и добавьте контрастный акцент.

    Какая гармония самая безопасная?

    Аналоговая: соседние оттенки на цветовом круге почти всегда выглядят спокойно. Комплементарная даёт сильный контраст, но её легко перегрузить. Для первого проекта попробуйте аналогию, а яркий цвет оставьте для кнопки или ссылки.

    Можно ли подобрать сочетание без базового цвета?

    Да. Нажмите «Случайный цвет» или загрузите фотографию — генератор возьмёт оттенки из изображения. Случайный вариант полезен, когда нужен неожиданный старт, а фото — когда палитра должна совпадать с реальным объектом.

    Как понять, что текст будет читаться?

    Проверьте пару цветов в блоке контраста: для обычного текста нужно отношение не ниже 4,5:1, для крупного — 3:1. Если отношение ниже, затемните текст или осветлите фон. Не полагайтесь только на цвет: важны размер и насыщенность шрифта.

    Подходят ли HEX-коды для печати?

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