13. Цвета в CSS

Данная статья написана командой Alash Academy.
Это одна из статей из нашего Самоучителя по HTML&CSS.
Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

../_images/lesson13_colors_colors-css.jpg

Привет! В этой статье мы поговорим о том, как можно задавать цвета в CSS.

13.1. Цвета в CSS

Оформляя веб-страницу, нам часто приходится задавать цвет - цвет текста, цвет фона, и т.д. В CSS это можно делать не одним, а сразу несколькими способами.

Давайте разберем самые распространенные способы:

Способ 1: Указать название цвета: blue, yellow, etc.

color: red;

Способ 2: через RGB:

color: rgb(0, 0, 0);

Способ 3: с помощью HEX:

color: #4286f4;

Ниже мы рассмотрим каждый способ отдельно.

13.1.1. Способ 1: Название цвета

В CSS есть около 147 цветов, которые имеют свои названия:

red
orange
green
blue
tomato»(«томатный красный»)
grey
и т.д.

Пример 1

Создадим несколько блоков и разукрасим их в стандартные цвета:

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>My Page</title>
    </head>
    <body>
        <p style="color: red" >Red</p>
        <p style="color: green" >Green</p>
        <p style="color: blue" >Blue</p>
        <p style="color: aliceblue" >AliceBlue</p>
        <p style="color: antiquewhite" >AntiqueWhite</p>
        <p style="color: aqua" >Aqua</p>
        <p style="color: blanchedalmond" >BlanchedAlmond</div>
        <p style="color: blueviolet" >BlueViolet</p>
        <p style="color: burlywood" >BurlyWood</p>
        <p style="color: cadetblue" >CadetBlue</p>
    </body>
</html>

Получим:

../_images/lesson13_colors_%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA-%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0-2018-07-27-%D0%B2-12.58.18.png

Почему тогда не пользоваться этим способом всегда?

Дело в том, что цветов и их оттенков миллионы, а в данном способе около 147 цветов.
Кроме того, Вы вряд ли запомните все эти цвета. Например, AliceBlue, DarkMagenta, HoneyDew - все это трудно держать в голове.

А вот с помощью других способов задания цветов - RGB, RGBA и HEX - можно получить любой цвет и оттенок. Давайте их рассмотрим ниже.

13.1.2. Способ 2: RGB

RGB - это аббревиатура Red Green Blue. Переводится как «красный, зеленый, синий».

Все дело в том, что каждый цвет можно представить как сочетание трех базовых цветов, красного, синего и зеленого:

../_images/lesson13_colors_rgb-css-1.jpg

Так, например:

фиолетовый - это красный с синим
желтый получается если соединить красный с зеленым

Итак, из чего состоит запись цвета в RGB? Она состоит из слова rgb, после чего записывается пара круглых скобочек, в которых через запятую записаны 3 числа, которые соответствуют цветам red, green, blue.

Red: от 0 до 255
Green: от 0 до 255
Blue: от 0 до 255

То есть Red (красного цвета) может быть от 0 до 255. Green (зеленого) и Blue (голубого) тоже может быть от 0 до 255. Чем больше число, тем больше соответствующего оттенка в финальном цвете. Различные сочетания Red, Green и Blue дают нам все возможные оттенки цветов, какие только вообще существую в мире. Именно так и работает RGB.

Черный цвет:

color: rgb(0, 0, 0);

говорит о том, что мы получим цвет, в котором 0 красного, 0 зеленого и 0 синего. То есть это черный.

Белый цвет:

color: rgb(255, 255, 255);

Как видите, все цвета у нас на максимуме (все по 255), поэтому мы получим белый цвет.

Красный цвет:

color: rgb(255, 0, 0); /* ярко-красный */
color: rgb(0, 255, 0); /* ярко-зеленый */
color: rgb(0, 0, 255); /* ярко-синий */

Если красный на максимум (255), а остальные по нулям, получаем красный. И так далее….

Может возникнуть вопрос - **а как я узнаю RGB нужного цвета? **Не беспокойтесь: в любом графическом редакторе (например, Photoshop) есть специальный инструмент, с помощью которого Вы наводите курсор на нужный цвет, или на элемент, цвет которого Вас интересует, и Вам покажут его код в RGB.

13.1.3. Способ 3 - HEX

Последний способ, который мы рассмотрим - это HEX (обычно говорят «хекс»). Откуда название?

HEX - от англ. hexadécimal - «шестнадцатеричный». На самом деле, HEX - это тот же самый RGB ( т.е. сколько в цвете красного, синего и зеленого), только записанный в другой форме - в форме шестнадцатеричного числа. Что это такое мы здесь подробно рассказывать не будем - просто знайте, что HEX - это тот же RGB только в другом формате.

**HEX **записывается одним числом и начинается со значка «#» (хэш):

color: #000000; /*черный цвет*/
color: #FFFFFF; /*белый цвет*/
color: #FFFFBF; /*лимонный цвет*/

Если Вам понадобится перевести HEX в RGB или наоборот, просто найдите в Google сайт конвертер цветов - их очень много.

Надеемся, данная статья была Вам полезна! Читайте дальше наши статьи или приходите учиться к нам на курсы по Front-End. Детальнее о наших курсах у нас на сайте здесь.