Как определить цвет на сайте
Приветствую вас на сайте Impuls-Web!
В данной статье я расскажу вам, как можно определить цвет элемента на сайте.
Для чего это может понадобиться? Предположим, вы редактируете какой-то элемент, либо добавляете новый и вам нужно сделать, что бы он подходил по цветовому оформлению к вашему сайту.
Навигация по статье:
В моем случае, в качестве такого элемента будет выступать кнопка «Отправить заявку»
Для того, что бы она лучше подходила по оформлению к этому сайту, я хочу сделать, что бы ее цвет фона совпадал с цветом меню. Конечно, для точного определения цвета можно использовать какой-нибудь графический редактор типа Photoshop или его аналогов. Однако, есть способы определить цвет с намного меньшими затратами времени и усилий.
Определение цвета стандартными инструментами браузера
Я буду показывать, как это можно сделать на примере браузера Mozilla Firefox и Google Chrome. Здесь, для того, что бы определить цвет какого-то элемента я могу щелкнуть правой кнопкой мыши по тому элементу, для которого я хочу задать цвет и в раскрывающемся списке выбрать здесь пункт «Исследовать элемент».
При этом, в нижней части экрана откроется окно инспектора, где можно просматривать код страницы, а так же css-свойства, которые задаются для каждого элемента.
Для данной кнопки у меня отображается в качестве фона серый цвет и если щёлкнуть левой кнопкой мышки по кружочку с цветом, то откроется вот такая палитра:
При помощи данной палитры также можно подбирать нужный цвет, но для точного определения цвета нужно:
- 1.Кликнуть на значок пипетки
- 2.Навести курсор на тот элемент сайта, цвет которого мы хотим определить. В данном случае это будет меню.
Обратите внимание, что возле курсора появляется увеличивающаяся область, благодаря которой мы можем определить цвет даже для каких-то не больших элементов на странице сайта.
- 3.После того, как вы выбрали тот цвет, который вам нужен, просто нажимаете левую кнопку мышки. Сразу же после этого значение цвета того элемента, для которого вы инспектировали свойства, изменится. И эти изменения вы можете сразу же увидеть на предпросмотре.
Кнопка «Отправить заявку» сразу же стала такого же цвета, как и меню. Однако для того, что бы эти изменения сохранились и применились на сайте, вам нужно скопировать значение данного цвета на панели отображения 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.Точно так же щелкаем правой кнопкой мышки по интересующему нас элементу.
- 2.Выбираем пункт «Просмотреть код»
- 3.Далее, у нас открывается аналогичный инспектор. Единственное, у вас он может быть как в горизонтальном расположении, как у меня, так и в вертикальном, когда панель будет находиться справа.
- 4.Здесь мы находим панель отображения css-свойств, и нажимаем на значок одного из цветов.
= cvet6= - 5.Далее, у нас открывается инструмент определения цвета, который, в принципе, похож на тот, который был в Mozilla Firefox. Единственное, что здесь еще можно задавать прозрачность цвета, выбирать цветовую гамму, и так же он может определять цвета не только в шестнадцатеричном формате, но и в формате RGB и RGBA.
- 6.Для точного определения цвета так же нажимаем на значок пипетки, наводим курсор на тот элемент, цвет которого мы хотим определить, и щелкаем левой кнопкой мыши.
- 7.Точно так же, копируем значение этого цвета, и затем вставляем его в наш css-файл.
Как и в Mozilla Firefox, после того как мы выбрали цвет в окне предпросмотра элемент подсветился таким же цветом, который мы выбрали. Однако при обновлении страницы все эти изменения исчезнут, и цвет станет таким же, как он задан в css изначально. То есть, для того, что бы эта кнопка стала такого же цвета, как и меню на сайте, мне нужно внести изменения в css-файл.
Использование пипетки в Mozilla Firefox
Так же, в браузере Mozilla Firefox есть специальный инструмент для определения цвета, который называется «Пипетка».
Для того чтобы им воспользоваться нужно:
- 1.В правом верхнем углу нажимаем на значок меню, затем, выбираем раздел «Разработка», и здесь выбираем инструмент «Пипетка».
- 2.У нас появляется вот такое увеличительное стекло, при помощи которого мы можем определять цвет.
- 3.После того, как мы навели курсор на тот элемент, у которого нужно определить цвет, щелкаем левой кнопкой мышки и значение этого цвета автоматически копируется в буфер обмена.
- 4.Затем, мы просто переходим в css-файл и вставляем это значение.
На мой взгляд, этот способ более удобный, чем определение цвета через инспектор. Потому что он, во-первых немножко быстрее, а во-вторых – значение инспектора сразу же копируется в буфер обмена.
Определение цвета при помощи специальной программы
Так же, помимо инструментов браузера существуют специальные программки, которые так же позволяют легко определять значение цвета. Я для этих целей использую программу Pixie. Она не устанавливается, то есть вы просто копируете ее к себе на компьютер, а затем, при необходимости, просто запускаете двойным щелчком мыши, и у вас появляется вот такое окошко:
Которое вы можете разместить в любой части экрана, что бы оно вам не мешало. При этом когда вы водите курсором по изображению – в специальном окошке показываются выбранный цвет.
Плюс этой программы в том, что вы можете определять точное значение цвета не только для каких-то элементов открытых в браузере, но и любых других элементов, отображающихся на вашем мониторе.
После того, ка вы выбрали тот цвет, который вам нравится, вы нажимаете сочетание клавиш
Затем, это значение можно также задать в качестве цвета фона, но при этом обращаю ваше внимание, что оно копируется без знака решетки.
Цвет определяется в шестнадцатеричном формате но знак решетки # вам нужно будет дописывать самостоятельно чтобы получилось примерно так: «#2F73B6».
Так же, плюс этой программы в том, что вы помимо того, что можете определять точное значение цвета, так же можно немного его изменять.
Например, я хочу для этой кнопки сделать эффект при наведении, чтобы фон становился более темный или более светлый, но при этом оттенок должен сохранялся. Для этого:
- 1.Сначала нажимаем CTRL+ALT+C, что бы скопировать значение цвета.
- 2.Затем, на клавиатуре, нажимаем CTRL+ALT+X, после чего открывается вот такая палитра:
- 3.В этой палитре можно либо выбирать интересующие оттенки, либо при помощи ползунка справа делать цвет более темным или более светлым. При этом в окне предпросмотра отображается оттенок, который получается в результате этих манипуляций. Здесь значение цвета отображается как в формате RGB, так и в шестнадцатеричном формате.
- 4.Если значение скопированного цвета не вставилось автоматически, то нужно вставить его в поле «HTML», а уже потом делать его темнее или светлее при помощи ползунка справа.
- 5.После выбора нужного оттенка копируем шестнадцатеричное значение цвета из поля “HTML”
Для смены цвета фона при наведении нужно приписать к классу или идентификатору элемента псевдокласс hover, а заем задать цвет фона.
Получится примерно так:
.test-btn{ background:#2F73B6; } .test-btn:hover{ background:# 286199; }
.test-btn{ background:#2F73B6; }
.test-btn:hover{ background:# 286199; } |
Я обычно при верстке или доработке сайтов использую именно эту программку.
Вы можете скачать данную программу к себе на компьютер, нажав на ссылку ниже.
Видеоинструкция
На этом у меня все. Если данная статья была для вас полезна – не забудьте оставить комментарий и подписаться на мою рассылку. Спасибо за то, что посетили мой сайт и до встречи в следующей статье!
С уважением Юлия Гусарь
Как узнать цвет элемента на сайте или экране монитора
Необходимость точного определения цвета элемента в цифровом представлении возникает, например, при оформлении внешнего вида сайта или блога, при желании использовать понравившийся цвет с чужого блога на своем сайте, при подборе картинок для статей и т.д.
Некоторые программы позволяют назначать пользовательские цвета для элементов интерфейса. Мне, например, не нравятся цвета, используемые в известном файловом менеджере Total Commander при первом запуске его на компьютере, и я установил их такими, как показано ниже
Рис. 1
Сначала коротко о методах представления цветов. В web документах обычно используются следующие способы – текстовое обозначение, палитра RGB и шестнадцатеричный код (рис. 2).
Рис. 2. Набор из 16 стандартных цветов
Кодировка RGB отличается от шестнадцатеричной тем, что в первом случае используется десятичная система исчисления, а во втором – шестнадцатеричная, например, 247=15×16+7=#f7, 192=12×16+0=#С0. Такое преобразование делаем для каждого из трех десятичных чисел, характеризующих интенсивности красного, зеленого и синего цветов в палитре RGB (RGB(138,43,226)=#8A2BE2, т.к. 8A=8×16+10=138, 2B=2×16+11=43, E2=14×16+2=226).
Когда я только начинал работать в интернете и мне нужно было подобрать цвет по имеющемуся образцу, я это делал «на глаз» по палитре цветов. Определить точное цифровое представление имеющегося цвета таким способом практически невозможно. Существует несколько способов решения этой проблемы. Для Google Chrome имеется расширение Eye Dropper, которое можно установить по ссылке
https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka
(скопируйте и вставьте в строку браузера). После установки в панели с кнопками расширений появляется значок с пипеткой (рис. 3)
Рис. 3
Нажимаем на этот значок, откроется окно,
Рис. 4
содержащее историю предыдущих проб определения цвета (слева снизу) и их результат (справа). Для выполнения новой пробы жмем на кнопку с каплей (слева сверху),
Рис.5
появится курсор с небольшим квадратиком рядом с ним, окрашенным в цвет точки, на которую указывает курсор (рис. 5). В нижней части экрана с правой стороны отобразится черный прямоугольник с цифровым кодом этого цвета. Если нажать на левую кнопку мыши, то результат измерения отобразится в окне, показанном на рис. 4.
При выборе вкладки «Color picker» (рис. 4 сверху) откроется окно, в котором можно выбрать цвет по цветовой палитре и при желании добавить его в историю измерений.
Рис. 6
Похожими возможностями обладает расширение ColorZilla, имеющееся в браузерах Google Chrome и Mozilla Firefox.
Если нужно определить цвет любого элемента, отображенного на экране монитора, то можно воспользоваться небольшой программой Pixie Portable, ярлык которой я поместил на панель быстрого запуска программ. Работа этой программы показана на рис. 7
Рис. 7
При запуске программы в центре экрана отображается окно, в котором показан цвет точки, расположенной под курсором, и цифровые коды этого цвета в различных системах. Если курсор расположить внутри этого окна, то в нем отобразятся горячие клавиши программы:
Рис.8
Ctrl+Alt+C – копирование в буфер обмена HTML кода.
Ctrl+Alt+X – открытие окна палитры цветов.
Ctrl+Alt+Z – увеличение области под курсором для более точного определения цвета мелких элементов.
С помощью кнопок » x » и » _ » окно можно закрыть или свернуть в системный трей.
В заключение приведем HTML коды, так называемых, web-безопасных цветов, одинаково отображающихся во всех браузерах (216 кодов).
Web-safe colors
Хорошего Вам настроения.
С уважением, Александр Резунов.
Get Color — палитра цветов, определить цвет онлайн
ColorGet — программа для определения цвета на экране
Утилита ColorGet позволяет определить цвет пикселя не только на фото или картинке, но и на любой рабочей поверхности. Программа работает без установки. Просто скачайте архив и распакуйте. Скачать ColorGet
Названия цветов и html коды
- Ализариновый красный, Alizarin Crimson, #E32636
- Янтарный, Amber, #FFBF00
- Аметистовый, Amethyst, #9966CC
- Спаржа, Asparagus, #7BA05B
- Морской волны, Aqua, #00FFFF
- Аквамариновый, Aquamarine, #7FFFD4
- Лазурный, Azure, #007FFF
- Бежевый, Beige, #F5F5DC
- Бистр, Bistre, #3D2B1F
- Чёрный, Black, #000000
- Синий, Blue, #0000FF
- Вода пляжа Бонди, Bondi Blue, #0095B6
- Латунный, Brass, #B5A642
- Ярко-зелёный, Bright green, #66FF00
- Ярко-бирюзовый, Bright turquoise, #08E8DE
- Ярко-фиолетовый, Bright violet, #CD00CD
- Бронзовый, Bronze, #CD7F32
- Коричневый, Brown, #964B00
- Кожа буйвола, Buff, #F0DC82
- Бургундский, Burgundy, #900020
- Выгоревший оранжевый, Burnt Orange, #CC5500
- Сиена жжёная, Burnt Sienna, #E97451
- Умбра жжёная, Burnt umber, #8A3324
- Камуфляжный зелёный, Camouflage green, #78866B
- Кардинал, Cardinal, #C41E3A
- Карминово-красный, Carmine, #960018
- Морковный, Carrot, #ED9121
- Серо-зелёный, Celadon, #ACE1AF
- Светлая вишня, Cerise, #DE3163
- Лазурный, Cerulean, #007BA7
- Лазурно-синий, Cerulean blue, #2A52BE
- Салатовый / Шартрез, Chartreuse, #7FFF00
- Каштановый, Chestnut, #CD5C5C
- Шоколадный, Chocolate, #D2691E
- Коричневый, Cinnamon, #7B3F00
- Кобальт синий, Cobalt, #0047AB
- Медный, Copper, #B87333
- Коралловый, Coral, #FF7F50
- Кукурузный, Corn, #FBEC5D
- Васильковый, Cornflower blue, #6495ED
- Кремовый, Cream, #FFFDD0
- Малиновый, Crimson, #DC143C
- Циан, васильковый, Cyan, #00FFFF
- Тёмно-коричневый, Dark brown, #654321
- Тёмно-лазурный, Dark cerulean, #08457E
- Тёмно-каштановый, Dark chestnut, #986960
- Тёмно-коралловый, Dark coral, #CD5B45
- Тёмно-золотой, Dark goldenrod, #B8860B
- Тёмно-зелёный, Dark green, #013220
- Тёмный индиго, Dark Indigo, #310062
- Тёмный хаки, Dark Khaki, #BDB76B
- Тёмно-оливковый, Dark Olive, #556832
- Тёмный пастельно-зелёный, Dark pastel green, #03C03C
- Тёмно-персиковый, Dark Peach, #FFDAB9
- Тёмно-розовый, Dark pink, #E75480
- Тёмная лососина, Dark salmon, #E9967A
- Тёмно-алый, Dark Scarlet, #560319
- Тёмно-аспидный серый, Dark slate gray, #2F4F4F
- Тёмный весенне-зелёный, Dark spring green, #177245
- Тёмный жёлто-коричневый, Dark tan, #918151
- Тёмно-мандариновый, Dark tangerine, #FFA812
- Тёмный зелёный чай, Dark Tea Green, #BADBAD
- Тёмно-бирюзовый, Dark turquoise, #116062
- Тёмно-фиолетовый, Dark violet, #423189
- Голубой, Deep sky blue, #00BFFF
- Джинсовый синий, Denim, #1560BD
- Защитно-синий, Dodger blue, #1E90FF
- Изумрудный, Emerald, #50C878
- Баклажановый, Eggplant, #990066
- Зелёный папоротник, Fern green, #4F7942
- Льняной, Flax, #EEDC82
- Фуксия, Magenta (Fuchsia), #FF00FF
- Гуммигут, Gamboge, #E49B0F
- Золотой, Gold, #FFD700
- Золотисто-берёзовый, Goldenrod, #DAA520
- Серый, Gray, #808080
- Серая спаржа, Gray-asparagus, #465945
- Зелёный серый чай, Gray-Tea Green, #CADABA
- Зелёный, Green, #00FF00
- Жёлто-зелёный, Green-yellow, #ADFF2F
- Синий Градуса, Gradus Blue, #007DFF
- Гелиотроп, Heliotrope, #DF73FF
- Ярко-розовый, Hot pink, #FC0FC0
- Индиго, Indigo, #4B0082
- Международный (сигнальный) оранжевый, International orange (Safety orange), #FF4F00
- Жёлто-зелёный, Jade, #00A86B
- Хаки, Khaki, #C3B091
- Синий Клейна, Klein Blue, #3A75C4
- Лаванда, Lavender, #E6E6FA
- Розово-лавандовый, Lavender Blush, #FFF0F5
- Лимонный, Lemon, #FDE910
- Лимонно-кремовый, Lemon Cream, #FFFACD
- Светло-коричневый, Light brown, #CD853F
- Сиреневый, Lilac, #C8A2C8
- Лайм, Lime, #CCFF00
- Льняной, Linen, #FAF0E6
- Малахитовый, Malachite, #0BDA51
- Коричнево-малиновый, Maroon, #800000
- Розовато-лиловый, Mauve, #993366
- Полуночно-синий, Midnight Blue, #003366
- Зелёная мята, Mint Green, #98FF98
- Зелёный мох, Moss green, #ADDFAD
- Розовый Маунтбэттена, Mountbatten pink, #997A8D
- Горчичный, Mustard, #FFDB58
- Белый навахо, Navajo white, #FFDEAD
- Тёмно-синий, Navy blue, #000080
- Охра, Ochre, #CC7722
- Старое золото, Old Gold, #CFB53B
- Оливковый, Olive, #808000
- Нежно-оливковый, Olive Drab, #6B8E23
- Оранжевый, Orange, #FFA500
- Орхидея, Orchid, #DA70D6
- Бледно-синий, Pale Blue, #AFEEEE
- Бледно-коричневый, Pale brown, #987654
- Бледно-карминный, Pale carmine, #AF4035
- Бледно-каштановый, Pale chestnut, #DDADAF
- Бледно-васильковый, Pale cornflower blue, #ABCDEF
- Бледно-пурпурный, Pale magenta, #F984E5
- Бледный розовато-лиловый, Pale mauve, #996666
- Бледно-розовый, Pale pink, #FADADD
- Лиловый, Pale red-violet, #DB7093
- Бледно-песочный, Pale Sandy Brown, #DABDAB
- Палевый, Pale yellow, #F0DC82
- Панг, Pang, #C7FCEC
- Побег папайи, Papaya whip, #FFEFD5
- Пастельно-зелёный, Pastel green, #77DD77
- Пастельно-розовый, Pastel pink, #FFD1DC
- Персиковый, Peach, #FFE5B4
- Оранжево-персиковый, Peach-orange, #FFCC99
- Жёлто-персиковый, Peach-yellow, #FADFAD
- Грушевый, Pear, #D1E231
- Барвинок, Periwinkle, #CCCCFF
- Персидский синий, Persian blue, #6600FF
- Зелёная сосна, Pine Green, #01796F
- Розовый, Pink, #FFC0CB
- Оранжево-розовый, Pink-orange, #FF9966
- Сливовый, Plum, #660066
- Пороховая синь, Powder blue, #003399
- Красновато-коричневый, Puce, #CC8899
- Берлинская лазурь, Prussian blue, #003153
- Тыква, Pumpkin, #FF7518
- Пурпурный, Purple, #660099
- Умбра, Raw umber, #734A12
- Красный, Red, #FF0000
- Фиолетово-красный, Red-violet, #C71585
- Яйца дрозда, Robin egg blue, #00CCCC
- Королевский синий, Royal Blue, #4169E1
- Красновато-коричневый, Russet, #755A57
- Ржаво-коричневый, Rust, #B7410E
- Сигнальный оранжевый, Safety Orange (Blaze Orange), #FF9900
- Шафрановый, Saffron, #F4C430
- Сапфировый, Sapphire, #082567
- Лососёвый, Salmon, #FF8C69
- Песочный, Sandy brown, #F4A460
- Сангрия, Sangria, #92000A
- Алый, Scarlet, #FF2400
- Жёлтого школьного автобуса, School bus yellow, #FFD800
- Зелёное море, Sea Green, #2E8B57
- Морской пены, Seashell, #FFF5EE
- Отборный жёлтый, Selective yellow, #FFBA00
- Сепия, Sepia, #704214
- Серебряный, Silver, #C0C0C0
- Серый шифер, Slate gray, #708090
- Зелёная весна, Spring Green, #00FF7F
- Синяя сталь, Steel blue, #4682B4
- Болотный, Swamp green, #ACB78E
- Загара, Tan, #D2B48C
- Краснобуро-оранжевый, Tenne, #CD5700
- Мандариновый, Tangerine, #FFCC00
- Зелёный чай, Tea Green, #D0F0C0
- Сине-зелёный, Teal, #008080
- Чертополох, Thistle, #D8BFD8
- Бирюзовый, Turquoise, #30D5C8
- Тициановый, Titian, #d53e07
- Ультрамариновый, Ultramarine, #120A8F
- Киноварь, Vermilion, #FF4D00
- Фиолетовый, Violet, #8B00FF
- Фиолетово-баклажанный, Violet-eggplant, #991199
- Ядовито-зелёный, Viridian, #40826D
- Пшеничный, Wheat, #F5DEB3
- Белый, White, #FFFFFF
- Глициния, Wisteria, #C9A0DC
- Жёлтый, Yellow, #FFFF00
- Циннвальдит, Zinnwaldite, #EBC2AF
- Сомон, Saumon, #EFAF8C
- Кофейный, Coffee, #442D25
- Медвежьего ушка, Byron, #834D18
- Кирпичный, Brick, #884535
- Терракотовый, Terracotta, #904D30
- Камелопардовый, Camelopardalis, #A25F2A
- Ванильный, Vanilla, #D5713F
- Рыжий, Reddish-brown, #D77D31
- Сиена, Siena, #E28B00
- Последний вздох Жако, Jaco, #FF9218
- Жёлто-розовый, Yellow Pink, #FFE4B2
- Бедра испуганной нимфы, Scared nymph, #FAEEDD
- Сливочный, Light cream, #F2E8C9
- Пергидрольной блондинки, Perhydor, #EEE6A3
- Шамуа, Chamois, #A08040
- Тёмно-грушевый, Dark pear, #D8A903
- Детской неожиданности, Child’s surprise, #F7F21A
- Вердепешевый, Vert-de-pеche, #DAD871
- Слоновой кости, Ivory, #FFFDDF
- Травяной, Grass, #5DA130
- Влюбленной жабы, Toad in love, #3CAA3C
- Вердепомовый, Vert-de-pomme, #34C924
- Фисташковый, Pistachio, #BEF574
- Красного моря, Red Sea, #1F4037
- Лягушки в обмороке, Fainted frog, #7B917B
- Маренго, Marengo, #4C5866
- Мурена, Moray, #1C6B72
- Электрик, Electric, #7DF9FF
- Светло-серый, Light Grey, #BBBBBB
- Кварцевый, Quartz, #99958C
- Антрацитовый, Anthracite, #464451
- Чёрного моря, Black Sea, #1A4780
- Сизый, Bluish, #79A0C1
- Ниагара, Niagara, #9DB1CC
- Небесный, Sky, #7FC7FF
- Гридеперлевый, Gris de perle, #C7D0CC
- Бороды Абдель-Керима, Abdel Kerim’s beard, #D5D5D5
- Серобуромалиновый, Seroburomalinovyj, #735184
- Фиалковый, Violaceous, #EA8DF7
- Звезды в шоке, Shocked star, #FF47CA
- Вишнёвый, Cherry, #911E42
- Блошиного брюшка, Flea belly, #4E1609
- Бурый, Fulvous, #45161C
- Бисмарк-фуриозо, Bismarck-furious, #A5260A
- Бордовый, Wine red, #9B2D30
English version
👍 Палитра цветов онлайн | 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% | |
Advertisements
Or
Как определить HTML код цвета на экране
Такой вопрос может возникнуть у веб-дизайнера или разработчика, когда нужно определить какой цвет используется на каком-либо объекте, например сайте или просто точки на экране.
Каждый цвет или оттенок который мы видим на экране, обозначается HTML кодом и RGB палитрой цветов, для сайтов цвета и стили обычно указывают в таблице CSS. RGB – это аббревиатура, состоящия из первых английских букв названия цветов, красного, зеленого и синего. Распределение этих трех цветов достаточно чтобы дать нам любой нужный цвет.
Теперь, переходим к ответу на главный вопрос, как узнать код цвета на экране?
Чтобы узнать код цвета на любой точке экрана, неважно при этом открыт ли у вас сайты в браузере или просто пустой рабочий стол, можно идентифицировать цвет всего что угодно что отображается на мониторе.
Для этого нам понадобиться малюсенькая но полезная программа — Instant Eyedropper. Вот – прямая ссылка на скачивание. Установка и запуск займут меньше минуты. После запуска в правом нижнем углу появиться круглая иконка:
Мы кликаем на нее левой кнопкой мыши и всплывает окошко, кнопку мыши не отпускайте, переносите курсор в нужную область экрана и смотрите какой код отображается, пример :
На примере код в виде #ffffff.Кроме этого, есть еще настройки вывода кода в разных форматах(HEX, HTML, RGB другие) Можно поставить галочку на нужный формат, кликните по тому же значку но теперь правой кнопкой мыши:
Данную программу можно использовать вместе в фотошопом, в дополнение. У вас остались еще вопросы или все ОК?
Алексей Повловский
Определение цвета на экране монитора с помощью программ
Очень часто во время работы с сайтами и картинками требуется определить цвет какой-либо точки Вашего экрана монитора.
Например, Вы хотите сделать цвет фона на сайте точно таким же, как цвет голубого неба на фотографии. Или шрифт заголовков сделать такой, как цвет морской волны. Или наоборот, цвет шрифта использовать как фон для создания баннера. Словом, вариантов много. Тщательный подбор цветов очень много значит как в вебдизайне, так и в работе вебмастера.
Определение цвета означает нахождение его кода. Затем код, в зависимости от Ваших целей, можно использовать как в различных графических редакторах, так и непосредственно в коде html.
Чаще всего при этом используется режим RGB, в котором код можно представить в десятичной и шестнадцатиричной системе.
Очень удобно для определения цвета использовать пипетку программы FSCapture. Но, кроме этой программы, есть и другие, с помощью которых можно это делать.
Пипетка программы Adobe Photoshop
Думаю, немногие пользователи этой программы знают, что с помощью нее можно определить цвет не только любой точки на картинке, открытой в редакторе, но и любой точки на экране Вашего монитора.
Делается это очень просто. Открываете программу Adobe Photoshop, создаете в ней изображение, и, не отпуская левую клавишу мыши, переводите курсор пипетки туда, где находится выбранная Вами точка. Это может быть любая точка за пределами окна программы. По мере движения курсора Вы будете видеть, как изменяется цвет рисования на палитре цветов. После выбора нужной точки отпускаете клавишу мыши. Кликаете по окошку цвета рисования на палитре цветов, и смотрите код Вашего цвета.
Такой способ определения цвета удобен тем, что не требует установки никаких дополнительных программ, кроме фотошопа, который у большинства пользователей и так уже установлен.
Теперь не нужно делать скриншоты, и открывать их в фотошопе, чтобы определить цвет нужного Вам пикселя, все можно сделать гораздо быстрее и проще.
Программа ColorPix
Если Вы не хотите каждый раз для определения цвета открывать программу Photoshop, можете воспользоваться гораздо более легкой программой, которая называется ColorPix. Скачать ее Вы можете по ссылке ниже:Программа не требует установки, и очень маленькая — весит всего 400 Кб. Работать с ней легко — наводите мышкой на любую точку на экране, и смотрите коды в окошке. При необходимости можно воспользоваться лупой, нажав на ее изображение в нижней части окошка программы.
Чтобы закрепить полученный цвет, нажмите Enter. В окошке цвета появится изображение замочка. Чтобы снять закрепление, опять нажмите Enter.
Программа ColorMania
В отличие от программы ColorPix, ее нужно устанавливать. Но она гораздо более продвинутая: с помощью нее Вы можете определить код цвета любой точки на цветовом круге, отрегулировать цветовые характеристики выбранного цвета, или использовать пипетку.
Чтобы использовать пипетку, кликните по ее изображению в окне программы и, не отпуская клавишу мыши, перетащите на нужную точку экрана. В окне программы Вы при этом видите увеличенное изображение тех областей, где проходит курсор пипетки.
Можно кликнуть по цветовому кругу, или выбрать цвет из палитры. Также можно изменить выбранный цвет с помощью бегунков. Три верхних бегунка регулируют интенсивность красного, зеленого и синего цветов. Три нижних — тон, насыщенность и яркость. Эта опция программы пригодится, например. если Вы собираетесь использовать цвета одной тональности, но разных уровней насыщенности и яркости.
Словом, программа стоит того, чтобы ее скачать и использовать в работе.
Видеообзор программ для определения цвета на экране монитора
Более подробные сведения Вы можете получить в разделах «Все курсы» и «Полезности», в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.
Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
Подписаться на блог: Дорога к Бизнесу за Компьютером
Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:
Как узнать цвет пикселя на экране монитора или картинке
Такой вопрос наверняка ни раз возникал у веб-дизайнера, разработчика или простого пользователя компьютера. Часто возникает необходимость подобрать цвет используемый на каком-либо объекте, например сайте или просто точки на экране монитора.
Такой вопрос наверняка ни раз возникал у веб-дизайнера, разработчика или простого пользователя компьютера. Часто возникает необходимость подобрать цвет используемый на каком-либо объекте, например сайте или просто точки на экране монитора.
Существуют несколько основных способов представления цветов, например когда каждый цвет или оттенок, обозначается HTML кодом и цветовой палитрой RGB в виде #FF7700. Это представление в виде трёх пар шестнадцатеричных цифр, в которых каждая пара отвечает за свой цвет:
первые две цифры — красный цвет, т.е. — R (red)
две в середине — зелёный — G (green)
последние две цифры — синий — B (blue)
Довольно часто используют крадкое представление цвета в виде трех символов #F70, что будет равносильно #FF7700.
Кстати, на веб-ресурсах цвета обычно указываются в стилях CSS.
Давайте перейдем к ответу на главный вопрос — Как узнать цвет пикселя на экране монитора или картинке?
Способов большое множество…
Способ 1. Узнаем цвет в photoshop
Итак, сделаем «снимок экрана» нажатием на клавиатуре клавиши — Print Screen (PrtSc), в том месте, где хотим узнать код нашего цвета. Во время нажатия клавиши система сохранит снимок в буфере обмена. Можно просто скопировать изображение, например из браузера, без PrtSc. Теперь остается только вставить изображение из буфера в фотошоп.
Открываем фотошоп и вставляем изображение (Файл — Создать, Редактирование — Вставить). Ищем на панели инструментов «Пипетка» (Клавиша I), далее щелкаем левой кнопкой мыши в ту область, в котрой хотим «снять» цвет. Все готово! Теперь остается перейти в палитру и узнать код цвета.
Способ 2. Узнаем цвет в Paint
Заходим в Paint — вставляем картинку — используем инструмент «палитра» — переходим в «изменение цветов»:
В нашем случае красный — 252, зеленый — 168, синий — 10, т.е. RGB(252,168,10) или в HEX формате #FCA80A.
Способ 3. Просмотреть код элемента в браузере
Опишу способ для браузера Opera. Выделяем мышкой элемент на сайте и щелкаем по нему правой кнопкой мыши — «Просмотреть код элемента» (Ctrl + Shift + C). Откроется панель с html и css кодом, нужно будет найти что-то подобное «color».
Способ 4. Использование специальных средств или программ.
Существует большое количество специальных программ для снятия цвета, мне нравится очень простая прога под названием «Pixie» с весом около 10-11 Кб. Управление очень простое. Достаточно просто навести мышь в нужную точку на экране монитора и нажать следующие клавиши — Ctrl + Alt + C, в результате чего цветовой код скопируется в буфер обмена.