Цвет в CSS3

Цвет того или иного элемента сайта может быть определён следующими способами:

  • Именным значением, например: red - красный.
  • Значением цвета RGB, например: RGB(255,0,0) - красный.
  • Шестнадцатеричным значением цвета RGB, например: #ff0000 - красный.

HSL

hslВ CSS 3 вошёл ещё один способ определения цвета с помощью HSL (от англ. Hue, Saturation, Lightness). - это модель, в которой цвет определяется тремя параметрами: Оттенком (тоном), насыщенностью и светлотой. Давайте рассмотрим каждый параметр отдельно:

Оттенок.
Для того чтобы определить тон (Hue) нужно указать градус поворота (от 0° до 360°). Радуга замкнутая в круг в котором красный всегда ориентирован на север и равен 0 градусам и 360° тоже, 120 градусов это зелёный, 240° синий - это основные три цвета которые, смешиваясь, образуют ещё три дополнительных 60° жёлтый 180° голубой и 300° фиолетовый.. Ну а между этими шестью основными и дополнительными цветами расположены все остальные оттенки цветового спектра.

Насыщенность.
Второе значение (Saturation) цветовой модели HSL определяет насыщенность выбранного нами оттенка и указывается в процентах в диапазоне от 0% до 100%. Чем ближе данное значение к 100% тем цвет выглядят более чисто и "сочно" и наоборот если насыщенность стремится к 0% то цвет становится серым.

Светлота.
Светлота или яркость (Lightness) это третий параметр HSL. Точно так же как и насыщенность указывается в процентах, чем выше процент, тем ярче становится цвет. Крайние значения 0% и 100% будут обозначать соответственно чёрный (отсутствие света) и белый (засвеченный) цвета, причём неважно, какой оттенок из цветового круга был выбран изначально. Оптимальное значение яркости цвета равняется 50%.

Блок 1
Блок 2
Блок 3
Блок 4
Блок 5
Блок 6

Пример CSS3 кода:
body{background-color:hsl(120,10%,50%);color:hsl(60,100%,50%)}
.blok1 {background-color:hsl(0,0%,0%)}
.blok2 {background-color:hsl(0,0%,100%)}
.blok3 {background-color:hsl(187,61%,54%)}
.blok4 {background-color:hsl(300,100%,70%)}
.blok5 {background-color:hsl(0,100%,50%)}
.blok6 {background-color:hsl(240,100%,50%)}

Пример HTML кода:
<head>
<title>My CSS3</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="blok1">Блок 1</div>
<div class="blok2">Блок 2</div>
<div class="blok3">Блок 3</div>
<div class="blok4">Блок 4</div>
<div class="blok5">Блок 5</div>
<div class="blok6">Блок 6</div>
</body>
</html>


Альфа каналы.

RGBA
На ряду со свойством opacity определяющего степень прозрачности элемента в CSS 3 появился так называемый альфа канал, который позволяет сделать цвет прозрачным непосредственно при его указании.
Так у уже знакомого нам способа определения цвета RGB (Red, Green, Blue ) появляется четвёртое значение RGBA (Red, Green, Blue, Alpha) это и есть пресловутый альфа канал который определяет степень прозрачности. Степень прозрачности, точно так же как и для свойства opacity определяется значением от 0 до 1 где 0 полностью прозрачный а 1 непрозрачный вовсе.

RGBA

Пример CSS3 кода:
body{background-image: url(../bg.gif)}
.blok1{background-color:rgba(255,0,0,0.1)}
.blok2{background-color:rgba(255,0,0,0.5)}
.blok3{background-color:rgba(255,0,0,1)}

Пример HTML кода:
<head>
<title>My CSS3</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="blok1">Блок 1</div>
<div class="blok2">Блок 2</div>
<div class="blok3">Блок 3</div>
</body>
</html>

HSLA
Цветовая модель HSLA это тоже самое, что и HSL только с добавлением альфа канала. Альфа канал в HSLA аналогичен с только что разобранным альфа каналом в RGBA.

HSLA

Пример CSS3 кода:
body{background-image: url(../bg.gif)}
.blok1{background-color:hsla(60,100%,50%,0.1)}
.blok2{background-color:hsla(60,100%,50%,0.5)}
.blok3{background-color:hsla(60,100%,50%,1)}

Пример HTML кода:
<head>
<title>My CSS3</title>
<link rel="stylesheet" type="text/css" href="/style/style.css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="blok1">Блок 1</div>
<div class="blok2">Блок 2</div>
<div class="blok3">Блок 3</div>
</body>
</html>

Задание:

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

В предыдущем уроке мы рассматривали прозрачность в CSS 3

В следующем уроке рассмотрим возможности работы с фоном в CSS 3

О нас

Добро пожаловать в каталог продукции DigiPortfoolio OÜ.

Начиная с 2001 года мы обучались и развивались в сфере мультимедийного дизайна. На данный момент мы предлагаем услуги по созданию интернет дизайна, печатного дизайна, разработки рекламы, создание сайтов, туров 360 градусов.

Так же мы можем сделать печать на различных материалах и размерах. Изготовляем наклейки, визитки, roll-up стенды, сувенирную продукцию, печать на футболках.

В каталоге Вы найдете предлагаемые варианты, так же Вы можете связаться с нами по телефону +372 5596 5762 или прислать свой заказ на электронную почту info@digipo.eu

Ищите нас в социальных сетях:      

Мы в соцсетях

Смотрите нас в соцсетях, там мы буликуем готовые работы.