CSS Colors - Цвета
Цвета задаются с использованием предопределенных цветовых имен, или RGB, Hex, HSL, RGBA, HSLA значений.
Названия цветов
В HTML цвет можно задать с помощью имени цвета:
HTML Поддерживает 140 стандартных имен цветов.
Цвет фона
Можно задать цвет фона для элементов HTML:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Пример
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem
ipsum...</p>
Цвет текста
Вы можете установить цвет текста:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Пример
<h1 style="color:Tomato;">Hello
World</h1>
<p style="color:DodgerBlue;">Lorem
ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi
enim...</p>
Цвет границы
Вы можете установить цвет границ:
Hello World
Hello World
Hello World
Пример
<h1 style="border:2px
solid Tomato;">Hello
World</h1>
<h1 style="border:2px
solid DodgerBlue;">Hello
World</h1>
<h1 style="border:2px
solid Violet;">Hello
World</h1>
Значения цвета
В HTML цвета также могут быть заданы с помощью значений RGB, шестнадцатеричных значений, HSL значений, RGBA значений и HSLA значений:
Так же, как название цвета "помидор":
Так же, как название цвета "Tomato", но 50% прозрачный:
Пример
<h1 style="background-color:rgb(255,
99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9,
100%, 64%);">...</h1>
<h1 style="background-color:rgba(255,
99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9,
100%, 64%, 0.5);">...</h1>
Значение RGB
В HTML, цвет может быть указан как RGB значение, используя эту формулу:
RGB (красный, зеленый, синий)
Каждый параметр (красный, зеленый и синий) определяет интенсивность цвета между 0 и 255.
Например, RGB (255, 0, 0) отображается красным цветом, так как красный цвет устанавливается в его наивысшее значение (255), а остальные устанавливаются в 0.
Для отображения черного цвета, все параметры цвета должны быть установлены в 0, как это: RGB (0, 0, 0).
Для отображения белого цвета, все параметры цвета должны быть установлены в 255, как это: RGB (255, 255, 255).
Экспериментируйте, смешивая значения RGB ниже:
RED
GREEN
BLUE
Пример
Оттенки серого часто определяются с использованием одинаковых значений для всех 3 источников света:
Пример
Шестнадцатеричное значение
В HTML, цвет может быть указан с помощью шестнадцатеричного значения в форме:
#RRGGBB
Где RR (красный), GG (зеленый) и BB (синий) являются шестнадцатеричными значениями между 00 и FF (то же, что и десятичное 0-255).
Например, #ff0000 отображается красным цветом, так как для параметра Red устанавливается наибольшее значение (FF), а другим — наименьшее значение (00).
Пример
Оттенки серого часто определяются с использованием одинаковых значений для всех 3 источников света:
Пример
HSL значение
В HTML цвет можно задать с помощью оттенка, насыщенности и легкости (HSL) в форме:
HSL (отТенок, насыщенность, легкость)
Hue-это степень на цветном колесе от 0 до 360. 0-красный, 120-зеленый, 240-синий.
Насыщенность представляет собой процентное значение, 0% означает оттенок серого, а 100%-полный цвет.
Легкость также процент, 0% черный, 50% не является ни светлым, ни темным, 100% белый
Пример
Насыщенность
Насыщенность можно описать как интенсивность цвета.
100% является чистым цветом, не оттенки серого
50% является 50% серый, но вы все еще можете увидеть цвет.
0% полностью серый, вы больше не можете видеть цвет.
Пример
Легкость
Легкость цвета можно описать как сколько света вы хотите дать цвет, где 0% означает отсутствие света (черный), 50% означает 50% света (ни темный, ни свет) 100% означает полную легкость (белый).
Пример
Оттенки серого часто определяются установкой оттенка и насыщенности в 0, и отрегулируйте легкость от 0% до 100%, чтобы получить более темные/светлые оттенки:
Пример
RGBA значение
Значения цвета RGBA являются расширением значений цвета RGB с альфа-каналом, который задает непрозрачность для цвета.
Значение цвета RGBA задается с помощью:
RGBA (красный, зелёный, голубой, альфа)
Параметр Alpha является числом между 0,0 (полностью прозрачным) и 1,0 (не прозрачным вообще):
Пример
HSLA значение
Значения цвета HSLA являются расширением значений цвета HSL с альфа-каналом, который задает непрозрачность для цвета.
Значение цвета HSLA задается с помощью:
HSLA (отТенок, насыщенность, легкость, альфа)
Параметр Alpha является числом между 0,0 (полностью прозрачным) и 1,0 (не прозрачным вообще):