Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:

Как задать цвет в html

Задаем цвет текста в CSS. Способы представления цветов — учебник CSS

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

Пример:

p { color: #211C18; }

В нашем примере значение #211C18 означает шестнадцатеричный код цвета. Если вы уже знакомы с шестнадцатеричной системой счисления, то можете пропустить чтение следующего абзаца. Также далее мы расскажем о других способах представления цветов в веб – с помощью цветовых моделей (RGB, HSL) и ключевых слов. Эта информация будет полезна новичкам и рекомендуется к прочтению.

Шестнадцатеричные цвета (hex)

Шестнадцатеричная система счисления (hexadecimal, hex) основывается на числе 16. Для записи шестнадцатеричного значения используется 16 символов: арабские цифры от 0 до 9 и первые буквы латинского алфавита (A, B, C, D, E, F). Цвет в шестнадцатеричном формате записывается в виде трех двузначных чисел от 00 до FF (перед ними обязательно ставится символ решетки #), что соответствует трем компонентам: Red, Green, Blue (цветовая модель RGB). Иными словами, запись цвета можно представить как #RRGGBB, где первая пара символов определяет уровень красного, вторая – уровень зеленого, третья – уровень синего цвета. Результирующий цвет является сочетанием этих трех цветов.

Сокращенная запись hex-цветов

Некоторые шестнадцатеричные значения цветов можно записать сокращенно. Для этого следует превратить запись вида #RRGGBB в #RGB. Это можно сделать в том случае, когда в hex-числе имеется три пары одинаковых символов.

Сокращенная форма записи встречается довольно часто, и для вашего ознакомления мы приведем несколько примеров сокращений. К слову, hex-значения цветов не чувствительны к регистру – вы можете использовать как прописные, так и строчные буквы, всё зависит от вашего желания и вкуса.

Примеры сокращенной записи hex-цветов:

HEX-код Сокращенная запись

#FFDD66	#FD6
#8833FF	#83F
#333333	#333
#cccccc	#ccc

Цветовая модель RGB

Второй способ указания цвета в CSS – использовать десятичные значения RGB (Red, Blue, Green). Для этого необходимо записать после свойства color ключевое слово rgb, а затем в скобках и через запятую – три числа в диапазоне от 0 до 255, каждое из которых означает интенсивность красного, зеленого и синего цветов (r, g, b). Чем больше число, тем более интенсивен цвет. К примеру, чтобы получить ярко-зеленый цвет, нужно записать:

p { color: rgb(0, 255, 0); }

А вот желтовато-горчичный оттенок имеет такое значение:

color: rgb(94, 81, 3); /* ниже – тот же цвет, записанный в шестнадцатеричном виде: */ color: #5E5103;

Значение черного цвета записывается как (0, 0, 0), а белого – (255, 255, 255). Также допускается указывать эти значения в процентах. Так, число 255 соответствует 100%, следовательно, белый цвет можно задать следующим образом:

color: rgb(100%, 100%, 100%);

Где искать значения цветов

Возможно, у вас возник вопрос: откуда же брать все эти значения цветов? Существует множество графических редакторов и онлайн-сервисов, с помощью которых можно подбирать цвета и строить цветовые схемы. Одна из наиболее популярных программ, в которой можно выбрать подходящий цвет и получить его значение RGB, hex и не только – Adobe Photoshop. В качестве альтернативы есть специальные сайты, на которых можно легко подобрать не только цвет, но и целую цветовую схему. Отличный пример – сервис Adobe Color CC.

Цветовая модель RGBA

Задать цвет в формате RGBA можно почти так же, как и в RGB. Отличие RGBA от RGB заключается в наличии альфа-канала, который отвечает за прозрачность цвета. Задается прозрачность с помощью числа в диапазоне от 0 до 1, где 0 соответствует полной прозрачности, а 1, наоборот, означает полную непрозрачность. Промежуточные значения вроде 0.5 позволяют задать полупрозрачный вид (допускается сокращенная запись, без нуля, но с точкой – .5). Например, чтобы сделать текст цветным и слегка прозрачным, нужно записать после свойства color ключевое слово rgba и значение цвета:

p { color: rgba(94, 81, 3, .9); }

Минусом RGBA является то, что его не поддерживает браузер Internet Explorer версии 8 и ранее. Специально для IE8 можно применить следующее решение:

p { color: rgb(94, 81, 3); color: rgba(94, 81, 3, .9); }

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

Цветовые модели HSL (HSLA)

Задавать цвет в CSS можно также с помощью координат цветовой модели HSL (Hue, Saturation, Lightness – тон, насыщенность, светлота). Записывается это так:

p { color: hsl(165, 100%, 50%); }

Первое число в скобках означает тон (hue) и задается в градусах (диапазон чисел от 0 до 359). Вам будет легко понять, почему используются именно градусы, если вы вспомните, как выглядит цветовой круг:

Второе и третье числа в скобках означают насыщенность (saturation) и светлоту (lightness) соответственно. Их значения устанавливаются в процентах от 0 до 100. Чем ниже значение насыщенности, тем более приглушенным становится цвет. Значение saturation, равное нулю, приведет к серому цвету, при этом неважно, какое значение имеет hue. С помощью значения lightness (светлота) можно указать яркость цвета. Низкие значения приводят к темным оттенкам цвета, высокие – к светлым. Значение 100% для lightness означает белый цвет, 0% – черный.

Цветовая модель HSLA работает почти так же, как и HSL, но в ней, аналогично с RGBA, есть альфа-канал, с помощью которого можно задавать прозрачность цвета, указывая необходимое значение в диапазоне от 0 до 1:

p { color: hsla(165, 100%, 50%, .6); }

HSL и HSLA поддерживаются всеми браузерами, кроме Internet Explorer версии 8 и ранее.

Стандартные цвета HTML

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

p { color: black; }

Существует 16 стандартных цветов, которые можно записать в значении свойства color:

Ключевое слово цвета HEX-код RGB

red	#FF0000	255, 0, 0
maroon	#800000	128, 0, 0
yellow	#FFFF00	255, 255, 0
olive	#808000	128, 128, 0
lime	#00FF00	0, 255, 0
green	#008000	0, 128, 0
aqua	#00FFFF	0, 255, 255
teal	#008080	0, 128, 128
blue	#0000FF	0, 0, 255
navy	#000080	0, 0, 128
fuchsia	#FF00FF	255, 0, 255
purple	#800080	128, 0, 128
white	#FFFFFF	255, 255, 255
silver	#C0C0C0	192, 192, 192
gray	#808080	128, 128, 128
black	#000000	0, 0, 0

Эти цвета поддерживают все браузеры. Кроме них есть еще порядка 130 дополнительных ключевых слов для различных оттенков цветов. Полную таблицу этих цветов можно увидеть в справочнике W3C.

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

Итоги

В CSS цвет текста задается с помощью свойства color, а его значение можно записать несколькими способами – в шестнадцатеричном (hex) виде, в формате RGB или HSL либо указав ключевое слово. Во избежание неправильного отображения цвета, заданного при помощи ключевого слова, лучше указывать его hex-значение.

Также есть возможность задать элементу прозрачность с помощью альфа-канала (форматы RGBA и HSLA). При этом стоит учитывать, что браузер IE8 и его ранние версии не поддерживают форматы RGBA, HSL и HSLA.

Далее в книге вы узнаете, как задать размер шрифта CSS.

Изменение цвета шрифта в CSS. Коды цветов HTML и CSS

Приветствую вас, дорогие друзья!

В данной статье я бы хотела более подробно рассказать про то как задать цвет шрифта в css и рассказать про основные форматы задания и коды цветов CSS и HTML.

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

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

Для этого вы можете воспользоваться специальным CSS-свойством color

Пример:

.block { color: black; }

Где вместо black указывается значение цвета для шрифта текста.

Более подробно о значении цветов в CSS и их форматах я распишу ниже

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

Например:

Изменяем цвет текста абзаца и ссылки

.block p { color: blue; } .block a { color: red; }

.block p {

color: blue;

}

.block a {

color: red;

}

Форматы задания цветов в CSS

Все цвета шрифта вы можете задавать в различных форматах. Вот наиболее распространённые:

1. При помощи кодового значения цвета хтмл.

Например:

color: black;

где black – это черный цвет html.

Примеры конкретных значений цветов HTML и CSS смотрите ниже.

2. Задание цвета в шестнадцатеричном коде:

Например:

color: #000000;

Где #000000; — это код черного цвета.

Если значение цвета в шестнадцатеричном коде имеет 6 одинаковых цифр или букв, то его можно сократить до трёх.

Например:

#ffffff – это код белого цвета

Его можно записать так: #fff

1. Задание цвета в формате rgb

Данный формат представляет собой набор трёх числовых значений от 0 до 255.

Он основывается на использовании трёх цветов, путём смешивания которых получаются все остальные оттенки

R – (red) – числовое значение красного цвета G – (green) – числовое зелёного

B – (blue) — числовое значение синего

В CSS это выглядит так:

сolor: rgb (0, 155, 0);

Где 0, 155, 0 – это код зелёного цвета.

Таблица, в которой представлены основные цвета ргб, приведена ниже

4. Задание цвета при помощи формата rgba

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

Например:

color: rgba (89, 107, 108, 0.5);

Где 89, 107, 108 – это ргб код серого цвета, а 0,5 – это уровень прозрачности.

Прозрачность задаётся в виде десятичного значения от 0 до 1, где 0 – цвет совсем не виден, а 1 – цвет максимально непрозрачный

В одной из прошлых статей я писала про определение цвета на сайте. Там я давала несколько полезных инструментов по определению цветов. Если вы её ещё не читали вот ссылка

Таблица значений основных цветов HTML, RGB и в шестнадцатеричном коде

Название	Цвет HTML	Шестнадцатеричный код	Цвет в формате RGB
Чёрный	black	#000000	0, 0, 0
Серый	gray	#8A8A8A	138, 138, 138
Светло-серый	silver	#C7C7C7	199, 199, 199
Белый	white	#FFFFFF	255, 255, 255
Красный	red	#FF0D0D	255, 0, 0
Розовый	fuchsia	#FF24FF	255, 36, 255
Сиреневый	purple	#B300B3	179, 0, 179
Синий	blue	#0909FF	0, 0, 255
Голубой	aqua	#15FFFF	20, 255, 255
Зелёный	green	#009B00	0, 155, 0
Салатовый	lime	#05FF05	5, 255, 5
Жёлтый	yellow	#FFFF04	255, 255, 4
Оранжевый	orange	#FFAD15	255, 173, 21

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

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

Кликните по области палитры чтобы определить значение цвета

Здесь вы можете двигать мышкой указатель и получать значения цветов в формате RGB и HEX (в шестнадцатеричном коде)

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

Надеюсь, что данная статья была для вас полезной. Подбирайте цвета и разукрашивайте ваши сайты на свой вкус. Только не перестарайтесь :)

Хорошего вам настроения! До встречи в следующих статьях!

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

Интернет помощник в сети

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

Цвет	Html коды цвета
Белый	#ffffff
Черный	#000000
Желтый	#ffff00
Зеленый	#008000
Серый	#808080
Синий	#0000ff
Красный	#ff0000

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