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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

     

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

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

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

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

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

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

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

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

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

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

.test-btn{

background:# #2F73B6;

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.test-btn{

background:#2F73B6;

}

 

.test-btn:hover{

background:# 286199;

}

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

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

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

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

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

Как определить цветовую схему для вашего веб-сайта Squarespace

  1. Веб-дизайн и разработка
  2. Squarespace
  3. Как определить цветовую схему для вашего веб-сайта Squarespace

Крис Блэк

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

Как найти коды RGB и шестнадцатеричные

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

  • RGB (красный, зеленый, синий) - это цветовой метод, используемый для отображения цветов на экране с подсветкой, например на экране монитора компьютера, iPhone или телевизора. Диапазон каждого цвета измеряется от 0 до 255.

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

    Кроме того, когда цветовой метод RGB включает прозрачность, он называется RGBa. a представляет альфа-канал, который управляет прозрачностью цвета по шкале от 0 (полностью прозрачный) до 1 (полностью непрозрачный).

  • Шестнадцатеричный, или шестнадцатеричный цвет - это упрощенная форма RGB, обычно используемая в веб-дизайне.

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

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

  • ColorZilla - это бесплатный плагин для браузера Firefox или Chrome.

  • ColorSchemerColorPix - бесплатное приложение для Windows.

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

  • ColorSchemer - это надежное приложение для выбора цвета и дизайна, доступное для Mac, Windows, iPhone и iPod touch. Это приложение не является бесплатным, но оно предлагает расширенные возможности, которые помогут вам исследовать цветовые гармонии, и даже может предложить вам цветовые схемы.Если у вас iPhone или iPod touch, попробуйте приложение ColorSchemer, потому что оно довольно классное.

Как посмотреть цветовой код на Squarespace

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

  1. Щелкните правой кнопкой мыши элемент, содержащий интересующий вас цвет.

  2. Выберите параметр во всплывающем меню, чтобы проверить элемент.

    Браузер отображает базовый код.

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

  • Safari: Включите строку меню разработчика в настройках Safari, выбрав «Дополнительно» → «Показать панель меню разработчика».

  • Chrome: В отличие от Safari, в Chrome уже включена функция проверки элементов, поэтому настройка не требуется.

  • Firefox: Firefox, как и Chrome, имеет базовый элемент проверки. Для более продвинутых функций просмотра кода вам необходимо установить Firebug.

  • Internet Explorer: Нажмите F12 на клавиатуре, чтобы открыть Инструменты разработчика, включенные в ваш сайт. Если нажатие F12 не работает, выберите Инструменты → Инструменты разработчика.

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

Об авторе книги

Крис Блэк - веб-профессионал-самоучка, который начал создавать веб-сайты в 1998 году и использует Squarespace с 2004 года. Он также был членом группы поддержки клиентов Squarespace, Inc. Когда он не пишет книги о Squarespace, Крис использует это для разработки веб-сайтов.

.

👍 Палитра цветов онлайн | Палитра цветов HEX

... выберите цвет в Интернете

Палитра цветов

Щелкните изображение, чтобы получить коды html ..

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

Код HTML / HEX: # 5dbcd2
Код RGB: rgb (93, 188, 210)
показать еще
Код Hsl: hsl (191, 57%, 59%)
Код Hwb: hwb (191, 36%, 18%)
Код Cmyk: cmyk (56%, 10%, 0%, 18%)
Код Ncol: C19, 36%, 18%

Загрузить собственное изображение? Прокрутите вниз.

- или -

Как это работает Сканируйте реальные поверхности, чтобы найти их цифровые значения цвета.

Этот сайт финансируется за счет рекламы. Вы используете блокиратор. Мы понимаем, что вы не хотите видеть рекламу. Работа и обслуживание этого сайта стоит нам денег. Мы очень рады любой поддержке!

успешно скопировал код в буфер обмена:

Copyright 2020 - ImageColorPicker.com | Политика конфиденциальности | Отпечаток.

css - Как определить html-код цвета области изображения

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
. .

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

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