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

Создавайте профессиональные цветовые палитры, конвертируйте цветовые коды и извлекайте цвета из изображений

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

Выбор цвета

Выбрать цвет

Введите цветовой код (HEX, RGB, HSL)

Формат цвета

Значения цвета

HEX: #3b82f6

RGB: rgb(59, 130, 246)

HSL: hsl(217, 91%, 60%)

CMYK: cmyk(76%, 47%, 0%, 4%)

HSB: hsb(217°, 76%, 96%)

Предпросмотр цвета

Настройки палитры

Базовый цвет

Тип палитры

Количество цветов

3 5 12

Сгенерированная палитра

Настройки градиента

Тип градиента

Направление

Точки цвета

100%

Предпросмотр градиента

CSS-код

background: linear-gradient(to right, #3b82f6, #8b5cf6);

Загрузить изображение

Перетащите изображение сюда

Поддерживаются JPG, PNG, GIF, WebP (макс. 10 МБ)

Извлечённые цвета

Метод извлечения

Макс. цветов

3 8 16

Примеры использования

Веб-дизайн

Создавайте гармоничные цветовые палитры для сайтов.

#FF6B6B #4ECDC4 #45B7D1...

Дизайн логотипа

Профессиональные цветовые сочетания для фирменного стиля.

#2C3E50 #E74C3C #F39C12...

Визуальный анализ

Извлекайте цветовую палитру из существующих изображений.

Цветовой анализ ...

Возможности

Конвертер цветов

Конвертация между форматами HEX, RGB, HSL, CMYK, HSB

Извлечение цветов из изображений

Автоматическое извлечение доминирующих цветов из изображений

Генератор градиентов

Создание линейных, радиальных и конических градиентов

Типы палитр

Монохроматические, аналогичные, комплементарные типы палитр

📋

Быстрое копирование

Копирование цветового кода в буфер обмена одним нажатием

♿

Доступность

Контрасты и рекомендации с учётом дальтонизма

Как пользоваться?

Выберите цвет

Используйте палитру для выбора цвета или введите цветовой код

Укажите формат

Выберите нужный формат цвета (HEX, RGB, HSL, CMYK)

Сгенерируйте палитру

Создайте профессиональные цветовые палитры с разными типами гармонии

Создайте градиенты

Генерируйте пользовательские градиенты и получайте CSS-код

Анализ изображений

Автоматически извлекайте цвета из изображений и добавляйте в палитру

Часто задаваемые вопросы

HEX (например, #FF6B6B), RGB (например, rgb(255, 107, 107)), HSL (например, hsl(0, 100%, 71%)), CMYK (например, C:0 M:58 Y:58 K:0) и HSB/HSV. Введите любое значение в любом формате — остальные обновятся мгновенно. HEX можно вводить в 3-значном или 6-значном формате, с символом # или без него.

Монохроматическая: различные оттенки одного цвета. Аналогичная: соседние цвета на цветовом круге (цельный вид). Комплементарная: противоположные цвета на круге (высокий контраст). Триадная: три равноудалённых цвета (яркий баланс). Тетрадная/квадратная: четыре равноудалённых цвета (богатая, сложная схема). Расщеплённо-комплементарная: цвет и два соседа его дополнения (легче сбалансировать, чем чистую комплементарную).

Загрузите фото, скриншот или любое изображение (JPG, PNG, GIF, WebP до 10 МБ). Инструмент анализирует цвета пикселей прямо в браузере с использованием выбранного метода: Доминирующие цвета, Средние цвета или Яркие цвета. Всё работает на стороне клиента — изображение не загружается ни на какой сервер.

Линейный градиент: цвета переходят по прямой линии под заданным углом. Радиальный градиент: цвета распространяются от центральной точки наружу. Конический градиент: цвета вращаются вокруг центральной точки, как на цветовом круге. Все три типа генерируют значение CSS-свойства background.

CSS-переменные (--color-primary: #FF6B6B), JSON (массив объектов цветов со значениями всех форматов) и копирование в буфер обмена для отдельных цветов. CSS-переменные вставляются прямо в блок :root вашей таблицы стилей. JSON удобен для дизайн-токенов.

HSL расшифровывается как Hue (тон, 0–360°), Saturation (насыщенность, 0–100%) и Lightness (светлота, 0–100%). В отличие от RGB, HSL интуитивно понятен: чтобы сделать цвет светлее, увеличьте Lightness; чтобы уменьшить насыщенность — снизьте Saturation. Он напрямую отражает то, как дизайнеры мыслят о цветовых отношениях.

CMYK (Cyan, Magenta, Yellow, Key/Black) — цветовая модель, используемая в печати. RGB — для экранов, CMYK — для принтеров. При подготовке макетов для физической печати типографии потребуются значения CMYK. Обратите внимание: конвертация приблизительна, так как цветовые пространства RGB и CMYK не охватывают одинаковый диапазон.

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

Что такое генератор цветовых палитр?

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

Мгновенная конвертация цветов

Работаете с HEX в CSS, но нужен RGB для JavaScript Canvas? Этот инструмент конвертирует между HEX, RGB, HSL, CMYK и HSB в реальном времени. Введите значение в любом формате — остальные обновятся мгновенно. Никаких догадок, никаких ручных вычислений.

Извлечение цветов из любого изображения

Загрузите фото или скриншот, и инструмент определит доминирующие цвета. Идеально для создания палитры, соответствующей существующему бренду, мудборду или фотографии, на которой основан ваш дизайн. Работает с JPG, PNG, GIF и WebP до 10 МБ.

Генерация CSS-градиентов

Создавайте линейные, радиальные или конические градиенты визуально, а затем копируйте CSS-код одним нажатием. Добавляйте сколько угодно точек цвета, настраивайте направление и предварительно просматривайте результат перед использованием в проекте.

Конфиденциальность

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

Безопасность и конфиденциальность

Безопасность ваших данных — наш приоритет

Локальная обработка

Вся обработка происходит в вашем браузере

Без передачи данных

Ваши данные не отправляются на наши серверы

Без хранения данных

Данные не хранятся и не передаются

SSL-шифрование

SSL-шифрование для безопасного соединения

Next Step

Пипетка цвета

Выбирайте цвета и получайте коды HEX, RGB, HSL

Генератор CSS-градиентов

Создавайте CSS-градиенты — линейные, радиальные и конические

Был ли этот инструмент полезен?