Выбранный цвет

Текущий цвет

#6366F1

rgb(99, 102, 241)

Цветовая палитра

Форматы цвета

HEX

Оттенки и осветлённые тона

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

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

Перетащите изображение сюда или выбрать файл

Поддерживаются JPG, PNG, WEBP, GIF, BMP • Максимум 20 MB MB

Нажмите, чтобы выбрать цвет

Наведите курсор на изображение для предпросмотра и нажмите, чтобы выбрать цвет. Рядом с курсором появится увеличительное стекло.

Проверка контрастности (WCAG)

Цвет текста

Цвет фона

Обычный текст AA

Крупный текст AA

4.54:1

Коэффициент контрастности

Предпросмотр

AA ✓

#6366F1

Slate Blue

Белый текст на цвете

Чёрный текст на цвете

Цветовая гармония

История цветов

Цвета пока не выбраны

Как использовать

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

Используйте палитру, выбор цвета с изображения или проверку контрастности, чтобы получить точные значения HEX, RGB, HSL, CMYK и CSS для дизайна или сайта.

Шаг 01

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

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

Шаг 02

Выберите цвет с изображения

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

Шаг 03

Скопируйте значения цвета

Одним нажатием копируйте значения HEX, RGB, HSL, HSV, CMYK, RGBA или CSS-переменных.

Шаг 04

Проверьте читаемость

Используйте проверку контрастности, чтобы протестировать сочетание цветов текста и фона и улучшить доступность.

Рабочий процесс в реальном времени

Результат, готовый для дизайна

#6366F1 Сине-серый

HEX #6366F1

RGB 99, 102, 241

HSL 239, 84%, 67%

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

Возможности

Всё необходимое для идеального выбора цвета

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

Выбор цвета с экрана

Выберите любой цвет прямо с экрана с помощью пипетки и мгновенно получите его значения.

Выбор цвета с изображения

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

Несколько цветовых форматов

Преобразуйте цвета в форматы HEX, RGB, HSL, HSV, CMYK, RGBA и CSS-переменных.

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

Создавайте сочетающиеся оттенки, осветлённые тона и гармоничные палитры для современных сайтов и приложений.

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

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

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

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

Руководство по цветам

Что такое инструмент выбора цвета?

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

Этот онлайн-инструмент предоставляет готовые значения HEX, RGB, HSL, HSV, CMYK и CSS. Он полезен разработчикам, дизайнерам, создателям контента и всем, кому нужны точные цвета без установки тяжёлого графического программного обеспечения.

Лучше всего подходит для цветов интерфейса, фирменных палитр и тем сайтов

Извлекайте цвета из изображений и визуальных примеров

Копируйте готовые CSS-значения цвета для фронтенд-проектов

Для разработчиков

Копируйте значения HEX, RGB, HSL и CSS-переменные прямо в HTML, CSS, Tailwind или вашу дизайн-систему.

Для дизайнеров

Создавайте палитры, оттенки, осветлённые тона и градиенты для чистого и последовательного визуального дизайна.

Для лучшей читаемости

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

Примеры

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

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

Примеры 01

Цвета кнопок

Используйте выбранные цвета для CTA-кнопок, состояний при наведении и элементов управления.

#6366F1

Премиум-карточка

Аккуратный блок интерфейса с мягким фоном и хорошо читаемым текстом.

Примеры 02

Фон карточки

Создавайте мягкие фоны карточек для панелей управления, онлайн-инструментов и SaaS-страниц.

#EEF2FF

Градиентная главная секция

Примеры 03

CSS-градиент

Создавайте линейные или радиальные градиенты и копируйте CSS для главных секций сайта.

linear-gradient(...)

Читаемый текст

Хорошая цветовая контрастность делает содержимое более удобным для чтения.

Примеры 04

Контрастность текста

Проверяйте цвета текста и фона перед использованием в текстовых областях.

AA Passed

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

Вопросы об инструменте выбора цвета

Краткие ответы о выборе цветов, копировании форматов, извлечении цветов из изображений и проверке контрастности.

Инструмент выбора цвета помогает выбирать цвета и копировать их значения в форматах HEX, RGB, HSL, HSV, CMYK и CSS-переменных.

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

Инструмент поддерживает популярные форматы HEX, RGB, HSL, HSV, CMYK, RGBA и вывод в виде CSS-переменных.

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

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

SIC

Изменить размер изображения

Быстрое и простое преобразование изображений

Выберите цвет с любого изображения

Перетащите изображение сюда или выбрать файл

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

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

Выберите цвет с изображения

Скопируйте значения цвета

Проверьте читаемость

Результат, готовый для дизайна

Всё необходимое для идеального выбора цвета

Выбор цвета с экрана

Выбор цвета с изображения

Несколько цветовых форматов

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

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

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

Что такое инструмент выбора цвета?

Для разработчиков

Для дизайнеров

Для лучшей читаемости

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

Цвета кнопок

Фон карточки

CSS-градиент

Читаемый текст

Контрастность текста

Вопросы об инструменте выбора цвета

Быстрое и простое преобразование изображений

Выберите цвет с любого изображения

Перетащите изображение сюда или выбрать файл

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

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

Выберите цвет с изображения

Скопируйте значения цвета

Проверьте читаемость

Результат, готовый для дизайна

Всё необходимое для идеального выбора цвета

Выбор цвета с экрана

Выбор цвета с изображения

Несколько цветовых форматов

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

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

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

Что такое инструмент выбора цвета?

Для разработчиков

Для дизайнеров

Для лучшей читаемости

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

Цвета кнопок

Фон карточки

CSS-градиент

Читаемый текст

Контрастность текста

Вопросы об инструменте выбора цвета

Попробуйте другие полезные инструменты для изображений и дизайна

Конвертер изображений

Генератор манекена

Изображение в текст

Крупный вид

Изменение размера изображений

Компрессия по производству