belarusweb.net - веб-программирование для новичков: HTML,CSS, JavaScript, PHP, MySQL и др.

# Цветовые модели, использующиеся в CSS.

В CSS существует два основных способа указания цвета: по имени и по значению. Всю палитру использующихся на данный момент названий цветов, например, green, red, orange, blue, можно посмотреть на официальном сайте W3C здесь. Однако зарезервированных имен цветов довольно мало, менее двухсот, поэтому на практике предпочтительнее применять цифровые обозначения цветов. Сделать это можно использовав одну из возможных цветовых моделей: RGB, RGBA, HSL, HSLA.

Цветовая модель 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.1, в котором показано использование цветовой модели RGB.

    <!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 #0000ff.</span>
    	<span class="blue_rgb_hex">Blue #00ff00.</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.1. Цветовая модель RGB

Цветовая модель RGBA (от англ. Red, Green, Blue, Alpha) кроме чисел, которые определяют содержание трех цветов, использует еще одно число, которое описывает альфа-канал (в графическом дизайне данный термин означает прозрачность цвета) и может изменяться в пределах от 0 (полностью прозрачный цвет) до 1 (полностью непрозрачный цвет). При этом формат записи значения цвета имеет вид rgba(r,g,b,a). Использование цветовой модели RGBA с разными значениями альфа-канала показано в примере 1.2.

    <!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>

Пример 1.2. Цветовая модель RGBA

Цветовая модель 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 здесь. Также внимательно изучите пример 1.3, в котором показано использование цветовой модели HSL.

    <!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>

Пример 1.3. Цветовая модель HSL

Цветовая модель HSLA (от англ. Hue, Saturation, Lightness, Alpha) помимо трех чисел, которые представляют, соответственно, оттенок, насыщенность и светлоту, включает в себя еще четвертое число, которое описывает альфа-канал и может изменяться в пределах от 0 (полностью прозрачный цвет) до 1 (полностью непрозрачный цвет). При этом формат записи значения цвета имеет вид hsla(h,s%,l%,a). Использование цветовой модели HSLA показано в примере 1.3.

belarusweb.net © Петр Романовский, Минск, 2016.