Подбор цветов

R: 98

G: 152

B: 213

H: 212

S: 58

L: 61

#6298d5

Цвета CSS — короткие шестнадцатеричные коды

Короткий шестнадцатеричный код цвета — это более короткая форма шестизначной нотации. В этом формате каждая цифра повторяется, чтобы получить эквивалентное шестизначное значение цвета. Например:  #0F0 становится  #00FF00.

Шестнадцатеричное значение может быть взято из любого графического программного обеспечения, такого как Adobe Photoshop, Core Draw и др.

Каждому шестнадцатеричному коду цвета в CSS будет предшествовать знак хеша « #». Ниже приведены примеры использования шестнадцатеричных обозначений.

Цвет    Шестнадцатеричный цвет

Белый    #FFF

Черный   #000

Красный  #F00

Лайма    #0F0

Синий    #00F

Желтый   #FF0

Морская волна    #0FF

Фуксия   #F0F

HSL и HSLA

Система HSL (hue, saturation, lightness) описывает цвета основанные на оттенке (hue), насыщенности (saturation) и осветлении (lightness). Вот тот же самый темно-фиолетовый цвет, указанный в формате HSL:

color: hsl(285, 100%, 60%);

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

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

color: hsla(285, 100%, 60%, 0.5);

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

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

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

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

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

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

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

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

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

Например:

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

Adblock
detector