код элемента зеленый цвет

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

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

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

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

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

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

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

Color Name	HEX	Color
AliceBlue	#F0F8FF
AntiqueWhite	#FAEBD7
Aqua	#00FFFF
Aquamarine	#7FFFD4
Azure	#F0FFFF
Beige	#F5F5DC
Bisque	#FFE4C4
Black	#000000
BlanchedAlmond	#FFEBCD
Blue	#0000FF
BlueViolet	#8A2BE2
Brown	#A52A2A
BurlyWood	#DEB887
CadetBlue	#5F9EA0
Chartreuse	#7FFF00
Chocolate	#D2691E
Coral	#FF7F50
CornflowerBlue	#6495ED
Cornsilk	#FFF8DC
Crimson	#DC143C
Cyan	#00FFFF
DarkBlue	#00008B
DarkCyan	#008B8B
DarkGoldenRod	#B8860B
DarkGray	#A9A9A9
DarkGrey	#A9A9A9
DarkGreen	#006400
DarkKhaki	#BDB76B
DarkMagenta	#8B008B
DarkOliveGreen	#556B2F
DarkOrange	#FF8C00
DarkOrchid	#9932CC
DarkRed	#8B0000
DarkSalmon	#E9967A
DarkSeaGreen	#8FBC8F
DarkSlateBlue	#483D8B
DarkSlateGray	#2F4F4F
DarkSlateGrey	#2F4F4F
DarkTurquoise	#00CED1
DarkViolet	#9400D3
DeepPink	#FF1493
DeepSkyBlue	#00BFFF
DimGray	#696969
DimGrey	#696969
DodgerBlue	#1E90FF
FireBrick	#B22222
FloralWhite	#FFFAF0
ForestGreen	#228B22
Fuchsia	#FF00FF
Gainsboro	#DCDCDC
GhostWhite	#F8F8FF
Gold	#FFD700
GoldenRod	#DAA520
Gray	#808080
Grey	#808080
Green	#008000
GreenYellow	#ADFF2F
HoneyDew	#F0FFF0
HotPink	#FF69B4
IndianRed	#CD5C5C
Indigo	#4B0082
Ivory	#FFFFF0
Khaki	#F0E68C
Lavender	#E6E6FA
LavenderBlush	#FFF0F5
LawnGreen	#7CFC00
LemonChiffon	#FFFACD
LightBlue	#ADD8E6
LightCoral	#F08080
LightCyan	#E0FFFF
LightGoldenRodYellow	#FAFAD2
LightGray	#D3D3D3
LightGrey	#D3D3D3
LightGreen	#90EE90
LightPink	#FFB6C1
LightSalmon	#FFA07A
LightSeaGreen	#20B2AA
LightSkyBlue	#87CEFA
LightSlateGray	#778899
LightSlateGrey	#778899
LightSteelBlue	#B0C4DE
LightYellow	#FFFFE0
Lime	#00FF00
LimeGreen	#32CD32
Linen	#FAF0E6
Magenta	#FF00FF
Maroon	#800000
MediumAquaMarine	#66CDAA
MediumBlue	#0000CD
MediumOrchid	#BA55D3
MediumPurple	#9370DB
MediumSeaGreen	#3CB371
MediumSlateBlue	#7B68EE
MediumSpringGreen	#00FA9A
MediumTurquoise	#48D1CC
MediumVioletRed	#C71585
MidnightBlue	#191970
MintCream	#F5FFFA
MistyRose	#FFE4E1
Moccasin	#FFE4B5
NavajoWhite	#FFDEAD
Navy	#000080
OldLace	#FDF5E6
Olive	#808000
OliveDrab	#6B8E23
Orange	#FFA500
OrangeRed	#FF4500
Orchid	#DA70D6
PaleGoldenRod	#EEE8AA
PaleGreen	#98FB98
PaleTurquoise	#AFEEEE
PaleVioletRed	#DB7093
PapayaWhip	#FFEFD5
PeachPuff	#FFDAB9
Peru	#CD853F
Pink	#FFC0CB
Plum	#DDA0DD
PowderBlue	#B0E0E6
Purple	#800080
RebeccaPurple	#663399
Red	#FF0000
RosyBrown	#BC8F8F
RoyalBlue	#4169E1
SaddleBrown	#8B4513
Salmon	#FA8072
SandyBrown	#F4A460
SeaGreen	#2E8B57
SeaShell	#FFF5EE
Sienna	#A0522D
Silver	#C0C0C0
SkyBlue	#87CEEB
SlateBlue	#6A5ACD
SlateGray	#708090
SlateGrey	#708090
Snow	#FFFAFA
SpringGreen	#00FF7F
SteelBlue	#4682B4
Tan	#D2B48C
Teal	#008080
Thistle	#D8BFD8
Tomato	#FF6347
Turquoise	#40E0D0
Violet	#EE82EE
Wheat	#F5DEB3
White	#FFFFFF
WhiteSmoke	#F5F5F5
Yellow	#FFFF00
YellowGreen	#9ACD32

Цвет фона 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 Цвета

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

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

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

Шестнадцатеричные значения цвета поддерживается всеми основными браузерами. Шестнадцатеричные значение цвета имеет следующий синтаксис:

Все значения должны быть между 00 и FF. Например, значение #0000FF отображается как синий, потому что компонент BB установлен в его самое высокое значение (FF), а другие установлены в самое низкое значение (00). Значение, фактически содержит три шестнадцатеричных числа, значение цвета получается при смешивании трех вышеуказанных составляющих.

Допускается сокращать шестнадцатеричные числа до трех символов, если каждое из трех двухзначных чисел содержит одинаковые символы. Например, #0000FF можно записывать как #00F.

Пример использования шестнадцатеричных значений:

RGB цвета

Например, значение rgb(0,255,0) отображается как зеленый, так как параметр зеленого установлен в максимальное точке (255), а красный и зелёный установлены в 0. Записывается это следующим образом:

RGBA цвета

RGBA является более современным методом задания цвета, где:

Этот метод отличается от RGB тем, что он добавляет альфа-канал, который позволяет задать уровень прозрачности со значениями от 0 до 1, где:

HSL цвета

К еще одному методу задания цвета относится HSL. HSL это аббревиатура, которая объединяет в себе первые буквы трех признаков:

При этом используется следующий синтаксис:

Ниже приведено изображение, где для каждого блока задано свое значение hsl:

Рис. 16б Пример использования значений hsl

HSLA цвета

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

Данный формат задания цвета называется HSLA, давайте рассмотрим его применение:

Имена цветов

Кроме вышеуказанных способов задания цвета, существуют и предопределённые (стандартные) цвета, которые вы можете применять к элементам. Ранее мы уже рассматривали примеры с предопределёнными цветами, а полный перечень Вы можете найти в этом разделе.

Цвет	HEX	RGB	Имя
#FF0000	rgb(255,0,0)	Red
#00FF00	rgb(0,255,0)	Green
#0000FF	rgb(0,0,255)	Blue

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Практическое задание № 11.

Нюанс: для выполнения задания вы можете задавать цвет любым методом, но задание считается выполненным если хотя бы один раз было использовано шестнадцатеричное значение, значение RGB, значение HSL и предопределённый цвет.

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

Источник

Таблица RGB-цветов

В HTML цвет чаще всего задаются RGB-кодом. Любой цвет разлагается на три основные составляющие:

Любой цвет задается сочетанием трех чисел, каждое из которых отражает долю одного из трех основных цветов. Каждая доля занимает 1 байт и может варьироваться от 00 до FF (в шестнадцатеричной системе счисления) или от 0 до 255 (в десятичной системе счисления).

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

Если цвет задается в десятичном формате, то сначала идет ключевое слово rgb, затем в скобках через запятую десятичные числа насыщенности основных цветов.

Для наиболее популярных цветов были введены символьные имена.

Пример серебристого цвета

Подбор RGB цвета

Таблица цветов

Цветовая константа	Red	Green	Blue	Образец
alicemblue	F0	F8	FF
antiquewhite	FA	EB	D7
aqua	00	FF	FF
aquamarine	7F	FF	D4
azure	F0	FF	FF
beige	F5	F5	DC
bisque	FF	E4	C4
black	00	00	00
blanchedalmond	FF	EB	CD
blue	00	00	FF
blueviolet	8A	2B	E2
brown	A5	2A	2A
burlywood	DE	B8	87
cadetblue	5F	9E	A0
chartreuse	7F	FF	00
chocolate	D2	69	1E
coral	FF	7F	50
cornflowerblue	64	95	ED
cornsilk	FF	F8	DC
crimson	DC	14	3C
cyan	00	FF	FF
darkblue	00	00	8B
darkcyan	00	8B	8B
darkgoldenrod	B8	86	0B
darkgray	A9	A9	A9
darkgreen	00	64	00
darkkhaki	BD	B7	6B
darkmagenta	8B	00	8b
darkolivegreen	55	6B	2F
darkorange	FF	8C	00
darkochid	99	32	CC
darkred	8B	00	00
darksalmon	E9	96	7A
darkseagreen	8F	BC	8F
darkslateblue	48	3D	8B
darkslategray	2F	4F	4F
darkturquoise	00	CE	D1
darkviolet	94	00	D3
deeppink	FF	14	93
deepskyblue	00	BF	FF
dimgray	69	69	69
dodgerblue	1E	90	FF
firebrick	B2	22	22
floralwhite	FF	FA	F0
forestgreen	22	8B	22
fushsia	FF	00	FF
gainsboro	DC	DC	DC
ghostwhite	F8	F8	FF
gold	FF	D7	00
goldenrod	DA	A5	20
gray	80	80	80
green	00	80	00
greenyellow	AD	FF	2F
honeydew	F0	FF	F0
hotpink	FF	69	B4
indiandred	CD	5C	5C
indigo	4B	00	82
ivory	FF	FF	F0
khaki	F0	E6	8C
lavender	E6	E6	FA
lavenderblush	FF	F0	F5
lawngreen	7C	FC	00
lemonchiffon	FF	FA	CD
ligtblue	AD	D8	E6
lightcoral	F0	80	80
lightcyan	E0	FF	FF
lightgoldenrodyellow	FA	FA	D2
lightgreen	90	EE	90
lightgrey	D3	D3	D3
lightpink	FF	B6	C1

Ассоциативный ряд цветов:

Источник

Цветовая константа	Red	Green	Blue	Образец
lightsalmon	FF	A0	7A
lightseagreen	20	B2	AA
lightscyblue	87	CE	FA
lightslategray	77	88	99
lightsteelblue	B0	C4	DE
lightyellow	FF	FF	E0
lime	00	FF	00
limegreen	32	CD	32
linen	FA	F0	E6
magenta	FF	00	FF
maroon	80	00	00
mediumaquamarine	66	CD	AA
mediumblue	00	00	CD
mediumorchid	BA	55	D3
mediumpurple	93	70	DB
mediumseagreen	3C	B3	71
mediumslateblue	7B	68	EE
mediumspringgreen	00	FA	9A
mediumturquoise	48	D1	CC
medium violetred	C7	15	85
midnightblue	19	19	70
mintcream	F5	FF	FA
mistyrose	FF	E4	E1
moccasin	FF	E4	B5
navajowhite	FF	DE	AD
navy	00	00	80
oldlace	FD	F5	E6
olive	80	80	00
olivedrab	6B	8E	23
orange	FF	A5	00
orengered	FF	45	00
orchid	DA	70	D6
palegoldenrod	EE	E8	AA
palegreen	98	FB	98
paleturquose	AF	EE	EE
palevioletred	DB	70	93
papayawhop	FF	EF	D5
peachpuff	FF	DA	B9
peru	CD	85	3F
pink	FF	C0	CB
plum	DD	A0	DD
powderblue	B0	E0	E6
purple	80	00	80
red	FF	00	00
rosybrown	BC	8F	8F
royalblue	41	69	E1
saddlebrown	8B	45	13
salmon	FA	80	72
sandybrown	F4	A4	60
seagreen	2E	8B	57
seashell	FF	F5	EE
sienna	A0	52	2D
silver	C0	C0	C0
skyblue	87	CE	EB
slateblue	6A	5A	CD
slategray	70	80	80
snow	FF	FA	FA
springgreen	00	FF	7F
steelblue	46	82	B4
tan	D2	B4	8C
teal	00	80	80
thistle	D8	BF	D8
tomato	FF	63	47
turquose	40	E0	D0
violet	EE	82	EE
wheat	F5	DE	B3
white	FF	FF	FF
whitesmoke	F5	F5	F5
yellow	FF	FF	00
yellowgreen	9A	CD	32