Выберите цвет
Перетаскивайте указатель по палитре и шкале оттенка или введите код HEX, RGB или HSL. Копируйте значение одним щелчком.
Оттенки: от светлого к тёмному
Дополнительные цвета и гармонии
Загрузите изображение и кликните по нему, чтобы выбрать цвет
Кликните, чтобы открыть палитру
Предустановленные цвета
История цветов
Как пользоваться выбором цвета
-
1
Выберите цвет
Нажмите на превью, чтобы открыть спектр и настроить яркость, введите код HEX или RGB либо воспользуйтесь одним из предустановленных цветов.
-
2
Или возьмите цвет с картинки
Загрузите фото, скриншот или логотип и нажмите на нужную точку изображения. Инструмент определит цвет именно этого пикселя.
-
3
Выберите формат
Один и тот же оттенок отображается в HEX, RGB, HSL, HSV и CMYK — выберите формат, который использует ваша программа или сайт.
-
4
Скопируйте код
Нажмите «Копировать цвет». Использованные цвета попадают в историю, чтобы их можно было сравнить и применить снова.
Пипетка для изображений: как узнать цвет на фото
Нужно узнать точный цвет логотипа, одежды на фотографии или элемента на сайте-референсе? Загрузите изображение и нажмите на него: пипетка считает выбранный пиксель и сразу покажет код цвета. Картинка открывается только в вашем браузере и никуда не загружается, поэтому инструментом можно спокойно пользоваться с материалами клиентов и внутренними файлами.
Чтобы точно попасть в цвет на участке с текстурой или тенью, нажмите на несколько соседних точек и сравните значения в истории. Сильно сжатые изображения — например, фото, которые много раз пересылали в мессенджерах, — могут давать небольшие расхождения цвета между соседними пикселями.
HEX, RGB, HSL, HSV или CMYK: что выбрать?
- HEX (#FF6B6B): самый распространённый формат в CSS, HTML, Figma и Canva.
- RGB (255, 107, 107): красный, зелёный и синий от 0 до 255; используется для экранов, в программировании и обработке изображений.
- HSL: тон, насыщенность и светлота; удобно создавать в CSS более светлые и тёмные варианты одного цвета.
- HSV: тон, насыщенность и яркость; эту модель используют палитры Photoshop и многих других редакторов.
- CMYK: голубой, пурпурный, жёлтый и чёрный; стандарт для печатной продукции в типографии.
Советы по подбору цветов
Собирая палитру, отталкивайтесь от основного цвета и создавайте варианты, меняя в HSL только светлоту — так оттенки будут сочетаться между собой. Для текста проверяйте контраст с фоном: светлые буквы на светлом фоне плохо читаются, особенно на смартфоне и на улице.
Помните, что цвет на экране и на бумаге никогда не совпадает полностью. Если макет идёт в печать, проверьте значение CMYK и по возможности закажите в типографии цветопробу: разные мониторы показывают один и тот же код RGB немного по-разному.
Частые вопросы о выборе цвета
Как узнать цвет на картинке?
Загрузите изображение на этой странице и нажмите на нужную точку. Код цвета появится в форматах HEX, RGB, HSL, HSV и CMYK.
Как перевести HEX в RGB?
Введите код HEX и переключите формат на RGB. Преобразование происходит мгновенно и работает в обе стороны.
Поддерживается ли CMYK?
Да. Выберите CMYK в формате цвета, чтобы увидеть доли голубого, пурпурного, жёлтого и чёрного для выбранного оттенка.
Мои изображения куда-нибудь загружаются?
Нет. Изображение открывается только в вашем браузере, чтобы считать цвета пикселей.
Чем RGB отличается от CMYK?
RGB смешивает красный, зелёный и синий свет и используется для экранов. CMYK смешивает голубую, пурпурную, жёлтую и чёрную краски и используется в печати. Поэтому некоторые очень яркие экранные цвета невозможно напечатать точно так же.
Работает ли пипетка на телефоне?
Да. Инструмент работает в мобильных браузерах на телефоне и планшете — просто коснитесь изображения, чтобы выбрать цвет.
Мастерство выбора цвета: полное руководство по пипеткам и палитрам
Откройте для себя искусство и науку выбора цвета с нашим полным руководством по эффективному использованию пипеток в дизайне, разработке и креативных проектах.
Зачем использовать пипетки цветов?
Пипетки — незаменимый инструмент для дизайнеров, веб-разработчиков и креативщиков. Они обеспечивают точный выбор и конвертацию цветов, что важно для согласованности между платформами и приложениями.
Key Benefits:
- Точное совпадение цвета из любого источника
- Поддержка нескольких форматов цветов (HEX, RGB, HSL и др.)
- История цветов и управление предустановками
- Предпросмотр цвета и корректировка в реальном времени
- Кроссплатформенная совместимость
- Оптимизация рабочего процесса и экономия времени
Основы теории цвета
Понимание теории цвета — ключ к эффективному выбору оттенков. Узнайте о цветовом круге, гармониях и психологическом влиянии цвета.
Основные цвета
Красный, синий и жёлтый — основа всех остальных цветов
Айдентика бренда, базовые элементы дизайна
Вторичные цвета
Зелёный, оранжевый и фиолетовый — получаются смешением основных
Акцентные цвета, дополнительные элементы
Третичные цвета
Красно-оранжевый, жёлто-зелёный и т.д. — более сложные оттенки
Сложные цветовые схемы, изысканные дизайны
Температура цвета
Тёплые и холодные цвета и их психологическое воздействие
Создание настроения, личность бренда
Типы пипеток и палитр
Разные инструменты пипеток служат разным целям. Понимание типов поможет выбрать подходящий инструмент для задач.
Пипетки для изображений
Извлекают цвета непосредственно из изображений и фото
Совмещение с существующими дизайнами, цвета бренда
Палитры и спектры
Интерактивные колесо цвета и слайдеры для творческого выбора
Создание оригинальных цветов, исследование дизайна
Генераторы палитр
Автоматически создают гармоничные цветовые схемы
Полные дизайн-системы, гармония цветов
Инструменты доступности
Обеспечивают соответствие цветов стандартам доступности
Инклюзивный дизайн, доступность веба
Применение пипеток в дизайне
Пипетки используются в разных областях дизайна. Каждая область имеет свои требования и лучшие практики для выбора цвета.
Веб-дизайн
Графический дизайн
UI/UX дизайн
Маркетинговые материалы
Доступность цветов и стандарты
Доступность цветов гарантирует удобство цифрового контента для людей с нарушениями зрения. Знание руководств WCAG важно для инклюзивного дизайна.
Accessibility Standards:
Accessibility Tools:
- Автоматические инструменты для проверки контрастности цветов
- Просмотр дизайна глазами дальтоника
- Полные инструменты тестирования доступности
Распространённые ошибки при выборе цвета
Даже опытные дизайнеры допускают ошибки. Знание этих ошибок поможет создавать лучшие дизайны.
Игнорирование контекста
Всегда тестируйте цвета в предполагаемом контексте и условиях освещения
Чрезмерное использование ярких цветов
Сбалансируйте яркие акцентные цвета нейтральными фонами
Пренебрежение доступностью
Проверяйте контрастность и совместимость с дальтонизмом
Использование несогласованных форматов цвета
Выберите один формат (обычно HEX) для проекта
Игнорирование брендовых правил
Соблюдайте консистентность брендовых цветов на всех платформах
SEO Benefits of Using Color Pickers
Точное сопоставление цветов
Обеспечивает согласованность бренда во всех цифровых материалах
Accessibility Compliance
Meet WCAG standards for better search rankings
Оптимизация производительности
Оптимизируйте использование цветов для более быстрой загрузки
Enhanced User Experience
Create visually appealing, accessible interfaces
Cross-Platform Consistency
Maintain design integrity across devices
Professional Quality
Deliver polished, professional-looking designs
Who Benefits from Color Pickers?
Graphic and web designers creating consistent brand identities
Frontend developers implementing precise color schemes
Marketing professionals maintaining brand consistency
Companies ensuring professional visual presentation
Design students learning color theory and application
Independent creators working on multiple projects