Цвет CSS

Как назначить цвет в языке CSS

В языке CSS, назначить цвет HTML-тегам можно тремя способами:
1. С помощью имени цвета,
2. С помощью десятичной системы счисления в RGB-формате,
3. С помощью шестнадцатеричной системы счисления в RGB-формате.

Цвет в CSS по имени

Наиболее простой способ назначить цвет в CSS, это указать его имя:

color: red;

где red — это имя цвета (в данном случае — красный).

Вот некоторые имена цветов, выступающих в качестве значений различных свойств CSS:

Имя цвета	Его вид	Перевод
red		Красный
green		Зелёный
blue		Синий
white		Белый
black		Чёрный

Цвет в CSS, используем десятичную систему счисления и RGB-формат

RGB — Red, Green, Blue.

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

color: red;

будет:

color: rgb(255, 0, 0);

При использовании десятичной системы счисления можно использовать числа от 0 до 255.

В строке color: rgb(255, 0, 0);, сначала идёт CSS-свойство color:, затем его значение rgb(255, 0, 0). Каждое из трёх чисел 255, 0, 0, относится к определённому цвету:

255 — первое число, относится к красному цвету RED,
0 — второе число, относится к зелёному цвету GREEN,
0 — третье число, относится к синему цвету BLUE.

Чтобы сделать чистый зелёный цвет, нужно значение написать так rgb(0, 255, 0), чистый синий цвет будет выглядеть так rgb(0, 0, 255).

Чтобы получить темно синий цвет, нужно уменьшить третье число и написать например 100, чем меньше будет третье число тем более темнее будет синий цвет.

Запишем рядом два цвета с синим оттенком, у первого будет значение 255, а у второго 100.

Чистый синий		rgb(0, 0, 255)
Тёмно-синий		rgb(0, 0, 100)

Добавим к нашей первой таблице, еще один столбик, где будет располагаться код цвета в десятичной системе счисления:

Имя цвета	Его вид	Перевод	RGB10
red		Красный	rgb(255, 0, 0)
green		Зелёный	rgb(0, 128, 0)
blue		Синий	rgb(0, 0, 255)
white		Белый	rgb(255, 255, 255)
black		Чёрный	rgb(0, 0, 0)

Чистый зелёный

rgb(0, 255, 0)

Увеличивая и уменьшая числа в RGB-формате, можно получить практически любой цвет. Например "смешав" чистый красный и чистый зелёный цвет, мы получим чистый жёлтый цвет:

Чистый жёлтый

rgb(255, 255, 0)

Уменьшая число у зелёного цвета мы постепенно будем получать оранжевые оттенки, давайте запишем число зелёного цвета равным 100:

Оранжевый

rgb(255, 100, 0)

Цвет в CSS, используем шестнадцатиричную систему счисления и RGB-формат

В повседневной жизни, мы с вами пользуемся десятичной системой счисления от 0 до 9. При работе с цветом, в программировании и дизайне, часто используют шестнадцатеричную систему счисления от 0 до F, где F = 15.

A = 10, B = 11, C = 12, D = 13, E = 14, F = 15.

Каждый цвет можно записать в шестнадцатиричной системе счисления. Например:

color: red;

будет:

color: #ff0000;

При использовании шестнадцатиричной системы счисления можно использовать числа от 0 до ff, где ff = 255.

Если к нашей таблице добавить еще один столбик, с описанием цвета в шестнадцатиричной системе счисления, то она будет выглядеть так:

Имя цвета	Его вид	Перевод	RGB10	RGB16
red		Красный	rgb(255, 0, 0)	#ff0000
green		Зелёный	rgb(0, 128, 0)	#008000
blue		Синий	rgb(0, 0, 255)	#0000ff
white		Белый	rgb(255, 255, 255)	#ffffff
black		Чёрный	rgb(0, 0, 0)	#000000

Чистый зелёный

rgb(0, 255, 0)

#00ff00

Дополнительную информацию о цвете, RGB-формате и шестнадцатеричной системе счисления вы также можете почитать на странице: HTML-цвета

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

Ниже приведена небольшая таблица цветов c их именами:

Имя цвета	Его вид	Перевод
white		Белый
ivory		Ивори (слоновая кость)
silver		Серебряный
gray		Серый
black		Чёрный
maroon		Тёмно-бордовый
red		Красный
orange		Оранжевый
gold		Золотой
yellow		Жёлтый
olive		Оливковый
lime		Лайм
green		Зелёный
aqua		Морская волна
blue		Синий
navy		Нави
teal		Бирюзовый
fuchsia		Фуксиновый
purple		Пурпурный

Читать далее: Типы носителей в CSS

• Category: Разное