Доси:

Գույների ֆորմատներ

Приблизительное чтение: 2 минут 0 просмотров

Գույների ֆորմատները CSS ում

Мониторы компьютеров, смартфонов и экраны телевизоров состоят из тысяч точек-пикселей. Когда свет падает на пиксели, каждый приобретает свой цвет, и на экране появляются изображения.

Когда цвет установлен для элемента, он фактически устанавливается для пикселей. 

Существует два основных способа определить цвет в CSS: по его имени или по его значению. 

По названию: красный, синий, зеленый, желтый, оранжевый и т. д.

Когда цвет определяется значением, можно выбрать любой из множества оттенков цвета. Существует два основных варианта задания цвета по значению: формат RGB или 16-значное значение. Добавлено еще несколько опций в css3: RGBA, HSL, HSLA.

Գույնի անունններ

Доступно 147 типов названий цветов. Полный список доступен по адресу: https://htmlcolorcodes.com/color-names/

RGB RGBA

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

Число устанавливается от 0 до 255.   

Например, оранжевый будет rgb(255, 128, 0):

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

RGBA В конце формата добавляется еще одно число, определяющее прозрачность цвета («А» — альфа-канал в RGBA). 

Число может быть указано от 0 до 1. Например, значение 0,5 сделает цвет полупрозрачным. 

Тот же оранжевый цвет в полупрозрачном виде: rgba(255, 128, 0, 0.5):

				
					p { color: rgba(255, 128,  0, 0.5); }
				
			

HSL HSLA

HSL В формате (оттенок, насыщенность, яркость) цвет определяется на основе оттенка, насыщенности и яркости:

В CSS это будет выглядеть так:

				
					p { color: hsl(23, 95%, 52%); }
				
			

Первое число можно указать от 0 до 360, второе и третье числа задаются в процентах от 0 до 100%.

HSLA формат, такой как RGBA, добавляет альфа-канал между 0 и 1:

				
					p { color: hsla(23, 95%, 52%, 0.5); }
				
			

16 -բիթանոց գույնի ֆորմատ

16 -բիթանոց գույնի ֆորմատը представляет собой 6-значный код и определяется «#» -ով.

В CSS оранжевый будет выглядеть так:

				
					p { color: #196d15 }
				
			

Если браузер не поддерживает форматы RGBA, HSL, HSLA, элемент унаследует цвет от родительского элемента или станет черным. Поэтому перед RGBA, HSL, HSLA необходимо добавить тип RGB или «название цвета» (если если одно и то же свойство определено в одном и том же селекторе с разными значениями, то приоритет будет иметь то, которое указано в конце).

Например:

				
					  p {
    color: orange;
    color: hsla(23, 95%, 52%, 0.5);
  }
				
			

Оставить комментарий

Կիսվել փաստաթուղթով
ԲՈՎԱՆԴԱԿՈՒԹՅՈՒՆ
ru_RURussian