Главная › Новости

HTML коды и RGB цвета для сайта, подобрать и задать цвета текста в HTML и CSS, Яндекс.Цвета и другие программы палитр для подбора цвета

Опубликовано: 02.09.2018

Brackets урок 18. Color Palette - выбор цвета с картинки

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

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

Коды и таблицы базовых RGB цветов, задание цвета в Html и CSS

Логично, что в текстовой разметке и CSS ( каскадные таблицы стилей) имеется возможность цветового оформления текста, иначе все страницы были монотомными и малозаметными. Для цветового оформления текста обычно используется цветовая модель RGB ( с английского Red — Красный, Green — Зеленый, Blue — Синий)

В цветовой модели RGB используется всего три цвета, каждый цвет которого может представлен разными уровнями яркости. В Html или CSS можно выбрать, для каждого из трех цветов, одну из 256 возможных градиаций цветов, а 256 потому что столько значений цвета можно закодировать в 1 байте информации.

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

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

1. Задать код цвета для сайта в Html, выбирая яркость цветов ( красного, зеленого, синего) по шестнадцатеричной системе счисления.

2. Задать цвет кода в CSS, вводя название кода цвета.

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

Но в шестнадцатеричной системе в отличие от десятичной в коде цвета присутствуют помимо цифр и буквы латинского алфавита, поэтому здесь есть своя система формирования цифр, но углубляться не стоит, так к примеру, белый цвет для HTML можно будет задать так: #ffffff, а черный: #000000. То есть 00 соответствует 0 в десятичной системе, а ff — 256.

То есть на каждый канал RGB цвета для Html или CSS отводится 2 шестнадцатеричной цифры, поэтому цвета Html кода состоят из шести цифр или букв, которые приравнены в шестнадцатеричной системе к цифрам, где перед ним ставится знак «#». Все довольно просто, так простые цвета для Html или CSS будут выглядеть так:

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

Яндекс Цвета — подбор цветовой схемы в палитре RGB цветов, в Yandex выдаче, Html коды

Также можно подобрать цветовую схему для сайта в Яндексе, достаточно вбить в строку поиска слово «цвет» или какое-либо название цвета. В результате наверху страницы, в результатах выдачи будет палитра Яндекс.Цвета для подбора цвета для сайта. В правом углу будет показан шестнадцатеричный код цвета, который можно вставить к себе в web документ и использовать, а выше RGB цвета.

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

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

Некоторые цвета в гипертекстовой разметке цвета можно указать словом, так «white» — белый цвет, «gray» — серый и т.д. Но есть нюанс, задавать цвета в Html таким способом получится для небольшого количества цветов. Ну понятно, что 16 миллионов цветов в RGB с помощью слов вы не сможете найти не в одной таблице.

В валидаторе гипертекстовой разметки W3C 4.01 ( его поддерживают все браузеры) представлено 16 оттенков, которые составляют таблицу цветов Html и CSS можно будет задать с помощью слов :

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

Примеры и способы применения кодов цвета в Html и CSS и названия RGB цветов в web документах, изменение цвета текста с помощью атрибута color

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

Поэтому я все же приведу примеры задания цвета в HTML словами и кодом, при этом будут использоваться уже не рекомендуемые валидатором W3C теги. Так раньше цвет фона страницы задавали через атрибут «bgcolor» тегом «BODY», а цвет текста на всей странице атрибутом «text».

В результате вы получите страницу с золотистым фоном и пурпурным шрифтом. До того, когда CSS вошел в обиход для задания цвета шрифта в определенном участке надо было прописывать тег «FONT», который не рекомендуется W3C, а для задания цвета в него включали атрибут «color»:

Чтобы окрасить определенную часть текста в выбранный вами цвет ( например я выбрал синий) при помощи тега «FONT», надо прописать следующий HTML код:

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

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

Подбор, определение HTML кода, RGB цветов с помощью программ — для работы с цветовыми палитрами

Как я уже описал выше, чтобы задать код цвета в HTML и CSS используется цветовая модель RGB ( трехцветная модель, состоящая из трех цветов — красный, зеленый, синий). Для каждого из цветов предусмотрено 256 градиаций — от 0 до 255 ( то есть в шестнадцатеричной системе — от 00 до FF).

Так как у нас используется три основных цвета, их комбинаций которых получаются остальные, то код цвета в HTML и CSS будет выглядеть так 08457e ( оттенок синего). Тогда lkz записи кода цвета в HTML надо добавить перед кодом знак решетки «#», получим код цвета для HTML: #08457e.

Понятно, что вычислять код цвета вам не надо, для этого можно воспользоваться различными программами для работы с цветом, где нужный цвет можно выбрать на палитре, либо наведя инструментом «пипетка» на нужный цвет, получив нужный код цвета для HTML , либо как описал выше зайти в Яндекс и найти код искомого цвета. В результате вы сможете выбрать нужный цвет в палитре и получить код HTML цвета . Ниже приведу список программ для работы с цветом при создании сайта, где вы сможете выбрать ту, которая больше подходит вам:

1. HTMLColor 2000

2. ColorPic

3. ColorMania

4. Contrast Analyser 2.0

5. Absolute Color Picker

6. Just Color Picker

Ну а для того, чтобы увидеть результаты вашей работы ( когда выписал HTML код для сайта в текстовом редакторе, советую Notepad++) документ HTML кода сохраните файл в формате html и откройте в любой браузере, чтобы просмотреть, как будет выглядеть.

Посмотрите также видео про «Цвета в HTML и CSS»: