RGB цвета для сайта: свойства CSS color и background-color, подбор цвета в Яндексе

Снова приветствую всех читателей блога! На этот раз расскажу, как задать цвет для элементов сайта с помощью кода rgb, используя CSS свойства color и background-color, а также как быстро подобрать нужный цвет, используя поиск Яндекс.

Эта статья войдет в рубрику «Учебник CSS», потому что я упомяну в ней способы задания цвета средствами CSS, хотя в принципе можно определить цвет и с помощью html кода. Но, как уже неоднократно писал, современные реалии таковы, что рекомендуется описывать внешний вид элементов, в том числе цветовую гамму фона и шрифтов, путем задания соответствующих значений свойств CSS. Так что будем в дальнейшем использовать стили.

RGB цвета для сайта или блога

В рамках данного раздела уже была статья, посвященная основам CSS (каскадные таблицы стилей) и тому, как подключить стили к html документу. Кроме того, мы рассмотрели синтаксис CSS, в том числе свойства, значения, селекторы, правила CSS стилей и комментарии. Так что та или иная информация о применении свойств color и background для задания rgb цвета не должна быть вами воспринята как нечто неизведанное и непонятное.

Задание цвета в CSS, таблица и коды основных RGB цветов

Для начала разберем, что такое вообще система RGB. Эта английская аббревиатура расшифровывается как red (красный), green зеленый), blue (синий) — три основных цвета, каждый из которых может быть представлен различной степенью яркости. Для каждого из представленных в модели RGB цвета существует 256 различных оттенков (от 0 до 255).

Например, для того, чтобы получит черный, у всех трех основных цветов должны быть прописаны коды, соответствующие нулевой степени яркости rgb (0 0 0), а для противоположного ему белого — максимальные rgb (255 255 255). Эти значения задаются в обычной знакомой нам десятеричной системе счисления.

Однако чаще всего используются коды цвета, обозначенные в шестнадцатеричной системе, которая содержит, как понятно из названия, шестнадцать символов, из них шесть последних являются буквами латинского алфавита: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

Существует формула перевода чисел из десятеричной системы в шестнадцатеричную и обратно, но я на этом останавливаться не буду, поскольку при необходимости можно получить значения кодов цвета в обоих системах автоматически при выборе в различных программах или с помощью поиска Yandex, на котором я остановлюсь чуть ниже.

Отмечу только в плане общей информации, что значению 0 цветового кода в десятеричной системе соответствует 00 в шестнадцатеричной, значению 255 — FF. Таким образом, для черного цвета значение кода в шестнадцатеричной системе счисления будет выглядеть как #000000, а для белого — #ffffff. Обратите внимание, что перед кодом ставится знак решетки #. Если во всех парах символов, соответствующих каждому из цветов, символы одинаковы, то разрешается сокращать запись и ограничиться можно одним знаком. Например, запись значения белого цвета можно представить как #fff, черного — #000.

Коды основных цветов RGB в шестнадцатеричной и десятеричной системе

Еще задать коды цвета в CSS можно, присвоив значения свойств в виде названия. Однако в данном случае существуют весьма серьезные ограничения. Значения в виде названия (например, red, green, blue, lime, navy, purple) можно применить практически ко всем цветам, но лишь 16 из них являются валидными с точки зрения корректности кода:

Цвета, названия которых являются ликвидными с точки зрения валидности цветового кода CSS

Резюмируя вышесказанное, напомню, что задать цвета для сайта с помощью свойств CSS стилей можно тремя основными способами (на примере названия цвета tan — желто-коричневый):

  1. Используя шестнадцатеричную систему счисления, например: #d2b48c
  2. Применяя десятеричную систему: rgb (210, 180, 140). Здесь нужно отметить, что частным случаем этого метода является определение яркости в процентах: rgb (82%, 70%, 55%).
  3. Используя к качестве значения цвета его название: black, red, blue, green, tan, navy и т.д.

Свойства цвета в CSS — color и background-color

Два основных свойства в CSS, которые определяют цвет: color, который задает окраску текста элемента на вебстранице и background-color, задающий цвет фона элемента. Например, пропишем в файле style.css цвета отдельных фрагментов текста абзаца:

<p><span class="pre">Wordpress</span> &#8212; самая популярная система управления <span class="cont">контентом</span>.</p>

с помощью свойства color:

.pre {
    color: red; /* Цвет символа */
    font-size: 250%; /* Размер шрифта */
   }
.cont {
    color: #0000ff; /* Цвет символа */
    font-size: 150%; /* Размер шрифта */
    } 
   p {
    color: rgb(60, 170, 65); /* Цвет текста */
   }

Применение CSS свойства color для задания цвета фрагментам текста абзаца

Посредством свойства стилей background-color можно определить цвет фона элемента. К примеру, определим для вебстраницы, абзаца и заголовка h2:

<body>
  <h2>Wordpress - система управления контентом</h2>
  <p>Наилучшее средство создания и администрирования сайтов и блогов.</p>
 </body>

цвета фона в файле стилей:

body{
    background-color: #d0f0c0; /* Цвет фона веб-страницы */
   } 
   h2 {
    background-color: rgb(249, 201, 16); /* Цвет фона под заголовком */
   }
   p {
    background-color: olive; /* Цвет фона под текстом абзаца */
    color: white; /* Цвет текста */
   }

Определение цвета фона элемента посредством свойства CSS background-color

Использование поиска Яндекс для подбора цвета

Конечно, чтобы оперировать цветами для оформления различных элементов страниц сайта, существует множество разнообразных программ и сервисов, о которых я непременно расскажу в одной из последующих статей. Но самым доступным является страница поиска Яндекс. Для того, чтобы получить возможность работать с цветами, достаточно ввести в поисковое поле Yandex, например, слово цвет:

Использование поискового поля Яндекс для подбора цвета

Вводя различные значения rgb цветов в десятеричной или шестнадцатеричной системе, получаете на расположенном слева демонстрационном барабане соответствующий оттенок. Также возможен обратный процесс: прокручиваете барабан с названием цветов путем клика левой кнопкой мышки, в результате появляется код. Ну, а теперь пришло время прощаться, надеюсь, ненадолго.

Поделиться с друзьями
Игорь Горнов

Создатель и администратор сайта Goldbusinessnet.com. Участник нескольких успешных проектов и автор более 1000 статей о работе в интернете, создании сайтов, полезных программах и сервисах.

Работа в интернете
Добавить комментарий

Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.

  1. SamePerson

    color: #0000ff /* Цвет символа */

    не хватает точки с запятой в этой строке

    Ответить
    1. Игорь Горнов автор

      Спасибо, SamePerson, исправил.

      Ответить
  2. Михаил

    Все так сложно для меня.

    Ответить
    1. Игорь Горнов автор

      Да нет же, Михаил, это только кажется, что сложно. Самое трудное — это начать, дальше пойдет легче, все когда-то начинают.

      Ответить