Цветовое оформление в CSS

В CSS для указания конкретного цвета текста для элемента, необходимо использовать свойство color и затем указать необходимое значение, используя следующий синтаксис:

селектор {
  color: значение;
}

Давайте разберем отдельно, какие значения можно использовать с этим свойством и частично разберем примеры работы с цветом заднего фона. И начнём мы наше обучение с самой старой системы задания цвета – шестнадцатеричной (Hexadecimal).

Шестнадцатеричные значения

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

селектор {
  color: #RRGGBB;
}

RR (красный)

GG (зеленый)

BB (синий)

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

Например, значение #0000FF соответствует синему цвету, так как компонент BB установлен в его самое высокое значение - (FF), а другие установлены в самое низкое значение (00). Значение, фактически содержит три шестнадцатеричных числа, значение цвета получается при смешивании трех вышеуказанных составляющих.

Обращаю Ваше внимание, что допускается сокращать шестнадцатеричные числа до трех символов, в том случае если каждое из трех двухзначных чисел содержит одинаковые символы. Например, #0000FF можно записывать как #00F, или значение #777777 можно указать следующим образом:

p.intro {
  color:  #777; /* задаём темно-серый цвет для всех абзацев с классом intro */
}

Цветовая модель RGB

Значения цвета RGB поддерживается во всех основных браузерах и задается в следующем порядке: R (красный), G (зеленый), B (синий). Чтобы указать значение в системе RGB необходимо использовать следующий синтаксис:

селектор {
  color: rgb(R,G,B);
}

Каждый параметр определяет интенсивность цвета и может быть целым числом от 0 до 255. Например, значение rgb(0,0,255); отображается как синий цвет, так как параметр синего установлен в максимальном значении (255), а красный и зелёный установлены в 0 (минимальное значение):

p {
  color: rgb(0,0,255); /* задаём синий цвет для всех абзацев */
}

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

h2 {
  color: rgb(100%,65%,0%); /* задаёт оранжевый цвет для всех заголовков второго уровня */
}

Цветовая модель RGBA

Следующая система цвета, которая используется в CSS называется RGBA, она использует в своем синтаксисе альфа-значение, которое определяет степень прозрачности конкретного пиксела. RGBA является более современным методом задания цвета и имеет следующий синтаксис:

селектор {
  color: rgba(R,G,B,A);, где:
}

R означает Red (красный)
G означает Green (зеленый)
B означает Blue (синий)
A означает Alpha (степень смешивания с фоном)

Этот метод отличается от RGB тем, что он добавляет альфа-канал, который позволяет задать уровень прозрачности со значениями от 0 до 1, где:

0 - цвет невидимый.
1 - цвет непрозрачный.

Давайте для демонстрации возможностей цветовой модели RGBA рассмотрим пример в котором на примере зелёного цвета, мы будем изменять значения альфа канала от минимального rgba(0, 255, 0, 0.1) к максимальному rgba(0, 255, 0, 1) с шагом 0.1:

<!DOCTYPE html>
<html>
<head>
  <meta charset = "UTF-8">
  <title>Применение RGBA в CSS</title>
  <style> 
    div {
      display: inline-block; /* Выстраиваем элементы <div> в линейку, как строчные элементы, при этом у нас имеется возможность задавать размеры, как и всем блочным элементам. */
      width: 60px; /* устанавливаем ширину для всех <div> элементов */
      height: 60px; /* устанавливаем высоту для всех <div> элементов */
    }

    .test1  {
      background-color: rgba(0, 255, 0, .1); /* задаем цвет заднего фона, обратите внимание на значение, допускается сокращать запись 0.1 до .1 */
    }

    ... /* и так до десятого блока с шагом 0.1 */

    .test10  {
      background-color: rgba(0, 255, 0, 1); 
    }
  </style>
</head>
<body>
  <div class="test1">.1</div>
    .../* и так до десятого блока */
  <div class="test10">1</div>
</body>
</html>

На что в этом примере надо обратить внимание, во-первых, чем меньше значение альфа, тем элемент более прозрачен. Во-вторых, мы использовали CSS свойство display, которое определяет, как должен отображаться элемент. В нашем случае, с этим свойством мы использовали значение inline-block, которое позволяет нам выстроить все элементы <div> в линейку (сделали элементы "блочно-строчными").

Результат нашего примера:

Обращаю Ваше внимание, что в CSS допускается использовать сокращенное обозначение значений, например, вместо 0.3 указывать .3, вместо 0.5 указывать .5, вместо 0.625 указывать .625 и так далее.

Цветовые модели HSL и HSLA

К еще одному методу задания цвета в CSS относится система HSL, её можно значительно реже встретить на страницах сайтов. HSL это аббревиатура, которая объединяет в себе первые буквы трех следующих признаков:

Hue — тон.
Saturation — насыщенность.
Lightness — осветленность.

Система HSL использует следующий синтаксис:

hsl(от 0° до 360°, от 0 до 100%, от 0% до 100%), где:

Первое значение – это тон, который указывается в градусах от 0° до 360°. Градусы соответствуют цвету на круге оттенков (изображенном ниже):

Красный цвет соответствует значениям - 0° и 360°, желтый - 60°, зеленый - 120°, голубой - 180°, синий - 240°, фиолетовый - 300° и так далее.

Второе значение (насыщенность) - определяет, насколько чистым является цвет и указывается в процентах от 0% до 100%, где 0% - полное отсутствие насыщенности (тусклый серый), а100%` это чистый и яркий цвет.

Третье значение (осветленность) - указывается в процентах от 0% (полностью черный) до 100% (полностью белый), среднее значение 50% даёт чистый цвет.

Давайте рассмотрим пример задания цвета с помощью системы HSL на примере красного цвета (значение тона 0°):

<!DOCTYPE html>
<html>
<head>
  <meta charset = "UTF-8">
  <title>Применение HSL в CSS</title>
  <style> 
    div {
      display: inline-block; /* выстраиваем элементы <div> в линейку, как строчные элементы */
      width: 60px; /* устанавливаем ширину для всех <div> элементов */
      height: 60px; /* устанавливаем высоту для всех <div> элементов */
    }

    .test1  {
      background-color: hsl(0, 10%, 50%); /* 0 – соответствует красному цвету, 10% - насыщенность, 50%- осветленность (соответствует чистому цвету) */
    }

    ...  /* и так до десятого блока с шагом 10% (увеличение насыщенности) */

    .test10 {
      background-color: hsl(0, 100%, 50%); /* насыщенность 100% (чистый и яркий цвет) */
    }

    .test11 {
      background-color: hsl(0, 100%, 10%); /* 0 – соответствует красному цвету, 100% - насыщенность (чистый и яркий цвет), 10%- осветленность  */
    }

    ...  /* и так до двадцатого блока с шагом 10% (увеличение осветленности)*/

    .test20 {
      background-color: hsl(0, 100%, 100%); /* как вы можете заметить осветленность 100% дает белый цвет */
    }
  </style>
</head>
<body>
  <div class="test1"> hsl(0, 10%, 50%)</div>

  .../* и так до десятого блока */

  <div class="test10"> hsl(0, 100%, 50%)</div>

  <br>/* переводим строку */

  <div class="test11" style="color:white">hsl(0, 100%, 10%)</div> /* добавляем внутренний стиль для элемента (цвет текста белый) */

  .../* и так до двадцатого блока */

  <div class="test10"> hsl(0, 100%, 100%)</div>
</body>
</html>

Результат нашего примера:

По аналогии с RGB, HSL поддерживает прозрачность с помощью добавления альфа канала, который задает уровень прозрачности со значениями от 0 до 1 (от невидимого до полностью непрозрачного).

Данный формат задания цвета в CSS называется HSLA, давайте рассмотрим его применение на примере фиолетового цвета (значение тона 300°):

<!DOCTYPE html>
<html>
<head>
  <meta charset = "UTF-8">
  <title>Применение HSLA в CSS</title>
  <style> 
    div {
      display: inline-block; /* выстраиваем элементы <div> в линейку, как строчные элементы */
      width: 60px; /* устанавливаем ширину для всех <div> элементов */
      height: 60px; /* устанавливаем высоту для всех <div> элементов */
    }

    .test1  {
      background-color:  hsla(300, 100%, 50%,.1); /* фиолетовый цвет со 100% насыщенностью и 50% осветлённостью с добавлением альфа-канала, который задает уровень прозрачности */
    }

    .../* и так до десятого блока с шагом 0.1 */

    .test10  {
      background-color:  hsla(300, 100%, 50%, 1); /* альфа-канал полностью непрозрачный */
    }
  </style>
</head>
<body>
  <div class="test1">hsla(300, 100%, 50%,.1)</div>
  ...
  <div class="test10">hsla(300, 100%, 50%, 1)</div>
</body>
</html>

Результат нашего примера:

Предопределённые цвета

Кроме вышеуказанных способов задания цвета, существуют и предопределённые цвета, которые вы можете применять к элементам.

Например:

p.intro {
  color: gray; /* задаём серый цвет для всех абзацев с классом intro */
}

i {
  color: orange; /* задаём оранжевый цвет для всех элементов <i> */
}

h2:first-child {
  color: red; /* задаём красный цвет для всех элементов <h2>, которые являются первыми дочерними элементами своего родителя */
}

PreviousОсновы CSS NextКонтейнер в верстке

Last updated 4 months ago

Цветовое оформление в CSS

селектор {
  color: значение;
}

Шестнадцатеричные значения

селектор {
  color: #RRGGBB;
}

RR (красный)

GG (зеленый)

BB (синий)

p.intro {
  color:  #777; /* задаём темно-серый цвет для всех абзацев с классом intro */
}

Цветовая модель RGB

селектор {
  color: rgb(R,G,B);
}

p {
  color: rgb(0,0,255); /* задаём синий цвет для всех абзацев */
}

h2 {
  color: rgb(100%,65%,0%); /* задаёт оранжевый цвет для всех заголовков второго уровня */
}

Цветовая модель RGBA

селектор {
  color: rgba(R,G,B,A);, где:
}

R означает Red (красный)
G означает Green (зеленый)
B означает Blue (синий)
A означает Alpha (степень смешивания с фоном)

0 - цвет невидимый.
1 - цвет непрозрачный.

<!DOCTYPE html>
<html>
<head>
  <meta charset = "UTF-8">
  <title>Применение RGBA в CSS</title>
  <style> 
    div {
      display: inline-block; /* Выстраиваем элементы <div> в линейку, как строчные элементы, при этом у нас имеется возможность задавать размеры, как и всем блочным элементам. */
      width: 60px; /* устанавливаем ширину для всех <div> элементов */
      height: 60px; /* устанавливаем высоту для всех <div> элементов */
    }

    .test1  {
      background-color: rgba(0, 255, 0, .1); /* задаем цвет заднего фона, обратите внимание на значение, допускается сокращать запись 0.1 до .1 */
    }

    ... /* и так до десятого блока с шагом 0.1 */

    .test10  {
      background-color: rgba(0, 255, 0, 1); 
    }
  </style>
</head>
<body>
  <div class="test1">.1</div>
    .../* и так до десятого блока */
  <div class="test10">1</div>
</body>
</html>

Результат нашего примера:

Обращаю Ваше внимание, что в CSS допускается использовать сокращенное обозначение значений, например, вместо 0.3 указывать .3, вместо 0.5 указывать .5, вместо 0.625 указывать .625 и так далее.

Цветовые модели HSL и HSLA

Hue — тон.
Saturation — насыщенность.
Lightness — осветленность.

Система HSL использует следующий синтаксис:

hsl(от 0° до 360°, от 0 до 100%, от 0% до 100%), где:

Давайте рассмотрим пример задания цвета с помощью системы HSL на примере красного цвета (значение тона 0°):

<!DOCTYPE html>
<html>
<head>
  <meta charset = "UTF-8">
  <title>Применение HSL в CSS</title>
  <style> 
    div {
      display: inline-block; /* выстраиваем элементы <div> в линейку, как строчные элементы */
      width: 60px; /* устанавливаем ширину для всех <div> элементов */
      height: 60px; /* устанавливаем высоту для всех <div> элементов */
    }

    .test1  {
      background-color: hsl(0, 10%, 50%); /* 0 – соответствует красному цвету, 10% - насыщенность, 50%- осветленность (соответствует чистому цвету) */
    }

    ...  /* и так до десятого блока с шагом 10% (увеличение насыщенности) */

    .test10 {
      background-color: hsl(0, 100%, 50%); /* насыщенность 100% (чистый и яркий цвет) */
    }

    .test11 {
      background-color: hsl(0, 100%, 10%); /* 0 – соответствует красному цвету, 100% - насыщенность (чистый и яркий цвет), 10%- осветленность  */
    }

    ...  /* и так до двадцатого блока с шагом 10% (увеличение осветленности)*/

    .test20 {
      background-color: hsl(0, 100%, 100%); /* как вы можете заметить осветленность 100% дает белый цвет */
    }
  </style>
</head>
<body>
  <div class="test1"> hsl(0, 10%, 50%)</div>

  .../* и так до десятого блока */

  <div class="test10"> hsl(0, 100%, 50%)</div>

  <br>/* переводим строку */

  <div class="test11" style="color:white">hsl(0, 100%, 10%)</div> /* добавляем внутренний стиль для элемента (цвет текста белый) */

  .../* и так до двадцатого блока */

  <div class="test10"> hsl(0, 100%, 100%)</div>
</body>
</html>

Результат нашего примера:

<!DOCTYPE html>
<html>
<head>
  <meta charset = "UTF-8">
  <title>Применение HSLA в CSS</title>
  <style> 
    div {
      display: inline-block; /* выстраиваем элементы <div> в линейку, как строчные элементы */
      width: 60px; /* устанавливаем ширину для всех <div> элементов */
      height: 60px; /* устанавливаем высоту для всех <div> элементов */
    }

    .test1  {
      background-color:  hsla(300, 100%, 50%,.1); /* фиолетовый цвет со 100% насыщенностью и 50% осветлённостью с добавлением альфа-канала, который задает уровень прозрачности */
    }

    .../* и так до десятого блока с шагом 0.1 */

    .test10  {
      background-color:  hsla(300, 100%, 50%, 1); /* альфа-канал полностью непрозрачный */
    }
  </style>
</head>
<body>
  <div class="test1">hsla(300, 100%, 50%,.1)</div>
  ...
  <div class="test10">hsla(300, 100%, 50%, 1)</div>
</body>
</html>

Результат нашего примера:

Предопределённые цвета

Например:

p.intro {
  color: gray; /* задаём серый цвет для всех абзацев с классом intro */
}

i {
  color: orange; /* задаём оранжевый цвет для всех элементов <i> */
}

h2:first-child {
  color: red; /* задаём красный цвет для всех элементов <h2>, которые являются первыми дочерними элементами своего родителя */
}

PreviousОсновы CSS NextКонтейнер в верстке

Last updated 4 months ago