Определить цвет на сайте: Как определить цвет на сайте — DesignLessons – все о дизайне

Содержание

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

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

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

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

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

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

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

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

Я буду показывать, как это можно сделать на примере браузера Mozilla Firefox и Google Chrome.

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

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

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

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

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

Обратите внимание, что возле курсора появляется увеличивающаяся область, благодаря которой мы можем определить цвет даже для каких-то не больших элементов на странице сайта.
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.Точно так же щелкаем правой кнопкой мышки по интересующему нас элементу.
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. Она не устанавливается, то есть вы просто копируете ее к себе на компьютер, а затем, при необходимости, просто запускаете двойным щелчком мыши, и у вас появляется вот такое окошко:

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

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

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

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

Цвет определяется в шестнадцатеричном формате но знак решетки # вам нужно будет дописывать самостоятельно чтобы получилось примерно так: «#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

Хорошего Вам настроения.

С уважением, Александр Резунов.

Как определить цвет на сайте и за его пределами, а также цветовую схему сайта?!

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

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

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

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

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

А что же делать, если Вам нужно определить цвет не на чьем-то сайте, а, например, на картинке, которая сохранена у Вас на рабочем столе. Здесь плагин ColorZilla будет бессилен, разве что взять и открыть картинку через браузер, что тоже не всегда удобно. А если Вы хотите определить цвет какого-либо понравившегося вам апликейшена, установленного на вашей рабочей машине, что тогда? Опять делать скриншот и засовывать его в фотошоп? Нет!

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

Теперь коснемся определения цветовой схемы любого из сайта. Опять же понятно, что вручную выдирать шестнадцатеричное значение используемых цветов на сайте из СSS или HTML-кода страницы, не очень приятное занятие. Также как и с помощью плагина ColorZilla бегать пипеткой по сайту и копировать цвета. К счастью для меня, я на серфил в Интернете online-сервис cssprism.

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

На этом все. Было бы интересно узнать, какими техниками, утилитами и сервисами для определения цвета на сайте, его цветовой схемы пользуетесь Вы?

Как определить цвет онлайн. App Store Колориметр

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

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

В этой связи мы хотим рассказать о 25 полезных инструментах для Windows, Mac, Firefox, Chrome, iPhone и Android.

Теперь вам не придется запоминать цвет: просто «хватайте» его и приступайте к работе!

Приложения для Windows

Instant Eyedropper — бесплатный инструмент, который помогает находить на вашем экране цветовые коды HTML любого пикселя. Одним кликом код будет скопирован в буфер обмена, после чего его можно вставить в нужное место.

Простой в использовании инструмент, который прикрепляет к курсору экранную лупу. Воспользовавшись ею, вы можете увеличить определенный пиксель на экране. Eye Dropper 3.01 показывает RGB, CMYK и HEX значения цвета.

Помимо нахождения цветового значения любого пикселя на вашем экране, Eyedropper позволяет измерять расстояние между пикселями. С этой целью можно использовать зум, чтобы вычисления были предельно точными. Значение цвета автоматически сохраняется в буфере обмена. Среди доступных форматов – HEX, RGB и CMYK.

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

Quick HTML Color Picker – это бесплатный инструмент для получения цвета на любом экране с возможностью предварительного просмотра перед окончательным выбором. Цвет будет представлен в форматах RGB и HTML и скопирован в буфер обмена.

ColorPix выбирает цвета на вашем экране и показывает их в форматах RGB, HEX, HSB и CMYK. Здесь есть встроенная экранная лупа, позволяющая осуществлять более детальный и тщательный просмотр. Значения автоматически копируются в буфер обмена.

Just Color Picker – это не просто среднестатистический инструмент для «захвата» цвета, — показывает цвета в HTML, RGB, HSB/HSV и HSL форматах. Just Color Picker использует экранную лупу с тремя опциями, цветовые гаммы RGB и RYB для демонстрации триад и дополнительных цветов, поиск сочетающихся цветов, конверсии цветовых кодов и многое другое!

Это очень простой селектор цвета, представляющий цвета в форматах RGB, HEX, HTML и WinAPI. Вы можете скопировать один из них или все в буфер обмена. Инструмент можно минимизировать до панели оповещения.

Color Cop, возможно, и небольшой инструмент, но он может похвастаться богатством доступных опций. Вы можете использовать «пипетку» для того, чтобы «взять» цвет в любом месте экрана, и использовать экранную лупу для увеличения. Цвета доступны в таких форматах, как HTML hex, Delphi hex, Powerbuilder, Visual Basic, Clarion, Visual C++, RGB float и RGB int. Вы можете сохранить в истории до семи цветов, найти дополнительные и «безопасные» (web-safe) цвета, расположить приложение в области пиктограмм панели задач и многое другое.

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

Аддоны для Firefox

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

ColorZilla от обычного инструмента «пипетки» отличается только тем, что находится в вашем браузере. С этим аддоном для Firefox пользователи могут получить цвет любого пикселя прямо в своем браузере. Встроенная палитра позволяет выбирать цвета из определенных цветовых наборов и сохранять наиболее часто используемые в пользовательской палитре.

Rainbow Color Tools включает такие элементы, как распознаватель, который извлекает из текущей веб-страницы изображения и CSS; захватчик, который собирает цвета в RGB и HSV значениях; программа контроля, которая получает цвет любого пикселя в браузере; и, наконец, библиотека, которая сортирует сохраненные цвета по тэгам или url страницы, на котором был найден цвет.

Это один из наиболее продвинутых инструментов от Nvu для Firefox. Он достаточно незатейлив в использовании: вы просто кликаете и получаете цвет. Цвета представлены по названиям и в HEX формате. С помощью Rainbowpicker можно изменить оттенок, насыщенность и яркость, что, в свою очередь, позволяет создавать множество цветовых вариаций.

Приложения для Mac

Уникальность ColourMod состоит в том, что он доступен в пяти различных версиях: Konfabulator, ColorMod V1. 9, ColourMod V2.2, Unbranded и Personalized. Каждая версия разработана таким образом, чтобы соответствовать вашим потребностям. Konfabulator – это версия для настольного компьютера, доступна для Mac и Windows. ColorMod V1.9 является виджетом для панели наблюдения Mac. ColourMod V2.2 – плагин для веб-приложений. Unbranded удаляет брендинг ColourMod, а Personalized позволяет добавлять в приложение свой собственный логотип.

DigitalColor Meter – инструмент для Mac OS X. Если вы проведете мышкой по экрану, он покажет цветовое значение любого пикселя. Вы можете задать формат, в котором будет показан цвет (RGB, YUV или CIE).

Незамысловатое и очень полезное приложение. Само о себе оно говорит так: «инструмент для получения цвета, которого так не хватало Mac». Оно располагается в главном меню до тех пор, пока вы не вызовете его горячей клавишей. ColorSnapper для большей точности в выборе использует экранную лупу. Заданный цвет автоматически копируется в буфер обмена, и впоследствии им можно воспользоваться повторно. Более того, в вашем распоряжении окажется около 13 различных форматов.

Hex Color Picker добавляет дополнительную вкладку в общесистемную цветовую панель, и вы сразу же можете видеть hex код любого цвета. Также у вас есть возможность изменять цвет, используя набор сокращений, и пользоваться опцией предварительного просмотра.

Очень простой инструмент, показывающий RGB и HEX значения. При желании вы можете внести ограничения таким образом, чтобы ползунок показывал только безопасные цвета. Данный инструмент задействован в цветовой панели большинства приложений Cocoa и Carbon.

Все предельно просто и понятно: Pipette дает вам возможность взять любой цвет и скопировать его в HEX формате. Приложение не займет много места на вашем устройстве, и при его использовании у вас не должно возникнуть никаких сложностей.

Расширения для Chrome

Применив colorPicker, вы можете «хватать» цвета с любой веб-страницы, сохранять и копировать их в буфер обмена. Цвета представлены в следующих значениях: HSB, RGB и CMYK. Веб-разработчики найдут здесь для себя много дополнительных функций, среди которых возможность проверить совместимость с WCAG 2, настройки в области «пипетки» и наличие DOM-Explorer для быстрого поиска элементов и тэгов на странице.

Данное расширение не только позволяет выбирать цвета на любой веб-странице, но и расположить на ней линейки, указатели и шкалу. Rulers, Guides, Eye Dropper & Color Picker располагает широким спектром опция для линеек, указателей и шкал, но селектор цвета и сам по себе работает отлично.

Eye Dropper — отличное расширение с усовершенствованным селектором цвета, предоставляющее HSV, RGB и HEX полученного цвета. Цвета хранятся в вашей истории, чтобы вы могли позднее при надобности ими воспользоваться или скопировать в буфер обмена.

Color Pick представляет собой невероятно простой инструмент «пипетку» со встроенной экранной лупой. Расширение будет хранить заданный вами цвет до тех пор, пока вы не выберете новый. Цвета представлены в форматах RGB, HSL и HEX.

Приложения для iPhone

Если вы разработчик и у вас есть iPhone, то Loupe поможет вам найти вдохновение, где бы вы ни были. С его помощью вы можете брать цвета из фотографий в вашей галерее или из только что сделанных снимков. Затем вы можете создавать цветовые ячейки, сохранять цветовые значения и добавлять заметки, которые помогут не забыть важные детали.

Этот селектор цвета хорошо подойдет для создания и последующей работы с палитрами на iPhone. Он конвертирует форматы в рамках RGB, HSB и CMYK. Вы можете брать цвета из своей фотокамеры, фото галереи или Flickr. Палитрами можно делиться посредством электронной почты, и, кроме того, они совместимы с Adobe Illustrator, Adobe Photoshop и Microsoft Word.

Приложения для Android

Этот функциональный инструмент для выбора цвета незаменим для дизайнеров, программистов и художников. Он поддерживает 7 различных режимов с цветовыми моделями RGB, HSV, HSL и YUV. Вы можете использовать как палитру, так и ползунок. Цвета представлены в decimal и HEX.

LifeDropper – приложение для Android, которое может назвать цвета реальных объектов, используя камеру на вашем устройстве. Цвета показаны в значениях RGB, CMYK и HEX.

На этом всё!

Какая из 25 представленных в нашей статье «пипеток» вам понравилась больше остальных? Возможно, вы пользуетесь инструментом, который не вошел в наш список? Если так, расскажите о нем нам!

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

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

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

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

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

Вот так вот просто можно узнать и получить код цвета пикселя на странице сайта онлайн с помощью браузера. Теперь без труда можно определить цвет какого-либо элемента интерфейса на странице сайта: фона, текста или точки на изображении.

Перемещая курсор по палитре можно изменить цвет выбранного элемента (не работает с картинками и фото).

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

Достаточно сделать следующее:

Открыть браузер;
Зажать файл картинки левой кнопкой мыши;
Не отпуская, перенести его в окно браузера;
После того, как картинка будет открыта в браузере, можно смело использоваться инструмент.

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

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

Подобных онлайн-сервисов огромное множество. Я добавлю ссылки лишь на 3:

Все они очень простые в использовании. Нужно:

Photoshop и Paint: как узнать цвет с помощью пипетки

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

Определение цвета с помощью палитры в Paint:

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

Приложения для определения цвета для Google Chrome

Для быстрого определения цвета онлайн можно использовать вспомогательные расширения (плагины).

Все они очень просты в использовании. Нужно:

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

Список расширений.

Однажды человек научил компьютер определять цвет по коду. Все просто — код равен цвету и цвет равен коду. #FFFFFF = «белый», «черный» = #000000. И вот компьютер на мониторе отображает цвет и нужно узнать код цвета, чтобы использовать такой же цвет в другой программе. Как узнать код цвета? Для этого нужен «определитель цвета пикселей» или по-другому «программа пипетка». Программа ColorPic это мгновенный определитель кода цвета в любой точке экрана монитора. Утилита распознает цвет и показывает его кодовое обозначение в шестнадцатеричном и десятичном формате. Утилита ColorPic пригодиться и хорошо послужит дизайнеру и разработчику.

Определить цвет пикселя

Определяемые программой цвета можно хранить в отдельной палитре размером в 16 цветов для запоминания. Пользователь всегда может вернуться к составленной карте найденных цветов, палитра доступна и после перезапуска программы. ColorPic захватывает фрагмент экрана вокруг указателя мыши и отображает его увеличенное изображение в своем окне, при этом множитель масштабирования захваченной картинки можно изменять от 2 до 36. После запуска программа определяет цвет и его кодовое обозначение пикселя, находящегося под курсором мыши в любом месте экрана. Для добавления цвета в палитру в ColorPic реализована комбинация клавиш Ctrl+G.

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

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

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

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

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

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

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

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

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

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

Выбор за sanstv.ru: найдет код пикселя

Отлично, наконец начали делать онлайн сервисы на русском sanstv.ru, и вот адрес , отличительная черта разбивает файл до пикселя. Чтобы начать пользоваться прошу смотреть скриншот.

Можно вставить файл для определения путем нажатия кнопки PrtScr, при этом сделается снимок с всего браузера, но его видно не будет, чтобы показать на экране нажимаем cntrl+f.
Либо простым перетаскиванием с вашего компьютера в окно редактора.
Может делать по фото в хорошем качестве.
Удобно узнать окрас на сайте, сделал снимок и вставил.

После всех манипуляций увидите свою иллюстрацию и большое увеличение. Чтобы определить код (название) цвета надо навести на необходимый оттенок и посмотреть комбинацию.

Наводим на необходимое место на экране, большое увеличение.
Номер в двух формациях rgb и hex, оба используются, но популярнее hex.

Здесь много полезных вещей, например, как верстальщику соединение css. Создан альтруистом, за пользование денег не просит. Переходим к остальным сервисам.

Просто определить цвет онлайн с imagecolorpicker.com

Данный сайт imagecolorpicker.com отличается простотой определения цвета онлайн, работает быстро. Но простота дает некоторые ограничения:

Нельзя увеличивать, если только нажатием cntrl и +.
Чтобы определить оттенок нельзя пользоваться перетаскиванием и скринами, только загрузкой.

Сайт достоин внимания, пипетка выводится прицелом, не потеряйте.

Колорист imgonline.com.ua: поможет узнать даже цвет волос

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

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

Стоковый getcolor.ru: по картинке не работает

Поместил в статью getcolor.ru потому что нет претендентов, огромный минус: нет поиска по картинке. Работает на основе простого оттеночного круга, и выбора нажатием. Перемещаете бегунок в нужно направлении и смотрите параметры rgb, а так же hex.

Хотя нет, нашел один плюс, умеет давать название окраске, посмотрите внизу, каждый раз выдает разные. Использование: например в каталогах и при html верстке.

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

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

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

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

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

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

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

Программа ColorPix

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

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

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

Программа ColorMania

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

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

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

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

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

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

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

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

Программы для определения цвета в любом месте монитора

Программа HTML Colors 2.2.0.5

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

Для определения цвета на мониторе кликаем по кнопочке Screen, наводим указатель в нужную точку, кликнем один раз по этому месту. В поле HTML Code выведется цвет в HTML Code. Осталось только скопировать этот код в буфер обмена и вставить в нужное место.
Преимущества: программа очень мало весит и крайне проста

Скачать HTML Colors:

Программа Color Picker

Преимуществом этой программы является показ цвета в RGB или HSL коде, ну и конечно, в HTML.

Для определения цвета надо кликнуть по кнопке «Select Color with Mouse», курсор мыши примет форму пипетки, остаётся навести курсор в нужное место и кликнуть по нему. Программа совместима с версиями Windows XP и выше.
Требует инсталляции на компьютер.

Скачать Color Picker:

Программа Just Color Picker

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

При первом запуске предлагает выбрать язык, русский присутствует.
В интерфейсе Just Color Picker есть экранная лупа.
Позволяет сохранить несколько цветов.
Снимает показание не кликом мышки, а горячими клавишами Alt+X(по умолчанию), что позволяет более точно определить цвет
После определения цвета программа автоматически определит дополнительные цвета, которые будут гармонировать с выбранным и которые можно будет использовать в дизайне.
Не требует установки, работает в фоном режиме.

Программа совместима с версиями Windows XP и выше.

Скачать Just Color Picker:

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

Но зато преимуществ у неё хоть отбавляй. Программа не совсем простая, поэтому описание и руководство по работе с ней приводится на этом сайте в отдельной статье «Определение цвета любой точки монитора c помощью программы ColorPic 4.1»

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

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

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

Sanstv.ru — простой и доступный инструмент для определения цвета пикселя
Eye Dropper — расширение для идентификации цифрового колора
Inettools — инструмент для копирования цвета
Pixie — простая утилита для распознавания оттенка на экране
Другие инструменты, которые помогут определить цвет пикселя

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

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

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

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

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

Вернитесь обратно на вкладку Sanstv.ru;
Нажмите уже в этом окне Ctrl+V;
Рабочее окно сайта Senstv.ru
Когда изображение вставится в рабочее окно, курсор мыши примет вид крестика, которым вы можете определить пиксель любой части скриншота. Для этого нужно просто нажать на него.

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

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

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

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

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

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

Откроется контекстное меню, где для выбора оттенка в браузере нужно нажать кнопку «Pick color from web-page»;
Расширение Google Chrome Eye Dropper
Указателем выберите нужный участок на экране, он тут же копируется. А цветовой квадратик возле пипетки примет оттенок, который вы выбрали;
Слева в информационном блоке расширения будут числовые значение в RGB, HSL, HTML и др. Чтобы удалить текущий колор, нажмите корзинку под кнопкой выбора;
Инструменты Eye Dropper
Вы можете загрузить данные цвета в формате CSV, который можно открыть программой MS Excel.

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

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

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

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

Когда картинка будет на рабочем столе Inettools, просто выберите курсором мыши любую точку на картинке;
Рабочее окно Inettools
Вся информация по выбранному пикселю отобразится в блоке ниже под названием «Сохраненное значение». Здесь представлен этот цвет в RGB и HTML, а также указано положение по горизонтали и вертикали;
В блоке «Текущее положение» отображается значение курсора, которым вы передвигаете в настоящее время.
Определение цвета пикселя в 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, не отображается информация о графической модели. Мы рассмотрели достаточно инструментов для определения цвета пикселя в режиме онлайн. Теперь вы сможете выбрать самый подходящий для своих задач.

12 уникальных инструментов выбора цвета для веб-дизайнеров и графических дизайнеров

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

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

Существует множество палитр цветов и инструментов, которые помогут нам с важной задачей выбора цвета.Мы обратились к десяткам дизайнеров (в том числе из нашего офиса Webflow), чтобы узнать, какие инструменты и приложения для работы с цветом они используют. Взглянем!

12 лучших палитр цветов и инструментов для дизайнеров

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

1. Расширение Chrome для ColorPick Eyedropper

ColorPick Eyedropper — это хромовое расширение, которое отлично подходит для любого дизайнера. Оно позволяет легко определять шестнадцатеричный цветовой код любого элемента пользовательского интерфейса, на который вы наводите указатель мыши.Он отлично подходит для быстрого доступа к цветам, от которых вы черпаете вдохновение, просматривая страницы в Интернете.

ColorPick позволяет найти шестнадцатеричный цветовой код любого элемента.
2. ColorSnapper 2
Используйте лупу ColorSnapper 2, чтобы получить именно тот оттенок, который вам нужен, и сохраните его на потом.
Из множества вариантов ColorSnapper оказался самым популярным палитрой цветов среди наших дизайнеров, и не зря. Это популярное приложение для Mac позволяет быстро использовать лупу для выбора цвета для всего, что вы видите — в сети или за ее пределами.
После того, как вы выбрали цвет, ColorSnapper сохраняет его на панели цветов, чтобы вы могли использовать его позже. Нужно скопировать цвет прямо сейчас? Просто щелкните сохраненный цвет, и ColorSnapper автоматически скопирует его в буфер обмена.
3. Расширение Chrome Webflow
Конечно, было бы упущением, если бы мы не упомянули о нашем собственном расширении Webflow Chrome, которое активирует палитру цветов в Webflow, чтобы веб-дизайнеры могли легко извлекать цвета из своих собственный проект. Благодаря этому очень просто выбрать нужный цвет из логотипа, фотографии главного героя или иллюстрации, не выходя из приложения.А как только вы взяли цвет, вы можете легко сделать его глобальным образцом, чтобы быстро и легко повторно использовать его на своем сайте.
Под рукой, правда?
Генераторы цветовых схем и палитр
Генераторы палитр дают вам отличный способ увидеть всю цветовую палитру вместе. Это поможет вам решить, какими могут быть ваши основные и второстепенные цвета, а также как они сочетаются друг с другом.
На самом деле выбор цветов может быть сложной задачей — к счастью, есть инструменты, которые помогают нам в этом!
4.Happy Hues
Созданный полностью в Webflow никем иным, как Маккензи Чайлд, Happy Hues предлагает вам различные цветовые палитры для вдохновения и показывает реальные примеры того, как эти цвета могут быть использованы в профессиональном дизайне.
Happy Hues — это одновременно отличный ресурс, который поможет вам найти лучшие цвета для ваших дизайнов, а также для самообразования в теории цвета для создания удобных пользовательских интерфейсов и опыта.
5. Цвет
Генератор образцов цвета почти так же интуитивно понятен, как и его название, происхождение которого мы все еще пытаемся понять.Вы можете использовать этот генератор прямо в браузере — так что попробуйте!
6. Coolors
Coolors упрощает выбор и уточнение вашей палитры.
Coolors — еще один популярный генератор палитр. Вы можете выбрать любой цвет и на основе выбранного цвета создать подходящую цветовую схему для любого дизайн-проекта. Хотя (немного) менее интуитивно понятный, чем Color (отсюда и лишнее o), Coolors позволяет экспортировать, хранить и повторно использовать вашу палитру в таких инструментах, как Adobe. У Coolors также есть мобильное приложение, так что вы можете просматривать и изменять цвета где угодно.
7. LOLColors
LOLColors — это простая коллекция тщательно отобранных цветовых палитр. Сайт позволяет очень легко «добавить в избранное» определенную палитру, а также просмотреть самые популярные на основе голосов других. Хотя он не такой объемный, как другие в этом списке, я обнаружил, что сами палитры прекрасно сочетаются друг с другом.
8. Цветовое колесо торговой марки
Цветовое колесо торговой марки использует ИИ для автоматической раскраски логотипов, иллюстраций, каркасов и другой графики.Просто загрузите свой дизайн, чтобы быстро создавать цветовые палитры. Нам тоже нравится этот инструмент как источник вдохновения. Когда вы загружаете плоский дизайн, вам будут предоставлены тысячи уникальных цветовых вариаций на выбор.
Цветовое вдохновение
Благодаря достижениям в HTML и CSS дизайнеры теперь могут в полной мере использовать цветные градиенты в Интернете, не беспокоясь о создании тяжелых изображений или написании сложного кода. Единственная проблема сейчас — попытаться сузить круг выбора!
Следующие четыре инструмента — это наш лучший выбор для управления выбором цветовой палитры.
9. CSS Gradient
CSS Gradient — это простой сайт, на котором представлены некоторые красивые цветовые комбинации градиентов. На сайте представлены значения цветов RGB и шестнадцатеричные для любого цвета, который вы выберете, что позволяет легко воссоздать их в своих собственных проектах.
10. Adobe Capture CC
Цветовые палитры, созданные пользователем в Adobe Color.
Какой лучший способ черпать вдохновение в цвете, чем окружающий нас мир? Экосистема Adobe Color имеет ряд ресурсов (в том числе генератор образцов), но чаще всего я использую их приложение для iOS, Adobe Capture CC.
Просто сделайте снимок с помощью приложения, и оно автоматически создаст палитру из цветов на фотографии. Затем вы можете сохранить эти цвета для использования в проекте Photoshop или где-нибудь еще.
Ссылки по теме: Лучшие альтернативы Photoshop (бесплатные + платные)
11. Colormind
Colormind — это генератор цветовой палитры, который использует глубокое обучение, чтобы предлагать цвета с нуля или на основе вашего ввода . Colormind может изучать цветовые стили из фотографий, фильмов или других источников мультимедиа, которые вы можете использовать в качестве вдохновения, что делает его одним из самых умных генераторов цветовой палитры — меня впечатлило Color.
12. Colorable
Программа Colorable, разработанная Jxnblk, позволяет веб-дизайнерам и дизайнерам печати легко тестировать различные цветовые комбинации, используя их шестнадцатеричные коды. Легко настраивайте значения RGB и HSV для точной настройки цветов. Сайт чрезвычайно прост в использовании: просто добавьте шестнадцатеричное значение для двух цветов, и система оценит комбинацию на основе рекомендаций WCAG по доступности. Этот рейтинг гарантирует, что дальтоники или слабовидящие пользователи смогут читать дизайн с этими двумя цветами.
Этот сайт — один из наших нынешних фаворитов — он ставит доступность во главу угла своих рекомендаций.
Это лишь некоторые из цветных инструментов, которые мы используем каждый день. Сообщите нам, какие инструменты вы используете в Twitter или Facebook.
Как использовать психологию цвета для увеличения конверсии веб-сайта
Вы знаете свою нишу и понимаете своих клиентов. Вы также нашли время, чтобы изучить ключевые слова и оптимизировать текст. Затем вы проверили, что ваш сайт работает должным образом.
Однако прежде чем идти дальше, необходимо сделать еще один шаг: рассмотреть цвета и цветовые комбинации, которые вы используете на своем веб-сайте.
Мы говорим не только о брендинге или о том, что здесь хорошо выглядит: мы говорим о психологии цвета и ее влиянии на посетителей и последующие конверсии.
Вы можете не осознавать, что цвет — это не только его эстетические качества.
Цветовая схема, которую вы используете, является важной частью решения о покупке.Даже незначительные изменения, такие как изменение цвета кнопок с призывом к действию, могут значительно повысить ваши шансы на успех, в то время как общая цветовая схема может повысить узнаваемость бренда.
Давайте рассмотрим влияние психологии цвета на потребителей и то, как вы можете использовать ее на своем веб-сайте.
Что такое психология цвета?
Психология цвета — это наука о том, как цвет влияет на поведение человека. Это ветвь более широкой области поведенческой психологии. На практике это наука о том, как цвет влияет на поведение и реакцию человека.
Психология цвета может влиять на то, как ваши клиенты реагируют на ваши маркетинговые сообщения, в зависимости от цвета вашего текста, кнопок с призывом к действию и ссылок.
Это часть понимания мышления клиента. Однако не все люди одинаково реагируют на цвета. Это означает, что нет никаких гарантий относительно его влияния на конверсии и брендинг.
Однако это не означает, что вы должны игнорировать психологию цвета и ее влияние. Напротив, есть жизненно важные факты, которые неоспоримы.
Например, исследования показывают, что потребителям требуется всего миллисекунды, чтобы сформировать свое мнение о визуальной привлекательности вашего веб-сайта. Кроме того, цвет достаточно силен, чтобы поднимать и вызывать настроение.
Неважно, в какой нише вы находитесь. Если вы продаете одежду, цифровые фотоаппараты или технические услуги, важно, чтобы ваши цвета идеально сочетались с каждым элементом вашего маркетингового плана. К сожалению, это не всегда просто, поскольку выбор цвета — это «несовершенное искусство.”
Вот что вам нужно знать, чтобы извлечь максимальную пользу из этого поля.
Заблуждения о психологии цвета
Несмотря на то, что научных доказательств мало, существует множество исследований потребителей по психологии цвета. Например, одно исследование показывает, что цвет влияет на решение о покупке.
Однако это не универсальное решение. Впечатление от цвета может варьироваться в зависимости от цели вашей рекламы и возрастных групп потребителей.
Воздействие может зависеть от других факторов, например:
Отрасль, в которой вы продаете.
Культура, которой вы продаете, и личные убеждения людей.
Разные полы и их индивидуальные предпочтения.
Кроме того, вы можете увидеть некоторые статьи, в которых утверждается, что один и тот же цвет будет работать для любого типа кампании. Это просто неправда. Вам нужно будет протестировать сочетание цветов, прежде чем решать, что лучше всего подходит для каждой конкретной кампании или сайта.
Где следует использовать психологию цвета?
Цвета могут влиять на потребителей на протяжении всего цикла маркетинга и продаж. Независимо от того, разрабатываете ли вы программное обеспечение, создаете книгу, разрабатываете веб-дизайн обложки или просто рекламируете свой бизнес: цвета определяют настроение и влияют на реакцию.
В этой статье рассматриваются цветовые схемы вашего веб-сайта и конкретные области, такие как элементы веб-сайта, такие как:
графика героя
тип заголовка
границы
фоны
кнопки
всплывающие окна
Однако вы можете применять подсказки в широком диапазоне областей, включая:
логотипы
брендинг
целевая страница
панели меню
электронный маркетинг
сообщений в социальных сетях
обложки
дизайн продукта
видео
Реальная проблема — понять все правильно.
Почему важна психология цвета?
Вы можете использовать психологию цвета для передачи ценности, а также для продажи продукта. Например, когда компания Coca-Cola отметила 125-летие предоставления безупречного сервиса, они использовали свой классический, смелый красный цвет для брендинга своей кампании.
Индивидуальность вашего бренда имеет первостепенное значение. Основными преимуществами тщательного выбора цвета при брендинге являются:
Ясность цели: Ваш веб-дизайн или репутация бренда могут быть усилены с помощью правильной цветовой схемы.Если вы не знаете и не говорите на языке, на котором говорят ваши потенциальные клиенты, ваш продукт может потеряться в море конкуренции, независимо от того, насколько ценным или эффективным он может быть.
Первые впечатления : Тщательное использование цветов для создания первого впечатления может привлечь внимание новых посетителей вашего сайта и одновременно привлечь лояльных клиентов.
Удержание клиентов и новые потенциальные клиенты: Благодаря разумному использованию цвета вы можете повысить количество подписчиков по электронной почте, вдохновить постоянных клиентов и дать людям повод поделиться своим брендом с семьей и друзьями.
Помните, однако, что психология цвета тесно связана с воспоминаниями и опытом. Например, если у кого-то был приятный опыт, когда он носил желтую рубашку, ел в заведении быстрого питания с желтыми арками или жил в доме с желтыми стенами, то желтый цвет может вызывать радость по ассоциации с воспоминаниями.
Как использовать психологию цвета для увеличения конверсии
CRO — неотъемлемая часть создания успешного веб-сайта. Цель состоит в том, чтобы получить максимально возможную рентабельность инвестиций и преуспеть, независимо от того, насколько сильны ваши конкуренты.
Поскольку цвет — это единственное, что может иметь отношение к большинству из нас, психология цвета — это вариант, который следует изучить и протестировать, чтобы дать вашему маркетингу дополнительное преимущество. Ниже приведены несколько советов по психологии цвета, о которых следует помнить.
Какие цвета предпочитают представители разного пола?
Цветовые предпочтения не всегда легко установить. Вы найдете множество доступных исследований, и, естественно, многие из них не согласуются друг с другом. Однако у мужчин и женщин, похоже, есть очевидные предпочтения.
Согласно одному исследованию, женщины предпочитают тонкие тона:
Напротив, мужчины тоже любят эти цвета, но предпочитают их в более ярких тонах.
Тематическое исследование показывает, что многое из этого справедливо, по крайней мере, для женщин, при этом популярными остаются синий, зеленый и лавандовый цвета.
Для цветов, которые могут улучшить конверсию, независимо от пола, стандартные красные, зеленые, синие, пурпурные, черные и оранжевые цвета кажутся стандартными.
Также имейте в виду, что пол не считается таким бинарным, как когда-то, поэтому полагаться на цвет, который нравится мужчинам, а не женщинам, может быть не так эффективно, как вы думаете.
Некоторые цвета также могут указывать на определенные качества. Давайте посмотрим на некоторые из них.
Используйте синий для повышения доверия
Blue прочно ассоциируется с доверием, поэтому многие финансовые учреждения часто выбирают его. PayPal, Capital One, Visa и Bank of America — это лишь некоторые из финансовых компаний, использующих синий цвет в своих цветовых схемах.
Хотя разные оттенки синего могут указывать на разные вещи, он также символизирует:
безопасность
лояльность
ответственность
Все, что большинство из нас ожидает от финансового учреждения.Тем не менее, хотя синий цвет в значительной степени универсален, он может не подходить для упаковки пищевых продуктов. Исследования показывают, что синий является естественным подавителем аппетита, но, опять же, не все с этим согласны.
Желтый — внимание
Желтый цвет может сигнализировать об осторожности. Предупреждающие знаки, светофоры и знаки с мокрым полом используют желтый цвет. Тем не менее, не все так плохо. Желтый — это цвет, который мы связываем с теплотой, позитивом и счастьем.
Желтый вдохновляет на творчество, радость, веселье и уверенность, а используемый оттенок желтого тоже говорит о многом.Например, ярко-желтый цвет вызывает внимание и возбуждение, а золотисто-желтый соответствует любопытству.
Экологичность для окружающей среды и товаров для улицы
Зеленый ассоциируется с окружающей средой, природой и окружающей средой: мы видим продукт в зеленой упаковке и автоматически считаем его здоровым или экологически чистым. Кроме того, зеленый цвет может вдохновлять на творчество, инновации и баланс.
Если ваш веб-сайт как-то связан с природой, окружающей средой, органикой или природой, вы можете выбрать зеленые цвета.
Оранжевый положительный
Оранжевый — позитивный цвет, связанный со счастьем, успехом и решимостью. Кроме того, он дает ощущение тепла, но выглядит менее агрессивным, чем красный.
Как и другие теплые цвета, оранжевый может вызывать энергию и привлекать внимание покупателей, что приводит к импульсивным покупкам.
Например, Amazon.com использует оранжевый цвет для запуска действия. Цвет указывает на срочность, что делает сообщение более заметным и действенным.
Этот цвет лучше всего сочетается с другими теплыми оттенками, но не забывайте использовать его экономно. Попробуйте применить его к конверсионным элементам своего сайта, чтобы он выделялся.
Черный означает элегантность и роскошь
Хотя мы иногда воспринимаем черный цвет в негативном свете, его часто выбирают продавцы предметов роскоши.
Помимо тайны, связанной с черным, этот цвет предполагает элегантность, роскошь и изысканность.
В психологии цвета черный символизирует авторитет, власть и престиж.Это объясняет, почему Prada, Rolls Royce и Chanel используют его в своих логотипах.
Однако такие бренды, как Chanel, стараются не позволять черному цвету доминировать на своих сайтах, хотя он играет определенную роль в их общих цветовых схемах.
Используйте яркие основные цвета для вашего CTA
В нескольких исследованиях рассматривались лучшие цвета для CTA, и, как и следовало ожидать, многие из них не согласны друг с другом.
Однако бренды часто предпочитают яркие цвета, такие как красный, синий и зеленый.Еще есть Amazon, которая, как известно, использует оранжевые призывы к действию.
Тем не менее, самое важное в вашем CTA — это не обязательно сам цвет: вам нужно смотреть на контраст, вашу аудиторию и свой бренд.
А как насчет белого в психологии цвета?
Пустое пространство имеет первостепенное значение для хорошего дизайна веб-сайта. Он уменьшает беспорядок и придает аккуратный вид, и есть множество способов его использования.
Например:
в простом минималистичном дизайне
для типографики и добавления контраста
с всплеском цвета для дополнительной «поп-музыки»
Если вам не нравятся чисто белые, подумайте о том, чтобы добавить немного тепла, используя не совсем белые, например цвета слоновой кости .
Передовой опыт психологии цвета
Обновление цветов не означает начинать с нуля. Возможно, вы не сможете переписать руководство по стилю и выбрать цветовую палитру веб-сайта или цвета шрифта в шаблоне электронной почты, но у вас все еще есть некоторые варианты.
Вот несколько важных выводов, которые вы можете использовать, внедряя психологию цвета в свой маркетинг и увеличивая конверсию:
Если цвета не работают, предложите изменения
Если вы работаете с дизайнерами или лицами, принимающими решения, сообщите об этом, если считаете, что общая схема дизайна не работает.Например, если вы продаете дизайнерский продукт высокого класса, вам не стоит сочетать изысканный цвет с логотипом любительского вида.
Объясните, почему некоторые цветовые комбинации не работают и как правильное сочетание может положительно повлиять на конверсии.
Используйте психологически подходящие цвета для дополнения существующей цветовой схемы
Конечно, нужно подстраиваться под цветовую схему. Просто убедитесь, что вы используете цвета, которые хорошо сочетаются с текущим выбором, брендом и чувствами, которые вы пытаетесь вызвать.Например, если вы используете синий цвет, объедините его с солнечно-желтым, чтобы всплывающее окно создавало позитивный вид.
Тестирование нескольких цветов
Чтобы повысить конверсию, пробуйте разные цвета, пока не найдете тот, который подходит для вашего бренда. Например, HubSpot обнаружил, что красные кнопки с призывом к действию лучше, чем зеленые, но это не значит, что это будет то же самое для вас. Какой бы цвет вы ни выбрали, просто убедитесь, что он «всплывает» для большей наглядности и повышения конверсии.
Не забудьте; Цвет — это проблема преобразования
Да, вам понадобится помощь дизайнера, но не позволяет им определять цвета вашего сайта.Вы не просто ищете что-то, что хорошо выглядит: вам нужна преобразующая цветовая схема. Следовательно, вы должны активно участвовать в выборе цвета своих целевых страниц, чтобы повысить конверсию.
Избегайте перегрузки цвета
Слишком много цветов может вызвать путаницу, поэтому не переусердствуйте: используйте белый цвет в своей цветовой схеме.
Заключение
Легко упустить из виду потенциал психологии цвета. Однако цвета, которые вы выбираете для своего веб-сайта, брендинга и маркетинга, могут оказаться более действенными, чем вы думаете.
При выборе цветовой схемы принимайте активное участие и не оставляйте решение на усмотрение дизайнера. Только вы знаете, что вы хотите, чтобы ваш сайт говорил и что вы хотите, чтобы ваши посетители делали, когда они посещают ваш сайт.
Например, если вы стремитесь увеличить конверсию, вы можете использовать определенные цвета, такие как красный, синий и оранжевый.
Однако помните, что психология цвета не дает гарантированных результатов, и одни и те же цвета не будут одинаково влиять на всех.
Учитываете ли вы психологию цвета при разработке и маркетинге своего веб-сайта? Расскажите, как вы его используете, ниже.
Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт
SEO — разблокируйте огромное количество SEO-трафика. Смотрите реальные результаты.
Контент-маркетинг — наша команда создает эпический контент, которым будут делиться, получать ссылки и привлекать трафик.
Paid Media — эффективные платные стратегии с четким ROI.
Заказать звонок
4 лучших расширения Chrome для определения цвета в Интернете
Мир полон красок, как и Интернет. У нас есть дар распознавать цвета и работать с ними. Итак, что вы делаете, когда видите уникальный оттенок или что-то, что бросается в глаза? Вы пытаетесь найти его шестнадцатеричный цветовой код, что еще? Как и четыре цвета значка Chrome, существует несколько расширений Chrome для определения цветов в Интернете, так что не беспокойтесь.
Эти расширения сделают вашу жизнь проще, особенно если вы работаете в подобной сфере. Вы могли бы работать над одеждой, редактированием изображений, графическим дизайном или веб-дизайном. Если вы работаете в команде дизайнеров или работаете в одиночку, это поможет упростить задачу по поиску подходящего цвета.
Может быть, вы просто ищете свой следующий цвет стен? Давай начнем.
1. ColorZilla
ColorZilla имеет множество функций. Первый — EyeDropper, который распознает любой цвет, на который вы нажмете. Это может быть что угодно на веб-странице, включая изображения в любом формате.
Как только вы это сделаете, вы заметите, что цвет значка палитры цветов изменился с черного на цвет, который вы выбрали. Щелкните значок еще раз, чтобы открыть всплывающее окно с подробностями шестнадцатеричного кода. Любите этот инструмент? У него есть сочетания клавиш.
Присмотритесь к программному обеспечению, и вы увидите историю цветов, в которой все цвета, которые вам нравятся, будут сохранены для вас. Просто нажмите на цвет, чтобы снова просмотреть подробности. Слева вы можете поэкспериментировать с оттенками, чтобы лучше настроить оттенок цвета. Не знаете, какие шестнадцатеричные коды копировать? Выберите опцию Копировать в буфер обмена.Вы можете мгновенно проанализировать цветовую палитру любой страницы.
Получить ColorZilla
Pro Совет: Если вы не можете получить правильный цвет из пикселя, нажмите Ctrl и значок +, чтобы увеличить масштаб, а затем используйте палитру цветов, чтобы выбрать правильный пиксель. Нажмите Ctrl + 0, чтобы вернуться к уровню масштабирования 100% по умолчанию.
2. ColorPick Eyedropper
ColorPick Eyedropper — это простейшее расширение Chrome для определения цвета в Интернете. Откройте расширение и наведите курсор на интересующий вас цвет.Расширение распознает и отобразит шестнадцатеричный цветовой код в режиме реального времени.
Когда вы нажимаете на пиксель цвета, расширение отображает всплывающее окно рядом с ним с шестнадцатеричным цветовым кодом. Вы можете скопировать и вставить его сейчас.
Довольно простой и лишенный каких-либо дополнительных функций, которые мы видели ранее в ColorZilla. Если вас не устраивает использование расширения на панели инструментов, вы можете открыть его во всплывающем окне. Может помочь на определенных сайтах.
Получить пипетку ColorPick
3.Eye Dropper
Eye Dropper — еще одно расширение Chrome для определения и выбора цветов из Интернета. Откройте расширение, нажмите «Выбрать цвет из Интернета» и просто выберите пиксель. Как только вы это сделаете, расширение отобразит шестнадцатеричный цветовой код, который вы сможете скопировать.
Каждый цвет, который вы определяете, будет аккуратно сохранен в столбце истории. Так что вы можете вернуться к нему позже. Другой вариант — вкладка «Палитра цветов», где вы можете манипулировать палитрой, чтобы найти или точно настроить оттенок, который вы хотите выбрать.
Как и другие расширения в списке, Eye Dropper можно загрузить и использовать бесплатно.
Get Eye Dropper
4. Color от Fardos
Одно из наиболее изысканных расширений Chrome, которое мне нравится, — это Colors от Fardos, потому что оно хорошо продумано. Внизу есть четыре варианта, первая из которых — пипетка. Выберите его и щелкните любой пиксель на веб-странице, чтобы определить его цвет.
Вы можете улучшить его, перейдя в градиенты. Есть палитра цветов, где вы можете перемещаться по палитре, пока что-то не бросится в глаза.
Наконец, есть вкладка поиска, где вы можете ввести шестнадцатеричный цветовой код и просмотреть его в действии.
Get Color by Fardos
Интересный факт: Знаете ли вы, что красный — это первый цвет, который видит ребенок? Может быть, это потому, что это цвет крови, который является частью этого инстинкта выживания? Нет, шучу. Потому что у красного самая длинная длина волны.
Цвет, цвет на стене
Социолог из Мэрилендского университета Филип Коэн в своем исследовании указал, что синий официально является самым популярным цветом в мире.Ну а кому не нравится чистое голубое небо? В следующий раз, когда вы увидите фотографию с оттенком того, что вам нравится, вам больше не придется чесать голову. Просто используйте одно из расширений Chrome, чтобы определить его в Интернете. Кроме того, легко определить точные цвета, запечатленные фотографами, которые публикуют свои изображения на Flickr, Instagram и других местах.
Далее: В черно-белых изображениях есть что-то эстетичное. Нажмите на ссылку ниже, чтобы узнать, как с помощью Photoshop создавать черно-белые изображения из цветных.
Последнее обновление 9 окт.2019 г.
В указанной выше статье могут содержаться партнерские ссылки, которые помогают в поддержке Guiding Tech. Однако это не влияет на нашу редакционную честность. Содержание остается непредвзятым и достоверным.
Лучшие инструменты для работы с цветом для веб-дизайнеров в 2021 году
Инструменты
Color помогают веб-дизайнерам сделать один из самых важных выборов, которые мы сделаем при создании сайта: выбор цвета. Выбранные нами цвета могут иметь психологическое влияние на тех, кто их рассматривает, поэтому важно, чтобы мы все сделали правильно.
Например, красный обычно считается высокоэнергетическим цветом, а синий подразумевает спокойствие и умиротворение. Чтобы проиллюстрировать этот момент, подумайте, какие цвета вы можете использовать на веб-сайте, где продаются детские игрушки, и на сайте юридической фирмы. Скорее всего, вы выберете яркие, живые цвета для первого и приглушенные тона синего и серого для второго.
Но как узнать, какие цвета хорошо сочетаются друг с другом? К счастью, вам не нужно быть мастером теории цвета, чтобы составить работоспособную палитру.Чтобы помочь с важной задачей выбора цвета, вот 14 лучших инструментов цветного веб-дизайна — и все они бесплатны.
Помимо инструментов для работы с цветом, вы можете воспользоваться лучшими инструментами веб-дизайна, которые помогут вам работать эффективнее. Еще один способ избавиться от хлопот в веб-дизайне — это выбрать лучший конструктор веб-сайтов, выбрав любой из наших вариантов. И не забывайте о поиске дома для своего сайта — вы можете посмотреть наш список лучших платформ веб-хостинга по доступным ценам.
01. HueSnap
Создавайте вдохновение на ходу и превращайте его в цветовые палитры
HueSnap здесь, чтобы помочь всякий раз, когда приходит вдохновение.Это может быть декор гостиничного номера или свет в парке однажды вечером, который вдохновит вас на идею цветовой схемы вашего следующего веб-сайта. Сделайте снимок и используйте HueSnap, чтобы извлечь цвета из изображения и превратить их в палитру.
Приложение предназначено для мобильного использования, и вы можете сохранять и делиться своими палитрами (до шести цветов в каждой) с другими. Существует множество функций, которые помогут вам изменить палитру, например параметры для выбора дополнительных и составных цветов.
02.Khroma
Khroma использует AI, чтобы предлагать цвета, которые вам понравятся.
Khroma — это инструмент цвета AI, который помогает вам легко просматривать и сравнивать исходные цветовые комбинации. Вы тренируете алгоритм ИИ, чтобы он действовал как расширение вашего мозга. Начните с выбора 50 понравившихся вам цветов; эти цвета используются для обучения нейронной сети, которая может распознавать сотни тысяч других похожих цветов.
03. Coolors.co
Раздел «Обзор» включает сотни, если не тысячи, вариантов палитры.
Coolors предлагает широкий спектр инструментов для настройки палитры так, как вы этого хотите.Кроме того, вы можете экспортировать свое окончательное творение во множество различных форматов, чтобы использовать его практически везде, где захотите. Coolors — это не просто инструмент для создания цветовой палитры, он также позволяет вам просматривать другие завершенные творения других пользователей, чтобы вы могли черпать вдохновение. В разделе «Обзор» есть сотни (если не тысячи) палитр, которые вы можете просматривать, сохранять и редактировать самостоятельно.
Coolors доступен на настольных компьютерах. Более того, в нем также есть приложение для iOS, надстройка Adobe (PhotoShop, Illustrator, InDesign) и даже расширение Google Chrome для легкого доступа.
04. Adobe Color CC
Это было давно, но все еще невероятно полезно.
Бесплатный инструмент Adobe Color CC существует уже некоторое время, и это один из лучших инструментов для выбора цветовой палитры. . Вы можете не только создавать свои собственные цветовые схемы, но и исследовать то, что создали другие. Выберите цвет на колесе (или на изображении) и примените правила цвета, например, используя только дополнительные цвета, монохроматические цвета или оттенки выбранного вами цвета, для создания цветовой палитры.(Или щелкните каждый цвет и исследуйте цветовое колесо, чтобы настроить выбор.)
Новейшая функция Adobe Color CC — это инструменты специальных возможностей, которые сообщают вам, безопасны ли выбранные вами цвета для дальтонизма и могут ли их использоваться в качестве фон для читаемого текста.
05. Colordot
Используйте простые жесты мыши для создания цветовой палитры
Colordot от Hailpixel — отличный бесплатный онлайн-инструмент для создания цветовой палитры. Используя простые жесты мыши, вы можете выбирать и сохранять цвета.Перемещайте указатель мыши вперед и назад для определения оттенка; вверх и вниз для легкости; прокрутите для насыщенности и щелкните, чтобы сохранить цвет в палитре. Щелкните значок переключателя, чтобы увидеть значения RGB и HSL каждого цвета. Есть даже приложение для iOS, которое позволяет снимать цвета с помощью камеры.
06. Eggradients
Градиентное вдохновение и заставляющие задуматься имена
Eggradients предлагает идеи красивых градиентов для использования в вашей дизайнерской работе, созданные кем-то, кто хорошо разбирается в цвете и обладает интересным чувством юмора.Каждый градиент, отображаемый в форме яйца, имеет собственное название, заставляющее задуматься. Примеры включают «Разбитое сердце Возняка» для бледно-голубого и бордовый градиент под названием «Не облагаемый налогом доход».
07. 147 цветов
Этот бесплатный инструмент включает стандартные цвета CSS.
Когда вы отвечаете за создание легко читаемых CSS, иногда лучше использовать стандартные цвета и названия цветов. Благодаря «147 цветов» Брайана Майера-младшего вы сможете увидеть все и выбрать те, которые вам подходят.Он содержит 17 стандартных цветов плюс 130 других названий цветов CSS. Отфильтруйте результаты по оттенкам синего, зеленого и т. Д. Или выберите из полной радуги.
08. Генератор цветовой палитры Canva
Создание цветовой палитры на основе изображения
Генератор цветовой палитры от Canva идеально подходит, если вы хотите создать цветовую палитру на основе определенного изображения. Хотя другие инструменты предлагают аналогичные возможности, Canva очень проста в использовании: вы загружаете изображение, и генератор возвращает палитру из пяти основных цветов, содержащихся в нем.Вы можете нажать на понравившиеся вам цвета и скопировать шестнадцатеричное значение в буфер обмена.
К сожалению, на этом полезность этого предложения заканчивается. Вы не можете настроить цвета созданной палитры. Единственные другие варианты, которые у вас есть, — это скопировать предоставленные шестнадцатеричные значения или загрузить другую фотографию. Кроме того, вы можете использовать цветовое колесо Canva, чтобы создать собственную палитру вручную.
09. Палитра дизайна материалов
Создайте палитру на основе принципов дизайна материалов Google
С помощью палитры дизайна материалов вы можете выбрать два цвета, которые затем преобразуются в полную цветовую палитру для загрузки вместе с предварительным просмотром.Компания также предлагает Material Design Colors, которые позволяют дизайнерам видеть различные оттенки цвета вместе с соответствующими им значениями HEX.
10. ColourCode
Сохранение и экспорт цветовых палитр в виде файлов SCSS, LESS или PNG
ColourCode от Тамино Мартиниуса и Андреаса Сторма похож на Colordot, но предлагает немного больше рекомендаций. Этот бесплатный инструмент ударит вас прямо в лицо, демонстрируя фон, меняющий цвет при движении курсора. Кроме того, этот инструмент предлагает различные категории для палитры (аналоговая, триада, четырехугольник, монохромный, монохромный свет и т. Д.).
С помощью ColourCode вы можете установить различные параметры на цветовом круге для создания оригинальной комбинации. Вы также можете сохранить свою палитру или экспортировать ее как файл SCSS или LESS. Вы даже можете экспортировать в PNG, если хотите.
11. Калькулятор цвета
Выберите цвет и цветовую гармонию, и этот инструмент сгенерирует цветовую палитру.
Калькулятор цвета от Sessions College прост: вы выбираете цвет и опцию цветовой гармонии. Взамен вы получите обратно результаты рекомендованной цветовой схемы.Однако что хорошо в этом сайте, так это то, что на нем также подробно рассказывается о теории цвета и о том, как она соотносится с вашим выбором цвета. (Кажется уместным, учитывая, что это сайт образовательного учреждения.)
12. Цветовой код HTML
Этот набор инструментов включает список стандартных названий цветов.
Цветовые коды HTML — это большой бесплатный набор инструментов от Dixon. & Moe, который включает в себя подробный палитру цветов с множеством объяснений цветовых правил; серия цветовых диаграмм с плоскими цветами дизайна, схемой дизайна Google Material и классической палитрой безопасных для Интернета цветов; и список стандартных названий цветов и кодов HTML.
Этот сайт также предлагает учебные пособия и другие ресурсы для веб-дизайнеров, а также варианты экспорта результатов из его инструментов в виде HEX-кодов, стилей HTML, CSS и SCSS.
13. W3Schools: Учебник по цветам
Это бесплатное руководство включает ссылки на ряд удобных инструментов для работы с цветом.
Если вы ищете комплексное решение, включающее руководство по цветам, а также ряд различных инструментов, тогда Учебник по цветам на W3Schools — идеальный выбор. Вы можете не только узнать о теории цвета, цветовых кругах и цветовых оттенках, но также сможете использовать другие инструменты, которые у него есть, например, Color Converter.С помощью этого инструмента вы можете преобразовывать любые цвета в имена и обратно, HEX-коды, значения RGB, HSL, HWB и CMYK.
14. Цифровой измеритель цвета (Mac)
Встроенный инструмент Mac позволяет получать цвета с экрана
Хорошо, пользователи Mac, это для вас. С помощью встроенного в вашу машину инструмента цифрового измерителя цвета вы можете «захватить» цвет из любого места на экране, а затем получить значения этого цвета в десятичном, шестнадцатеричном или процентном виде. Кроме того, вы даже можете «скопировать» выбранный цвет как текст или изображение.
Подробнее:
Как узнать цветовой код веб-сайта
Как узнать цветовой код веб-сайта: —
Если вы работаете с графическими программами или являетесь веб-мастером, вам нужно некоторое время, чтобы узнать конкретный веб-сайт цвет, потому что он выглядит более привлекательно, чем ваша графика или веб-сайт.
Вчера мой друг г-н Виджай Кумар сказал мне, что, Рум, цвет вашего веб-сайта не выглядит идеально, внесите некоторые изменения в графику или дизайн.Лично я большой поклонник http://www.howtogeek.com/, поэтому решил сделать свой сайт таким же цветным, как Howtogeek.com.
Это не большая задача узнать цвет сайта. просто следуйте моим советам.
1. Используйте www.colorcombos.com : —
Инструмент извлечения цвета веб-сайта используется для получения цветов с веб-сайта.
Просто введите URL-адрес веб-сайта, с которого вы хотите получить цвета, затем нажмите кнопку «Получить цвета». Затем этот инструмент попытается прочитать файлы HTML и CSS этих веб-сайтов, чтобы найти все цветовые коды HEX.
Если цвета найдены, вы будете перенаправлены на страницу тестера цветовых комбинаций, где сможете увидеть все их цвета. Оттуда вы можете создавать и тестировать цветовые схемы и палитры с этими цветами.
Просто откройте www.colorcombos.com и введите URL-адрес своего веб-сайта, цветовой код которого вы хотите узнать, и нажмите на опцию Получить .
даст вам все возможные комбинации цветов.
2.Используйте imagecolorpicker.com: —
Воспользуйтесь правом онлайн-палитры цветов изображения, чтобы выбрать цвет и получить цветовой код html этого пикселя.
Также вы получаете значение HEX, значение RGB и значение HSV.
Вы можете поместить URL-адрес изображения в текстовое поле ниже или загрузить свое собственное изображение. (например, скриншот вашего рабочего стола). Или используйте URL-адрес веб-сайта, справа вы увидите миниатюру.
3. Использование Photoshop: —
Ознакомьтесь с этим учебным пособием на Youtube от персонала Ausweb

Наслаждайтесь своим новым цветовым кодом.
Надеюсь, вам понравился мой пост. Как узнать цветовой код сайта. Пожалуйста, поделитесь с другими.
Инструменты для оценки вашего дизайна на предмет цветового контраста Доступность • Цифровой A11Y
Солнечный день. Солнце так ослепляет вам глаза, когда вы идете в офис после обеда. Вы хотите закончить электронное письмо так быстро, но ваши глаза не настолько послушны, чтобы смотреть на экран компьютера, поскольку он только что вошел в контрастную внезапность, и им нужно время, чтобы осесть. Они просто кричат о контрастном экране или инверсии цвета.Как обычный человек, мы все должны были столкнуться с похожим тревожным, если не с одним и тем же сценарием в любой момент времени.
Теперь, что делать?
Если вы проектируете, разрабатываете, тестируете или проверяете компонент пользовательского интерфейса, первый шаг, который вы можете предпринять, чтобы убедиться, что их продукт доступен, — это убедиться, что он соответствует требованиям цветового контраста Руководства по доступности веб-контента. Обеспечение соответствия вашего дизайна требованиям цветового контраста поможет пользователям с ослабленным зрением, дальтоникам и людям с ограниченными физическими возможностями.Это одно из простых решений с точки зрения доступности, и существует большое количество инструментов, которые помогут нам определить требования к цветовому контрасту, которые мы рассмотрим ниже.
Требования WCAG к цветовому контрасту
Прежде чем углубляться в инструменты, давайте узнаем, что говорит WCAG о цветовом контрасте! Согласно SC 1.4.3 Color Contrast of WCAG2.0, существует набор требований для уровней соответствия AA и AAA, и они составляют:
// www.visionaustralia.org/digital-access-determinator
Для соответствия критериям успешности уровня AA текст меньше 18 пунктов (или 14 пунктов, если жирный шрифт) должен иметь коэффициент контрастности 4,5: 1. Все более крупные тексты должны иметь коэффициент контрастности 3: 1 или выше.
Более строгие критерии AAA требуют, чтобы текст менее 18 пунктов (или 14 пунктов, если жирный шрифт) превышал коэффициент контрастности 7: 1. Все более крупные тексты должны иметь коэффициент контрастности не менее 4,5: 1. Помните, что все эти цифры являются результатом хорошо изученного пользовательского исследования и соответствуют требованиям большинства людей, если не всем.
Как проверить доступные цвета

Анализаторы цветового контраста и генераторы цветового контраста WCAG
Создание доступных цветов пользовательского интерфейса с помощью маркеров a11y-color
Сгенерируйте доступный дополнительный текст или цвета пользовательского интерфейса в виде переменных Sass и / или настраиваемых свойств CSS из маркеров базового цвета.
КАЛЬКУЛЯТОР КОНТРАСТА APCA
Pika Приложение для выбора цвета с открытым исходным кодом для macOS. Pika (произносится как пи · ку, как средство выбора) — это простая в использовании программа выбора цвета с открытым исходным кодом для macOS.Pika упрощает быстрый поиск цветов на экране в нужном вам формате, чтобы вы могли стать быстрым и успешным дизайнером.
ColorCube: цветной инструмент A11y для дизайнеров и разработчиков
Deque Color Contrast Analyzer Бесплатный онлайн-инструмент для оценки цветового контраста в соответствии с Руководством по обеспечению доступности веб-контента (WCAG).
Контрастный треугольник Удаление подчеркивания из ссылок в тексте HTML представляет проблему доступности. Чтобы дизайн считался доступным, теперь существует трехстороннее ограничение дизайна, или то, что я называю «контрастным треугольником».Теперь ваш текст, ссылки и цвета фона должны иметь достаточный контраст друг с другом. Ссылки должны иметь коэффициент контрастности 3: 1 от окружающего их текста. Это сделано для того, чтобы пользователи с дальтонизмом могли определить, какие фрагменты текста являются ссылками. Не используя подчеркивания, дизайн должен полагаться только на контраст, чтобы добиться этого. Даже синий цвет ссылок по умолчанию в браузерах не соответствует этому уровню контрастности. И текст, и ссылки должны иметь коэффициент контрастности 4,5: 1 или 3: 1, если это крупномасштабный текст.
ColorShark — WCAG 2.1 AA и AAA Color Contrast Tool С легкостью проверяйте цвета вашего дизайна на контрастность и автоматически находите самые близкие доступные цвета.
EightShapes Contrast Grid Протестируйте множество комбинаций цветов переднего плана и фона на соответствие минимальному контрасту WCAG 2.0.
Леонардо: генератор цвета на основе контраста с открытым исходным кодом
whocanuse.com? Это инструмент, который привлекает внимание и помогает понять, как цветовой контраст может повлиять на разных людей с нарушениями зрения.
Устройство проверки контрастности кнопок от Aditus
Устройство проверки контрастности цвета с помощью уровня доступа
Contrast Ratio (Коэффициент контрастности) Простое вычисление коэффициентов цветовой контрастности. Прохождение WCAG никогда не было таким простым! пользователя Lea Verou.
Доступные цвета | Программа проверки цветового контраста WCAG 2.0 AA и AAA оценивает вашу цветовую комбинацию, используя рекомендации WCAG 2.0 по доступности контраста. Если ваша комбинация не соответствует рекомендациям, мы найдем наиболее близкую доступную комбинацию, изменив яркость цвета.Мы изменяем только значение яркости, чтобы максимально соответствовать исходному цвету.
Contrast Checker, предоставлено Acart Communication Этот инструмент создан для дизайнеров и разработчиков для проверки соответствия цветового контраста Руководству по доступности веб-контента (WCAG), установленному Консорциумом World Wide Web (W3C). Эти расчеты основаны на формулах, указанных W3C.
Проверить мои цвета «Проверить мои цвета» — это веб-инструмент для проверки цветов переднего плана и фона вашего веб-сайта.Он проверит все составные элементы веб-страницы на основе рекомендованного WCAG W3C коэффициента контрастности и яркости цвета. Его легко использовать: просто введите URL своей веб-страницы, нажмите «Проверить!», И он выдаст красивый табличный отчет для всех элементов.
Color Oracle Color Oracle — это настольный инструмент, доступный для операционных систем Mac, Windows и Linux: он имитирует недостатки цветового зрения. У создателей инструмента также есть раздел «Советы по дизайну» на своем сайте, в котором есть пара полезных технических документов о доступности цветов.Обратите внимание, что пользователям Windows и Linux требуется Java 6.
Визуализатор цветового контраста Этот инструмент представляет собой настольное приложение Adobe AIR для визуализации соответствующих цветовых комбинаций. Это прекрасный инструмент для выбора цветовой палитры вашего сайта. Если вас беспокоит доступность Интернета, было бы неплохо иметь этот инструмент на этапе разработки ваших проектов.
Цветовое колесо со специальными возможностями Этот инструмент — удобный способ экспериментировать с различными цветовыми комбинациями: он помогает быстро представить себе, как выглядят цветовые схемы.Чтобы проверить и настроить выбор цвета, просто перемещайте указатель мыши по цветовому кругу и оценивайте удобочитаемость. Внизу веб-страницы инструмента вы увидите моделирование определенных форм дальтонизма.
GrayBit Один из способов проверить, имеет ли дизайн достаточный цветовой контраст, — это преобразовать его в оттенки серого и увидеть, какие части трудно читать. Используйте GrayBit для преобразования веб-страницы в оттенки серого; он даже конвертирует веб-изображения на этой странице. Это отличный инструмент для визуализации цветового контраста и удобочитаемости веб-дизайна.
Sim Daltonism
Sim Daltonism — это симулятор дефицита зрения для Mac OS X. Инструмент позволяет моделировать одно из восьми поддерживаемых состояний дальтонизма, таких как монохроматичность и протанопия (состояние дихроматичности). Обратите внимание, что для Sim Daltonism требуется Mac OS X 10.2.8 (или более поздние версии).
Color Laboratory Этот несложный веб-инструмент позволяет вам обнаруживать цветовые комбинации и то, как они могут выглядеть для человека с дальтонизмом. Color Laboratory очень проста в использовании и требует всего трех основных шагов, все из которых описаны в их кратком руководстве.
Color Contrast Analyzer Это настольное приложение (для Windows) предназначено для проверки сочетания цветов переднего плана и фона на предмет цветового контраста и яркости. На сайте есть руководство пользователя, которое поможет вам быстро приступить к работе с ним, а также файлы для загрузки на нескольких языках.
Luminosity Анализатор цветовой контрастности Juicy Studio имеет отличный веб-инструмент для анализа цветовой контрастности фона и переднего плана. Все, что вам нужно сделать, это ввести значения цвета фона и переднего плана в шестнадцатеричных единицах (например, белый фон — #ffffff), и впоследствии он сообщит вам, проходит ли комбинация WCAG 2.0 рекомендаций по контрасту.
Color Contrast Check Первый действительно интуитивно понятный онлайн-инструмент для проверки цветов, о котором я знаю, Color Contrast Check Джонатана Снука позволяет вводить цвета переднего плана и фона либо путем ввода шестнадцатеричных значений, либо с помощью ползунков. Инструмент дает вам немедленную обратную связь, показывая, как выглядит выбранная комбинация цветов и проходит ли она тест.
Color Safe Расширение возможностей дизайнеров с помощью красивых и доступных цветовых палитр, основанных на рекомендациях WCAG в отношении коэффициентов контрастности текста и фона.
WebAIM: Color Contrast Checker Онлайн-анализатор цветового контраста от WebAIM.
Contrast-Finder Contrast-Finder — это инструмент, который вычисляет контраст между двумя цветами (фон, передний план) и проверяет, действителен ли контраст .
Цветовая палитра от
A11y Rocks Цвет важен для любого дизайна. Однако иногда контраст между цветами фона и переднего плана трудно различить, особенно людям с нарушением зрения.Этот инструмент должен помочь вам визуализировать всю палитру всех цветовых комбинаций с учетом доступности. Комбинации отсортированы по коэффициенту цветовой контрастности.
Генератор доступных цветов от Learn UI Design
Contrast Приложение для macOS от Nothing Magical, Inc. для быстрого доступа к цветовой контрастности WCAG.
ColorBox от Lyft Design
Контраст-шашка от GOV.UK
Обзор цвета
Расчет контраста: Сделано на коде Хейдона
Тестер цветового контраста: Джо Долсон
WCAG Contrast checker: плагин для Firefox
Средство проверки контраста ссылок WebAIM: проверяет контрастность ссылок
Контрастный искатель Tanaguru
Конструктор доступной цветовой палитры
Цветовые коды HTML: из инструментов Дэна (спасибо Дэну, кто бы он ни был!)
Contrast-A: Классный сайт
Color Palette Contrast Checker: из репозитория git deque lab
ColorA11y: Хромированное расширение
Pa11y
Hex Naw
Дизайн Cloudflare
Определитель цветового контраста
Brandwood A11y: текст на фоновом изображении a11y check
Анализатор цветового контраста: расширение Chrome
Устройство проверки контрастности цвета Monsido Программа проверки контрастности цвета Monsido проверяет контрастность фона и текста на предмет доступности.Пользователи могут использовать его для визуализации различных цветовых комбинаций палитр для дизайна своего веб-сайта, которые соответствуют требованиям WCAG, директивы ЕС и стандартов ADA.
Цветовое колесо, генератор цветовой палитры | Adobe Color Цветовое колесо (или изображение на вкладке «Извлечь тему») можно использовать для создания цветовой палитры, которую можно сохранить в Creative Cloud после входа в систему. Затем вы можете использовать сохраненные цветовые темы в продуктах Adobe (Photoshop, Illustrator, Fresco и т. Д.) Через панель тем Adobe Color или библиотеки CC.
Заключение
Когда есть так много инструментов, которые сообщают нам коэффициент контрастности нашего содержимого и компонентов пользовательского интерфейса, давайте не будем упускать потребность во всеобъемлющем визуальном пространстве для наших разнообразных групп пользователей! Скорее, давайте создадим красочную, но контрастную сеть!
Другие статьи о цветовом контрасте
Дополнительные инструменты доступности
Связанные
Paletton — Дизайнер цветовых схем
Влюблен в цвета с 2002 года.
Приложение Paletton
Colorpedia
О компании Paletton
О компании Paletton
Paletton.com — это дизайнерский инструмент цвета, предназначенный для создания цветовых комбинаций, которые хорошо сочетаются друг с другом. Он использует классическую теорию цвета с древним художественным цветовым кругом RYB для создания цветовых палитр от одного до четырех оттенков, каждая из пяти разных оттенков. Можно выбрать различные стили предварительного просмотра, чтобы проверить и просмотреть цвета в комбинациях, доступно множество примеров, чтобы увидеть палитру, используемую в дизайне веб-сайта, дизайне пользовательского интерфейса или в произвольно нарисованном изображении.Предварительный просмотр ткани Tartan также доступен для тех, кто интересуется текстилем и дизайном интерьера.
Этот инструмент палитры использует различные цветовые модели для объединения смежных цветов и / или дополнительных цветов к основному оттенку. Выбирайте модели от монохромных до трехцветных или четырехцветных наборов цветов, с дополнением или без него (противоположный оттенок), наслаждайтесь даже режимом свободного стиля. Поиграйте с яркостью и насыщенностью палитры, выберите из предустановленных предустановок или создайте случайные палитры.Уникальный фильтр имитации зрения имитирует палитру, которую видят люди с различной слабостью зрения, дальтонизмом, различными вариантами дальтонизма (протанопия, дейтеранопия, тританопия, протаномалия, дейтераномалия, тританомалия, дисхроматопсия или ахроматопсия), а также несколько гамма-симуляций (симуляция слишком яркого дисплея или слишком темной печати), обесцвечивания, преобразования оттенков серого или веб-цветов (устаревшая 216-цветная палитра). Палитру можно экспортировать во множество различных форматов (HTML, CSS, LESS, XML, текст, изображение PNG, палитра образцов Photoshop ACO или формат палитры GIMP GPL) для раскрашивания ваших работ.Проверьте цветовой контраст всех цветовых пар, используемых в палитре, и проверьте, соответствует ли цветовой контраст требованиям WCAG.