цветовые коды для текста

Урок #12: HTML коды цвета

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

и другие элементы могут менять свой цвет.

HTML-цвета указываются с использованием предопределенных имен цветов или значений RGB, HEX, HSL, RGBA, HSLA.

Названия цветов в HTML

В html цвет можно указать с помощью его имени (названия):

HTML поддерживает более 140 названий. Я решил сделать их в виде таблицы ниже. В ней вы найдете все популярные теги кодов цветов в html. Можете обращаться к этой таблице:

Цвет фона Background Color

Вы без проблем можете задать цвет фона для элемента. Пример ниже:

Цвет текста

Также можно задавать цвет шрифта для текста:

Цвет рамки Border Color

Не составит труда добавить и рамку, и задать ей цвет как на примере ниже:

Цветовые значения

В HTML цвета также могут быть указаны с использованием значений RGB, HEX, HSL, RGBA и HSLA:

То же, что и название цвета «Томатный» может быть расписан как:

Тот же самый цвет, только с добавлением прозрачности в 50% через свойство transparent:

Значение цветов в RGB

В HTML цвет может быть указан как значение RGB, используя эту формулу:

Каждый параметр (красный, зеленый и синий) определяет интенсивность цвета от 0 до 255.

Например, rgb (255, 0, 0) отображается как красный, потому что красный цвет имеет максимальное значение (255), а остальные — 0.

Чтобы отобразить цвет черный, все цветовые параметры должны быть установлены в 0, например: rgb (0, 0, 0).

Чтобы отобразить цвет белый, все параметры цвета должны быть установлены на 255, например: rgb (255, 255, 255).

Эксперимент, смешав значения RGB ниже:

Оттенки серого часто определяются с использованием равных значений для всех трех светлых источников:

Шестнадцатиричная система цветов HEX

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

Где rr (красный), gg (зеленый) и bb (синий) являются шестнадцатеричными значениями между 00 и ff (такими же, как десятичные 0-255).

Например, #ff0000 отображается как красный, потому что красный установлен на его самое высокое значение (ff), а остальные установлены на самое низкое значение (00).

Оттенки серого часто определяются с использованием равных значений для всех трех источников света:

HSL значение цветов

В HTML цвет может быть указан с использованием оттенка, насыщенности и легкости (HSL) в форме:

hsl (оттенок, насыщенность, яркость) — hue, saturation, lightness

hue — это градус на цветном колесе от 0 до 360. 0 красный, 120 зеленый, а 240 — синий.

Насыщенность (saturation)- это процентное значение, 0% означает оттенок серого, а 100% — полный цвет.

Яркость (lightness) также составляет процент, 0% — черный, 50% — не светлый или темный, 100% белый.

Насыщение (Saturation)

Насыщенность можно описать как интенсивность цвета.

100% — чистый цвет, без оттенков серого

50% — 50% серые, но вы все равно можете видеть цвет.

0% полностью серого цвета, вы больше не можете видеть цвет.

Яркость (Lightness)

Может быть описана как количество света, которое вы хотите дать цвету, где 0% означает отсутствие света (черный), 50% означает 50% света (ни темное, ни светлое). 100% означает полную яркость (белый).

Оттенки серого часто определяются путем установки оттенка и насыщенности на 0 и регулировки яркости от 0% до 100% для получения более темных / более светлых оттенков:

Значение RGBA

Значения цветов RGBA являются расширением значений цвета RGB с альфа-каналом, который определяет непрозрачность для цвета.

Значение цвета RGBA определяется с помощью:

Параметр alpha представляет собой число между 0.0 (полностью прозрачным) и 1.0 (вообще не прозрачным):

HSLA значение цвета

Значения цветов HSLA являются расширением значений цвета HSL с альфа-каналом, который определяет непрозрачность для цвета.

Значение цвета HSLA указано с помощью:

hsla (оттенок, насыщенность, легкость, альфа)

Параметр alpha представляет собой число между 0.0 (полностью прозрачным) и 1.0 (вообще не прозрачным):

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

Итак, наводим на любой фрагмент текста и нажимаем правую клавишу мыши и выбираем в контекстном выпадающем меню «Просмотреть код» (использую Google Chrome браузер):

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

Поиграв с палитрой прямо в браузере я примерно вывел следующий код в формате HEX цвета: #384244

Чтобы изменить на другие значения нужно просто переключиться нажав на стрелочки верх или вниз:

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

До скорых новых встреч на страницах полезного блога! Изучаете вы — обучаюсь и я.

Источник

Цвета HTML

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

Значения цвета в HTML может быть задано одним из следующих способов.

Имена цветов CSS, SVG.

В отличие от Html, в котором стандартными являются 16 цветов, спецификации CSS и SVG, определяют более расширенный список имен, состоящий из 147 названий. Однако, несмотря на наличие в списке сто сорока семи наименований, оригинальные значения имеют только 138, так как все серые цвета могут быть указаны как через «a», так и через «e» (grAy или grEy), а fuchsia и aqua имеют альтернативные имена: magenta и cyan соответственно (последние не поддерживаются HTML 4.01).

Приведенная ниже таблица представляет имена цветов и их значения в HSL и HEX. При использовании имен, следует помнить, что синтаксис SVG отличается от HTML и CSS: атрибут fill, к примеру, применяется как к цвету текста (color), так и объекта (background-color), а stroke используются для задания контура (обводки) элемента.

Для получения информации о других цветах и значениях в HEX, HEX8, RGB, RGB%, CMYK, HSL, HSV воспользуйтесь калькулятором цветов.

Источник