Цвета HSL

HSL принимает три значения:

В цветовом круге тон в степени 0 (или 360) является красным, 120 зеленым, 240 синим. Числа в промежутке отражают различные оттенки.

Насыщенность процентного значения: при 100% полный цвет.

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

Это дает очень широкий спектр доступных цветов и тонов.

 Пока HSL реализован в Opera 9.5, Safari 3, Konqueror и Mozilla браузерах. (на момент перевода статьи и в IE 9 тоже)

Смотрите следующий пример:

Верхний ряд, если вы видите его, составлен из HSL значений:
 

<div style="background-color: hsl(0,100%, 50%);"></div> <div style="background-color: hsl(120,100%, 50%);"></div> <div style="background-color: hsl(240,100%, 50%);"></div>

Нижний ряд использует RGB значения:

<div style="background-color: rgb(255,0,0);"></div> <div style="background-color: rgb(0,255,0);"></div> <div style="background-color: rgb(0,0,255);"></div>

 Более подробное объяснение цветов HSL можно найти в W3C CSS3 Color Candidate Recommendation.

Цвета HSLA

Как RGBA является RGB, так и HSLA является HSL , то есть, добавляется четвертое значение, которое устанавливает прозрачность (через альфа-канал) элемента.

На момент написания, только Safari 3 и Firefox 3 Beta поддерживали спецификацию стиля HSLA цвета.

Например:

Верхний ряд (если вы один из немногих смельчаков, которые скачали бета-версию Firefox 3, то вы можете видеть это) использует заявление HSLA;

<div style="background-color: hsla(0,100%,50%,0.2);"></div> <div style="background-color: hsla(0,100%,50%,0.4);"></div> <div style="background-color: hsla(0,100%,50%,0.6);"></div> <div style="background-color: hsla(0,100%,50%,0.8);"></div> <div style="background-color: hsla(0,100%,50%,1);"></div>

Второй ряд выводит цвета с помощью RGB.
 

<div style="background-color: rgb(243,191,189);"></div> <div style="background-color: rgb(246,143,142);"></div> <div style="background-color: rgb(249,95,94);"></div> <div style="background-color: rgb(252,47,47);"></div> <div style="background-color: rgb(255,0,0);"></div>

 Более подробное объяснение цветов HSLA можно найти в W3C CSS3 Color Candidate Recommendation.

Непрозрачность (opacity)

 Наиболее широкое применение получило свойство CSS3 opacity. Это и понятно, ведь его так долго ждали...

Смотрим пример:

Посмотрите на разницу в коде между первым рядом, в котором выводятся те же результаты цвета для строки, используя сочетания RGB с значениями прозрачности, и вторым, где используются RGB значения:
 

<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 0.4;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 0.6;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 0.8;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 1;"></div>

И второй

<div style=" background: rgb(243, 191, 189) ; "></div> <div style=" background: rgb(246, 143, 142) ; "></div> <div style=" background: rgb(249, 95 , 94) ; "></div> <div style=" background: rgb(252, 47, 47) ; "></div> <div style=" background: rgb(255, 0, 0) ; "></div>

Точно такой же эффект, как показано выше, можно достичь, используя rgba значения

RGBA цвета

 В CSS3 добавилась новая функция для настройки цвета. После rgb теперь вы можете также использовать rgba. Как вы уже видимо догадались, "а" в данном случае означает alpha. Эта новая функция позволяет указать значение непрозрачности для цветов. Это могло бы сделать жизнь веб-дизайнеров намного легче ...

 Пока это было реализовано в Safari 3, и работает в Firefox 3, последних пре-альфа версиях.

Смотрим пример:

Посмотрите на разницу в коде между первым рядом, в котором используются значения RGBA цвета и вторым, в котором используются RGB значения:
 

<div style="background: rgba(255, 0, 0, 0.2);"></div> <div style="background: rgba(255, 0, 0, 0.4);"></div> <div style="background: rgba(255, 0, 0, 0.6);"></div> <div style="background: rgba(255, 0, 0, 0.8);"></div> <div style="background: rgba(255, 0, 0, 1) ;"></div>

И второй:
 

<div style="background: rgb(243, 191, 189);"></div> <div style="background: rgb(246, 143, 142);"></div> <div style="background: rgb(249, 95 , 94) ;"></div> <div style="background: rgb(252, 47, 47) ;"></div> <div style="background: rgb(255, 0, 0) ;"></div> 

Источник статьи: http://www.css3.info/preview