В самом начале учебника, когда мы изучали
цвета, я рассказал вам, что цвет можно задавать
либо английским словом, либо через rgb,
либо через #. Последние два формата
позволяют получить цвет любого оттенка. Давайте
разберемся, как именно работают эти форматы.
Чтобы понять эти способы, для начала нам необходимо разобраться с тем, как получается нужный цвет на экране компьютера.
На самом деле отдельная точка экрана (пиксель) не может светиться всеми цветами, которые нужны, так как это технически было бы очень сложно. Каждая точка экрана может светиться только тремя цветами: красным, зеленым и голубым. Зато одновременно и в разных пропорциях.
Комбинируя эти цвета мы можем получить любой нужный нам цвет подобно тому, как это делают художники с красками: смешивая несколько цветов они получают еще один новый.
Для смешения цветов в CSS нужно значением
свойства указать ключевое слово rgb,
после которого перечислить через запятую
задающее в каких пропорциях нужно брать эти
три базовых цвета. Сами цвета могут изменяться
от 0 до 255. Причем ноль -
это отсутствие цвета, а 255 - это
чистый цвет (к примеру, чисто красный).
Сами буквы rgb расшифровываются как
red, green, blue.
Посмотрим на примерах.
Пример
Давайте смешаем чисто красный и чисто голубой
цвет. Для этого первое значение ставим в
255, второе в 0, а третье -
в 255. У нас получится фиолетовый цвет:
<p>
текст
</p>
p {
color: rgb(255, 0, 255);
}
:
Пример
Давайте теперь установим первое значение
в 255, а все остальные - в нули. В
результате получим чисто красный цвет:
<p>
текст
</p>
p {
color: rgb(255, 0, 0);
}
:
Пример
Вот так получим чисто зеленый цвет:
<p>
текст
</p>
p {
color: rgb(0, 255, 0);
}
:
Пример
А если для зеленого поставить не 255,
а 100, то получится частично зеленый:
<p>
текст
</p>
p {
color: rgb(0, 100, 0);
}
:
Пример
Смешаем все три цвета в произвольных пропорциях. Смотрите, что получилось:
<p>
текст
</p>
p {
color: rgb(200, 100, 125);
}
:
Пример
Если поставить все значения в 255,
то получится чистый белый цвет:
p {
color: rgb(255, 255, 255);
}
Пример
Если поставить все значения в 0, то
получится чистый черный цвет:
p {
color: rgb(0, 0, 0);
}
Практические задачи
Задав цвет через rgb сделайте все
абзацы красного цвета.
Задав цвет через rgb сделайте все
h2 зеленого цвета.
Задав цвет через rgb сделайте все
h3 голубого цвета.
Смешайте чистый красный и чистый зеленый. Какой цвет получится?