Цвет

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

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

Для задания цветов в HTML используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены латинскими буквами. В табл. 6.1 приведено соответствие десятичных и шестнадцатеричных чисел.

Табл. 6.1. Десятичные и шестнадцатеричные числа меньше 16

Десятичные	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
Шестнадцатеричные	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F

Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно (табл. 6.2). Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной.

Табл. 6.2. Десятичные и шестнадцатеричные числа больше 16

Десятичные	16	17	18	19	20	21	22	23	24	25	26	27	28
Шестнадцатеричные	10	11	12	13	14	15	16	17	18	19	1A	1B	1C

Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc. При этом регистр значения не имеет, поэтому допустимо писать #F0F0F0 или #f0f0f0.

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

Здесь цвет фона веб-страницы задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA) определяют красную составляющую цвета, цифры с третьей по четвертую (8E) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.

FA

+

8E

+

47

=

FA8E47

Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.

Чтобы легче ориентироваться в шестнадцатеричных цветах, примите во внимание некоторые правила.

• Если значения компонент цвета одинаковы (например: #D6D6D6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #FFFFFF (белый).
• Ярко-красный цвет образуется, если красный компонент сделать максимальным (FF), а остальные компоненты обнулить. Цвет со значением #FF0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00FF00) и синим (#0000FF).
• Желтый цвет (#FFFF00) получается смешением красного с зеленым. Это хорошо видно на цветовом круге (рис. 6.1), где представлены основные цвета (красный, зеленый, синий) и комплементарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00FFFF) получается за счет объединения синего и зеленого цвета.

Рис. 6.1. Цветовой круг

Цвета по шестнадцатеричным значениям не обязательно подбирать эмпирическим путем. Для этой цели подойдет графический редактор, умеющий работать с разными цветовыми моделями, например, Adobe Photoshop. На рис. 6.2 показано окно для выбора цвета в этой программе, линией обведено полученное шестнадцатеричное значение текущего цвета. Его можно скопировать и вставить к себе в код.

Рис. 6.2. Окно для выбора цвета в программе Photoshop

Веб-цвета

Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей которых — красной, зеленой и синей — устанавливается одно из шести значений — 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 — 216 цветов. Пример веб-цвета — #33FF66.

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

Цвета по названию

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

Табл. 6.3. Названия некоторых цветов

Имя цвета	Цвет	Описание	Шестнадцатеричное значение
black	Черный	#000000
blue	Синий	#0000FF
fuchsia	Светло-фиолетовый	#FF00FF
gray	Темно-серый	#808080
green	Зеленый	#008000
lime	Светло-зеленый	#00FF00
maroon	Темно-красный	#800000
navy	Темно-синий	#000080
olive	Оливковый	#808000
purple	Темно-фиолетовый	#800080
red	Красный	#FF0000
silver	Светло-серый	#C0C0C0
teal	Сине-зеленый	#008080
white	Белый	#FFFFFF
yellow	Желтый	#FFFF00

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

Пример 6.1. Цвет фона и текста

     
Пример текста
  

В данном примере цвет фона задается с помощью атрибута bgcolor тега , а цвет текста через атрибут text . Для разнообразия значение у атрибута text установлено в виде шестнадцатеричного числа, а у bgcolor с помощью зарезервированного ключевого слова teal .

Цвет шрифта HTML

Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font. По определению, тег font служит некой «обёрткой» или «контейнером» для текста, управляя свойствами которого можно изменять оформление текста.

Тег font применяется следующим образом:

Конструктор сайтов "Нубекс"

Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color тега font:

Конструктор сайтов "Нубекс"

Здесь задается синий цвет для слова, обрамленного тегом font.

Но помимо параметра color, тег имеет и другие атрибуты.

Атрибуты тега FONT

Тег font имеет всего три атрибута:

• color – задает цвет текста;
• size – устанавливает размер текста;
• face – задает семейство шрифтов.

Параметр color может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).

Атрибут size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута – “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 больше или меньше, соответственно.

Рассмотрим применение этих атрибутов на нашем примере:

     
Конструктор сайтов "Нубекс"
  

Мы применили тег font к одному слову, задали для него размер 6, оранжевый цвет и семейство шрифтов “Serif”.

Задание цвета текста при помощи CSS

Если вам нужно применить определенное форматирование (например, изменить цвет текста) к нескольким участкам текста, то более правильно будет воспользоваться CSS-кодом. Для этого существует атрибут color. Рассмотрим способ его применения на нашем примере:

    .nubex < color:#fa8e47; font-size: 150%; >.constructor < color: blue; >.saitov 
Конструктор сайтов "Нубекс"
  

Здесь мы задали синий цвет для слова «Конструктор» (размер его, по умолчанию, 100% от базового), зеленый цвет и размер 125% для слова «сайтов», оранжевый цвет и размер 150% для слова «Нубекс».

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

• Выравнивание текста в HTML
• Списки HTML
• Спецсимволы HTML
• Шрифты CSS

Как изменить цвет HTML-элементов

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

Разберем несколько ключевых понятий и принципов работы HTML.

1. HTML основан на иерархической структуре, состоящей из элементов (), которые определяют тип содержимого страницы. Элементы обрамляют контент и указывают на его тип и назначение.
2. Для определения структуры и типа контента в HTML используются теги. Теги начинаются с открывающего () и заканчиваются закрывающим тегом (), они определяют, как браузер должен интерпретировать и отображать содержимое.
3. Теги могут содержать HTML-атрибуты, которые предоставляют дополнительную информацию о теге или изменяют его поведение. Атрибуты задаются внутри открывающего тега и могут быть в полной форме () или только с указанием имени ().
4. CSS (Cascading Style Sheets) — это язык стилей, который используется для оформления веб-страниц. Он определяет, как элементы HTML должны быть отображены на экране, позволяя изменять цвета, шрифты, размеры, расположение и другие аспекты элементов на странице.
5. Рекомендуется разделять структуру HTML и стили CSS. HTML должен описывать только структуру и содержимое, в то время как стили должны быть определены в отдельных файлах CSS.

Какая цветовая палитра используется в компьютерной графике, как задавать оттенки цветов

Для отображения широкого спектра цветов на электронных устройствах используется палитра RGB (Red-Green-Blue). В этой модели каждый цвет представлен комбинацией красного, зеленого и синего цветовых компонентов. Каждая компонента может иметь значение от 0 до 255, где 0 представляет отсутствие цвета, а 255 – максимальную интенсивность. Путем изменения значений этих компонентов, можно создавать различные цвета, включая все цвета радуги. Например, чисто красный цвет имеет значения R: 255, G: 0, B: 0, а чисто белый — R: 255, G: 255, B: 255.

Кроме палитры RGB, можно представлять и изменять цвет в формате HEX – этот способ использует шестнадцатеричную систему счисления. HEX-код цвета состоит из символа «#» и шести шестнадцатеричных цифр (0-9, A-F), которые представляют значения красного, зеленого и синего (RGB) компонентов цвета. Например, #FF0000 представляет полную насыщенность красного цвета, #00FF00 — зеленого цвета, а #0000FF – синего цвета. Сочетая значения RGB, можно создавать множество разных цветов в HEX-формате.

Чтобы работать с различными оттенками одного цвета, используется модель HSL (Hue, Saturation, Lightness). HSL – это цветовая модель, используемая в компьютерной графике и веб-дизайне для определения цветов на основе трех основных параметров: оттенка (hue), насыщенности (saturation) и яркости (lightness).

• Оттенок (Hue) представляет собой цветовой тон, определенный по кругу цветов. Он измеряется в градусах и может варьироваться от 0 до 360. Например, значения 0 и 360 соответствуют красному цвету, а 120 соответствует зеленому.
• Насыщенность (Saturation) определяет чистоту или интенсивность цвета. Она измеряется в процентах и может варьироваться от 0% (серый цвет) до 100% (насыщенный цвет). Более высокое значение насыщенности означает более яркий и насыщенный цвет.
• Яркость (Lightness) определяет яркость или темноту цвета. Также измеряется в процентах и может варьироваться от 0% (черный цвет) до 100% (белый цвет). Значение яркости влияет на интенсивность цвета, но не на его оттенок или насыщенность.

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

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

Способы изменения цвета HTML-элементов

Для изменения цвета HTML-элементов существуют различные методы. Приведем несколько примеров как изменить цвет текста.

Inline стиль

Используйте атрибут style элемента HTML, чтобы задать цвет напрямую.

Заголовок с красным цветом

Как изменить цвет текста в CSS

Внутренний CSS

Чтобы изменить цвет текста с помощью CSS, используйте свойство «color».

Для смены цвета через внутренний CSS внутри тегов и определите стиль элемента и укажите его цвет. Например:

Заголовок с красным цветом

Код «color» устанавливает красный цвет для текста внутри абзацев. Вы можете заменить «red» на любой другой цвет, используя название цвета, HEX-код или RGB-значение.

Внешний CSS

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

Заголовок с определенным стилем из файла CSS

В CSS-файле (styles.css) вы определяете цвет элементов следующим образом:

Предопределенные классы

Вы можете использовать предопределенные классы, такие как text-primary, bg-success, и другие, которые определены во фреймворках CSS, например, Bootstrap. Вот вариант кода:

Заголовок с цветом текста, определенным классом

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

В приведенном выше примере библиотека CSS хранится в файле styles.css. Файл должен находиться в той же папке, что и ваш HTML-документ. Если файл размещен в другом месте, относительный путь должен быть соответственно изменен.

JavaScript

Вы можете использовать JavaScript для динамического изменения цвета элементов. Например, с помощью метода getElementById и свойства style.color вы можете изменить цвет элемента.

Например, чтобы заголовок имел фиолетовый цвет:

Заголовок

const heading = document.getElementById(‘myHeading’);

Как изменить цвет фона в HTML

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

Изменим цвет фона с зеленого на красный с помощью HEX-кода:

Пример изменения цвета фона

Текст на красном фоне.

Значение #ff0000 задает красный цвет.

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

Цвет фона

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

Цвет фона веб-страницы задается с использованием атрибута bgcolor тега .

Пример 1. Изменение цвета фона

      
.
  

Цвет можно указывать в шестнадцатеричном значении или по его имени.

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

Фоновый рисунок

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

Пример 2. Добавление фонового рисунка

      
.
  

Если изображение меньше размера экрана монитора, оно будет размножено по горизонтали и вертикали.

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

Пример 3. Использование фонового рисунка и цвета фона

      
.
  

Фиксированный фон

По умолчанию, при использовании полосы прокрутки, фоновый рисунок перемещается вместе с содержимым веб-страницы. Internet Explorer позволяет сделать фон неподвижным с помощью атрибута bgproperties =» fixed » тега .

Пример 4. Задание фиксированного фона

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные материалы

• Самоучитель HTML4
• Самоучитель CSS
• Как добавить картинку на веб-страницу?
• Спецсимволы
• Структура HTML-кода
• Введение в HTML
• Способы добавления стилей на страницу
• Выравнивание текста
• Якоря
• Позиционирование элементов
• Как добавить иконку сайта в адресную строку браузера?
• Ссылки