Цифровой мир переводит окружающие нас цвета в простые комбинации букв и цифр. Чтобы получить любой понравившийся цвет, вам просто нужно получить его код, и вы сможете его воспроизвести.
Во время просмотра веб-страниц вам бросился в глаза определенный цвет? Или вам нужно использовать определенный оттенок в вашем дизайне, чтобы все было последовательно? Вот как можно получить код RGB или HEX любого пикселя на экране.
Определить значение RGB или HEX цвета на экране
Идентификация значения RGB или HEX цвета на экране не требует экспертного взгляда или дорогого инструмента. На ПК есть несколько простых способов получить код цвета.
Используйте приложение для ПК
Первый способ получить любой цвет с экрана – это использовать компьютерное приложение. Возможно, это приложение уже установлено на вашем компьютере.
Instant Eyedropper для Windows
Если вам нужно часто получать цветовые коды, простой инструмент под рукой облегчит вашу жизнь. Instant Eyedropper – бесплатное приложение исключительно для Windows.
После установки вы сможете получить к нему доступ из области уведомлений. Просто нажмите и удерживайте левую кнопку мыши на выбранном вами цвете, а затем отпустите ее. Приложение мгновенно скопирует код цвета в буфер обмена, и вы сможете вставить его в любую программу. Instant Eyedropper работает в Windows XP-10.
Digital Color Meter для Mac
Digital Color Meter — это аналогичный инструмент, предустановленный на устройствах Mac. Откройте папку «Приложения» и найдите «Утилиты». Инструмент Digital Color Meter должен быть тут же.
Запуск этого приложения превратит ваш курсор в пипетку, с помощью которой вы сможете подобрать любой цвет с экрана. Приложение будет отображать значения RGB по умолчанию. Вы можете скопировать их и преобразовать в HEX позже или настроить параметры, чтобы получить точный цвет, который вы хотите.
SIP для Mac
Если вам нужен более продвинутый инструмент, вы можете изучить SIP, доступный для Mac. SIP — это больше, чем средство выбора цвета. Он также предлагает множество дополнительных функций, которые оценит любой веб-дизайнер. Вы можете легко редактировать свои цвета, организовывать их в палитры и изменять их форматы в соответствии с вашими потребностями.
К сожалению, SIP не является бесплатным инструментом, но они предлагают бесплатную пробную версию. Вы можете попробовать его, чтобы убедиться, что дополнительные функции стоят ваших денег.
Преимущество этих настольных приложений в том, что они могут захватывать цвета практически из любой части экрана. Приведенные ниже инструменты браузера могут делать это только внутри веб-страниц. Конечно, вы можете обойти это ограничение, загрузив фотографию или скриншот для просмотра в браузере.
Используйте браузер
Следующий простой способ получить цвет кода RGB или HEX — просто использовать встроенные инструменты вашего браузера. Вы сможете выбирать цвета только с имеющейся веб-страницы, но для этого вы можете использовать как Firefox, так и Chrome.
Здесь можно найти инструмент выбора цвета Firefox:
- Запустите Firefox и откройте веб-сайт, для которого вы хотите извлечь цветовой код.
- Нажмите на меню браузера (три горизонтальные линии) в правом верхнем углу.
- Найдите Инструменты веб-разработчика среди вариантов. Он может находиться в разделе “Дополнительные инструменты”
- Внизу страницы откроется окно. Найдите значок пипетки, и вы сможете копировать цветовые коды одним щелчком мыши.
Действия в Chrome аналогичны:
- Запустите Chrome и откройте нужный веб-сайт.
- Нажмите на меню (три вертикальные точки) в правом верхнем углу и найдите “Инструменты разработчика” в разделе “Дополнительные инструменты”.
- В правой части страницы откроется окно. Найдите и щелкните “Стили” во втором разделе.
- В разделе “тело” вы увидите кучу цветных коробок. Щелкните любой из них, чтобы активировать палитру цветов.
Совет. Вы можете также откройте инструменты разработчика в обоих браузерах, щелкнув правой кнопкой мыши любую страницу и выбрав “Проверить”
Использовать расширение для браузера
Помимо инструментов разработчика, вы также можете использовать удобные расширения для браузера, чтобы выбрать любой цвет на веб-странице. Ознакомьтесь со следующими расширениями, которые выполняют свою работу:
- ColorZilla
- Пипетка ColorPick
- Пипетка
Использовать сайт
Вам не обязательно нужно приложение или расширение для определения RGB- или HEX-кода цвета. Если у вас есть определенное изображение, из которого вы хотите получить цвет, вы также можете использовать веб-сайт. Бесчисленные веб-сайты позволяют загрузить фотографию, извлечь цветовой код или даже создать гармоничную палитру.
PineTools Image Color Picker
Найдите инструмент выбора цвета изображения на веб-сайте PineTools и загрузите свое изображение. Увеличьте масштаб, если необходимо, чтобы найти пиксель, который вы хотите захватить. Одним щелчком мыши вы получите значения RGB и шестнадцатеричный код.
Палитра цветов изображения
Веб-сайт Image Color Picker предлагает несколько других вариантов, помимо загрузки изображения. Нажмите “Использовать ваше изображение” и выберите, куда вы хотите импортировать изображение. Вы можете щелкнуть любую часть изображения, чтобы выбрать определенный цвет, но веб-сайт также предлагает цветовую палитру на основе изображения.
Поиск цвета изображения
Помимо простого средства выбора цвета, Image Color Finder также может выступать в качестве творческого инструмента. Вы можете пикселизировать загруженное изображение, чтобы лучше видеть его цвета, и увеличить его настолько, насколько вы хотите. Сайт также автоматически предлагает пару цветов.
Сделать снимок экрана
Наконец, вы можете определить цветовой код без всех упомянутых выше инструментов. Вместо этого вы сделаете снимок экрана и выберите цвет оттуда.
- Убедитесь, что цвет, который вы хотите выбрать, виден на экране.
- li>
- Создайте снимок экрана, нажав кнопку Print Screen на клавиатуре (PrntScr, PrtScn и т. д.) в Windows или нажав и удерживая клавиши “Shift + Command + 3” одновременно на Mac. Ваш снимок экрана будет автоматически скопирован в буфер обмена.
Совет. Вы также можете захватить только часть экрана. В Windows откройте Snipping Tool из меню «Пуск». На Mac используйте сочетание клавиш “Shift + Command + 4” ярлык. - Откройте MS Paint (или любое другое приложение для обработки изображений) и вставьте снимок экрана.
- Найдите инструмент «Пипетка» и выберите цвет .
- Нажмите “Изменить цвета” рядом с цветовой палитрой в MS Paint. Под ползунком вы увидите значения RGB вашего текущего цвета.
Чтобы преобразовать эти числа в шестнадцатеричный код, вам понадобится помощь веб-сайта. - Перейдите к RGB в HEX и введите значения в соответствующие поля.
- Нажмите “Преобразовать в шестнадцатеричный формат” и вы получите свой код.
Дополнительные часто задаваемые вопросы
В чем разница между RGB и HEX? Какой из них мне нужен?
Коды RGB и HEX отображают одни и те же цвета. Тем не менее код, который вам понадобится, зависит от его предполагаемого использования. Коды RGB сообщают вашему экрану, сколько красного, зеленого и синего света нужно излучать для получения желаемого цвета. HEX-коды передают ту же информацию, но на языке кодирования.
Дизайнеру или разработчику, скорее всего, понадобятся шестнадцатеричные коды цветов.
Как определить цвет на мобильном устройстве?
Чтобы выбрать цвет на экране вашего мобильного устройства, вы можете загрузить приложение или использовать один из веб-сайтов, упомянутых выше. В инструменте разметки также есть инструмент выбора цвета для iOS. Он также может дать вам HEX-код цвета.
Получить любой цвет, который вы видите, одним щелчком мыши
Использование цветовых кодов RGB или HEX гарантирует, что нет никаких шансов на ошибку . Благодаря этим универсальным цветовым языкам вы можете поддерживать соответствие своих дизайнов одним и тем же оттенкам. Поскольку существует множество способов извлечения цветового кода на экране, вам просто нужно найти самый простой способ для вас.
Какой инструмент выбора цвета вы предпочитаете? Или у вас есть другой надежный метод для добавления? Дайте нам знать ниже.
