Сайт по определению цвета – Определить цвет пиксела на картинке онлайн

Содержание

👍 Палитра цветов онлайн | Hex Color Picker

👍 Палитра цветов онлайн | Hex Color Picker | HTML Color Picker

... Выберите свой цвет онлайн

HTML Color Picker

Нажмите на изображение, чтобы получить HTML-кодов..

Использование изображений в Интернете право выбора цвета для выбора цвета и получить HTML цветовой код этого пикселя.
Также вы получаете значение HEX, RGB значение и HSV значение.
Вы можете поместить изображение URL в поле ниже или загрузить свое собственное изображение. (Например, скриншот вашего настольного компьютера). Или используйте URL сайта, вы увидите миниатюру на правой стороне.

HTML код: #5DBCD2
RGB код: R: 93 G: 188 B: 210
HSV: 191.28° 55.71% 82.35%
Загрузка изображений

Or

imagecolorpicker.com

Как определить цвет на сайте

Приветствую вас на сайте Impuls-Web!

В данной статье я расскажу вам, как можно определить цвет элемента на сайте.

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

Навигация по статье:

В моем случае, в качестве такого элемента будет выступать кнопка «Отправить заявку»

Для того, что бы она лучше подходила по оформлению к этому сайту, я хочу сделать, что бы ее цвет фона совпадал с цветом меню. Конечно, для точного определения цвета можно использовать какой-нибудь графический редактор типа Photoshop или его аналогов. Однако, есть способы определить цвет с намного меньшими затратами времени и усилий.

Определение цвета стандартными инструментами браузера

Я буду показывать, как это можно сделать на примере браузера Mozilla Firefox и Google Chrome. Здесь, для того, что бы определить цвет какого-то элемента я могу щелкнуть правой кнопкой мыши по тому элементу, для которого я хочу задать цвет и в раскрывающемся списке выбрать здесь пункт «Исследовать элемент»

.

При этом, в нижней части экрана откроется окно инспектора, где можно просматривать код страницы, а так же css-свойства, которые задаются для каждого элемента.

Для данной кнопки у меня отображается в качестве фона серый цвет и если щёлкнуть левой кнопкой мышки по кружочку с цветом, то откроется вот такая палитра:

При помощи данной палитры также можно подбирать нужный цвет, но для точного определения цвета нужно:

  1. 1.Кликнуть на значок пипетки
  2. 2.Навести курсор на тот элемент сайта, цвет которого мы хотим определить. В данном случае это будет меню.

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

     

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

Кнопка «Отправить заявку» сразу же стала такого же цвета, как и меню. Однако для того, что бы эти изменения сохранились и применились на сайте, вам нужно скопировать значение данного цвета на панели отображения css-свойств, и затем вставить его в файл стилей вашей темы style.css.

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

Изменения нужно вносить в файл:

/wp-content/themes/название вашей темы/style.css

Все изменения вносим в самый конец файла.

Для смены фона данного элемента нужно определить его класс или идентификатор. Как это делать я показывала в этой статье.

Затем, для этого элемента нужно задать свойство background, и вставить значение того цвета, который мы только что определили. После этого нужно сохранить изменения.

В файле style.css это будет выглядеть примерно так:

.test-btn{ background:# #2F73B6; }

.test-btn{

background:# #2F73B6;

}

Только вместо test-btn будет значение класса или идентификатора вашего элемента.

Определение цвета в браузере Google Chrome

В браузере Google Chrome процесс определения цвета будет выглядеть аналогичным образом.

  1. 1.Точно так же щелкаем правой кнопкой мышки по интересующему нас элементу.
  2. 2.Выбираем пункт «Просмотреть код»
  3. 3.Далее, у нас открывается аналогичный инспектор. Единственное, у вас он может быть как в горизонтальном расположении, как у меня, так и в вертикальном, когда панель будет находиться справа.
  4. 4.Здесь мы находим панель отображения css-свойств, и нажимаем на значок одного из цветов.
    = cvet6=
  5. 5.Далее, у нас открывается инструмент определения цвета, который, в принципе, похож на тот, который был в Mozilla Firefox. Единственное, что здесь еще можно задавать прозрачность цвета, выбирать цветовую гамму, и так же он может определять цвета не только в шестнадцатеричном формате, но и в формате RGB и RGBA.
  6. 6.Для точного определения цвета так же нажимаем на значок пипетки, наводим курсор на тот элемент, цвет которого мы хотим определить, и щелкаем левой кнопкой мыши.

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

  7. 7.Точно так же, копируем значение этого цвета, и затем вставляем его в наш css-файл.

Как и в Mozilla Firefox, после того как мы выбрали цвет в окне предпросмотра элемент подсветился таким же цветом, который мы выбрали. Однако при обновлении страницы все эти изменения исчезнут, и цвет станет таким же, как он задан в css изначально. То есть, для того, что бы эта кнопка стала такого же цвета, как и меню на сайте, мне нужно внести изменения в css-файл.

Использование пипетки в Mozilla Firefox

Так же, в браузере Mozilla Firefox есть специальный инструмент для определения цвета, который называется «Пипетка».
Для того чтобы им воспользоваться нужно:

  1. 1.В правом верхнем углу нажимаем на значок меню, затем, выбираем раздел «Разработка», и здесь выбираем инструмент
    «Пипетка»
    .
  2. 2.У нас появляется вот такое увеличительное стекло, при помощи которого мы можем определять цвет.
  3. 3.После того, как мы навели курсор на тот элемент, у которого нужно определить цвет, щелкаем левой кнопкой мышки и значение этого цвета автоматически копируется в буфер обмена.
  4. 4.Затем, мы просто переходим в css-файл и вставляем это значение.

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

Определение цвета при помощи специальной программы

Так же, помимо инструментов браузера существуют специальные программки, которые так же позволяют легко определять значение цвета. Я для этих целей использую программу Pixie. Она не устанавливается, то есть вы просто копируете ее к себе на компьютер, а затем, при необходимости, просто запускаете двойным щелчком мыши, и у вас появляется вот такое окошко:

Которое вы можете разместить в любой части экрана, что бы оно вам не мешало. При этом когда вы водите курсором по изображению – в специальном окошке показываются выбранный цвет.

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

После того, ка вы выбрали тот цвет, который вам нравится, вы нажимаете сочетание клавиш CTRL+ALT+C, и значение этого цвета попадает в буфер обмена.

Затем, это значение можно также задать в качестве цвета фона, но при этом обращаю ваше внимание, что оно копируется без знака решетки.

Цвет определяется в шестнадцатеричном формате но знак решетки # вам нужно будет дописывать самостоятельно чтобы получилось примерно так: «#2F73B6».

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

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

  1. 1.Сначала нажимаем CTRL+ALT+C, что бы скопировать значение цвета.
  2. 2.Затем, на клавиатуре, нажимаем CTRL+ALT+X, после чего открывается вот такая палитра:
  3. 3.В этой палитре можно либо выбирать интересующие оттенки, либо при помощи ползунка справа делать цвет более темным или более светлым. При этом в окне предпросмотра отображается оттенок, который получается в результате этих манипуляций. Здесь значение цвета отображается как в формате RGB, так и в шестнадцатеричном формате.
  4. 4.Если значение скопированного цвета не вставилось автоматически, то нужно вставить его в поле «HTML», а уже потом делать его темнее или светлее при помощи ползунка справа.
  5. 5.После выбора нужного оттенка копируем шестнадцатеричное значение цвета из поля “HTML”

Для смены цвета фона при наведении нужно приписать к классу или идентификатору элемента псевдокласс hover, а заем задать цвет фона.

Получится примерно так:

.test-btn{ background:#2F73B6; } .test-btn:hover{ background:# 286199; }

.test-btn{

background:#2F73B6;

}

 

.test-btn:hover{

background:# 286199;

}

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

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

Видеоинструкция

На этом у меня все. Если данная статья была для вас полезна – не забудьте оставить комментарий и подписаться на мою рассылку. Спасибо за то, что посетили мой сайт и до встречи в следующей статье!

С уважением Юлия Гусарь

impuls-web.ru

Определение цвета на экране монитора с помощью программ

Очень часто во время работы с сайтами и картинками требуется определить цвет какой-либо точки Вашего экрана монитора.

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

Определение цвета означает нахождение его кода. Затем код, в зависимости от Ваших целей, можно использовать как в различных графических редакторах, так и непосредственно в коде html.

Чаще всего при этом используется режим RGB, в котором код можно представить в десятичной и шестнадцатиричной системе.

Очень удобно для определения цвета использовать пипетку программы FSCapture. Но, кроме этой программы, есть и другие, с помощью которых можно это делать.

Пипетка программы Adobe Photoshop

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

Делается это очень просто. Открываете программу Adobe Photoshop, создаете в ней изображение, и, не отпуская левую клавишу мыши, переводите курсор пипетки туда, где находится выбранная Вами точка. Это может быть любая точка за пределами окна программы. По мере движения курсора Вы будете видеть, как изменяется цвет рисования на палитре цветов. После выбора нужной точки отпускаете клавишу мыши. Кликаете по окошку цвета рисования на палитре цветов, и смотрите код Вашего цвета.

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

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

Программа ColorPix

Если Вы не хотите каждый раз для определения цвета открывать программу Photoshop, можете воспользоваться гораздо более легкой программой, которая называется ColorPix. Скачать ее Вы можете по ссылке ниже:

Программа не требует установки, и очень маленькая — весит всего 400 Кб. Работать с ней легко — наводите мышкой на любую точку на экране, и смотрите коды в окошке. При необходимости можно воспользоваться лупой, нажав на ее изображение в нижней части окошка программы.

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

Программа ColorMania

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

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

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

Словом, программа стоит того, чтобы ее скачать и использовать в работе.

Видеообзор программ для определения цвета на экране монитора

Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
    Подписаться на блог: Дорога к Бизнесу за Компьютером

Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:  

pro444.ru

4 лучших онлайн инструмента — Блог о визуальной грамотности

Цвет широко используется в дизайне, — он позволяет «оживить» содержание — создать смысловую связь элементов, наполнить работу эмоциями и настроением. Начинающие дизайнеры берут случайные цвета, но есть способы использовать цвет более осмысленно. Рассмотрим 4 таких способа, организованных по принципу от простого к сложному.

1. Использовать известную гамму

На сайте brandcolors.net собрано более 500 сочетаний цветов известных брендов. Яндекс, Google, Burger King используют одну палитру во всех своих продуктах. Эти бренды и их цвета знакомы и любимы многими. Наберите название в строке поиска или полистайте страницу, нажмите на нужный бренд и цвет: его код скопируется в буфер обмена.

Цветовые палитры, используемые известными брендами, на сайте brandcolors.net

2. Выбрать готовую профессиональную палитру

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

Выбор цвета на colordrop.io

Кроме этого, сервис содержит готовую подборку из 24 цветов плоского дизайна. Нажмите слева под названием «Flat Colours» и берите код понравившегося оттенка.

Плоские цвета на colordrop.io

3. Определить палитру цветов понравившейся фотографии или картинки

Этот способ чуть сложнее. Но и эффектнее.

  • На сайте coolors.co в верхней панели слева найдите значок фотоаппарата, нажмите на него. Откроется окно загрузки изображения.
  • Можно выбрать фото или картинку с понравившейся цветовой гаммой с компьютера или скопировать ссылку в пустую графу.
  • Сервис определит сочетание цветов (внизу под загруженной картинкой).
  • Изменять отдельные цвета этой палитры можно, отмечая их и выбирая точку на фото, с которой нужно взять цвет.
  • Кнопка «Collage» сохраняет получившуюся палитру с кодами цветов на компьютере.
  • Кнопка «Auto» генерирует новые сочетания на основе того же фото.
  • Нажмите «Ок» и перейдете на главную страницу сайта для дальнейшей работы с палитрой.
Функция collage на сайте coolors.co

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

4. Создать свою цветовую гамму онлайн

Загрузив фото на тот же сайт coolors.co, можно не только определить код цвета, но и создать собственные сочетания. Для этого нажмите пробел — сервис автоматически создает сочетание из 5-ти цветов.

На каждом цвете 4 значка-кнопки:

  • Alternative shades — Оттенки цвета (темнее и светлее),
  • Drag (Передвинуть цвет вправо или влево по палитре),
  • Adjust (Настроить тон, насыщенность, яркость и др.),
  • Lock (зафиксировать цвет).

Собранную таким образом палитру можно сохранить в pdf, png файлах, отправить ссылкой и др.

Поделиться ссылкой:

Понравилось это:

Нравится Загрузка...

Похожее

vizual.club

Определение цвета при помощи color online picker

Здравствуйте, дорогие друзья!

Наверняка вы уже сталкивались с проблемой определения и подбора цвета. Давайте рассмотрим несколько сервисов color online picker, которые значительно упростят вам эту задачу и сэкономят время.

Навигация по статье:

materialui.co

Этот online сервис представляет собой палитру, кликая по которой вы выбираете цвет и при помощи ползунка справа подбираете нужный оттенок. Там же с правой стороны есть панель, на которой отображается выбранный образец цвета и его значения в разных форматах.

w3schools.com

Данный online color picker позволяет не просто выбрать цвет из палитры, а ещё и раскладывает его по оттенкам и показывает значение цвета для каждого из них. Так же вы можете ввести своё значение, чтобы сервис подобрал оттенки к нему.

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

Так же этот online сервис обладает инструментами по побору сочетаний цветов, конвертации, определению значений, различными цветовыми схемами и так далее.

На панели слева вы можете выбирать интересующий вас инструмент.

htmlcolorcodes.com

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

Под палитрой отображаются схемы подбора сочетающихся цветов.

Так же этот online сервис позволяет экспортировать подобранные цвета в разных форматах и с нужными атрибутами HTML и CSS свойствами. Благодаря этому вы можете сразу скопировать строку соответствующую порядковому номеру нужного цвета в блоке HTML, например, и вставить этот код в один из тегов для которого нужно изменить цвет текста. Как по мне, то это очень удобно!

Для создания своей палитры для экспорта вам нужно сначала двойным щелчком мышки кликнуть по прямоугольнику с понравившимся цветом, после чего он сразу попадёт в палитру с выбранными цветами сверху. Таким образом, вы можете выбрать до 6 цветов, а затем нажать на кнопку экспорта рядом с этой палитрой.

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

Лично мне этот online color picker очень понравился, так как он объединяет в себе практически все инструменты для работы с определением цветов. Единственное что я бы в нём добавила, так это возможность загрузки изображения и определение цветов на нём.

Определение цвета изображения при помощи pinetools.com

Здесь можно выполнить загрузку изображения, нажав на кнопку «Обзор» и определить цвет отдельных его частей при помощи color picker. Так же на панели инструментов есть кнопки для увеличения и уменьшения изображения.

Сервис html-color-codes.info для определение цвета изображения

Как и на предыдущем online сервисе здесь вы можете выполнить загрузку картинки и определить цвет её элементов.

Так же можно вставить ссылку на изображение и нажать на кнопку «GO» для его загрузки.

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

Думаю, что этих 5 online сервисов вам хватит на все случаи жизни! Если вы знаете ещё какие то полезные сервисы color picker – пишите о них в комментариях. Лично мне больше всего понравился htmlcolorcodes.com и html-color-codes.info, а вам?

Успехов вам и вашим проектам!

С уважением Юлия Гусарь

impuls-web.ru

Определить цвет пикселя онлайн

При работе с графическими файлами в компьютере нам часто необходимо узнать какой-нибудь оттенок в одной из цветовых моделей. Это нужно для того, чтобы использовать этот цвет в своей разработке. Графические программы имеют специальный для этой задачи инструмент «Пипетка». Но его действие обычно распространяются только на рабочее окно. За его пределами функция не работает. Из этой статьи вы узнаете, как можно определить цвет пикселя в режиме онлайн.

Содержание статьи:

Sanstv.ru — простой и доступный инструмент для определения цвета пикселя

Многие дизайнеры, блогеры, художники знают, что веб-цвета имеют цифровое представление. Самой популярной моделью является RGB (красный, зеленый, синий). Эти три цвета при смешивании становятся основой для других оттенков. Поэкспериментировать с ними можно на сайте https://sanstv.ru/. На главной странице вы увидите разноцветный круг и выше параметры колора, представленные в модели RGB. Попробуйте сами передвигать ползунки каждого из трех цветов и увидите, как меняется расцветка пикселя в блоке выше.

Сервис для определения цвета пикселя

Это еще и отличный инструмент, который поможет вам выбрать любой элемент в браузере. Открыв главное окно сайта, вы можете перетащить в него нужную фотографию и узнать цвет любого пикселя на нём. Вы можете нажать кнопку «Обзор» и выбрать его на своем жестком диске, если вам так удобнее. Изображение не обязательно должно быть загружено с вашего ПК. Вы можете открыть какой-нибудь сайт или картинку в интернете и сделать её скриншот. Просто нажмите клавишу PrintSc.

Дальнейший порядок действий:

  1. Вернитесь обратно на вкладку Sanstv.ru;
  2. Нажмите уже в этом окне Ctrl+V;

    Рабочее окно сайта Senstv.ru

  3. Когда изображение вставится в рабочее окно, курсор мыши примет вид крестика, которым вы можете определить пиксель любой части скриншота. Для этого нужно просто нажать на него.

После нажатия на нужный цвет, он отобразится вверху. Рядом с цветовым блоком вы увидите значение цвета в RGB и HEX. Если вы хотите выбрать какой-нибудь очень маленький элемент скриншота, нажмите на клавиатуре клавишу Ctrl и прокрутите колесико мыши в нужном направлении. Этим способом можно увеличивать или уменьшать весь скриншот или загруженную фотографию.

Eye Dropper — расширение для идентификации цифрового колора

Возможно, еще кто-нибудь не знает, но расширения в браузере являются дополнительными инструментами. Они доступны в специальных магазинах. Так как Google Chrome является одним из популярных программ для серфинга в интернете, в его магазине больше всего таких мини-программ. Но нам не нужны все, а только Eye Dropper. Магазин Chrome находится на странице https://chrome.google.com/webstore/category/extensions?hl=ru. Чтобы найти расширение, выберите слева вверху строку поиска и введите в ней название.

Поиск Eye Dropper в магазине расширений Chrome

Это расширение является своеобразной пипеткой для браузера. При этом она будет работать повсеместно и выбирать для вас любой пиксель. После чего предоставлять всю нужную информацию по цвету. Это очень удобно, и к тому же не нужно ничего копировать или вставлять. Когда вы найдете расширение, выберите напротив него кнопку «Установить». Вверху на панели браузера Chrome появится маленькое изображение пипетки. Чтобы начать с ней работать нажмите на неё.

Дальнейший порядок действий:

  1. Откроется контекстное меню, где для выбора оттенка в браузере нужно нажать кнопку «Pick color from web-page»;

    Расширение Google Chrome Eye Dropper

  2. Указателем выберите нужный участок на экране, он тут же копируется. А цветовой квадратик возле пипетки примет оттенок, который вы выбрали;
  3. Слева в информационном блоке расширения будут числовые значение в RGB, HSL, HTML и др. Чтобы удалить текущий колор, нажмите корзинку под кнопкой выбора;

    Инструменты Eye Dropper

  4. Вы можете загрузить данные цвета в формате CSV, который можно открыть программой MS Excel.

При этом небольшое расширение Eye Dropper позволяет автоматически копировать данные выбранного цвета на мониторе. Есть настройка горячих клавиш для быстрого запуска в браузере, а также история всех выбранных раннее вариантов. Если вы пользуетесь браузером Google Chrome и вам часто необходимо определять цвета разных пикселей online, то это расширение несомненно для вас.

Inettools — инструмент для копирования цвета

Есть еще несколько других инструментов в интернете. Возможно, они не такие удобные, как те, что были уже рассмотрены. Но некоторым они тоже могут понравится. Inettools — это еще одна онлайн-пипетка. Здесь вам также потребуется загрузить изображение, откуда нужно выбрать цвет цифровой картинки. Попадая на главную страницу https://ru.inettools.net, вы увидите рабочее окно. В него можно перетащить изображение. А можно загрузить его, нажав на кнопку под окном «Выбрать». После этого указать на своем компьютере путь к изображению.

Дальнейшие действия:

  1. Когда картинка будет на рабочем столе Inettools, просто выберите курсором мыши любую точку на картинке;

    Рабочее окно Inettools

  2. Вся информация по выбранному пикселю отобразится в блоке ниже под названием «Сохраненное значение». Здесь представлен этот цвет в RGB и HTML, а также указано положение по горизонтали и вертикали;
  3. В блоке «Текущее положение» отображается значение курсора, которым вы передвигаете в настоящее время.

    Определение цвета пикселя в Inettools

С помощью такого нехитрого инструмента очень просто узнать любой цветовой пиксель на фотографии или цветной картинке. В нем можно выбирать несколько изображений и переключаться между ними. Их список находится под рабочим столом. Онлайн-инструментом подобного типа является https://imagecolorpicker.com/ru. В отличие от предыдущего сервиса, здесь есть возможно только загружать картинки из своего компьютера или по указанному URL.

Pixie — простая утилита для распознавания оттенка на экране

Небольшая утилита Pixie является портативной. Это значит, что после её загрузки на свой компьютер вам не придется её устанавливать. Размер её весьма мал — 11 килобайт. Вы можете упрятать её куда-нибудь подальше в папку, чтобы она не мешала. А на рабочий стол вывести иконку. Таким образом вы получите удобный и простой инструмент, который способ определять цвет на экране не зависимо от того, какая программ сейчас работает. Это может быть браузер или даже игра.

Запустив утилиту Pixie, нужно навести курсор на часть экрана, и вы тут же определить цвет в шести различных цветовых моделях: RGB, HEX, CMYK, HSV, pixel at, HTML. Информация отображается в небольшом окошке. Вы сможете загрузить утилиту Pixie с сайта разработчика — http://www.nattyware.com/pixie.php. Она абсолютно бесплатна и будет работать во всех версиях ОС Windows.

Другие инструменты, которые помогут определить цвет пикселя

Есть еще одна утилита с похожими функциями — HTML-Color 2000. Эта программа ограничена только цветовой схемой HTML и RGB. И отображает информацию только соответственно этим цветовым представлениям. Загрузить её можно по ссылке https://siteblogger.ru/programs/programma-html-colors-2000.html. Чтобы узнать цвет в HTML, нужно в окне программы нажать на кнопку «Screen». После этого она отображает необходимую информацию соответственно в двух блоках. Колор в ней можно изменять самому. Например, чтобы узнать код HTML-цвета, выберите его название из списка в блоке программы.

Программа HTMLColor 2000

Также не стоит забывать, что оттенки умеют определять большинство графических редакторов. Но в некоторых, таких как стандартный Paint в Windows, не отображается информация о графической модели. Мы рассмотрели достаточно инструментов для определения цвета пикселя в режиме онлайн. Теперь вы сможете выбрать самый подходящий для своих задач.

 

it-doc.info

Цвета HTML. Таблица из 147 имён цветов для HTML и CSS — ColorScheme.Ru

HTML Имя ЦветаHEXRGB
Красные тона:
IndianRed#CD5C5C205, 92, 92
LightCoral#F08080240, 128, 128
Salmon#FA8072250, 128, 114
DarkSalmon#E9967A233, 150, 122
LightSalmon#FFA07A255, 160, 122
Crimson#DC143C220, 20, 60
Red#FF0000255, 0, 0
FireBrick#B22222178, 34, 34
DarkRed#8B0000139, 0, 0
Розовые тона:
Pink#FFC0CB255, 192, 203
LightPink#FFB6C1255, 182, 193
HotPink#FF69B4255, 105, 180
DeepPink#FF1493255, 20, 147
MediumVioletRed#C71585199, 21, 133
PaleVioletRed#DB7093219, 112, 147
Оранжевые тона:
LightSalmon#FFA07A255, 160, 122
Coral#FF7F50255, 127, 80
Tomato#FF6347255, 99, 71
OrangeRed#FF4500255, 69, 0
DarkOrange#FF8C00255, 140, 0
Orange#FFA500255, 165, 0
Жёлтые тона:
Gold#FFD700255, 215, 0
Yellow#FFFF00255, 255, 0
LightYellow#FFFFE0255, 255, 224
LemonChiffon#FFFACD255, 250, 205
LightGoldenrodYellow#FAFAD2250, 250, 210
PapayaWhip#FFEFD5255, 239, 213
Moccasin#FFE4B5255, 228, 181
PeachPuff#FFDAB9255, 218, 185
PaleGoldenrod#EEE8AA238, 232, 170
Khaki#F0E68C240, 230, 140
DarkKhaki#BDB76B189, 183, 107
Фиолетовые тона:
Lavender#E6E6FA230, 230, 250
Thistle#D8BFD8216, 191, 216
Plum#DDA0DD221, 160, 221
Violet#EE82EE238, 130, 238
Orchid#DA70D6218, 112, 214
Fuchsia#FF00FF255, 0, 255
Magenta#FF00FF255, 0, 255
MediumOrchid#BA55D3186, 85, 211
MediumPurple#9370DB147, 112, 219
BlueViolet#8A2BE2138, 43, 226
DarkViolet#9400D3148, 0, 211
DarkOrchid#9932CC153, 50, 204
DarkMagenta#8B008B139, 0, 139
Purple#800080128, 0, 128
Indigo#4B008275, 0, 130
SlateBlue#6A5ACD106, 90, 205
DarkSlateBlue#483D8B72, 61, 139
Коричневые тона:
Cornsilk#FFF8DC255, 248, 220
BlanchedAlmond#FFEBCD255, 235, 205
Bisque#FFE4C4255, 228, 196
NavajoWhite#FFDEAD255, 222, 173
Wheat#F5DEB3245, 222, 179
BurlyWood#DEB887222, 184, 135
Tan#D2B48C210, 180, 140
RosyBrown#BC8F8F188, 143, 143
SandyBrown#F4A460244, 164, 96
Goldenrod#DAA520218, 165, 32
DarkGoldenRod#B8860B184, 134, 11
Peru#CD853F205, 133, 63
Chocolate#D2691E210, 105, 30
SaddleBrown#8B4513139, 69, 19
Sienna#A0522D160, 82, 45
Brown#A52A2A165, 42, 42
Maroon#800000128, 0, 0
Основные цвета:
Black#0000000, 0, 0
Gray#808080128, 128, 128
Silver#C0C0C0192, 192, 192
White#FFFFFF255, 255, 255
Fuchsia#FF00FF255, 0, 255
Purple#800080128, 0, 128
Red#FF0000255, 0, 0
Maroon#800000128, 0, 0
Yellow#FFFF00255, 255, 0
Olive#808000128, 128, 0
Lime#00FF000, 255, 0
Green#0080000, 128, 0
Aqua#00FFFF0, 255, 255
Teal#0080800, 128, 128
Blue#0000FF0, 0, 255
Navy#0000800, 0, 128
HTML Имя ЦветаHEXRGB
Зелёные тона:
GreenYellow#ADFF2F173, 255, 47
Chartreuse#7FFF00127, 255, 0
LawnGreen#7CFC00124, 252, 0
Lime#00FF000, 255, 0
LimeGreen#32CD3250, 205, 50
PaleGreen#98FB98152, 251, 152
LightGreen#90EE90144, 238, 144
MediumSpringGreen#00FA9A0, 250, 154
SpringGreen#00FF7F0, 255, 127
MediumSeaGreen#3CB37160, 179, 113
SeaGreen#2E8B5746, 139, 87
ForestGreen#228B2234, 139, 34
Green#0080000, 128, 0
DarkGreen#0064000, 100, 0
YellowGreen#9ACD32154, 205, 50
OliveDrab#6B8E23107, 142, 35
Olive#808000128, 128, 0
DarkOliveGreen#556B2F85, 107, 47
MediumAquamarine#66CDAA102, 205, 170
DarkSeaGreen#8FBC8F143, 188, 143
LightSeaGreen#20B2AA32, 178, 170
DarkCyan#008B8B0, 139, 139
Teal#0080800, 128, 128
Синие тона:
Aqua#00FFFF0, 255, 255
Cyan#00FFFF0, 255, 255
LightCyan#E0FFFF224, 255, 255
PaleTurquoise#AFEEEE175, 238, 238
Aquamarine#7FFFD4127, 255, 212
Turquoise#40E0D064, 224, 208
MediumTurquoise#48D1CC72, 209, 204
DarkTurquoise#00CED10, 206, 209
CadetBlue#5F9EA095, 158, 160
SteelBlue#4682B470, 130, 180
LightSteelBlue#B0C4DE176, 196, 222
PowderBlue#B0E0E6176, 224, 230
LightBlue#ADD8E6173, 216, 230
SkyBlue#87CEEB135, 206, 235
LightSkyBlue#87CEFA135, 206, 250
DeepSkyBlue#00BFFF0, 191, 255
DodgerBlue#1E90FF30, 144, 255
CornflowerBlue#6495ED100, 149, 237
MediumSlateBlue#7B68EE123, 104, 238
RoyalBlue#4169E165, 105, 225
Blue#0000FF0, 0, 255
MediumBlue#0000CD0, 0, 205
DarkBlue#00008B0, 0, 139
Navy#0000800, 0, 128
MidnightBlue#19197025, 25, 112
Белые тона:
White#FFFFFF255, 255, 255
Snow#FFFAFA255, 250, 250
Honeydew#F0FFF0240, 255, 240
MintCream#F5FFFA245, 255, 250
Azure#F0FFFF240, 255, 255
AliceBlue#F0F8FF240, 248, 255
GhostWhite#F8F8FF248, 248, 255
WhiteSmoke#F5F5F5245, 245, 245
Seashell#FFF5EE255, 245, 238
Beige#F5F5DC245, 245, 220
OldLace#FDF5E6253, 245, 230
FloralWhite#FFFAF0255, 250, 240
Ivory#FFFFF0255, 255, 240
AntiqueWhite#FAEBD7250, 235, 215
Linen#FAF0E6250, 240, 230
LavenderBlush#FFF0F5255, 240, 245
MistyRose#FFE4E1255, 228, 225
Серые тона:
Gainsboro#DCDCDC220, 220, 220
LightGrey#D3D3D3211, 211, 211
LightGray#D3D3D3211, 211, 211
Silver#C0C0C0192, 192, 192
DarkGray#A9A9A9169, 169, 169
DarkGrey#A9A9A9169, 169, 169
Gray#808080128, 128, 128
Grey#808080128, 128, 128
DimGray#696969105, 105, 105
DimGrey#696969105, 105, 105
LightSlateGray#778899119, 136, 153
LightSlateGrey#778899119, 136, 153
SlateGray#708090112, 128, 144
SlateGrey#708090112, 128, 144
DarkSlateGray#2F4F4F47, 79, 79
DarkSlateGrey#2F4F4F47, 79, 79
Black#0000000, 0, 0

colorscheme.ru

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *