Сначала извлеките пример палитры, затем используйте точный выбор и ручное редактирование, чтобы решить, какие цвета подходят для вашего собственного проекта. Открыть Пипетка цветов изображения.
Загрузите и извлеките начальную палитру
Откройте Image Color Picker и загрузите одно поддерживаемое изображение или попробуйте образец. Автоматическое извлечение загружает исходник на сервер. Образец в этом руководстве — collage-botanical.jpg, фото 1200 x 900 с цветами, листьями и персиковым фоном.
Оставьте Colors to extract на 6 и выберите Dominant для примера. Dominant отдает предпочтение основным цветам изображения, в то время как Vibrant делает акцент на ярких цветах. Запрос может использовать от 3 до 12 цветов; изображение с меньшим количеством четких групп может вернуть меньше цветов.
Фактический результат Dominant содержит #E3B49F, #A5927F, #F3C2AC, #FBCEBA, #746E4F, #C297CA. Самая большая группа — #E3B49F, составляющая примерно 28.88% от проанализированных видимых пикселей. Извлечение использовало выборку 512 x 384; эти проценты не являются точной переписью изображения в полном разрешении.
Цвет палитры может быть средним значением соседних цветов. Выберите конкретный пиксель, когда вам нужно значение одной маленькой детали.
Выберите и уточните отдельные цвета
Нажмите или коснитесь изображения, чтобы осмотреть пиксель с помощью лупы. Сфокусируйте изображение и используйте клавиши со стрелками для перемещения на один пиксель, Shift плюс стрелка для перемещения на десять, затем Enter для выбора. Скопируйте HEX, RGB или HSL с помощью кнопки копирования или используйте Add to palette.
Выберите образец, чтобы изменить его значение HEX или цвет, переместить его влево или вправо, либо удалить. Добавление пользовательского цвета принимает значение HEX на ваш выбор. Блокировка цвета сохраняет выбранный образец при обновлении палитры или изменении настроек извлечения, которые создают новую начальную палитру.
Выборка и прозрачность предлагают исходный цвет и композицию на фоне. Исходный цвет включает непрозрачность в скопированных кодах, когда это уместно; композиция показывает пиксель, наложенный на выбранный фон выборки. Сами образцы палитры являются непрозрачными значениями RGB. Отредактированные и выбранные цвета не имеют расчетного процентного содержания источника.
Изображения, декодируемые браузером, используют выборки sRGB браузера. Если используется нормализованный предварительный просмотр, инструмент выбора явно помечает свои цвета и координаты как приблизительные.
Пример из этого руководства
Цвета для извлечения: 6; Доминирующий; без ручных изменений или блокировок; Сохранить как: PNG. Автоматическое извлечение выполнило выборку 512 x 384 пикселей.
- Исходное изображение
- 1200 x 900 пикс.
- Извлеченные цвета
- 6 непрозрачных цветов
- Карточка палитры
- 600 x 500 пикс.
- Скачано PNG
- 9,163 байт
Проверка пары «текст и фон»
Откройте «Проверить контрастность цвета». Установите текст и фон с помощью элементов управления цветом, введите коды HEX или используйте выбранный цвет для любой из сторон. Живой образец текста позволяет сравнить пару, а коэффициент сопровождается отдельными результатами для Normal AA, Normal AAA, Large AA и Large AAA.
Выбирайте пару для предполагаемой цели, а не предполагайте, что каждый извлеченный цвет можно использовать в качестве текста. Светло-персиковый и светло-фиолетовый могут хорошо смотреться вместе на фотографии, но при этом быть плохой комбинацией текста и фона.
Этот элемент управления проверяет только эту пару цветов на контрастность текста. Это не полный аудит доступности и не определяет, является ли типографика, взаимодействие с клавиатурой или остальная часть дизайна удобными.
Проходной коэффициент контрастности — это полезная проверка, а не гарантия того, что вся страница доступна.
Скопируйте значения или экспортируйте палитру
Для быстрой передачи скопируйте отдельный код или используйте «Копировать цвета палитры HEX». Для файла выберите «Сохранить как» и выберите «Начать». PNG создает изображение палитры с метками; SVG сохраняет образцы и метки как векторный контент; CSS предоставляет пронумерованные цветовые переменные; JSON содержит значения HEX, RGB и HSL.
Неотредактированный пример из шести цветов экспортируется как palette.png размером 600 x 500 пикселей и 9,163 байт. Порядок образцов соответствует палитре. Ваша окончательная палитра может содержать от 1 до 12 цветов после редактирования, даже если автоматическое начальное количество было другим.
Скачайте перед уходом или обновлением. Окончательный экспорт загружает исходные и выбранные цвета для обработки на сервере. Он создает новый файл палитры и не перекрашивает и не заменяет исходную фотографию.
PNG и SVG — это удобные визуальные ссылки. CSS и JSON полезны, когда на следующем этапе требуются повторно используемые значения цвета.
Часто задаваемые вопросы
Возвращает ли пипетка те же цвета, что и автоматическое извлечение?
Не обязательно. Выбранное значение описывает конкретный исходный пиксель или пиксель предварительного просмотра. Автоматическое извлечение группирует выбранные пиксели и может возвращать усредненные цвета.
Учитываются ли прозрачные пиксели?
Полностью прозрачные пиксели исключаются из извлечения. Частично прозрачные пиксели имеют уменьшенный вес. Выборка источника может показывать непрозрачность, но экспортированные образцы палитры являются непрозрачными.
Что происходит с заблокированными цветами при обновлении?
Заблокированные цвета остаются в палитре, в то время как новые извлеченные цвета заполняют остальные позиции. Сохраненному или отредактированному цвету не присваивается вымышленный процент изображения.
Могу ли я использовать это для точного фирменного цвета?
Введите известное значение HEX напрямую или выберите подходящий исходный пиксель. Освещение фотографии, сжатие, управление цветом и нормализованные предварительные просмотры могут изменять значения выборки, поэтому автоматическая палитра фотографии не является доказательством оригинальной спецификации бренда.
Создайте палитру, которую вы сможете использовать в своем следующем дизайне
Попробуйте пример или используйте свой файл, и проверьте результат перед публикацией.
