Пиксель

Генератор палитр онлайн

Пять цветов из одного оттенка, палитра из фотографии и проверка контраста — на одном экране. HEX, CSS, JSON и PNG без регистрации.

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

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

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

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

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

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

— Контраст

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

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

    Палитра нужна не только дизайнеру. Она помогает собрать витрину, обложку, презентацию, интерьер или страницу сайта в один визуальный ряд. Здесь можно начать с одного цвета, выбрать правило гармонии и сразу увидеть, как оттенки работают вместе.

    Второй способ — фото. Загрузите снимок интерьера, ткани, упаковки или природы, и генератор выделит доминирующие цвета. Все вычисления идут в браузере: фотография не уходит на сервер, а результат можно скопировать в CSS или скачать картинкой.

    Отдельный блок проверяет контраст текста и фона по WCAG. Это пригодится, когда палитра уже нравится, но нужно понять, будет ли заголовок читаться на выбранном фоне.

    Шесть правил гармонии Аналоговая, комплементарная, триада, тетрада, монохром и оттенки.
    Палитра из фото Доминирующие цвета снимка за пару секунд, без загрузки на сервер.
    Контраст по WCAG Уровни AA и AAA для обычного и крупного текста с точным отношением.
    Экспорт без воды HEX, CSS-переменные, JSON, PNG 1200×630 и SVG для дизайнера.

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

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

    Где пригодится палитра

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

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

    Генератор палитр действительно бесплатный?

    Да. Гармонии, палитра из фотографии, проверка контраста, HEX, CSS, JSON, PNG и SVG доступны без оплаты и регистрации. Водяных знаков на палитре нет.

    Куда загружается фотография?

    Никуда. Файл читается через canvas на вашем устройстве: мы уменьшаем снимок до 480 px, считаем доминирующие цвета и сразу забываем пиксели. Запрос на сервер не отправляется, поэтому инструмент работает и без сети после первой загрузки.

    Чем отличаются гармонии?

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

    Что означает контраст 4,5:1?

    Это отношение яркостей текста и фона по WCAG 2.2. Уровень AA требует минимум 4,5:1 для обычного текста и 3:1 для крупного. Уровень AAA — 7:1 и 4,5:1 соответственно. Чем больше отношение, тем легче читать текст.

    Можно ли использовать палитру в коммерческом проекте?

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

    Почему цвет на печати отличается от экрана?

    Экран светится в sRGB, а краска отражает свет и смешивается в CMYK. Разные лампы, бумага и профиль печати тоже меняют оттенок. Для точного результата запросите печатный образец или веер Pantone.