Цвета в CSS

Facebooktwittergoogle_plustumblrFacebooktwittergoogle_plustumblr

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

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

Цвета в CSS

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

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

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

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

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

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

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

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

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

Пример 1

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

Получим:

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

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

А вот с помощью других способов задания цветов -  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.

Черный цвет:

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

Белый цвет:

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

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

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

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

Способ 3 - HEX

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

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

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

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

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

Facebooktwittergoogle_plustumblrFacebooktwittergoogle_plustumblr

Facebooktwittergoogle_plustumblrFacebooktwittergoogle_plustumblr
Самоучители--узнать детальнее--