CSS :: Цвета
Цвета в CSS
В CSS существует два основных способа указания цвета: по имени и по значению. Ранее в своих примерах мы уже не раз использовали названия таких цветов, как green, red, orange, blue и др., когда указывали значения соответствующих свойств шрифта или фона. Всю палитру использующихся на данный момент названий цветов можно посмотреть на официальном сайте W3C или в отдельной статье здесь. Однако зарезервированных имен цветов довольно мало, менее двухсот, поэтому на практике предпочтительнее применять цифровые обозначения цветов. Сделать это можно использовав одну из возможных цветовых моделей: RGB, RGBA, HSL, HSLA.
Цветовая модель RGB
Цветовая модель RGB (от англ. Red, Green, Blue) для получения цвета любого оттенка использует три десятичных числа от 0 до 255 или же три соответствующих шестнадцатеричных числа, которые описывают относительное содержание красного, зеленого и синего цветов. В случае десятичного представления чисел формат записи значения цвета имеет вид rgb(r,g,b). Если же используется шестнадцатеричное представление чисел, в котором разрешается использовать цифры от 0 до 9 и латинские буквы в любом регистре от A до F, то значение цвета записывают в формате #rrggbb. Например, правила p{color: rgb(165,42,42);} и p{color: #a52a2a;} задают для абзаца одно и тоже значение цвета, соответствующее названию цвета brown. Следует отметить, что разрешается использовать также и проценты, в этом случае формат записи значения цвета имеет вид rgb(r%,g%,b%). Внимательно изучите пример №1, в котором показано использование цветовой модели RGB.
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цвета RGB</title>
<style>
.black_rgb_hex{color: #000000;}
.red_rgb_hex{color: #ff0000;}
.green_rgb_hex{color: #00ff00;}
.blue_rgb_hex{color: #0000ff;}
.black_rgb_decimal{color: rgb(0,0,0);}
.red_rgb_decimal{color: rgb(255,0,0);}
.green_rgb_decimal{color: rgb(0,255,0);}
.blue_rgb_decimal{color: rgb(0,0,255);}
.black_rgb_percent{color: rgb(0%,0%,0%);}
.red_rgb_percent{color: rgb(100%,0%,0%);}
.green_rgb_percent{color: rgb(0%,100%,0%);}
.blue_rgb_percent{color: rgb(0%,0%,100%);}
</style>
</head>
<body>
<span class="black_rgb_hex">Black #000000.</span>
<span class="red_rgb_hex">Red #ff0000.</span>
<span class="green_rgb_hex">Green #00ff00.</span>
<span class="blue_rgb_hex">Blue #0000ff.</span>
<br><br>
<span class="black_rgb_decimal">Black rgb(0,0,0).</span>
<span class="red_rgb_decimal">Red rgb(255,0,0).</span>
<span class="green_rgb_decimal">Green rgb(0,255,0).</span>
<span class="blue_rgb_decimal">Blue rgb(0,0,255).</span>
<br><br>
<span class="black_rgb_percent">Black rgb(0%,0%,0%).</span>
<span class="red_rgb_percent">Red rgb(100%,0%,0%).</span>
<span class="green_rgb_percent">Green rgb(0%,100%,0%).</span>
<span class="blue_rgb_percent">Blue rgb(0%,0%,100%).</span>
<br><br>
</body>
</html>
Пример №1. Цветовая модель RGB
Цветовая модель RGBA
Цветовая модель RGBA (от англ. Red, Green, Blue, Alpha) кроме чисел, которые определяют содержание трех цветов, использует еще одно число, которое описывает альфа-канал (в графическом дизайне данный термин означает прозрачность цвета) и может изменяться в пределах от 0 (полностью прозрачный цвет) до 1 (полностью непрозрачный цвет). При этом формат записи значения цвета имеет вид rgba(r,g,b,a). Использование цветовой модели RGBA с разными значениями альфа-канала показано в примере №2.
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цвета RGBA</title>
<style>
.black_rgba{color: rgba(0,0,0,0.8);}
.red_rgba{color: rgba(255,0,0,0.8);}
.green_rgba{color: rgba(0,255,0,0.8);}
.blue_rgba{color: rgba(0,0,255,0.8);}
.black_rgba_percent{color: rgba(0%,0%,0%,0.4);}
.red_rgba_percent{color: rgba(100%,0%,0%,0.4);}
.green_rgba_percent{color: rgba(0%,100%,0%,0.4);}
.blue_rgba_percent{color: rgba(0%,0%,100%,0.4);}
</style>
</head>
<body>
<span class="black_rgba">Black rgba(0,0,0,0.8).</span>
<span class="red_rgba">Red rgba(255,0,0,0.8).</span><br>
<span class="green_rgba">Green rgba(0,255,0,0.8).</span>
<span class="blue_rgba">Blue rgba(0,0,255,0.8).</span>
<br><br>
<span class="black_rgba_percent">Black rgba(0%,0%,0%,0.4).</span>
<span class="red_rgba_percent">Red rgba(100%,0%,0%,0.4).</span><br>
<span class="green_rgba_percent">Green rgba(0%,100%,0%,0.4).</span>
<span class="blue_rgba_percent">Blue rgba(0%,0%,100%,0.4).</span>
<br><br>
</body>
</html>
Пример №2. Цветовая модель RGBA
Цветовая модель HSL
Цветовая модель HSL (от англ. Hue, Saturation, Lightness) описывает цвета при помощи трех чисел, которые представляют, соответственно, оттенок, насыщенность и светлоту (не яркость). При этом значение цвета записывается в формате hsl(h,s%,l%). Оттенок принимает значения от 0 до 359, которые соответствует градусам на цветовом круге, где 0° градусов соответствуют красному цвету, 120° – зеленому и 240° – синему цвету. Если число, задающее оттенок, больше, чем 359, то браузер будет автоматически отнимать от него 360. Так что, если задать значение оттенка, например, 480, то оно будет соответствовать зеленому оттенку. Насыщенность измеряется в процентах от 0% до 100% и определяет интенсивность цвета. Значение 0% обозначает отсутствие цвета и оттенок серого, а 100% – максимальное значение насыщенности. Светлота также, как и насыщенность, указывается в процентах от 0% до 100% и определяет степень близости цвета к белому. Значение 0% соответствует черному цвету, а 100% – белому. Примеры цветов и их значений данной модели можно посмотреть на официальном сайте W3C здесь. Также внимательно изучите пример №3, в котором показано использование цветовой модели HSL.
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цвета HSL, HSLA</title>
<style>
.black_hsl{color: hsl(0,0%,0%);}
.red_hsl{color: hsl(0,100%,50%);}
.green_hsl{color: hsl(120,100%,50%);}
.blue_hsl{color: hsl(240,100%,50%);}
.black_hsla{color: hsla(0,0%,0%,0.5);}
.red_hsla{color: hsla(0,100%,50%,0.5);}
.green_hsla{color: hsla(120,100%,50%,0.5);}
.blue_hsla{color: hsla(240,100%,50%,0.5);}
</style>
</head>
<body>
<span class="black_hsl">Black hsl(0,0%,0%).</span>
<span class="red_hsl">Red hsl(0,100%,50%).</span><br>
<span class="green_hsl">Green hsl(120,100%,50%).</span>
<span class="blue_hsl">Blue hsl(240,100%,50%).</span>
<br><br>
<span class="black_hsla">Black hsla(0,0%,0%,0.5).</span>
<span class="red_hsla">Red hsla(0,100%,50%,0.5).</span><br>
<span class="green_hsla">Green hsla(120,100%,50%,0.5).</span>
<span class="blue_hsla">Blue hsla(240,100%,50%,0.5).</span>
<br><br>
</body>
</html>
Пример №3. Цветовая модель HSL
Цветовая модель HSLA
Цветовая модель HSLA (от англ. Hue, Saturation, Lightness, Alpha) помимо трех чисел, которые представляют, соответственно, оттенок, насыщенность и светлоту, включает в себя еще четвертое число, которое описывает альфа-канал и может изменяться в пределах от 0 (полностью прозрачный цвет) до 1 (полностью непрозрачный цвет). При этом формат записи значения цвета имеет вид hsla(h,s%,l%,a). Использование цветовой модели HSLA показано в примере №3.
На этом рассмотрение общих вопросов мы заканчиваем. Дальнейшее изложение будет в основном построено на перечислении свойств CSS и соответствующих им значений, а также примерах использования этих свойств для форматирования внешнего вида html-документов.
Быстрый переход к другим страницам
- Единицы измерения, использующиеся в CSS
- Использование цветов в CSS
- Оформление внешнего вида текста
- Вернуться к оглавлению учебника