Цвета в CSS

31 июля, 201831 июля, 2018 Vertex Academy colors css,цвета css

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

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

Цвета в CSS

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

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

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

color: red;

1	color: red;

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

color: rgb(0, 0, 0);

1	color: rgb(0, 0, 0);

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

color: #4286f4;

1	color: #4286f4;

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

Способ 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>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Red

Green

Blue

AliceBlue

AntiqueWhite

Aqua

BlanchedAlmond</div>

BlueViolet

BurlyWood

CadetBlue

</body>

</html>

Получим:

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

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

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

Способ 2: RGB

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

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

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

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

Итак, из чего состоит запись цвета в 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);

1	color: rgb(0, 0, 0);

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

Белый цвет:

color: rgb(255, 255, 255);

1	color: rgb(255, 255, 255);

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

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

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

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

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

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

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

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

Способ 3 - HEX

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

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

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

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

color: #000000; /*черный цвет*/

color: #FFFFFF; /*белый цвет*/

color: #FFFFBF; /*лимонный цвет*/

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

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