Бесплатный инструмент

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

Загрузите фото и получите его основные цвета с кодами HEX и RGB, проверку контраста с белым и чёрным текстом и превью страницы со ссылками в этих цветах.

Ваше фото

Количество цветов
Порядок

Ваша палитра

    Превью на странице со ссылками

    Ana Ruiz

    Керамика и занятия по гончарному делу

    Новые кружки в магазинеЗаписаться на занятиеПоследнее видео

      Что делает генератор палитры цветов

      Генератор палитры находит на картинке основные цвета и показывает их коды. Этот сервис читает ваше фото прямо в браузере, группирует похожие пиксели и возвращает 5, 6 или 8 цветов, которые занимают больше всего места. К каждому цвету прилагаются коды HEX и RGB и проверка контраста для текста.

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

      Ваше фото не покидает устройство. Сервис рисует его на canvas в браузере, поэтому загрузки на сервер нет, аккаунт не нужен и лимитов нет.

      Как сделать палитру по фото

      1. Загрузите фото

        Возьмите фото, которое вы часто публикуете, например аватар или снимок товара. Подходят файлы JPG, PNG и WebP.

      2. Выберите количество цветов

        Выберите 5, 6 или 8 цветов. Отсортируйте их по доле на фото или от светлых к тёмным.

      3. Проверьте контраст

        Для каждого цвета показан контраст с белым и чёрным текстом. Для кнопок с текстом берите цвета, которые прошли проверку.

      4. Скопируйте коды

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

      Правила контраста для текста на ваших цветах

      Руководство по доступности веб-контента (WCAG 2.2) задаёт минимальный контраст между текстом и фоном. Значки в сервисе используют эти числа.

      Что проверяетсяМинимальное соотношениеПравило WCAG
      Обычный текст на цвете4.5:11.4.3 Contrast (Minimum), уровень AA
      Крупный текст: 24 px или 18,5 px жирным3:11.4.3 Contrast (Minimum), уровень AA
      Обычный текст, строгий уровень7:11.4.6 Contrast (Enhanced), уровень AAA
      Крупный текст, строгий уровень4.5:11.4.6 Contrast (Enhanced), уровень AAA
      Кнопка или значок на фоне страницы3:11.4.11 Non-text Contrast, уровень AA

      Источники: W3C, Understanding 1.4.3 Contrast (Minimum), W3C, Understanding 1.4.6 Contrast (Enhanced), W3C, Understanding 1.4.11 Non-text Contrast. Проверено 11 ноября 2026 года.

      На вашей странице More.You

      Ваши цвета на странице со ссылками

      На странице More.You фон, кнопки, шрифты и цвета вы задаёте сами. Каждая правка попадает в черновик с отменой, поэтому опубликованная страница никогда не показывает недоделанный дизайн.

      more.you/

      • Темы и цвета на тарифе Free

        Выберите тему, затем поменяйте обои, стиль кнопок, шрифты и цвета. Листайте галерею тем, когда нужны идеи.

        Темы и дизайн

      • Начните с шаблона

        Шаблоны по профессиям дают готовую первую страницу. Примените один, затем подставьте цвета из своего фото.

        Шаблоны link in bio

      • Пять макетов шапки

        Макеты шапки (классический, hero, баннер, вырезанный и фигурный) помогают разместить фото так, чтобы оно лучше сочеталось с палитрой.

      Вопросы о палитре цветов

      Как генератор палитры выбирает цвета?

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

      Моё фото куда-нибудь загружается?

      Нет. Сервис открывает фото в браузере и читает его на элементе canvas прямо на вашем устройстве. Ничего не отправляется ни в More.You, ни на другие серверы, и ничего не сохраняется. Закройте вкладку, и фото вместе с палитрой исчезнут.

      Что означают коды HEX и RGB?

      Оба описывают один и тот же цвет. RGB задаёт количество красного, зелёного и синего от 0 до 255, например rgb(178, 246, 227). HEX записывает те же три числа в шестнадцатеричной системе после знака решётки, например #B2F6E3. Большинство дизайнерских программ и конструкторов сайтов принимают любой из вариантов.

      Какой контраст нужен тексту, чтобы его было удобно читать?

      Стандарт веб-доступности WCAG 2.2 на уровне AA требует контраста не ниже 4,5:1 для обычного текста и 3:1 для крупного. Крупный текст: 24 px или 18,5 px жирным. Значки рядом с каждым цветом показывают его контраст с белым и с чёрным текстом.

      Как использовать палитру на странице со ссылками?

      Возьмите самый светлый цвет для фона страницы и более насыщенный для кнопок. Затем проверьте, что текст кнопки проходит контраст 4,5:1 на цвете кнопки. Превью в сервисе показывает такой вариант и подсказывает, какие пары проходят.

      Какие типы файлов можно загружать?

      Любую картинку, которую открывает браузер: JPG, PNG, WebP и GIF. Для GIF сервис читает первый кадр. Если файл не открывается, сохраните его как JPG или PNG на телефоне или компьютере и попробуйте снова.

      Можно скопировать палитру как CSS?

      Да. Нажмите «Скопировать как CSS-переменные», и вы получите блок :root с одной переменной на каждый цвет, например --color-1: #B2F6E3. Вставьте его в начало таблицы стилей и используйте var(--color-1) там, где нужен этот цвет. Переменные идут в выбранном вами порядке, поэтому --color-1 соответствует самому частому или самому светлому цвету.

      Другие бесплатные инструменты

      Бесплатно, без аккаунта. Всё, что вы вводите, не хранится на наших серверах.

      Генератор шрифтов

      Превратите текст в 24 стиля: от жирного и курсива до рукописного и пузырей. Копируйте и вставляйте куда угодно.

      Открыть инструмент →

      Генератор шапки профиля

      Получите 12 идей для шапки профиля в Instagram, TikTok, X или YouTube с живым счётчиком символов.

      Открыть инструмент →

      Генератор QR-кода

      Превратите любую ссылку в QR-код. Выберите цвета, скачайте PNG или SVG. Срок действия не ограничен.

      Открыть инструмент →

      Все бесплатные инструменты

      Гайды: Дизайн страницы со ссылками: макеты, темы, кнопки, Темы для link in bio: как выбрать ту, что приводит к кликам.

      Связанные страницы
      Источники
      1. W3C, Understanding SC 1.4.3 Contrast
      2. W3C, Understanding SC 1.4.6 Contrast
      3. W3C, Understanding SC 1.4.11 Non-text Contrast

      Источники проверены 11 ноября 2026 года.

      Ваши цвета на вашей странице

      Займите бесплатную страницу More.You и задайте фон, кнопки и шрифты в цветах вашего фото.

      more.you/

      Язык