Как узнать код цвета на сайте
Для того чтобы украсить ваш сайт красивыми оттенками. Тем самым повысить дизайн и привлечь большее внимание потребителей. Необходимо знать некоторую информацию, которая поможет освоить присвоение цвета. Сделать это достаточно легко.
Все цвета, которые мы видим на экране сайтов, отображаются языком HTML и RGB является палитрой цветов. Но каким же все-таки образом узнать код цвета расположенного на экране. Определяя цвет не важно, отображено что-то на экране либо ничего нет, просто пустое поле.
Для чего необходимо знать код цвета на сайте и для чего нам пригодиться это.
Во-первых, пригодиться для разработки дизайна сайта, правка шаблона страницы, использовать в html верстке и прочее.
Instant Eyedropper одна из совершенных прогарам для определения кода цвета. После установки данной программы в правом нижнем углу появится иконка. Кликаем на значок левой кнопкой мыши, после чего открывается окно, не отпуская кнопку мыши, переносим на ту область, которая вас интересует.
Как определить цвет в браузере стандартными инструментами
Рассмотрим это на примере Mozilla Firefox. Для того, чтобы определить цвет объекта который вас интересует. Наведите на него и щелкните правой кнопкой мыши. После чего в подменю выбираем пункт исследовать элемент. В нижнем углу откроется окно инспектора, в нем отобразиться код страницы. А если щелкнуть левой кнопкой мыши по кружку с цветом, то откроется палитра цветов. При помощи данной палитры можно подобрать с точностью тот оттенок, который вам необходим. Определить цвет можно даже у небольших элементов страницы. После выбора цвета, который вам необходим, окликайте левой кнопкой мыши. Все изменения будут видны на предварительном просмотре. Далее копируем значение этого цвета и вставляем его css-файл.
Дата публикации : 15 ноября, 2017
Как узнать цвет элемента на сайте или экране монитора
Необходимость точного определения цвета элемента в цифровом представлении возникает, например, при оформлении внешнего вида сайта или блога, при желании использовать понравившийся цвет с чужого блога на своем сайте, при подборе картинок для статей и т.д.
Некоторые программы позволяют назначать пользовательские цвета для элементов интерфейса. Мне, например, не нравятся цвета, используемые в известном файловом менеджере Total Commander при первом запуске его на компьютере, и я установил их такими, как показано ниже
Сначала коротко о методах представления цветов. В 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, которое можно установить по ссылке
(скопируйте и вставьте в строку браузера). После установки в панели с кнопками расширений появляется значок с пипеткой (рис. 3)
Нажимаем на этот значок, откроется окно,
содержащее историю предыдущих проб определения цвета (слева снизу) и их результат (справа). Для выполнения новой пробы жмем на кнопку с каплей (слева сверху),
появится курсор с небольшим квадратиком рядом с ним, окрашенным в цвет точки, на которую указывает курсор (рис. 5). В нижней части экрана с правой стороны отобразится черный прямоугольник с цифровым кодом этого цвета. Если нажать на левую кнопку мыши, то результат измерения отобразится в окне, показанном на рис. 4.
При выборе вкладки «Color picker» (рис. 4 сверху) откроется окно, в котором можно выбрать цвет по цветовой палитре и при желании добавить его в историю измерений.
Похожими возможностями обладает расширение ColorZilla, имеющееся в браузерах Google Chrome и Mozilla Firefox.
Если нужно определить цвет любого элемента, отображенного на экране монитора, то можно воспользоваться небольшой программой Pixie Portable, ярлык которой я поместил на панель быстрого запуска программ. Работа этой программы показана на рис. 7
При запуске программы в центре экрана отображается окно, в котором показан цвет точки, расположенной под курсором, и цифровые коды этого цвета в различных системах. Если курсор расположить внутри этого окна, то в нем отобразятся горячие клавиши программы:
Ctrl+Alt+C – копирование в буфер обмена HTML кода.
Ctrl+Alt+X – открытие окна палитры цветов.
Ctrl+Alt+Z – увеличение области под курсором для более точного определения цвета мелких элементов.
С помощью кнопок » x » и » _ » окно можно закрыть или свернуть в системный трей.
В заключение приведем HTML коды, так называемых, web-безопасных цветов, одинаково отображающихся во всех браузерах (216 кодов).
Как определить цвет на сайте
Приветствую вас на сайте Impuls-Web!
В данной статье я расскажу вам, как можно определить цвет элемента на сайте.
Для чего это может понадобиться? Предположим, вы редактируете какой-то элемент, либо добавляете новый и вам нужно сделать, что бы он подходил по цветовому оформлению к вашему сайту.
Навигация по статье:
В моем случае, в качестве такого элемента будет выступать кнопка «Отправить заявку»
Для того, что бы она лучше подходила по оформлению к этому сайту, я хочу сделать, что бы ее цвет фона совпадал с цветом меню. Конечно, для точного определения цвета можно использовать какой-нибудь графический редактор типа Photoshop или его аналогов. Однако, есть способы определить цвет с намного меньшими затратами времени и усилий.
Определение цвета стандартными инструментами браузера
Я буду показывать, как это можно сделать на примере браузера Mozilla Firefox и Google Chrome. Здесь, для того, что бы определить цвет какого-то элемента я могу щелкнуть правой кнопкой мыши по тому элементу, для которого я хочу задать цвет и в раскрывающемся списке выбрать здесь пункт «Исследовать элемент».
При этом, в нижней части экрана откроется окно инспектора, где можно просматривать код страницы, а так же css-свойства, которые задаются для каждого элемента.
Для данной кнопки у меня отображается в качестве фона серый цвет и если щёлкнуть левой кнопкой мышки по кружочку с цветом, то откроется вот такая палитра:
При помощи данной палитры также можно подбирать нужный цвет, но для точного определения цвета нужно:
Кнопка «Отправить заявку» сразу же стала такого же цвета, как и меню. Однако для того, что бы эти изменения сохранились и применились на сайте, вам нужно скопировать значение данного цвета на панели отображения css-свойств, и затем вставить его в файл стилей вашей темы style.css.
Для этого вы можете воспользоваться либо визуальным редактором WordPress, либо какой-то другой программой для редактирования кода.
Изменения нужно вносить в файл:
/wp-content/themes/название вашей темы/style.css
Все изменения вносим в самый конец файла.
Для смены фона данного элемента нужно определить его класс или идентификатор. Как это делать я показывала в этой статье.
Затем, для этого элемента нужно задать свойство background, и вставить значение того цвета, который мы только что определили. После этого нужно сохранить изменения.
В файле style.css это будет выглядеть примерно так:
Только вместо test-btn будет значение класса или идентификатора вашего элемента.
Определение цвета в браузере Google Chrome
В браузере Google Chrome процесс определения цвета будет выглядеть аналогичным образом.
При этом, здесь сразу же отображается его цвет. Если нам нужен другой формат цвета, то мы можем изменить его при помощи стрелочек вверх и вниз.
Использование пипетки в Mozilla Firefox
Так же, в браузере Mozilla Firefox есть специальный инструмент для определения цвета, который называется «Пипетка».
Для того чтобы им воспользоваться нужно:
На мой взгляд, этот способ более удобный, чем определение цвета через инспектор. Потому что он, во-первых немножко быстрее, а во-вторых – значение инспектора сразу же копируется в буфер обмена.
Определение цвета при помощи специальной программы
Так же, помимо инструментов браузера существуют специальные программки, которые так же позволяют легко определять значение цвета. Я для этих целей использую программу Pixie. Она не устанавливается, то есть вы просто копируете ее к себе на компьютер, а затем, при необходимости, просто запускаете двойным щелчком мыши, и у вас появляется вот такое окошко:
Которое вы можете разместить в любой части экрана, что бы оно вам не мешало. При этом когда вы водите курсором по изображению – в специальном окошке показываются выбранный цвет.
Плюс этой программы в том, что вы можете определять точное значение цвета не только для каких-то элементов открытых в браузере, но и любых других элементов, отображающихся на вашем мониторе.
После того, ка вы выбрали тот цвет, который вам нравится, вы нажимаете сочетание клавиш CTRL+ALT+C, и значение этого цвета попадает в буфер обмена.
Затем, это значение можно также задать в качестве цвета фона, но при этом обращаю ваше внимание, что оно копируется без знака решетки.
Цвет определяется в шестнадцатеричном формате но знак решетки # вам нужно будет дописывать самостоятельно чтобы получилось примерно так: «#2F73B6».
Так же, плюс этой программы в том, что вы помимо того, что можете определять точное значение цвета, так же можно немного его изменять.
Например, я хочу для этой кнопки сделать эффект при наведении, чтобы фон становился более темный или более светлый, но при этом оттенок должен сохранялся. Для этого:
Для смены цвета фона при наведении нужно приписать к классу или идентификатору элемента псевдокласс hover, а заем задать цвет фона.
yvelious
yvelious Yvelious
www.yvelious.com
Как определить цвет на сайте и за его пределами, а также цветовую схему сайта?!
Бывают такие моменты, когда нам понравился цвет на каком-либо сайте, и Вы хотите его использовать в своих личных целях.
Открывать исходный HTML-код страницы или CSS и искать там цвет в шестнадцатеричном значении нужного элемента на сайте – далеко не самый быстрый и лучший вариант.
Делать скриншот страницы и открывать его в программе photoshop или через другой редактор изображений, судорожно хватаясь с помощью инструмента пипетки за нужный Вам цвет, тоже не вариант.
Лично у меня потребность узнать шестнадцатеричный код цвета на чужом сайте возникает очень часто. По этой причине пришлось искать более удобное решение этой задачи.
И как оказалось, за данным решением не пришлось далеко ходить. Для тех, кто «юзает» браузер firefox, подойдет плагин ColorZilla, который с легкостью сможет определить нужный Вам цвет в шестнадцатеричном формате, либо в RGB в пределах окна Вашего браузера. Вот сайт разработчика, где Вы найдете нужную информацию, о том, как пользоваться данным плагином. Значок плагина появится в вашем браузере в нижнем левом углу. Выглядит он так:
А что же делать, если Вам нужно определить цвет не на чьем-то сайте, а, например, на картинке, которая сохранена у Вас на рабочем столе. Здесь плагин ColorZilla будет бессилен, разве что взять и открыть картинку через браузер, что тоже не всегда удобно. А если Вы хотите определить цвет какого-либо понравившегося вам апликейшен а, установленного на вашей рабочей машине, что тогда? Опять делать скриншот и засовывать его в фотошоп? Нет!
В таком случаем нам поможет утилитка Pixie, которую Вы можете скачать на официальной странице утилиты. С помощью Pixie Вы легко узнаете код цвета в шестнадцатеричном формате, в RGB и даже в CMYK в любом месте на Вашем мониторе.
Теперь коснемся определения цветовой схемы любого из сайта. Опять же понятно, что вручную выдирать шестнадцатеричное значение используемых цветов на сайте из СSS или HTML-кода страницы, не очень приятное занятие. Также как и с помощью плагина ColorZilla бегать пипеткой по сайту и копировать цвета. К счастью для меня, я на серфил в Интернете online-сервис cssprism.
С помощью этого сервиса Вы увидите, какие цвета используются на сайте. По сути этот online-сервис выдерает из СSS все прописанные цвета в шестнадцатиричном коде, и визуализирует их у себя на странице с подписью, в которой указан код данного цвета, с возможностью просмотреть, в каких именно селекторах этот цвет применялся. Также в данном сервисе предусмотрена возможность сразу же отредактировать нужный цвет, поменять яркость или оттенок.
На этом все. Было бы интересно узнать, какими техниками, утилитами и сервисами для определения цвета на сайте, его цветовой схемы пользуетесь Вы?
Цвет кнопки для сайта, какой выбрать
Из этого материала вы узнаете, какой цвет кнопки на сайте имеет лучшую конверсию:
Цвет кнопки на сайте? Какой он должен быть? Над этой фразой споры ведутся много лет. Большинство начинающих маркетологов на этот вопрос сразу ответят, что это красный цвет. Ведь он такой яркий и привлекает внимание. Маркетологи с опытом согласятся с красным, только если он будет контрастным.
Было решено провести исследования, в котором приняли участие 21,5 тысячи пользователей. И была выявлена закономерность в 65%, от которой все-таки зависит результат.
Конечно, 65% это самый максимум и среднее значение было чуть больше 10%, но при этом – это все еще хороший показатель, ведь мы только поменяли цвет.
Красный цвет кнопки на сайте, привлекает внимание?
Психологи уже давно отметили, что красный цвет ассоциируется у людей с яркими эмоциями, поэтому по исследованиям можно заметить, что кнопка такого цвета повышает конверсию от 21% до 35%. При этом, это всё еще был контрастный цвет. А что же делать, если контрастов несколько?
Чтобы разобраться в этом вопросе сравнивали 3 цвета: зеленый, синий и красный. Соответственно провели 4 теста.
Первое тестирование: Красный vs Синий цвет кнопки на сайте
Результат этого теста был неожиданным. В нем приняли участие 6000 человек. Конверсия красной кнопки составила 3,81%, а синей – 4,18%. Это на 9% больше. Вывод из этой ситуации: нужно учитывать свою целевую аудиторию, так как для этого продукта клиенты предпочли цвет спокойствия, так как именно такие эмоции они испытывали в этот момент.
Второе тестирование: Зеленый vs Синий цвет кнопки на сайте
Такие цвета являются приблизительно похожими, но на удивление, данные отличались. Конверсия синей кнопки составила 2,57%, зеленой – 4,24%, что больше на 65%.
Третье тестирование: Красный vs Зеленый
Для этого тестирования мы поменяли цвет самого сайта и картинки рядом с кнопкой. Выбрали яркие красные элементы. По результатам видно, что конверсия зеленой кнопки была больше на 11%. У зеленой кнопки – 3,62%, у красной – 3,61%. То есть клиенты выбирали кнопку контрастного цвета.
Четвертое тестирование: Зеленый vs Синий
Снова решили протестировать зеленый и синий цвета, но уже с ярким красным элементом. И также зеленый цвет выиграл на 11% несмотря на то, что оба цвета являются контрастными к красному.
Итого, зеленый цвет выигрывал во многих тестах, но это не значит, что цвет является универсальным. Даже если он контрастным или яркий, нужно отталкиваться именно от целевой аудитории оффера.
Также, всегда нужно тестировать различные варианты, так как замена цвета кнопки может поднять конверсию до 65%.
Как протестировать, какого цвета должна быть кнопка на сайте?
Сделать тест удобнее и быстрее всего можно при помощи виджета Kepler Leads. Он работает по принципу А/Б тесты и его настройка занимает не более 10 минут.
Сделать саму настройку можно в несколько этапов:
При помощи простых 4 этапов можно узнать, какого цвета должна быть кнопка на сайте основываясь на предпочтениях целевой аудитории и более простыми методами поднимать конверсию кнопок в виджете Leadback.
